/* ============================================================
   robswain.au — styles.css
   ============================================================ */

/* ------------------------------------------------------------
   Custom Properties
   ------------------------------------------------------------ */
:root {
  /* Backgrounds — warm undertone so maroon accents feel at home */
  --bg-base:        #0f0b0b;
  --bg-surface:     #161010;
  --bg-elevated:    #1e1515;
  /* Accents */
  --accent-maroon:  #800020;
  --accent-maroon-h:#a0002a;
  --accent-maroon-dim: rgba(128, 0, 32, 0.15);

  /* Text */
  --text-primary:   #ede8e8;
  --text-secondary: #a09898;
  --text-tertiary:  #635a5a;

  /* Borders */
  --border:         #2a2020;
  --border-light:   #352828;

  /* Typography */
  --font:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Layout */
  --max-width:      860px;
  --section-pad:    100px 24px;
  --radius-sm:      4px;
  --radius-md:      8px;

  /* Transitions */
  --transition:     200ms ease;
}

/* ------------------------------------------------------------
   Reset & Base
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* Cross-document page transitions (progressive enhancement) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}

body {
  background-color: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Film grain over everything; adds texture and kills banding on the hero wash */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Selection colour */
::selection {
  background: var(--accent-maroon);
  color: #fff;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent-maroon);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-maroon); }

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Display headings are set in the editorial serif; UI headings stay in Inter */
h1, h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(48px, 8vw, 84px); font-weight: 500; line-height: 1.05; }
h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 500; }
h3 { font-size: 1.2rem; font-weight: 600; }

p {
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Layout Utilities
   ------------------------------------------------------------ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: var(--section-pad);
}

/* Every section below the hero gets a top divider */
main section + section {
  border-top: 1px solid var(--border);
}

/* Section heading with maroon left-tick */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}

.section-heading::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.2em;
  background: var(--accent-maroon);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Price line directly beneath a service heading (services index).
   Mono, like other technical metadata; pulls up against the heading. */
.service-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-maroon-h);
  margin: -44px 0 44px 16px;
}

/* Fade-in animation (driven by IntersectionObserver in script.js).
   Gated on html.js so content stays visible without JavaScript. */
html.js .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

html.js .fade-in.visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}

header.scrolled {
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

header nav {
  /* Wider than the 860px reading column so the seven nav items sit on one
     line without wrapping. The body content below stays at var(--max-width). */
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--transition);
}

.nav-logo img {
  display: block;
  /* Matches the cap height of the original 1.05rem wordmark text */
  height: 1.25rem;
  width: auto;
}

.nav-logo:hover {
  opacity: 0.75;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-maroon);
  transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Book button in header (sits next to hamburger on mobile) */
.nav-btn {
  background: var(--accent-maroon);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition);
}

.nav-btn:hover,
.nav-btn.active {
  background: var(--accent-maroon-h);
  color: #fff;
}

/* Hamburger toggle — hidden on desktop, shown at mobile breakpoint */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
#hero {
  position: relative;
  min-height: min(65vh, 600px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: radial-gradient(ellipse 80% 90% at 30% 0%, var(--accent-maroon-dim), transparent 70%);
}

/* The log motif: decorative log lines in the home hero (aria-hidden) */
.hero-logs {
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(calc(-50% + 40px));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 2.2;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  opacity: 0.5;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, rgba(0, 0, 0, 0.5));
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, rgba(0, 0, 0, 0.5));
}

.hero-logs span {
  display: block;
}

.hero-logs .hl {
  color: var(--accent-maroon-h);
}

