/* Self-hosted fonts (Inter, Inter Tight, Space Grotesk; SIL Open Font License 1.1).
   Served from this site so visitors' browsers never contact Google to load them. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Addmetrica — Design System
   Adapted from the "Seline Analytics — quiet analyst's desk on
   warm paper" reference (styles.refero.design): warm-stone canvas,
   flat white cards on hairline borders + one soft shadow, a single
   warm-gold accent as the only chromatic voice (matched to the
   wordmark logo's ink + cream-gold palette), Inter Tight for display
   headlines at weight 400 (restraint over boldness), Inter for
   body/UI, pill-shaped controls, one highlight-span per headline.
   ============================================================ */

:root {
  /* Color — Seline token set */
  --stone-canvas: #fafaf9;   /* page background */
  --pure-white: #ffffff;     /* card / elevated surfaces */
  --stone-border: #e8e6e5;   /* primary structural hairline */
  --stone-muted: #d6d3d1;    /* secondary borders / separators */
  --ash-gray: #a8a29e;       /* muted / helper text */
  --warm-gray: #78716c;      /* body copy, secondary text */
  --ink-black: #0c0a09;      /* headings, primary text */
  --soot: #1c1917;           /* inverted / dark surfaces */
  --accent-signal: #c8b99a;    /* primary CTA fill — sampled directly from the wordmark PNG's drop-shadow layer (ground truth, not a guess) */
  --accent-wash: #e1d9c7;      /* highlight-span background — lighter tint of --accent-signal, same hue */
  --accent-edge: #5a5345;      /* accent TEXT color — darkened shade of --accent-signal; clears 4.5:1 on white and on --accent-wash (WCAG AA) */

  /* Back-compat aliases used throughout the component rules below */
  --paper: var(--stone-canvas);
  --white: var(--pure-white);
  --ink: var(--ink-black);
  --ink-90: var(--ink-black);
  --ink-60: var(--warm-gray);
  --ink-40: var(--ash-gray);
  --stone: var(--ash-gray);
  --hairline: var(--stone-border);
  --hairline-strong: var(--stone-muted);
  --blue: var(--accent-signal);
  --blue-ink: var(--accent-edge);
  --sky-tint: var(--accent-wash);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter Tight", "Satoshi", var(--font-sans);
  /* Heavy display face for high-impact moments (h1/h2, eyebrow, buttons) —
     matches the wordmark logo's bold, uppercase, tight-tracked letterforms */
  --font-display-bold: "Space Grotesk", "Arial Black", Arial, Helvetica, sans-serif;

  /* Shape */
  --radius-icon: 4px;
  --radius-input: 6px;
  --radius-card: 10px;
  --radius-card-lg: 16px;
  --radius-pill: 9999px;
  --radius-sm: var(--radius-input);
  --radius-md: var(--radius-card);

  /* Shadow — tinted to --soot (the ink-black surface color) rather than
     neutral or navy black, so elevation reads as part of the warm palette */
  --shadow-card: 0 4px 16px rgba(28, 25, 23, 0.06);
  --shadow-float: 0 12px 45px rgba(28, 25, 23, 0.14);
  --shadow-chip: 0 4px 6px -1px rgba(28, 25, 23, 0.1), 0 2px 4px -2px rgba(28, 25, 23, 0.1);
  --shadow-hairline: 0 1px 2px rgba(28, 25, 23, 0.05);

  /* Spacing */
  --space-unit: 4px;
  --container-max: 1200px;
  --section-pad-y: clamp(64px, 9vw, 96px);
  --section-pad-x: clamp(20px, 5vw, 48px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 200ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--stone-canvas);
  color: var(--ink-black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
/* Ambient accent glow — two soft, asymmetric radial washes in the site's
   own sampled accent color, fixed so they read as one consistent
   atmosphere across the whole page (every section, not just the hero),
   regardless of whether that section sits on --stone-canvas or the
   --pure-white .section-alt background. Deliberately off-center, not a
   centered "AI mesh blob". */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse 900px 650px at 8% -8%, rgba(200, 185, 154, 0.13), transparent 60%),
    radial-gradient(ellipse 750px 750px at 94% 38%, rgba(200, 185, 154, 0.10), transparent 55%),
    radial-gradient(ellipse 800px 600px at 30% 96%, rgba(200, 185, 154, 0.08), transparent 58%);
  background-repeat: no-repeat;
}
/* Warm-paper grain — a fixed, pointer-events-none overlay (never on a
   scrolling container, so it costs one paint, not one per scroll frame).
   Matches this design system's own "warm paper" reference (see header
   comment) rather than leaving the canvas perfectly flat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* The fixed background layers above sit at z-index:-1, behind all page
   content. Nothing wraps <main> in its own stacking context, so blend modes
   used inside it (the hero scene multiplies onto the page) can reach them. */

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Scroll reveal — applied only via JS, and only when motion is allowed
   (see main.js); content is never hidden if JS fails or motion is reduced. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--ink-black);
  color: var(--pure-white);
  padding: 12px 18px;
  border-radius: var(--radius-input);
  z-index: 200;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  /* ink-black, not the accent gold — accent-signal vs accent-edge sit too close in
     lightness to read as a visible ring on top of the primary button's own fill */
  outline: 2px solid var(--ink-black);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}
.section { padding-block: var(--section-pad-y) calc(var(--section-pad-y) + 8px); }
.section-tight { padding-block: calc(var(--section-pad-y) * 0.6); }
.section-alt { background: var(--pure-white); border-block: 1px solid var(--stone-border); }

/* Section intro block (eyebrow + heading + optional short lede) — centered
   like the hero, on every section. The grid/list/table content that follows
   stays left-aligned and full-width; only this short intro block matches
   hero's centered treatment. */
.section-head { max-width: 700px; margin-inline: auto; text-align: center; }

h1, .h1 {
  font-family: var(--font-display-bold);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink-black);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display-bold);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-black);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-black);
}
/* Inline value-prop emphasis — the brand's one signature move.
   Exactly one per headline, never inside body copy. */
.hl {
  display: inline;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--accent-edge);
  background: var(--accent-wash);
  border-radius: 4px;
  padding: 0.02em 0.28em;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--warm-gray);
  max-width: 46ch;
}
.comparison-lede { max-width: 64ch; margin-inline: auto; margin-top: 16px; }
.small { font-size: 14px; }
.muted { color: var(--warm-gray); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display-bold);
  font-weight: 900;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* Primary CTA — the only chromatic filled control on the page */
.btn-primary { background: var(--accent-signal); color: var(--ink-black); border-color: var(--accent-edge); }
.btn-primary:hover { background: var(--accent-edge); color: var(--pure-white); }
/* Secondary ghost — quiet companion to the gold CTA */
.btn-outline { background: transparent; color: var(--ink-black); border-color: var(--stone-border); }
.btn-outline:hover { border-color: var(--stone-muted); background: var(--pure-white); }
.btn-link {
  color: var(--accent-edge);
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid transparent;
}
.btn-link:hover { border-color: var(--accent-edge); }
/* links written inside a sentence (slider, FAQ answers, the "Not for" list): same size as the text around them, clearly underlined */
.fit-text a.btn-link, .faq-a-inner a.btn-link, .fit-col li a.btn-link {
  font-size: inherit;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--accent-signal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.fit-text a.btn-link:hover, .faq-a-inner a.btn-link:hover, .fit-col li a.btn-link:hover { text-decoration-color: var(--accent-edge); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--stone-canvas);
  border-bottom: 1px solid var(--stone-border);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: 16px;
}
.nav .nav-actions { justify-self: end; }
.brand {
  display: flex;
  align-items: center;
}
.site-header .brand-logo {
  height: 30px;
  width: auto;
  display: block;
}
@media (max-width: 420px) {
  .site-header .brand-logo { height: 24px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-black);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-input);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-nav { display: none; }