@media (max-width: 960px) {
  .hero-logs {
    display: none;
  }

  /* Collapse the primary nav to the hamburger menu here rather than at 640px.
     With seven items the horizontal row runs out of room well before phone
     widths, so the menu takes over across tablet and small laptop sizes. */
  .nav-toggle {
    display: inline-flex;
    order: 3;
  }

  .nav-btn {
    margin-left: auto;
    order: 2;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav-links li {
    padding: 10px 0;
  }

  .nav-links a::after {
    display: none;
  }
}

/* One-time staggered hero entrance (gated on html.js, see reduced motion) */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html.js .hero-inner > * {
  animation: hero-in 600ms ease backwards;
}

html.js .hero-inner > :nth-child(2) { animation-delay: 80ms; }
html.js .hero-inner > :nth-child(3) { animation-delay: 160ms; }
html.js .hero-inner > :nth-child(4) { animation-delay: 240ms; }
html.js .hero-inner > :nth-child(5) { animation-delay: 320ms; }

/* Logs are positioned with a transform, so they fade in without movement */
@keyframes logs-in {
  from { opacity: 0; }
  to   { opacity: 0.5; }
}

html.js .hero-logs {
  animation: logs-in 900ms ease backwards 450ms;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding-top: 80px; /* offset for fixed nav */
}

.hero-name {
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: 12px;
}

/* Maroon rule between name and subtitle carries the accent */
.hero-rule {
  display: block;
  width: 120px;
  height: 2px;
  background: var(--accent-maroon);
  border-radius: 1px;
  margin: 20px 0 24px;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.hero-tagline {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  max-width: 480px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.hero-cta .btn-contact {
  margin-bottom: 0;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  /* Transparent by default so a <button> does not fall back to the browser's
     pale native background. Fills maroon on hover, matching the <a> variants. */
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--accent-maroon);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.btn-primary:hover {
  background: var(--accent-maroon);
  color: #fff;
}


/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 56px;
  align-items: start;
}

/* Photo / monogram */
.about-photo-wrap {
  position: relative;
}

.about-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  outline: 1px solid var(--accent-maroon);
  outline-offset: 5px;
  display: block;
}

.about-bio p {
  margin-bottom: 16px;
  line-height: 1.75;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

/* Pull quote: one sentence set large, used at most once per page */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
  border-left: 3px solid var(--accent-maroon);
  padding-left: 28px;
  margin: 40px 0;
  max-width: 640px;
}

.pull-quote p,
.about-bio .pull-quote p {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Experience
   ------------------------------------------------------------ */
.experience-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.experience-item {
  padding: 28px 0 28px 24px;
  border-left: 2px solid var(--border);
  position: relative;
  transition: border-color var(--transition);
}

.experience-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 36px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--bg-base);
  transition: background var(--transition);
}

.experience-item:hover {
  border-left-color: var(--accent-maroon);
}

.experience-item:hover::before {
  background: var(--accent-maroon);
}

.experience-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.experience-role {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.05rem;
}

.experience-company {
  color: var(--accent-maroon);
  font-weight: 500;
  font-size: 0.95rem;
}

.experience-dates {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-left: auto;
}

.experience-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

/* ------------------------------------------------------------
   Writing: essay index
   ------------------------------------------------------------ */
.post-list {
  display: flex;
  flex-direction: column;
}

.post {
  padding: 56px 0;
}

.post:first-child {
  padding-top: 0;
}

.post + .post {
  border-top: 1px solid var(--border);
}

.post-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Wide enough that a title near the old 640px limit does not tip onto
     a second, half-empty balanced line on platforms whose font
     rasterisation runs slightly wide */
  max-width: 680px;
  margin-bottom: 20px;
}

.post-body p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 16px;
}

/* Lede: the opening paragraph reads slightly larger */
.post-body > p:first-child {
  font-size: 1.05rem;
}

.post-body p:last-child {
  margin-bottom: 0;
}

/* Post subheadings: the editorial serif, scaled down to sit under the
   post title rather than compete with it */
.post-body h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  max-width: 600px;
  margin: 44px 0 16px;
}

/* Writing index: linked post titles and excerpts */
.post-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.post-title a:hover {
  color: var(--accent-maroon-h);
}

.post-excerpt {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
}

/* Individual post page: quiet related-service line above the back link */
.post-related {
  margin-top: 48px;
  font-size: 0.95rem;
  color: var(--text-tertiary);
}