@media (max-width: 860px) {
  .nav { display: flex; justify-content: space-between; }
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding-block: 12px 20px;
    border-top: 1px solid var(--stone-border);
  }
  .mobile-nav.is-open { display: flex; }
  .mobile-nav a {
    padding: 12px 4px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--stone-border);
  }
  .mobile-nav .btn { margin-top: 12px; width: 100%; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(56px, 9vw, 96px) clamp(56px, 8vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero-inner { max-width: none; }
.hero h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; margin-bottom: 24px; }
.hero h1 .hl { white-space: nowrap; }
.hero h1 .hbr { display: block; }
.hero .lede { max-width: 48ch; margin-bottom: 36px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-actions-centered { margin-top: 40px; justify-content: center; }
.hero-actions-centered-tight { margin-top: 32px; justify-content: center; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-inner { max-width: none; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero .hero-actions { justify-content: center; }
}

/* Hero scene: the Higgsfield-generated 3D data scene (platform tiles, a
   correction ring, one glowing result tile). On desktop it is a large,
   un-boxed layer anchored to the right edge of the hero, behind the copy;
   on phones it stacks under the buttons. The media contains no text (AI
   video garbles it), so every label is live HTML placed at percentage
   coordinates of the 1344x752 frame and sized with container units.
   The media is multiplied onto the page so its near-white plate vanishes
   into the canvas, and its edges fade out, so there is no visible box. */
.hero { overflow-x: clip; padding-block: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.hero-inner { position: relative; z-index: 1; }
.hero-scene { min-width: 0; position: relative; pointer-events: none; }
.hero-scene-stage {
  position: relative;
  aspect-ratio: 880 / 495;
}
.hero-scene-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: multiply;
  filter: url(#plate-white); /* scales the plate to pure white so multiply leaves the page colour untouched */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-scene-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  object-fit: fill;
}
/* The video is the full 1344x768 render; the still (and the label
   coordinates) are an 880x495 crop of it, so the video is scaled and offset
   to show exactly that same crop. */
.hero-scene-video {
  position: absolute;
  left: -61.82%;
  top: -20.2%;
  width: 152.73%;
  height: 151.9%;
  max-width: none;
  display: block;
  object-fit: fill;
  /* the render is narrower than the poster frame: fade its right edge into the still beneath */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
}
/* A still copy of the result tile sits above the video, so the cubes flowing
   in appear to be absorbed by the tile instead of crossing its label. */
.hero-scene-tile { clip-path: polygon(69.32% 44.44%, 85.00% 49.70%, 85.91% 51.72%, 85.91% 77.17%, 84.77% 80.40%, 70.23% 72.32%, 69.32% 70.30%); }
/* the labels layer is the size container (cqw); the blended media layer is
   not, because containment would isolate it from the page it multiplies onto */
.hero-scene-labels { position: absolute; inset: 0; container-type: inline-size; }
.hs {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: var(--ink-black);
}
/* tile labels follow the tilt of the glass faces */
.hs-tile { transform: translate(-50%, -50%) skewY(9deg); color: var(--accent-edge); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.hs-tile,
.hs-ring {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  font-size: clamp(10px, 1.6cqw, 18px);
}
.hs-ring {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: clamp(9px, 1.3cqw, 15px);
  color: var(--accent-edge);
}
/* the result tile is slanted like the glass, so its text is too */
.hs-value {
  transform: translate(-50%, -50%) skewY(14deg);
  text-shadow: 0 0 1.6cqw rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  text-align: center;
}
.hs-value-num {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  font-size: clamp(32px, 6.4cqw, 78px);
}
.hs-value-cap {
  font-size: clamp(9px, 1.32cqw, 15px);
  letter-spacing: -0.005em;
  color: var(--accent-edge);
}
.hs-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 1.25cqw;
  padding: 1.1cqw 2cqw 1.1cqw 1.6cqw;
  border-radius: 1.3cqw;
  background: var(--pure-white);
  box-shadow: var(--shadow-hairline), var(--shadow-card);
  white-space: nowrap;
  color: var(--ink-black);
}
.hs-chip svg { width: 2.5cqw; height: 2.5cqw; min-width: 16px; min-height: 16px; flex: none; }
.hs-chip-body { display: flex; flex-direction: column; gap: 0.3cqw; }
.hs-chip-label { font-size: clamp(10px, 1.35cqw, 15px); color: var(--warm-gray); line-height: 1.1; }
.hs-chip-row { display: flex; align-items: baseline; gap: 0.9cqw; line-height: 1.1; }
.hs-chip-row b { font-weight: 500; font-size: clamp(13px, 2.25cqw, 25px); font-variant-numeric: tabular-nums; }
.hs-chip-row i { font-style: normal; font-size: clamp(10px, 1.3cqw, 15px); color: var(--warm-gray); }

/* Desktop: the scene is a big layer on the right of the hero, bleeding off
   the viewport edge. Copy width is capped so it never reaches the tiles. */
@media (min-width: 981px) {
  /* tall enough for the scene (frame aspect 1344:752), never taller */
  /* fill the first screen exactly (viewport minus the 84px sticky header) so the next
     section never peeks in; capped so very tall monitors do not get a gap. The scene
     height is the floor when the window is short. */
  .hero { min-height: max(calc(min(56vw, 760px) * 0.5625 + 56px), min(calc(100dvh - 84px), 1000px)); display: flex; align-items: center; }
  .hero-grid { grid-template-columns: 1fr; width: 100%; }
  .hero-inner { max-width: 41vw; }
  .hero .lede { max-width: 36ch; }
  .hero h1 { font-size: clamp(1.9rem, 2.5vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; max-width: 13.5em; }
  .hero-scene {
    position: absolute;
    /* right edge = container edge + 70px bleed, so the art ends close to the nav button edge,
       never further than 1vw past the viewport on narrower screens */
    right: max(calc((100vw - 1200px) / 2 - 70px), -1vw);
    top: 0;
    bottom: 0;
    margin-block: auto;
    height: fit-content;
    width: min(56vw, 760px);
  }
}
/* Phones and reduced-motion get the still frame instead of the video. */
@media (max-width: 980px) {
  .hero-scene-video { display: none; }
  .hero-scene { width: 100%; margin: 8px auto -2vw; max-width: 760px; }
  .hs-chip-row i { display: none; }
}
@media (max-width: 640px) {
  /* crop the scene's empty side margins so it fills the phone width */
  .hero-scene { width: calc(100% + 24vw); max-width: none; margin: 0 0 -4vw -8vw; }
  .hero .lede { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene-video { display: none; }
}

/* ---------- Problem list (Section 02) ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--stone-border);
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 40px;
}
.problem-item {
  background: var(--pure-white);
  padding: 28px clamp(20px, 4vw, 32px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.problem-item .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--warm-gray);
  min-width: 28px;
}
.problem-item p { font-size: 16px; color: var(--ink-black); line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
@media (max-width: 760px) { .problem-grid { grid-template-columns: 1fr; } }
.closer-line {
  margin-top: 48px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--ink-black);
}

/* ---------- Who it's for (Section 03) ----------
   One wide panel: a spend scale on top (drag the marker to place yourself),
   then "Built for" and "Not for" side by side. Light only, on the site's own
   colours: sand marks what is in range, stone greys mark what is not. */
.fit { position: relative; margin-top: clamp(28px, 3.4vw, 44px); }
.fit::before {
  content: "";
  position: absolute;
  inset: -30px calc(-1 * min(40px, var(--section-pad-x)));
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(200, 185, 154, 0.2), rgba(200, 185, 154, 0.05) 65%, transparent 78%);
  pointer-events: none;
}
.fit-panel {
  position: relative;
  background: linear-gradient(180deg, var(--pure-white), #fdfcfa);
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-card-lg);
  box-shadow: inset 0 1px 0 var(--pure-white), 0 1px 2px rgba(28, 25, 23, 0.05), 0 18px 50px -28px rgba(28, 25, 23, 0.28);
  overflow: hidden;
}
.fit-top { padding: clamp(24px, 3vw, 32px) clamp(22px, 3.4vw, 40px) clamp(26px, 3vw, 34px); border-bottom: 1px solid var(--stone-border); }
.fit-q { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.fit-q b { font-size: 15px; font-weight: 600; }
.fit-q span { font-size: 13px; color: var(--warm-gray); }
.fit-scale {
  position: relative;
  height: 10px;
  margin: 54px 0 14px;
  border-radius: 99px;
  background: var(--stone-border);
  touch-action: pan-y;
  cursor: pointer;
}
.fit-zone { position: absolute; top: 0; bottom: 0; }
.fit-zone-no { left: 0; border-radius: 99px 0 0 99px; background: repeating-linear-gradient(135deg, #dcd9d6 0 4px, #e8e6e5 4px 8px); }
.fit-zone-yes { background: var(--accent-signal); transform-origin: left center; border-radius: 0 99px 99px 0; }
.fit-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border-radius: 50%;
  background: var(--pure-white);
  border: 2px solid var(--ink-black);
  box-shadow: 0 4px 10px rgba(12, 10, 9, 0.18);
  cursor: grab;
  touch-action: none;
}
.fit-marker:active { cursor: grabbing; }
.fit-marker:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 3px; }
.fit-tip {
  position: absolute;
  top: -42px;
  left: 0;
  transform: translateX(-50%);
  background: var(--ink-black);
  color: #fff;
  font: 500 12.5px var(--font-sans);
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
  pointer-events: none;
}
.fit-tip:empty { display: none; }
.fit-tip::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -4px; width: 8px; height: 8px; background: var(--ink-black); transform: translateX(-50%) rotate(45deg); }
.fit-ticks { position: relative; height: 20px; font-size: 12.5px; color: var(--warm-gray); }
.fit-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.fit-tick:first-child { transform: none; }
.fit-tick:last-child { transform: translateX(-100%); }
/* all three states share one grid cell, so the area is always as tall as the longest
   sentence and nothing below it moves when the marker changes state */
.fit-result { margin-top: 26px; display: grid; }
.fit-state {
  grid-area: 1 / 1;
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity 350ms var(--ease), transform 450ms var(--ease), visibility 0s linear 350ms;
}
.fit-state.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.fit-pill { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-sans); padding: 6px 14px; border-radius: 99px; background: #f1ece0; color: var(--accent-edge); transition: background 400ms var(--ease), color 400ms var(--ease); white-space: nowrap; }
.fit-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-signal); display: block; transition: background 400ms var(--ease); }
.fit-pill em { font-style: normal; }
/* "Fastest results" (high) uses the default sand pill like "Sounds like a fit"; "Foundation first" (low) is a
   quieter, outlined version of it: a different route, not a rejection. */
.fit-state[data-state-key="low"] .fit-pill { background: transparent; box-shadow: inset 0 0 0 1px var(--accent-signal); color: var(--accent-edge); }
.fit-state[data-state-key="low"] .fit-pill i { background: var(--accent-edge); }
.fit-text { font-size: 14px; line-height: 1.55; color: var(--warm-gray); max-width: 70ch; flex: 1 1 320px; padding-top: 4px; }
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; }
.fit-col { padding: clamp(24px, 3vw, 34px) clamp(22px, 3.4vw, 40px) clamp(26px, 3vw, 38px); }
.fit-col + .fit-col { border-left: 1px solid var(--stone-border); }
.fit-col h3 { font: 600 16px var(--font-sans); letter-spacing: 0; margin-bottom: 20px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.fit-col li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.fit-li-text { flex: 1 1 0; min-width: 0; } /* the sentence (and any link in it) stays one block beside the icon */
.fit-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; }
.fit-ic svg { width: 11px; height: 11px; display: block; }
.fit-yes .fit-ic { background: var(--accent-signal); color: var(--ink-black); }
.fit-no li { color: var(--warm-gray); }
.fit-no .fit-ic { background: #eeedeb; color: var(--warm-gray); }

/* entry animation, only when JS has marked the section */
.fit-js .fit-zone-yes { transform: scaleX(0); transition: transform 1100ms cubic-bezier(0.45, 0, 0.2, 1) 250ms; }
.fit-js.is-visible .fit-zone-yes { transform: scaleX(1); }
.fit-js .fit-col li { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); transition-delay: calc(var(--i) * 90ms + 500ms); }
.fit-js.is-visible .fit-col li { opacity: 1; transform: none; }
.fit-marker, .fit-tip { transition: left 140ms ease-out; }
.fit.is-dragging .fit-marker, .fit.is-dragging .fit-tip { transition: none; }

@media (max-width: 560px) { .fit-tick:last-child, .fit-tick:first-child { display: none; } }
@media (max-width: 760px) {
  .fit-cols { grid-template-columns: 1fr; }
  .fit-col + .fit-col { border-left: 0; border-top: 1px solid var(--stone-border); }
  .fit-q span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fit-js .fit-zone-yes, .fit-js .fit-col li, .fit-marker, .fit-tip, .fit-pill, .fit-state { transition: none !important; }
}

/* ---------- Services (Section 04) ----------
   A scroll story: the five services read down the left while one sticky
   stage on the right swaps between five example product windows (dark and
   light, generated in Higgsfield, transparent WebP with their own shadow).
   Below 1001px the stage is hidden and each window sits under its text. */
.svc-story {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}
.svc-stage {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(84px + max(16px, (100vh - 84px - 560px) / 2));
  aspect-ratio: 1960 / 1264;
  max-height: 640px;
  width: 100%;
}
@media (min-width: 1200px) { .svc-stage { width: calc(100% + 40px); } }
.svc-stage::before {
  content: "";
  position: absolute;
  inset: 4% 0 0;
  background: radial-gradient(ellipse 62% 56% at 50% 55%, rgba(200, 185, 154, 0.2), rgba(200, 185, 154, 0.06) 62%, transparent 76%);
  pointer-events: none;
}
.svc-frame { position: relative; width: 100%; height: 100%; }
.svc-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 600ms var(--ease), transform 900ms var(--ease);
  pointer-events: none;
}
.svc-view.is-active { opacity: 1; transform: none; }
.svc-view img { display: block; width: 100%; height: 100%; object-fit: contain; }

.svc-items { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.svc-item {
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding-block: 40px;
}
.svc-item { scroll-margin-top: 120px; } /* so links such as #new-business-setup land below the sticky header */
.svc-item:first-child { min-height: 64vh; }
.svc-item:last-child { min-height: 70vh; }
.svc-copy { transition: opacity 600ms var(--ease); }
.svc-item:not(.is-active) .svc-copy { opacity: 0.38; }
.svc-copy h3 {
  font-family: var(--font-display-bold);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-black);
  max-width: 16ch;
}
.svc-lead { margin-top: 12px; font-size: 16.5px; line-height: 1.45; color: var(--ink-black); max-width: 34ch; }
.svc-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--warm-gray); max-width: 40ch; }
.svc-detail { margin: 20px 0 0; display: grid; gap: 12px; max-width: 42ch; padding-top: 18px; border-top: 1px solid var(--stone-border); }
.svc-detail dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-edge); margin-bottom: 3px; }
.svc-detail dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--warm-gray); }
.svc-inline { display: none; margin: 0; }

@media (max-width: 1000px) {
  .svc-story { display: block; }
  .svc-stage { display: none; }
  .svc-item { display: block; min-height: 0; padding-block: 36px 40px; border-top: 1px solid var(--stone-border); }
  .svc-item:first-child { border-top: 0; padding-top: 8px; min-height: 0; }
  .svc-item:last-child { min-height: 0; }
  .svc-item:not(.is-active) .svc-copy { opacity: 1; }
  .svc-inline { display: block; margin-top: 26px; }
  .svc-inline img { width: 100%; height: auto; display: block; }
  .svc-copy h3 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-view, .svc-copy { transition: none; }
  .svc-view { transform: none; }
}

/* ---------- How it works (Section 05) ----------
   A path: five glass markers on one line. When the section scrolls into view
   the sand line draws left to right and each marker lights in turn (the .path-js
   class is only added by main.js, so without JS or under reduced motion the
   finished state shows). Below 981px the path runs down the left instead. */
.path { --g: clamp(18px, 2.4vw, 36px); position: relative; margin-top: clamp(36px, 4vw, 56px); }
.path-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--g);
}
/* the line runs from the centre of marker 1 to the centre of marker 5 */
.path-rail {
  position: absolute;
  left: 28px; width: calc((4 * 100% + 4 * var(--g)) / 5); top: 36px;
  height: 2px;
  background: var(--stone-border);
  border-radius: 2px;
}
.path-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent-signal), #b8a780);
  border-radius: 2px;
  transform-origin: left center;
}
.path-step { position: relative; text-align: left; }
.path-node { position: relative; display: block; width: 72px; height: 72px; margin-bottom: 14px; margin-left: -8px; }
/* a quiet backing so the line stops at the glass instead of showing through it */
.path-node::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, #fefdfc 62%, rgba(254,253,252,0) 72%); }
.path-node img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.path-node .node-on { opacity: 0; }
.path-num { display: block; font-family: var(--font-display); font-size: 15px; color: var(--accent-edge); margin-bottom: 6px; }
.path-step h3 { font-family: var(--font-display-bold); font-weight: 900; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; color: var(--ink-black); }
.path-text { font-size: 14.5px; line-height: 1.55; color: var(--warm-gray); }
.path-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stone-border); }
.path-result-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--accent-edge); margin-bottom: 4px; }
.path-result p { font-size: 14px; line-height: 1.5; color: var(--ink-black); }
.path-meta { display: inline-block; margin-top: 10px; font-size: 12.5px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent-edge); }