/* Report pages: quiet next-report line after the body */
.report-optin {
  margin-top: 48px;
  font-size: 0.95rem;
  color: var(--text-tertiary);
  max-width: 600px;
}

/* Report page: link up to the shared method (hub-and-spoke) */
.report-method {
  margin-top: 48px;
  font-size: 0.95rem;
  color: var(--text-tertiary);
  max-width: 600px;
}

.report-method + .report-optin {
  margin-top: 16px;
}

/* Individual post page: link back to the index */
.post-back {
  margin-top: 32px;
}

/* ------------------------------------------------------------
   Deliverability: the email-authentication checker
   ------------------------------------------------------------ */
.check-tool {
  margin: 8px 0 8px;
  max-width: 600px;
}

.check-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.check-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.check-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color var(--transition);
}

.check-input::placeholder { color: var(--text-tertiary); }

.check-input:focus {
  outline: none;
  border-color: var(--accent-maroon);
}

.check-submit {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.check-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.check-privacy {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 12px;
}

.check-result {
  margin-top: 28px;
}

.check-result:empty {
  margin-top: 0;
}

.check-message {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Verdict reads as the headline result through type, not colour: serif,
   larger, with the single maroon rule above it. No pass/fail colours. */
.check-verdict {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  max-width: 560px;
  padding-top: 22px;
  border-top: 2px solid var(--accent-maroon);
  margin-bottom: 28px;
}

.check-group {
  margin-bottom: 20px;
}

.check-group-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-maroon); /* #800020, the single accent; identical for every verdict */
  margin-bottom: 8px;
}

.check-finding {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 6px;
}

.check-soft {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  line-height: 1.7;
  max-width: 560px;
  margin-top: 24px;
}

.check-soft a {
  color: var(--accent-maroon); /* #800020, not the site link colour, to keep one accent */
  text-decoration: none;
  text-underline-offset: 3px;
}

.check-soft a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Reports: data report pages, ranked bar chart, data table
   ------------------------------------------------------------ */
.report-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 720px;
}

.report-standfirst {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-top: 16px;
}

.report-body {
  margin-top: 44px;
}

.report-body p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 22px;
}

/* Ranked bar chart (inline SVG, no JS). Bars are the one maroon; everything
   else is neutral ink. No colour signals good or bad. */
.report-chart {
  margin: 40px 0;
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 640px;
}

.chart-bar {
  fill: var(--accent-maroon); /* #800020, the only fill */
}

.chart-state {
  fill: var(--text-secondary);
  font-family: var(--font);
  font-size: 15px;
}

.chart-pct {
  fill: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
}