/* entry animation, only when JS has marked the path */
.path-js .path-fill { transform: scaleX(0); transition: transform 2600ms cubic-bezier(0.45, 0, 0.2, 1) 200ms; }
.path-js.is-visible .path-fill { transform: scaleX(1); }
.path-js .path-step { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i) * 480ms + 250ms); }
.path-js.is-visible .path-step { opacity: 1; transform: none; }
.path-js .path-node .node-on { transition: opacity 900ms var(--ease); transition-delay: calc(var(--i) * 480ms + 500ms); }
.path-js.is-visible .path-node .node-on { opacity: 1; }
.path-js.is-visible .path-node .node-off { opacity: 0; transition: opacity 900ms var(--ease); transition-delay: calc(var(--i) * 480ms + 500ms); }

@media (max-width: 980px) {
  .path-steps { grid-template-columns: 1fr; gap: 0; }
  .path-rail { display: none; }
  .path-step { padding: 0 0 36px 88px; min-height: 72px; }
  .path-step:last-child { padding-bottom: 0; }
  .path-node { position: absolute; left: -8px; top: 0; margin: 0; }
  .path-num { margin-top: 2px; }
  .path-result { margin-top: 12px; }
  /* each step draws its own connector down to the next marker */
  .path-step:not(:last-child)::before,
  .path-step:not(:last-child)::after {
    content: ""; position: absolute; left: 27px; top: 36px; width: 2px; height: 100%; border-radius: 2px;
  }
  .path-step:not(:last-child)::before { background: var(--stone-border); }
  .path-step:not(:last-child)::after { background: linear-gradient(180deg, var(--accent-signal), #b8a780); transform-origin: top center; }
  .path-js .path-step:not(:last-child)::after { transform: scaleY(0); transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1); transition-delay: calc(var(--i) * 480ms + 500ms); }
  .path-js.is-visible .path-step:not(:last-child)::after { transform: scaleY(1); }
  .path-node { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .path-js .path-fill, .path-js .path-step, .path-js .path-node img { transition: none !important; }
}

/* ---------- About / team (Section 06) ----------
   Centered intro like every other section, then an editorial spread: the
   founding line as a large lead on the left, credentials and what we do on
   the right behind a hairline. No cards. Stacks to one column on tablets and
   phones. */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 52px);
}
.about-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink-black);
  text-wrap: pretty;
}
.about-copy {
  display: grid;
  gap: 22px;
  padding-left: clamp(24px, 4vw, 48px);
  border-left: 1px solid var(--stone-border);
}
.about-copy p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--warm-gray);
  max-width: 60ch;
}
.about-copy strong { font-weight: 500; color: var(--ink-black); }
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-copy { padding-left: 0; border-left: 0; border-top: 1px solid var(--stone-border); padding-top: 28px; }
}
.closing-line {
  margin-top: 48px;
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--ink-black);
  line-height: 1.5;
}

/* ---------- Comparison table (Section 07) ---------- */
.compare-wrap { margin-top: 40px; position: relative; }
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card);
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--pure-white);
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.compare-table th, .compare-table td {
  padding: 16px 18px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--stone-border);
  border-right: 1px solid var(--stone-border);
  vertical-align: top;
}
.compare-table th:last-child, .compare-table td:last-child { border-right: none; }
.compare-table thead th {
  background: var(--stone-canvas);
  font-weight: 600;
  color: var(--ink-black);
}
.compare-table thead th.us { color: var(--accent-edge); }
.compare-table tbody th { font-weight: 500; color: var(--warm-gray); width: 22%; }
.compare-table td.us { font-weight: 600; background: var(--accent-wash); }
.compare-benchmark { font-size: 12px; color: var(--warm-gray); margin-top: 14px; }

/* On narrow viewports the table keeps its desktop row/column structure and
   scrolls horizontally instead of restacking into cards; a fade at the right
   edge signals there's more to see since horizontal scroll isn't always
   obvious on touch devices. */
@media (max-width: 760px) {
  .compare-wrap::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    width: 36px;
    background: linear-gradient(to right, transparent, var(--pure-white));
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    pointer-events: none;
  }
}

.secondary-cta-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--warm-gray);
}

/* ---------- FAQ (Section 08) ---------- */
.faq-list { margin-top: 40px; border-top: 1px solid var(--stone-border); }
.faq-item { border-bottom: 1px solid var(--stone-border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-black);
  cursor: pointer;
}
.faq-q .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--stone-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.faq-q .icon::before, .faq-q .icon::after {
  content: "";
  position: absolute;
  background: var(--warm-gray);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-q .icon::before { width: 10px; height: 1.5px; }
.faq-q .icon::after { width: 1.5px; height: 10px; }
.faq-item[data-open="true"] .icon::after { transform: scaleY(0); opacity: 0; }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.faq-item[data-open="true"] .faq-a { max-height: 400px; }
.faq-a-inner { padding-bottom: 24px; max-width: 68ch; font-size: 15px; color: var(--warm-gray); line-height: 1.6; }

/* ---------- Final CTA (Section 09) ---------- */
.footer-tagline {
  margin-top: 40px;
  text-align: center; /* the sign-off under the whole booking section, not under the left column */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--warm-gray);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--stone-border);
  background: var(--pure-white);
  padding-block: 56px 32px;
}
.footer-brand-logo {
  height: 28px;
  width: auto;
  display: block;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col p { font-size: 14px; color: var(--warm-gray); }
.footer-col a:hover { color: var(--ink-black); }
.footer-social-link { display: inline-flex; align-items: center; gap: 8px; }
.footer-social-icon { width: 16px; height: 16px; flex-shrink: 0; }
.footer-bottom {
  position: relative;
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--warm-gray);
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--section-pad-x);
  right: var(--section-pad-x);
  border-top: 1px solid var(--stone-border);
}
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.footer-bottom-links a:hover,
.footer-bottom-links button:hover { color: var(--ink-black); }

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin-inline: auto;
  background: var(--pure-white);
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  padding: 22px 24px;
  z-index: 300;
  transform: translateY(140%);
  transition: transform 320ms var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: 14px; color: var(--warm-gray); line-height: 1.5; margin-bottom: 16px; }