.chart-count {
  fill: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.chart-marker {
  stroke: var(--text-tertiary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-marker-label {
  fill: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.report-chart-note {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 600px;
}

/* Data table: numbers in mono, neutral ink, no status colours */
.report-table-wrap {
  margin: 32px 0;
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.report-table caption {
  text-align: left;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 640px;
}

.report-table th,
.report-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.report-table thead th {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  border-bottom-color: var(--border-light);
}

.report-table th[scope="row"] {
  text-align: left;
  font-family: var(--font);
  font-weight: 500;
  color: var(--text-secondary);
}

.report-table td {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.report-table tfoot th[scope="row"],
.report-table tfoot td {
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}

/* ------------------------------------------------------------
   Services: numbered areas and the spec panel
   ------------------------------------------------------------ */
.area-list {
  counter-reset: area;
}

.area {
  counter-increment: area;
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 24px;
  padding: 32px 0;
}

.area + .area {
  border-top: 1px solid var(--border);
}

.area::before {
  content: "0" counter(area);
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--accent-maroon-h);
}

.area h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.area p {
  grid-column: 2;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 600px;
}

.spec-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-top: 48px;
}

.spec-panel p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.spec-panel p:last-child {
  margin-bottom: 0;
}

.spec-price {
  color: var(--text-primary);
  font-weight: 500;
}

/* ------------------------------------------------------------
   Card grid (home page: What's here) — four cards, two by two
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--accent-maroon);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: 10px;
  transition: color var(--transition);
}

.card:hover h3 {
  color: var(--accent-maroon-h);
}

.card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
#contact {
  text-align: center;
}

.contact-inner {
  max-width: 520px;
  margin: 0 auto;
}

.contact-heading {
  margin-bottom: 16px;
}

.contact-sub {
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.7;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--accent-maroon);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition);
  margin-bottom: 40px;
}

.btn-contact:hover {
  background: var(--accent-maroon-h);
  transform: translateY(-1px);
}

.btn-contact svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------
   Common questions (service pages)
   ------------------------------------------------------------ */
.faq-list {
  max-width: 680px;
}

.faq-item {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.faq-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.faq-item dt {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.faq-item dd {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ------------------------------------------------------------
   Client quote: one attributed sentence on a service page.
   Serif italic like the pull quote, but boxed and attributed.
   ------------------------------------------------------------ */
.testimonial {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-maroon);
  border-radius: var(--radius-md);
  padding: 32px;
  max-width: 640px;
}

.testimonial blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-primary);
}

.testimonial figcaption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* Booking + email pair in the contact CTA block */
.contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.contact-actions .btn-contact,
.contact-actions .btn-primary {
  margin-bottom: 0;
}

/* In-flow CTA row within long-form sections (e.g. The fix) */
.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.cta-row .btn-contact {
  margin-bottom: 0;
}

.contact-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.contact-socials a {
  color: var(--text-tertiary);
  transition: color var(--transition);
  line-height: 0;
}

.contact-socials a:hover {
  color: var(--text-primary);
}

.contact-socials svg {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------------------
   Scroll Arrows (page up / page down)
   ------------------------------------------------------------ */
.scroll-arrow {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  opacity: 0.5;
  transition: opacity var(--transition), transform var(--transition);
  padding: 8px;
  line-height: 0;
  animation: arrow-bob 2s ease-in-out infinite;
}

.scroll-arrow svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.scroll-arrow:hover {
  opacity: 1;
  animation-play-state: paused;
}

.scroll-arrow.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

.scroll-arrow--up {
  bottom: auto;
  top: 72px; /* clears the fixed nav header */
}

.scroll-arrow--up.hidden {
  transform: translateX(-50%) translateY(-8px);
}

@keyframes arrow-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@keyframes arrow-bob-up {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-6px); }
}

.scroll-arrow--up:not(.hidden) {
  animation-name: arrow-bob-up;
}

/* ------------------------------------------------------------
   Utilities
   ------------------------------------------------------------ */

/* Inline body links that use the accent colour */
.link-accent {
  color: var(--accent-maroon-h);
  transition: color var(--transition);
}

.link-accent:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Contact page: left-aligned variant of .contact-inner */
.contact-inner--left {
  text-align: left;
}

/* Contact page: reach section paragraph spacing */
#reach p {
  margin-bottom: 32px;
  line-height: 1.75;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--border);
  padding: 24px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Services links row: sitewide internal links to every service page. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.footer-nav a {
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--text-primary);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-meta span {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.footer-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-meta a:hover {
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Booking embed
   ------------------------------------------------------------ */
.booking-embed {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#cal-inline-general {
  min-height: 700px;
  width: 100%;
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  @view-transition {
    navigation: none;
  }

  .scroll-arrow {
    animation: none;
  }

  html.js .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .hero-inner > *,
  html.js .hero-logs {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --section-pad: 72px 20px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-photo {
    width: 120px;
    height: 120px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .pull-quote {
    padding-left: 20px;
  }

  .area {
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
  }

  .area::before {
    font-size: 1.2rem;
  }

  .post {
    padding: 40px 0;
  }

  .experience-meta {
    flex-direction: column;
    gap: 4px;
  }

  .experience-dates {
    margin-left: 0;
  }

  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}