.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; min-width: 120px; }

/* ---------- Legal / simple pages ---------- */
.legal-page .container { max-width: 780px; }
.legal-page h1 { margin-bottom: 8px; }
.legal-updated { color: var(--warm-gray); font-size: 14px; margin-bottom: 40px; }
.legal-page h2 { font-size: 1.3rem; margin-top: 40px; margin-bottom: 14px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.7; color: var(--ink-black); margin-bottom: 14px; }
.legal-page ul { padding-left: 20px; list-style: disc; }
.legal-page a { color: var(--accent-edge); border-bottom: 1px solid rgba(117, 77, 15, 0.3); }

/* ---------- 404 ---------- */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}
.error-page .code {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 14vw, 7rem);
  color: var(--ink-black);
  line-height: 1;
}
.error-page p { max-width: 42ch; margin-block: 20px 32px; color: var(--warm-gray); }

/* ============================================================
   Page-wide polish below the hero: one card radius, a soft white gradient
   on alternate sections, and a staggered rise for the problem list.
   Skipped under prefers-reduced-motion (the classes are only added by main.js).
   ============================================================ */
.problem-grid { border-radius: var(--radius-card-lg); }
.section-alt { background: linear-gradient(180deg, var(--pure-white) 0%, #fdfcfb 100%); }

.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.stagger.is-visible > * { opacity: 1; transform: none; }

/* closing booking section: copy and facts on the left, the Google calendar on the right.
   The calendar iframe is only created after a click (see main.js), so nothing from Google loads before then. */
/* The whole section is meant to fit on one screen under the sticky header (84px): heading and facts
   share the left column, the calendar card sits on the right. On narrow screens the order is
   heading, calendar button, facts, so the button is on screen straight away. */
.final-cta { padding-block: clamp(36px, 5vw, 56px) clamp(32px, 4vw, 48px); }
.final-cta { scroll-margin-top: 84px; }
.book-cal { scroll-margin-top: 100px; }
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: "head cal" "info cal";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 24px;
  align-items: start;
}
.book-head { grid-area: head; max-width: 520px; }
.book-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.16; margin-bottom: 14px; }
.book-head .lede { font-size: 17px; text-wrap: pretty; margin: 0; }
.book-info { grid-area: info; max-width: 520px; }
.book-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone-border); }
.book-facts li { padding: 12px 0; border-bottom: 1px solid var(--stone-border); font-size: 16px; color: var(--ink-black); }
.book-alt { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--warm-gray); }
.book-cal {
  grid-area: cal;
  position: relative;
  min-height: 400px;
  background: var(--pure-white);
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 24px 48px -28px rgba(12, 10, 9, 0.25);
  overflow: hidden;
}
.book-gate {
  min-height: 400px;
  padding: 32px clamp(20px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.book-gate-title { font-family: var(--font-display-bold); font-weight: 900; font-size: 22px; color: var(--ink-black); margin: 0; }
.final-cta-btn { padding: 18px 40px; font-size: 17px; }
.book-note { max-width: 44ch; margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--warm-gray); }
.book-note a { color: var(--accent-edge); text-decoration: underline; text-underline-offset: 2px; }
/* asked first: the prompt takes the button's place inside the same card, so nothing around it moves */
.book-consent {
  display: none;
  min-height: 400px;
  padding: 32px clamp(20px, 5vw, 56px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.book-consent .book-note { margin: 0; }
.book-consent-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block: 4px; }
.book-cal.is-asking .book-gate { display: none; }
.book-cal.is-asking .book-consent { display: flex; }
.book-cal.is-loaded .book-gate, .book-cal.is-loaded .book-consent { display: none; }
.book-cal.is-loaded { min-height: 0; }
/* once loaded, the calendar fills the screen below the sticky header, so only the calendar itself scrolls */
.book-frame { display: block; width: 100%; height: clamp(540px, calc(100vh - 108px), 760px); height: clamp(540px, calc(100svh - 108px), 760px); border: 0; background: var(--pure-white); }
@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; grid-template-areas: "head" "cal" "info"; grid-template-rows: auto; row-gap: 20px; }
  .book-head, .book-info { max-width: none; }
  .book-head { text-align: center; }
  .book-head .lede { max-width: 40ch; margin-inline: auto; }
  .book-cal, .book-gate, .book-consent { min-height: 0; }
  .book-gate, .book-consent { padding: 28px 20px; gap: 14px; }
  .book-frame { height: clamp(520px, calc(100vh - 100px), 860px); height: clamp(520px, calc(100svh - 100px), 860px); }
}


/* legal pages: tables of data, purposes and cookies */
.legal-table-wrap { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--stone-border); border-radius: var(--radius-card); background: var(--pure-white); }
.legal-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal-table th { text-align: left; font-weight: 600; color: var(--ink-black); background: var(--accent-wash); padding: 12px 14px; border-bottom: 1px solid var(--stone-border); white-space: nowrap; }
.legal-table td { vertical-align: top; padding: 14px; color: var(--warm-gray); border-bottom: 1px solid var(--stone-border); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td strong { color: var(--ink-black); font-weight: 600; }
.legal-table code, .legal-page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--accent-wash); color: var(--ink-black); padding: 1px 6px; border-radius: 4px; }