/* ========================================================================
   RIVR — design tokens (preserved from globals.css)
   ======================================================================== */
:root {
  /* ======================================================================
     rivr-web brand palette — Phase 1 global token swap (2026-05-21)
     Canonical tokens below match the rivr-web brand spec. The existing
     selector names (--color-bg, --color-text-primary, …) are kept as
     back-compat aliases that point at the canonical tokens, so the whole
     stylesheet inherits the warm/editorial palette without per-rule edits.
     ====================================================================== */

  /* ---- Canonical brand tokens (rivr-web spec) ----
     Polish 4 / Task 1: base bg lightened from #F5EDE2 (warm cream) →
     #FBF8F3 (off-white). Geist display + Source Serif body read cleaner
     on the lighter ground. The previous warm-cream value lives on as
     --bg-cream-hover, applied to interactive elements (nav links, ref
     tiles, secondary CTAs, body links) on hover. --color-dark-text
     intentionally stays at #F5EDE2 — that's text-on-dark, not bg, and
     the warmer cream reads better against deep charcoal. */
  --color-background: #FBF8F3;      /* Off-white — primary page bg */
  --bg-cream-hover: #F0E8DC;        /* Hover highlight — slightly darker than base, formerly close to old base */
  --color-accent: #C8945D;          /* Amber Glow — links, gold accents */
  --color-accent-strong: #8C6A2F;   /* AA-passing gold for small labels on light bg */
  --color-secondary: #7A8C6E;       /* Sage — confirmations, positive states */
  --color-walnut: #8B5A3C;          /* Walnut — hover states, deeper accents */
  --color-text: #2B2620;            /* Deep Charcoal — primary text + dark section bg */
  --color-text-subtle: #6E6157;     /* muted body text on cream */
  --color-dark-bg: #2B2620;         /* Deep Charcoal — dark sections */
  --color-dark-text: #F5EDE2;       /* Warm Cream — text on dark sections */

  /* RGB triplets for tinted shadows / scrims / glass (used via rgba(var(--…))) */
  --color-accent-rgb: 200, 148, 93;
  --color-background-rgb: 251, 248, 243;
  --color-surface-rgb: 252, 250, 246;

  /* ---- Surface + utility tokens (warm-mapped from old neutrals) ---- */
  --color-surface: #FCFAF6;         /* elevated card surface (warm near-white) */
  --color-surface-muted: #EFE7DA;   /* recessed panels / window chrome bars */
  --color-rule: #D8C9B2;            /* warm hairline rule */
  --color-rule-dark: #3A342B;       /* hairline on dark sections */

  /* ---- Typography (rivr-web spec — Polish 3 swap 2026-05-24) ----
     Display swapped Cormorant Garamond → Geist sans. Reason: italic
     Cormorant accent treatments (.serif italic on display headlines)
     read as the AI-generated marketing site visual cliché. Geist is
     already loaded for the Lumera-styled funnel inside IntegrationSection
     (Polish 2); reusing it for global display keeps a single sans family.
     Body (Source Serif 4) and mono (JetBrains Mono) unchanged. */
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ---- Spacing & rhythm (rivr-web spec) ----
     --space-section reduced 120px → 88px in Polish 3 / Task 4 (-27%).
     Founder feedback: page had too much vertical whitespace between
     sections. Cascades to .section { padding-block: var(--space-section) }
     and via overrides on .reference-builds + .integration-section. Mobile
     unchanged (mobile already felt right). */
  --space-section: 88px;            /* desktop section vertical padding */
  --space-section-mobile: 80px;     /* mobile section vertical padding */
  --space-max-width: 1200px;        /* default content max-width */
  --space-prose-width: 760px;       /* prose-heavy sections */

  /* ---- Back-compat aliases (existing selectors reference these) ---- */
  --color-bg: var(--color-background);
  --color-bg-elevated: var(--color-surface);
  --color-bg-dark: var(--color-dark-bg);
  --color-bg-dark-elevated: #3A342B;
  --color-text-primary: var(--color-text);
  --color-text-primary-inverse: var(--color-dark-text);
  --color-text-muted: var(--color-text-subtle);
  --color-text-muted-inverse: #B8AB9C;
  --color-accent-hover: var(--color-walnut);  /* accents/links deepen to walnut on hover */

  --font-sans: var(--font-body);
  --font-serif: var(--font-display);

  --container-max: var(--space-max-width);
  --container-prose: var(--space-prose-width);
  --container-gutter: clamp(1.5rem, 4vw, 3rem);

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-rivr: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 240ms;
  --dur-base: 500ms;
  --dur-slow: 800ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img { display: block; max-width: 100%; }

::selection {
  background: var(--color-accent);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Typography helpers */
.text-display-1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
  text-wrap: balance;
}
.text-display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.8vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.text-body-lg {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.text-label-caps {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
/* Dark sections keep the light gold (better contrast on near-black). */
.section-dark .text-label-caps,
.closing-cta .text-label-caps { color: var(--color-accent); }

/* Polish 3: .serif was Cormorant italic accent treatment on display headlines.
   Italic Cormorant accents read as AI-generated marketing visual cliché, so
   the italic + serif font swap is removed. The class is preserved for markup
   compatibility — accent emphasis on these spans now comes from the inline
   color style ({color: var(--color-accent)}) plus a subtle weight bump. */
.serif { font-style: normal; font-weight: 700; }

.container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-gutter); }

/* ========================================================================
   NAV — sticky pill with scroll-state
   ======================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0;
  pointer-events: none;
  transition: padding var(--dur-base) var(--ease-rivr);
}
.nav.scrolled { padding: 10px 0; }

/* Skip-to-content — visually hidden until focused */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  pointer-events: auto;
  background: var(--color-text-primary); color: var(--color-bg);
  padding: 10px 16px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-rivr);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--color-accent); outline-offset: 2px; }

.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  background: rgba(var(--color-background-rgb), 0.72);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(229, 229, 229, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-base) var(--ease-rivr), box-shadow var(--dur-base) var(--ease-rivr);
}
.nav.scrolled .nav-inner {
  background: rgba(var(--color-surface-rgb), 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 40px -20px rgba(0, 0, 0, 0.18);
}
.nav-brand {
  margin-right: 14px;
  display: flex; align-items: center;
  transition: transform var(--dur-fast) var(--ease-rivr);
}
.nav-brand .wordmark {
  /* Polish 3: explicit 700 (was 600). Geist needs the bump vs Cormorant's
     optical weight to read with the same presence. */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  line-height: 1;
}
.nav-brand:hover { transform: translateY(-1px); }

.nav-link {
  padding: 10px 14px 12px;
  font-size: 1rem; font-weight: 500;
  color: var(--color-text-muted);
  position: relative;
  /* Polish 4 / Task 1: hover bg pill on links — cursor "warms" the surface */
  border-radius: 999px;
  transition: color 180ms ease-in-out, background-color 180ms ease-in-out;
}
/* Underline element — sits below the label, slides + fades on state change. */
.nav-link::after {
  content: ""; position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1.5px;
  background: var(--color-walnut);
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition:
    opacity var(--dur-base) var(--ease-rivr),
    transform var(--dur-base) var(--ease-rivr),
    background-color var(--dur-fast) var(--ease-rivr);
}
.nav-link:hover { color: var(--color-text-primary); background-color: var(--bg-cream-hover); }
.nav-link:hover::after { opacity: 0.5; transform: scaleX(1); }
.nav-link.active { color: var(--color-text-primary); }
.nav-link.active::after { opacity: 1; transform: scaleX(1); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px 12px 22px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--color-text-primary); color: var(--color-bg);
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.005em;
  transition:
    background var(--dur-fast) var(--ease-rivr),
    transform var(--dur-fast) var(--ease-rivr),
    box-shadow var(--dur-fast) var(--ease-rivr);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
}
.nav-cta:hover {
  background: var(--color-walnut);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(139, 90, 60, 0.5);
}
.nav-cta:active { transform: translateY(0) scale(0.97); }
.nav-cta .arr { display: inline-block; transition: transform var(--dur-fast) var(--ease-rivr); }
.nav-cta:hover .arr { transform: translateX(3px); }

/* Mobile hamburger + slide-in drawer (shown ≤600px where top-bar links hide) */
.nav-toggle {
  display: none; pointer-events: auto;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 38px; height: 38px; border-radius: 999px;
  margin-left: 2px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--color-text-primary);
  transition: transform var(--dur-fast) var(--ease-rivr), opacity var(--dur-fast) var(--ease-rivr);
}
.nav-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.nav-drawer.is-open { visibility: visible; pointer-events: auto; }
.nav-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-rivr);
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(80vw, 320px);
  background: var(--color-bg-elevated);
  box-shadow: -24px 0 70px -30px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 4px;
  padding: 92px 22px 28px;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-rivr);
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-panel .nav-link {
  display: block; font-size: 1.0625rem; font-weight: 500;
  padding: 14px 12px; border-radius: 10px; color: var(--color-text-primary);
}
.nav-drawer-panel .nav-link.active { color: var(--color-accent-strong); }
.nav-drawer-panel .nav-link::after { display: none; }
.nav-drawer-panel .btn { margin-top: 14px; justify-content: center; }

/* ========================================================================
   BUTTON — pressable with shadow + scale
   ======================================================================== */
/* rivr-web button system (Phase 1): translateY(-1px) lift + shadow elevation
   on hover, all 200ms ease. Primary fills amber → walnut on hover; secondary
   is a walnut outline that fills walnut on hover. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 600; line-height: 1;
  border-radius: 8px;
  transition: all 200ms ease;
  position: relative;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent); color: var(--color-text);
  padding: 14px 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
              0 8px 18px -8px rgba(var(--color-accent-rgb), 0.5);
}
.btn-primary:hover {
  background: var(--color-walnut); color: var(--color-dark-text);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
              0 14px 28px -10px rgba(139, 90, 60, 0.55);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 10px -6px rgba(139, 90, 60, 0.5);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-walnut);
  color: var(--color-walnut);
  padding: 13px 19px;
}
.btn-secondary:hover {
  background: var(--color-walnut);
  color: var(--color-background);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(139, 90, 60, 0.5);
}
.btn-secondary:active { transform: translateY(1px) scale(0.98); }

.btn .arr {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-rivr);
}
.btn:hover .arr { transform: translateX(4px); }

/* Dark-section variants */
.btn-on-dark.btn-primary { background: var(--color-accent); color: var(--color-text); }
.btn-on-dark.btn-secondary { border-color: var(--color-accent); color: var(--color-accent); }
.btn-on-dark.btn-secondary:hover { background: var(--color-accent); color: var(--color-text); }

/* CTA reassurance lines (risk-reversal + HIPAA/BAA) */
.cta-reassure {
  list-style: none; display: flex; flex-direction: column; gap: 7px;
  margin-top: 18px; font-size: 0.8125rem; color: var(--color-text-muted);
}
.cta-reassure.is-center { align-items: center; }
.cta-reassure li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.cta-reassure .ck { color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
.section-dark .cta-reassure { color: var(--color-text-muted-inverse); }

/* ========================================================================
   FOOTER
   ======================================================================== */
.footer {
  background: var(--color-bg-dark); color: var(--color-text-primary-inverse);
  border-top: 1px solid var(--color-rule-dark);
  position: relative; overflow: hidden;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  padding-block: 80px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }

.footer h4 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted-inverse); margin-bottom: 14px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer a {
  font-size: 0.9375rem;
  transition: color var(--dur-fast) var(--ease-rivr);
}
.footer a:hover { color: var(--color-accent); }
.footer-brand-name {
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.footer-brand-name .mk {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-accent); color: var(--color-bg-dark);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 16px;
}
.footer address {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted-inverse); font-style: normal;
  line-height: 1.7; margin-top: 18px;
}
.footer-bottom {
  border-top: 1px solid var(--color-rule-dark);
  padding-block: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 0.8125rem; color: var(--color-text-muted-inverse);
}
.footer-bottom ul { flex-direction: row; gap: 20px; }

.footer-watermark {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: rgba(var(--color-accent-rgb), 0.04);
  pointer-events: none; line-height: 1;
  font-family: var(--font-serif); font-style: italic;
}

/* ========================================================================
   Reveal primitives
   ======================================================================== */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 800ms var(--ease-rivr), transform 800ms var(--ease-rivr);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-mask {
  display: block;
  overflow: hidden;
  line-height: inherit;
  /* Asymmetric padding-block gives italic descenders ("y" in "you" / "already")
     room inside the mask without changing line rhythm noticeably. */
  padding: 0.06em 0 0.22em;
}
.reveal-mask > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease-rivr);
  will-change: transform;
  max-width: 100%;
}
.reveal-mask.in > span,
.in > .reveal-mask > span,
.in .reveal-mask > span { transform: translateY(0); }

.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-rivr);
}
.reveal-clip.in,
.in > .reveal-clip,
.in .reveal-clip { clip-path: inset(0 0 0 0); }

/* Image mask reveal (used for hero / about photos) */
.img-mask {
  clip-path: inset(8% 8% 8% 8% round 14px);
  transition: clip-path 1400ms var(--ease-rivr);
  will-change: clip-path;
}
.img-mask.in { clip-path: inset(0% 0% 0% 0% round 14px); }

/* ========================================================================
   Browser frame chrome (used for screenshots)
   ======================================================================== */
.browser {
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.22);
}
.browser .bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-surface-muted);
}
.browser .bar i {
  display: block; width: 10px; height: 10px; border-radius: 50%;
}
.browser .bar i:nth-child(1) { background: #FF5F57; }
.browser .bar i:nth-child(2) { background: #FEBC2E; }
.browser .bar i:nth-child(3) { background: #28C840; }
.browser .bar .u {
  margin-left: 10px;
  font-size: 0.75rem; color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.browser .bar .preview-tag {
  margin-left: auto;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-rule); border-radius: 999px;
  padding: 2px 8px; background: var(--color-surface);
}
.browser .body { position: relative; aspect-ratio: 16 / 10; background: var(--color-surface); }
.browser .body img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Custom blend-mode cursor removed (de-AI pass, 2026-05-20) — read as
   portfolio-gimmick and added nothing on touch. */

/* ========================================================================
   Page heroes
   ======================================================================== */
.hero-stage {
  position: relative;
  min-height: 100vh;
  display: grid; align-items: center;
  /* Extra bottom padding clears italic descenders from the section border. */
  padding: var(--space-section) 0 calc(var(--space-section-mobile) + 24px);
  overflow: hidden;
  border-bottom: 1px solid var(--color-rule);
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hero-spotlight {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse 50% 40% at var(--mx, 50%) var(--my, 40%),
              rgba(var(--color-accent-rgb), 0.18), transparent 60%);
  pointer-events: none;
  transition: background var(--dur-slow) var(--ease-rivr);
}

/* Floating decorative chip cards in hero */
.hero-chip {
  position: absolute;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: 12px; padding: 10px 14px;
  font-size: 0.8125rem; font-weight: 500;
  box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; gap: 10px;
  will-change: transform;
}
.hero-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.18);
}
.hero-chip-confirm {
  background: var(--color-bg-dark); color: var(--color-text-primary-inverse);
  border-color: var(--color-rule-dark);
}
.hero-chip-confirm .dot { background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(122, 140, 110, 0.25); }

/* ========================================================================
   Hero v3 (Polish 3 / Task 1) — problem-focused before/after rebuild
   ------------------------------------------------------------------------
   Two-column hero: headline + sub + CTAs on the left, before/after visual
   on the right. Replaces the previous single-column editorial hero.
   ======================================================================== */
.hero-v3 {
  min-height: 86vh;            /* spec: 80-90vh desktop */
  padding-top: 120px;
  /* Polish 5 / Task 3: bottom padding tightened 80 → 64 (-20%) to shrink
     the gap between the hero and the CredibilityStats below. The hero's
     visual frame already extends most of the section's vertical space; the
     extra 16px of pure bottom padding was disconnecting the cost claim
     from the stat that backs it. */
  padding-bottom: 64px;
}
@media (max-width: 1024px) {
  .hero-v3 { min-height: auto; padding-top: 96px; padding-bottom: 64px; }
}
/* Polish 5 / Task 3: the .section directly after the hero (CredibilityStats
   on home) gets its padding-top reduced 88 → 64. Scoped to .hero-v3 so it
   only fires on home — /about's FoundersSection (after .hero-stage with no
   .hero-v3 class) keeps the default --space-section value. */
.hero-v3 + .section { padding-top: 64px; }
@media (max-width: 900px) {
  .hero-v3 + .section { padding-top: var(--space-section-mobile); }
}
.hero-v3-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1024px) {
  .hero-v3-grid { grid-template-columns: 1fr; gap: 48px; }
}
.hero-v3-copy { max-width: 620px; }
.hero-v3-headline {
  /* Spec: ~3.5-4rem desktop, ~2.5rem mobile, Geist 600-700, NO italic.
     Capped at 3.25rem (52px) so the three line-groups
     ("Your booking page is" / "costing you" / "1 in 4 patients.") each fit
     on a single visual line at the ~620px copy column. Above ~52px,
     "Your booking page is" overflows and the line stranded "is" on its own. */
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
/* Accent emphasis on "1 in 4 patients" — color contrast (walnut against
   graphite) + lighter weight to keep visual quiet vs the bold cost claim. */
.hero-v3-emph {
  color: var(--color-walnut);
  font-weight: 600;
}
.hero-v3-sub {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  margin: 28px 0 32px;
  max-width: 540px;
  color: var(--color-text);
}
.hero-v3-cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 28px;
}
.hero-v3-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  padding: 4px 10px 4px 10px;
  border-radius: 6px;
  /* Polish 4 / Task 1: cream-hover surface lights up under cursor */
  transition: color 180ms ease-in-out, border-color 180ms ease-in-out, background-color 180ms ease-in-out;
}
.hero-v3-cta-secondary:hover {
  color: var(--color-walnut);
  border-bottom-color: transparent;
  background-color: var(--bg-cream-hover);
}
.hero-v3-cta-secondary .arr { display: inline-block; transition: transform var(--dur-fast) var(--ease-rivr); }
.hero-v3-cta-secondary:hover .arr { transform: translateY(2px); }

/* ── Hero single-panel stage cycling 3 booking-page states (Polish 7) ────
   Replaces the side-by-side .hero-v3-broken + .hero-v3-arrow + .hero-v3-after
   layout from Polish 6. The chevron arrow is gone: sequential storytelling
   through time replaces the spatial directional cue. The stage holds three
   absolutely-positioned children that crossfade across a ~15s cycle.
   ======================================================================== */
.hero-v3-visual {
  display: block;
  width: 100%;
}
.hero-v3-stage {
  position: relative;
  width: 100%;
  /* Polish 10: bumped 520 → 640 to fit the new practice-site chrome on
     States 1 + 2 (nav + hero image + cta + info + footer). State 3
     funnel content sits comfortably in this taller container too. */
  min-height: 640px;
  margin-block: 4px;
}
@media (max-width: 1024px) { .hero-v3-stage { min-height: 560px; } }

/* All three states overlap absolutely inside the stage. Crossfade via
   opacity (+ subtle translateY on State 3 for the "lands" entrance).
   pointer-events: none across the board — this is a visual demo, not
   interactive. */
.hero-v3-state {
  position: absolute; inset: 0;
  background: #FFFFFF;
  border: 1px solid #D8D5CF;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  pointer-events: none;
  opacity: 0;
}
.hero-v3-state-phone { opacity: 1; }   /* default first-render state */

/* Shared head + foot (states 1 + 2 — dated, muted register) */
.hero-v3-state-head {
  padding: 12px 18px;
  border-bottom: 1px solid #D8D5CF;
  background: #FBF8F3;
}
.hero-v3-state-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem; font-weight: 500;
  letter-spacing: 0.01em;
  color: #2B2620;
}
.hero-v3-state-foot {
  margin-top: auto;
  padding: 10px 18px;
  border-top: 1px solid #EFEDE6;
  background: #FBF8F3;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #8A8278;
}
.hero-v3-state-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-walnut);
  margin: 0;
}
.hero-v3-state-h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.012em;
  color: #2B2620;
  line-height: 1.2;
  margin: 0;
}
.hero-v3-state-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #6E6157;
  margin: 0;
  line-height: 1.4;
}

/* ── State 1 palette (Coastal Aesthetic Studio — Polish 9) ──────────────
   Cool slate/navy templated boutique look. Distinct from RIVR's warm
   walnut and from State 2's dove gray. The "Doesn't call" overlay stays
   walnut — that's RIVR's voice annotating the broken site. */
.hero-v3-state-phone {
  background: #FAFAFA;
  border-color: #E2E5E8;
}
.hero-v3-state-phone .hero-v3-state-head {
  background: #F4F5F6;
  border-bottom-color: #E2E5E8;
}
.hero-v3-state-phone .hero-v3-state-brand {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2B2620;
}
.hero-v3-state-phone .hero-v3-state-eyebrow { color: #7A8794; }
.hero-v3-state-phone .hero-v3-state-foot {
  background: #F4F5F6;
  border-top-color: #E2E5E8;
  color: #7A8794;
}
.hero-v3-state-phone .hero-v3-phone-cta {
  /* Polish 11 / Fix 2: refined visual — subtle slate-tinted inner border
     plus a layered soft shadow instead of the single tonal shadow. Reads
     as a designed component, not a stark white rectangle. */
  background: #FFFFFF;
  border: 1px solid rgba(59, 82, 102, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(59, 82, 102, 0.06);
}
.hero-v3-state-phone .hero-v3-phone-icon { color: #3B5266; }
.hero-v3-state-phone .hero-v3-phone-hours { color: #7A8794; }
.hero-v3-state-phone .hero-v3-phone-location { color: #99A3AD; }

/* ── State 2 palette (Magnolia Wellness Co. — Polish 9) ─────────────────
   Warm-neutral dove gray + taupe templated wellness look. Distinct from
   State 1's slate and from RIVR's walnut. */
.hero-v3-state-form {
  background: #F2F0EE;
  border-color: #DCD7D2;
}
.hero-v3-state-form .hero-v3-state-head {
  background: #ECE9E5;
  border-bottom-color: #DCD7D2;
}
.hero-v3-state-form .hero-v3-state-brand {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #2B2620;
}
.hero-v3-state-form .hero-v3-state-h3 {
  /* Faint hint of the taupe in the H3 so it doesn't look identical to State 1 */
  color: #2B2620;
}
.hero-v3-state-form .hero-v3-state-sub { color: #A89684; }
.hero-v3-state-form .hero-v3-state-foot {
  background: #ECE9E5;
  border-top-color: #DCD7D2;
  color: #A89684;
}
/* Polish 11 / Fix 4: Magnolia form fields read as warm boutique wellness,
   not stark Bootstrap defaults. Subtle warm-tinted background, soft taupe
   border at low opacity, deliberate 4px border-radius. Labels switch from
   tiny Inter sans to Source Serif 4 sentence-case — the typography shift
   is what flips the form from "wireframe" to "real boutique site." */
.hero-v3-state-form .hero-v3-form-field label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #A89684;
  margin-bottom: 4px;
}
.hero-v3-state-form .hero-v3-form-field .inp {
  background: #FBFAF8;
  border: 1px solid rgba(168, 150, 132, 0.18);
  border-radius: 4px;
}
.hero-v3-state-form .hero-v3-form-field .inp:focus,
.hero-v3-state-form .hero-v3-form-field .inp:focus-within {
  border-color: rgba(168, 150, 132, 0.5);
}
.hero-v3-state-form .hero-v3-form-field .inp.select {
  background-color: #FBFAF8;
}
.hero-v3-state-form .hero-v3-form-submit {
  background: #6B6157;
  color: #FFFFFF;
}
/* "Magnolia" defaults to a basic-template blue accent on any link-styled text */
.hero-v3-state-form a,
.hero-v3-state-form .hero-v3-form-link { color: #2C5282; }

/* Polish 10 / C4: narrow-viewport responsive — compress the chrome on
   mobile so the panel doesn't feel cramped. Below 600px the nav menu
   reduces to fewer links, info row stacks to a single column, the hero
   image strip shrinks. */
@media (max-width: 600px) {
  .hero-v3-site-nav { padding: 10px 14px; }
  .hero-v3-site-logo { width: 110px; }
  .hero-v3-site-links { gap: 6px; font-size: 0.6875rem; }
  /* Hide every other nav link to keep the row clean — keeps About + Book */
  .hero-v3-site-links span:nth-child(3),
  .hero-v3-site-links span:nth-child(4),
  .hero-v3-site-links span:nth-child(5),
  .hero-v3-site-links span:nth-child(6) { display: none; }
  .hero-v3-site-hero { height: 140px; }
  .hero-v3-site-hero-short { height: 96px !important; }
  .hero-v3-site-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
  }
  .hero-v3-site-foot { padding: 8px 14px; font-size: 0.5625rem; }
  .hero-v3-site-poweredby { display: none; }
}

/* ── Practice-site chrome (Polish 10) — shared structural styles for the
   nav, hero image, info row, footer, and templated tells across both
   Coastal (.hero-v3-state-phone) and Magnolia (.hero-v3-state-form).
   Palette tokens are overridden per-state below. ──────────────────────── */
.hero-v3-state-phone .hero-v3-phone-body,
.hero-v3-state-form .hero-v3-form-body {
  /* Override the old centered-flex CTA-only layout. Practice-site chrome
     stacks vertically top-to-bottom inside the panel. */
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: 0;
  gap: 0;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}

/* 1. Top nav strip */
.hero-v3-site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  gap: 16px;
  border-bottom: 1px solid #D8D5CF;
  flex-shrink: 0;
}
.hero-v3-site-logo {
  display: block;
  /* The Higgsfield wordmark assets are 21:9 with substantial whitespace
     padding around the visible text. Using object-fit: cover with a
     ~6:1 container crops the whitespace and shows the text band. */
  height: 22px;
  width: 140px;
  object-fit: cover;
  object-position: center;
}
.hero-v3-site-links {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}
.hero-v3-site-links .dot { opacity: 0.5; }

/* 2. Hero image section */
.hero-v3-site-hero {
  position: relative;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
}
.hero-v3-site-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
/* Polish 11: headline copy sits in a bottom fade-band rather than a
   full-image wash. justify-content: flex-end pushes the eyebrow +
   headline down; the per-state gradient creates a soft contrast
   pad behind them while keeping the upper half of the image visible. */
.hero-v3-site-hero-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 16px 24px 22px;
  gap: 8px;
}
.hero-v3-state-phone .hero-v3-site-hero-copy {
  /* Coastal panel pass: gradient was washing the coastal-interior photo
     out to nearly invisible. Dropped 0.85→0.55 @60% and 0.95→0.75 @100%
     so the room reads as a real photograph while the headline still
     gets enough contrast pad to be legible. */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0.75) 100%);
}
.hero-v3-state-form .hero-v3-site-hero-copy {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(247, 244, 240, 0.90) 60%,
    rgba(247, 244, 240, 0.98) 100%);
}
.hero-v3-state-phone .hero-v3-state-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: #7A8794;
}
.hero-v3-state-phone .hero-v3-state-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #3B5266;
}
.hero-v3-state-form .hero-v3-state-h3 {
  font-size: 1.4rem;
}

/* 3. CTA wrapper (State 1) — centers the phone CTA box on a fresh row.
   Coastal panel pass: top padding 18→20 (hero→CTA gap = 20px per spec),
   bottom padding stays 14 (CTA→services gap = 14px). */
.hero-v3-site-cta-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 24px 14px;
  flex-shrink: 0;
}
.hero-v3-state-phone .hero-v3-phone-cta {
  /* Polish 11 / Fix 2: padding 14/22 → 14/24 for slightly more breathing
     room; gap 12 → 14 between icon and number; full pill border-radius
     so the card reads as an intentional designed component.
     Coastal panel pass: constrain to ~70% of the inner content width
     (panel inner is roughly 360px → max 252px) and centre, so the CTA
     stops dominating the panel as the only "real" element. */
  padding: 14px 24px;
  gap: 14px;
  margin-top: 0;
  border-radius: 999px;
  width: 70%;
  max-width: 260px;
  justify-content: center;
}
.hero-v3-state-phone .hero-v3-phone-num {
  /* Was 1.625/700/-0.012 — overweighted relative to the new restrained
     CTA card. Now 1.5/500/-0.01 — designed, not bombastic.
     Coastal panel pass: 1.5 → 1.3125rem so the number stops out-shouting
     the headline + services strip; weight + colour unchanged. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #3B5266;
}
.hero-v3-state-phone .hero-v3-phone-icon { width: 22px; height: 22px; }

/* 3b. Services strip (State 1) — small mono category labels separated
   by mid-dots. Sits between the phone CTA and the info row to add
   visual density and signal "real practice with real services" rather
   than a phone-number callout. State 1 only — State 2 (Magnolia) uses
   the form for the equivalent role. */
.hero-v3-site-services {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(59, 82, 102, 0.06);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #7A8794;
  flex-shrink: 0;
}
.hero-v3-site-services .dot { opacity: 0.5; }

/* 4. Info row */
.hero-v3-site-info {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  gap: 12px;
  flex-shrink: 0;
}
.hero-v3-state-phone .hero-v3-site-info { border-top-color: #E2E5E8; color: #7A8794; }
.hero-v3-state-form  .hero-v3-site-info { border-top-color: #DCD7D2; color: #A89684; }

/* 5. Footer strip */
.hero-v3-site-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  gap: 12px;
  border-top: 1px solid;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.hero-v3-state-phone .hero-v3-site-foot {
  border-top-color: #EFEDE6;
  background: #F4F5F6;
  color: #7A8794;
}
.hero-v3-state-form .hero-v3-site-foot {
  border-top-color: #EFEDE6;
  background: #ECE9E5;
  color: #A89684;
}
.hero-v3-site-copy { flex: 1; }
.hero-v3-site-socials {
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-v3-site-socials .social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.hero-v3-site-poweredby {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  white-space: nowrap;
}

/* ── State 1 chrome palette overrides (Coastal) ─────────────────────── */
.hero-v3-state-phone .hero-v3-site-nav {
  background: #FFFFFF;
  border-bottom-color: #E2E5E8;
}
.hero-v3-state-phone .hero-v3-site-links { color: #7A8794; }
.hero-v3-state-phone .hero-v3-site-hero-img {
  background-image: url("imagery/hero/coastal-interior.png");
  /* Coastal panel pass: gentle saturation + contrast lift so the
     coastal-interior shot reads as a real photograph instead of a
     faded stock placeholder. State 2 (Magnolia) intentionally
     unchanged. */
  filter: saturate(1.08) contrast(1.05);
}

/* ── State 2 chrome palette overrides (Magnolia) ─────────────────────── */
.hero-v3-state-form .hero-v3-site-nav {
  background: #F8F6F3;
  border-bottom-color: #DCD7D2;
}
.hero-v3-state-form .hero-v3-site-links { color: #A89684; }
.hero-v3-state-form .hero-v3-site-hero-img {
  background-image: url("imagery/hero/magnolia-interior.png");
}
/* Magnolia's hero strip is shorter to leave room for the longer form below */
.hero-v3-site-hero-short { height: 120px !important; }
.hero-v3-state-form .hero-v3-site-hero-short .hero-v3-state-h3 {
  font-size: 1.125rem;
}

/* Form wrap (State 2) — replaces the old centered-flex form-body padding */
.hero-v3-site-form-wrap {
  padding: 14px 18px 12px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.hero-v3-site-form-wrap .hero-v3-form-grid {
  margin-top: 0;
  gap: 7px 10px;
}
/* Polish 11: label-size override removed — Magnolia palette now sets
   labels at 0.75rem Source Serif 4. Other practice sites using this
   wrapper class would inherit the base label sizing. */
.hero-v3-site-form-wrap .hero-v3-form-field .inp {
  height: 26px;
}
.hero-v3-site-form-wrap .hero-v3-form-submit {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 0.75rem;
  margin-top: 2px;
}
.hero-v3-form-disclaimer {
  /* Polish 11 / Fix 5: was mono italic — read as dev tooling. Now serif
     italic in Magnolia's body register, sized for legibility. */
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #A89684;
  margin: 0;
}

/* Overlay shared by states 1 + 2 ("Doesn't call/submit → books elsewhere") */
.hero-v3-state-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(43, 38, 32, 0.04) 0%,
    rgba(43, 38, 32, 0.18) 100%);
  opacity: 0;
  z-index: 3;
}
.hero-v3-state-overlay span {
  font-family: var(--font-mono);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-walnut);
  background: var(--bg-cream-hover);
  border: 1px solid var(--color-walnut);
  padding: 10px 16px;
  border-radius: 999px;
}
.hero-v3-state-overlay small {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ── State 1 — phone "Call to book" booking page ─────────────────────── */
.hero-v3-phone-body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 28px;
  gap: 16px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2B2620;
}
.hero-v3-phone-cta {
  /* Polish 8 audit: more visual weight on the CTA — was reading as a quiet
     bordered box. Bigger padding, soft warm shadow lifts it as the focal
     point of the panel. */
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 32px;
  background: #FFFFFF;
  border: 1px solid #D8D5CF;
  border-radius: 10px;
  margin-top: 6px;
  box-shadow: 0 12px 24px -16px rgba(43, 38, 32, 0.18);
}
.hero-v3-phone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: #2B2620;
  width: 28px; height: 28px;
}
.hero-v3-phone-icon svg { display: block; }
.hero-v3-phone-num {
  /* Polish 8 audit: number was 2rem/600 — felt under-weighted vs. the
     headline. Bump to 2.25rem/700 with tighter tracking. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2.25rem; font-weight: 700;
  letter-spacing: -0.018em;
  color: #2B2620;
  white-space: nowrap;
}
.hero-v3-phone-hours {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  color: #6E6157;
  margin: 0;
  letter-spacing: 0.01em;
}
.hero-v3-phone-location {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  color: #8A8278;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}
.hero-v3-phone-location em { font-style: italic; }

/* ── State 2 — contact form booking page ─────────────────────────────── */
.hero-v3-form-body {
  flex: 1;
  padding: 22px 24px 20px;
  display: flex; flex-direction: column;
  gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2B2620;
  overflow: hidden;
}
.hero-v3-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
  margin-top: 4px;
}
.hero-v3-form-field { display: flex; flex-direction: column; gap: 4px; }
.hero-v3-form-full { grid-column: 1 / -1; }
.hero-v3-form-field label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6875rem; font-weight: 500;
  color: #6E6157;
}
.hero-v3-form-field .inp {
  display: flex;
  align-items: center;
  height: 28px;
  background: #F7F5F0;
  border: 1px solid #D8D5CF;
  border-radius: 3px;
  position: relative;
}
.hero-v3-form-field .inp.tall { height: 52px; }
.hero-v3-form-field .inp.select {
  background-image:
    linear-gradient(135deg, transparent 50%, #6E6157 50%),
    linear-gradient(45deg,  transparent 50%, #6E6157 50%);
  background-position: calc(100% - 18px) 13px, calc(100% - 13px) 13px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  background-color: #F7F5F0;
}
.hero-v3-form-submit {
  align-self: flex-start;
  padding: 9px 16px;
  background: #6E6157;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 3px;
  border: 0;
  cursor: default;
  margin-top: 2px;
}

/* Typing text inside the Name input — only renders while animating.
   Parent .inp uses display: flex + align-items: center so the typing
   and caret render vertically centered without depending on line-height
   math. (Earlier line-height: 26px overflowed the new 26px input box
   by 3px on the bottom.) */
.hero-v3-typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #2B2620;
  padding-left: 8px;
  max-width: 0;
}
.hero-v3-caret {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #6E6157;
  margin-left: 2px;
  opacity: 0;
}

/* ── State 3 — RIVR funnel resolution ────────────────────────────────── */
.hero-v3-state-funnel {
  background: var(--color-surface);
  border-color: var(--color-rule);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.16);
}
.hero-v3-funnel-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-background);
}
.hero-v3-funnel-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.hero-v3-funnel-stepbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-background);
}
.hero-v3-funnel-stepcount {
  position: relative;
  min-width: 88px;
  height: 14px;
  display: inline-block;
}
.step-label {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
}
.step-label-1 { opacity: 1; }
.hero-v3-funnel-steps {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0;
}
.step-dot {
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
}
.step-dot .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-rule);
  background: transparent;
}
.step-dot-1 .dot { background: var(--color-walnut); border-color: var(--color-walnut); }

.hero-v3-funnel-body {
  flex: 1;
  position: relative;
  padding: 22px 22px 18px;
}
.hero-v3-funnel-view {
  position: absolute;
  inset: 22px 22px 18px;
  opacity: 0;
}
.hero-v3-funnel-service { opacity: 1; }

.hero-v3-funnel-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-walnut);
  margin: 0 0 6px;
}
.hero-v3-funnel-title {
  font-family: var(--font-display);
  font-size: 1.3125rem; font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-text);
  margin: 0 0 4px;
}
.hero-v3-funnel-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.hero-v3-funnel-cards { display: grid; gap: 10px; }
.hero-v3-funnel-card {
  background: #FFFFFF;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  padding: 14px 16px 14px;
  /* Polish 8 audit: soft elevation on idle cards adds polish vs. flat fields */
  box-shadow: 0 4px 12px -8px rgba(43, 38, 32, 0.08);
}
.hero-v3-funnel-card.is-highlight {
  /* Polish 8 audit: highlighted card now reads as the selected option —
     thicker walnut left rail + slightly deeper shadow. */
  border-color: var(--color-walnut);
  background: var(--bg-cream-hover);
  box-shadow: inset 3px 0 0 var(--color-walnut), 0 6px 14px -8px rgba(139, 90, 60, 0.18);
  padding-left: 14px;
}
.hero-v3-funnel-card .row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.hero-v3-funnel-card h4 {
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.hero-v3-funnel-card .price {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.hero-v3-funnel-card p {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 6px;
  line-height: 1.42;
}
.hero-v3-funnel-card .meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}
.hero-v3-funnel-card .meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary);
}
.hero-v3-funnel-more {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px;
  border: 1px dashed var(--color-rule);
  border-radius: 6px;
  opacity: 0.7;
}

.hero-v3-funnel-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-v3-funnel-slot {
  background: #FFFFFF;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  cursor: default;
  opacity: 0;
}
.hero-v3-funnel-slot.is-highlight {
  border-color: var(--color-walnut);
  background: var(--bg-cream-hover);
}
.hero-v3-funnel-slot .day {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-v3-funnel-slot .time {
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 500;
  color: var(--color-text);
}

/* ── Step 3 view — confirm booking (Polish 8) ────────────────────────── */
.hero-v3-funnel-summary {
  display: grid;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  padding: 4px 14px;
  margin: 0 0 14px;
}
.hero-v3-funnel-summary > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
.hero-v3-funnel-summary > div + div {
  border-top: 1px solid var(--color-rule);
}
.hero-v3-funnel-summary dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin: 0;
}
.hero-v3-funnel-summary dd {
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 500;
  color: var(--color-text);
  margin: 0;
  text-align: right;
}
.hero-v3-funnel-confirm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  background: var(--color-text);
  color: var(--color-background);
  font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 6px;
  cursor: default;
  margin-top: 2px;
}
.hero-v3-funnel-confirm-btn .arr { display: inline-block; transition: transform 200ms var(--ease-rivr); }

/* ── Step 4 view — booking confirmed payoff beat (Polish 8) ────────────
   Audit notes: was a small sage checkmark — read more "task done" than
   "booking confirmed payoff." Switched to walnut to match the brand
   accent that's been carrying highlight state across the cycle. Bumped
   the check size and added a soft cream-hover halo behind it so the
   beat feels celebratory rather than utility. */
.hero-v3-funnel-done {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-top: 8px;
  gap: 10px;
}
.hero-v3-funnel-done-check {
  color: var(--color-walnut);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  background: var(--bg-cream-hover);
  border-radius: 50%;
}
.hero-v3-funnel-done-check svg { display: block; }
.hero-v3-funnel-done-title {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.12;
}
.hero-v3-funnel-done-detail {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}
.hero-v3-funnel-done-sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Animation bindings (18s loop — Polish 9: extended +1s for initial
   cursor-click beat on State 3 entry; Polish 8 added confirm + done) ── */
.hero-v3-visual.is-animating .hero-v3-state-phone {
  animation: hero-anim-state1-show 18s linear infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-form {
  animation: hero-anim-state2-show 18s linear infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-funnel {
  animation: hero-anim-state3-show 18s linear infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-phone .hero-v3-phone-icon {
  animation: hero-anim-phone-icon-pulse 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-phone .hero-v3-phone-body {
  animation: hero-anim-state1-body-dim 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-phone .hero-v3-state-overlay {
  animation: hero-anim-state1-overlay 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-form .hero-v3-form-body {
  animation: hero-anim-state2-body-dim 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-state-form .hero-v3-state-overlay {
  animation: hero-anim-state2-overlay 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-typing {
  animation: hero-anim-type 18s steps(5, end) infinite;
}
.hero-v3-visual.is-animating .hero-v3-caret {
  animation: hero-anim-caret 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-label-1 {
  animation: hero-anim-step-label-1 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-label-2 {
  animation: hero-anim-step-label-2 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-label-3 {
  animation: hero-anim-step-label-3 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-label-4 {
  animation: hero-anim-step-label-4 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-dot-1 .dot {
  animation: hero-anim-step-dot-1 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-dot-2 .dot {
  animation: hero-anim-step-dot-2 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-dot-3 .dot {
  animation: hero-anim-step-dot-3 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .step-dot-4 .dot {
  animation: hero-anim-step-dot-4 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-service {
  animation: hero-anim-funnel-service 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-time {
  animation: hero-anim-funnel-time 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-confirm {
  animation: hero-anim-funnel-confirm 18s ease-in-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-done {
  animation: hero-anim-funnel-done 18s ease-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-slot.slot-1 {
  animation: hero-anim-slot-1 18s ease-out infinite, hero-anim-slot-highlight 18s ease-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-slot.slot-2 {
  animation: hero-anim-slot-2 18s ease-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-slot.slot-3 {
  animation: hero-anim-slot-3 18s ease-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-slot.slot-4 {
  animation: hero-anim-slot-4 18s ease-out infinite;
}

/* Polish 9: initial cursor + delayed Injectables highlight on State 3 entry */
.hero-v3-visual.is-animating .hero-v3-funnel-cursor {
  animation: hero-anim-funnel-cursor 18s ease-out infinite;
}
.hero-v3-visual.is-animating .hero-v3-funnel-card.is-highlight {
  /* This animation suppresses the static .is-highlight styling for the
     first ~0.7s after State 3 enters, so the card looks idle until the
     cursor lands and clicks it. Snap-on at 55% feels like a click result. */
  animation: hero-anim-card-delay-highlight 18s ease-out infinite;
}

/* Funnel cursor element — sits absolutely inside .hero-v3-state-funnel */
.hero-v3-funnel-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  /* Default off-screen (used in reduced-motion fallback so it stays hidden) */
  transform: translate(70px, -30px);
  filter: drop-shadow(0 2px 4px rgba(43, 38, 32, 0.18));
}
.hero-v3-funnel-cursor svg { display: block; }

/* ── Keyframes (all 18s, percentages map: 1s≈5.56%, 9s=50%, 18s=100%)
   Cycle map:
     0-3.5s  (0-19.44%)      State 1 phone (overlay at 16.67-19.44%)
     4-4.5s  (22.22-25%)     State 1 → State 2 transition
     5-7.2s  (27.78-40%)     Form typing + caret lifecycle
     7.5-8s  (44.12-47.06%)  "Doesn't submit" overlay
     8.5-9s  (50-52.94%)     State 2 → State 3 transition
     9-10s   (52.94-58.82%)  3a Service select (step 1 active)
     10-10.5s (58.82-61.76%) Service → Time transition
     10.5-12s (61.76-70.59%) 3b Time select (step 2 active, slot pulse 67.65%)
     12-12.5s (70.59-73.53%) Time → Confirm transition
     12.5-13.5s (73.53-79.41%) 3c Confirm (step 3 active, summary + CTA)
     13.5-14s (79.41-82.35%) Confirm → Done transition
     14-16.5s (82.35-97.06%) 3d Done (step 4 active, "You're booked.")
     16.5-17s (97.06-100%)   State 3 fade out → loop reset                 */

@keyframes hero-anim-state1-show {
  0%, 20.59% { opacity: 1; }
  23.53% { opacity: 0; }
  97.06% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-anim-state2-show {
  0%, 23.53% { opacity: 0; }
  26.47%, 47.06% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hero-anim-state3-show {
  0%, 50% { opacity: 0; transform: translateY(12px); }
  52.94% { opacity: 1; transform: translateY(0); }
  97.06% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}
@keyframes hero-anim-phone-icon-pulse {
  /* Two pulses during State 1 — at ~1s (5.88%) and ~2s (11.76%) */
  0% { transform: scale(1); }
  5.88% { transform: scale(1.06); }
  8.82% { transform: scale(1); }
  11.76% { transform: scale(1.06); }
  14.71% { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes hero-anim-state1-body-dim {
  /* Phone body dims during overlay (17.65-20.59% = 3-3.5s) */
  0%, 15.88% { opacity: 1; }
  17.65%, 20.59% { opacity: 0.4; }
  22.06%, 100% { opacity: 1; }
}
@keyframes hero-anim-state1-overlay {
  0%, 15.88% { opacity: 0; }
  17.65%, 20.59% { opacity: 1; }
  23.53%, 100% { opacity: 0; }
}
@keyframes hero-anim-state2-body-dim {
  0%, 40.59% { opacity: 1; }
  44.12%, 47.06% { opacity: 0.4; }
  49.41%, 100% { opacity: 1; }
}
@keyframes hero-anim-state2-overlay {
  0%, 42.35% { opacity: 0; }
  44.12%, 47.06% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hero-anim-type {
  /* Typing "Sarah" 5.5-6.7s (32.35-39.41%): width grows via steps(5) */
  0%, 32.35% { max-width: 0; }
  39.41% { max-width: 40px; }
  47.06% { max-width: 40px; }
  50%, 100% { max-width: 0; }
}
@keyframes hero-anim-caret {
  0%, 29.41% { opacity: 0; }
  30.88%, 39.41% { opacity: 1; }
  41.18%, 100% { opacity: 0; }
}

/* ── Step labels — each visible during its own phase, fading in/out at
   transitions. Phases:
     1 (Service): 52.94-58.82% (9-10s)
     2 (Time):    61.76-70.59% (10.5-12s)
     3 (Confirm): 73.53-79.41% (12.5-13.5s)
     4 (Done):    82.35-97.06% (14-16.5s)                                  */
@keyframes hero-anim-step-label-1 {
  0%, 52.94% { opacity: 0; }
  54.41% { opacity: 1; }
  58.82% { opacity: 1; }
  61.18%, 100% { opacity: 0; }
}
@keyframes hero-anim-step-label-2 {
  0%, 60.59% { opacity: 0; }
  62.94% { opacity: 1; }
  70.59% { opacity: 1; }
  72.94%, 100% { opacity: 0; }
}
@keyframes hero-anim-step-label-3 {
  0%, 72.35% { opacity: 0; }
  74.71% { opacity: 1; }
  79.41% { opacity: 1; }
  81.18%, 100% { opacity: 0; }
}
@keyframes hero-anim-step-label-4 {
  0%, 81.18% { opacity: 0; }
  83.53% { opacity: 1; }
  97.06% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Step dots — same phase boundaries as labels ─────────────────────── */
@keyframes hero-anim-step-dot-1 {
  0%, 52.94% { background: var(--color-walnut); border-color: var(--color-walnut); }
  58.82% { background: var(--color-walnut); border-color: var(--color-walnut); }
  61.76%, 100% { background: transparent; border-color: var(--color-rule); }
}
@keyframes hero-anim-step-dot-2 {
  0%, 60% { background: transparent; border-color: var(--color-rule); }
  61.76%, 70.59% { background: var(--color-walnut); border-color: var(--color-walnut); }
  73.53%, 100% { background: transparent; border-color: var(--color-rule); }
}
@keyframes hero-anim-step-dot-3 {
  0%, 71.76% { background: transparent; border-color: var(--color-rule); }
  73.53%, 79.41% { background: var(--color-walnut); border-color: var(--color-walnut); }
  82.35%, 100% { background: transparent; border-color: var(--color-rule); }
}
@keyframes hero-anim-step-dot-4 {
  0%, 80.59% { background: transparent; border-color: var(--color-rule); }
  82.35%, 97.06% { background: var(--color-walnut); border-color: var(--color-walnut); }
  100% { background: transparent; border-color: var(--color-rule); }
}

/* ── Funnel views — each visible during its own phase ────────────────── */
@keyframes hero-anim-funnel-service {
  0%, 52.94% { opacity: 0; transform: translateY(0); }
  54.12% { opacity: 1; transform: translateY(0); }
  60% { opacity: 1; transform: translateY(0); }
  61.76% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-anim-funnel-time {
  0%, 60.59% { opacity: 0; transform: translateY(8px); }
  62.94% { opacity: 1; transform: translateY(0); }
  70.59% { opacity: 1; transform: translateY(0); }
  72.35% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes hero-anim-funnel-confirm {
  0%, 71.76% { opacity: 0; transform: translateY(8px); }
  73.53% { opacity: 1; transform: translateY(0); }
  79.41% { opacity: 1; transform: translateY(0); }
  81.18% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes hero-anim-funnel-done {
  0%, 80.59% { opacity: 0; transform: translateY(12px) scale(0.97); }
  82.35% { opacity: 1; transform: translateY(0) scale(1); }
  97.06% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(1); }
}

/* ── Time slots — visible only during the time phase (61.76-70.59%),
   staggered entrance, then fade out before confirm phase ──────────── */
@keyframes hero-anim-slot-1 {
  0%, 61.76% { opacity: 0; transform: translateY(8px); }
  63.24% { opacity: 1; transform: translateY(0); }
  70.59% { opacity: 1; transform: translateY(0); }
  72.35%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-anim-slot-2 {
  0%, 62.06% { opacity: 0; transform: translateY(8px); }
  63.53% { opacity: 1; transform: translateY(0); }
  70.59% { opacity: 1; transform: translateY(0); }
  72.35%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-anim-slot-3 {
  0%, 62.35% { opacity: 0; transform: translateY(8px); }
  63.82% { opacity: 1; transform: translateY(0); }
  70.59% { opacity: 1; transform: translateY(0); }
  72.35%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-anim-slot-4 {
  0%, 62.65% { opacity: 0; transform: translateY(8px); }
  64.12% { opacity: 1; transform: translateY(0); }
  70.59% { opacity: 1; transform: translateY(0); }
  72.35%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-anim-slot-highlight {
  /* Highlighted "Wed 10:00 AM" pulses at 67-69% (~11.5s) */
  0%, 66% { box-shadow: none; }
  67.65% { box-shadow: 0 0 0 4px rgba(139, 90, 60, 0.28); }
  69.41% { box-shadow: 0 0 0 8px rgba(139, 90, 60, 0); }
  100% { box-shadow: none; }
}

/* ── Cursor across all 4 State 3 phases (Polish 12 Part A / Fix A1) ──
   Cursor persists through Service → Time → Confirm → Done, clicking
   each phase's CTA. Each click is ~400-600ms after phase begin.
   Beat layout (relative to 18s = 100%):
     50%   (9.00s)  State 3 enters; cursor glides in from upper-right
     54%   (9.72s)  Cursor lands on Injectables card (Service)
     54.5% (9.81s)  Click pulse (scale 0.88); Injectables highlight activates
     58.8%-61.8%   Cursor transitions to Time view between phases
     63%   (11.34s) Cursor lands on Wed 10:00 AM slot (Time)
     63.5% (11.43s) Click pulse
     70.6%-73.5%   Cursor transitions to Confirm view between phases
     75%   (13.50s) Cursor lands on "Confirm booking" button (Confirm)
     75.5% (13.59s) Click pulse
     82.3%-83%     Cursor briefly visible at start of Done phase
     85%   (15.30s) Cursor fades out so "You're booked." reads clean
     >85%           Done payoff lands without cursor in frame          */
@keyframes hero-anim-funnel-cursor {
  /* 0-50%: hidden, off-stage upper right */
  0%, 50% { opacity: 0; transform: translate(70px, -30px); }

  /* Service phase (50-58.82%) */
  51% { opacity: 1; transform: translate(80px, 60px) scale(1); }
  54% { opacity: 1; transform: translate(150px, 215px) scale(1); }
  54.5% { opacity: 1; transform: translate(150px, 215px) scale(0.88); }
  55% { opacity: 1; transform: translate(150px, 215px) scale(1); }
  58% { opacity: 1; transform: translate(150px, 215px) scale(1); }

  /* Service → Time transition: cursor slides toward the time slot
     (slot-1 = "Wed 10:00 AM" — top-left of the 2×2 grid) */
  61% { opacity: 1; transform: translate(130px, 240px) scale(1); }

  /* Time phase (61.76-70.59%) — lands on "Wed 10:00 AM" slot,
     measured at (131, 264) center, tip-offset adjusted */
  63% { opacity: 1; transform: translate(125px, 250px) scale(1); }
  63.5% { opacity: 1; transform: translate(125px, 250px) scale(0.88); }
  64% { opacity: 1; transform: translate(125px, 250px) scale(1); }
  70% { opacity: 1; transform: translate(125px, 250px) scale(1); }

  /* Time → Confirm transition: cursor slides toward the Confirm button
     (measured center y=434 — was at 400 which is 10px above button top) */
  73% { opacity: 1; transform: translate(220px, 410px) scale(1); }

  /* Confirm phase (73.53-79.41%) — lands on "Confirm booking" CTA */
  75% { opacity: 1; transform: translate(240px, 432px) scale(1); }
  75.5% { opacity: 1; transform: translate(240px, 432px) scale(0.88); }
  76% { opacity: 1; transform: translate(240px, 432px) scale(1); }
  79% { opacity: 1; transform: translate(240px, 432px) scale(1); }

  /* Confirm → Done transition: cursor drifts off to the side */
  82% { opacity: 1; transform: translate(320px, 220px) scale(1); }

  /* Done phase — cursor briefly visible, fades out before payoff lands */
  83% { opacity: 0.7; transform: translate(320px, 220px) scale(1); }
  85% { opacity: 0; transform: translate(320px, 220px) scale(1); }

  /* Hidden through rest of cycle */
  100% { opacity: 0; transform: translate(70px, -30px); }
}
@keyframes hero-anim-card-delay-highlight {
  /* Suppress .is-highlight visuals until the cursor clicks at 55%. */
  0%, 54% {
    border-color: var(--color-rule);
    background: #FFFFFF;
    box-shadow: 0 4px 12px -8px rgba(43, 38, 32, 0.08);
    padding-left: 16px;
  }
  55%, 100% {
    border-color: var(--color-walnut);
    background: var(--bg-cream-hover);
    box-shadow: inset 3px 0 0 var(--color-walnut), 0 6px 14px -8px rgba(139, 90, 60, 0.18);
    padding-left: 14px;
  }
}

/* Reduced-motion fallback labels — hidden by default */
.hero-v3-stage-rmlabel { display: none; }

/* Reduced-motion fallback — stack all three states vertically with labels */
@media (prefers-reduced-motion: reduce) {
  .hero-v3-visual.is-animating *,
  .hero-v3-visual.is-animating *::before,
  .hero-v3-visual.is-animating *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-v3-stage {
    position: static;
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 16px;
    min-height: auto;
  }
  .hero-v3-state {
    position: static;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-v3-state-overlay { display: none; }
  .hero-v3-typing { max-width: 40px; }
  .hero-v3-funnel-view {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 14px;
  }
  .step-label-1, .step-label-2, .step-label-3, .step-label-4 { opacity: 1; }
  /* Polish 9: hide the funnel cursor in reduced-motion fallback */
  .hero-v3-funnel-cursor { display: none; }
  .step-dot-2 .dot,
  .step-dot-3 .dot,
  .step-dot-4 .dot {
    background: var(--color-walnut); border-color: var(--color-walnut);
  }
  .hero-v3-stage-rmlabel {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 4px;
  }
  .hero-v3-stage-rmlabel-1 { order: 0; }
  .hero-v3-state-phone     { order: 1; }
  .hero-v3-stage-rmlabel-2 { order: 2; }
  .hero-v3-state-form      { order: 3; }
  .hero-v3-stage-rmlabel-3 { order: 4; }
  .hero-v3-state-funnel    { order: 5; }
}


/* ========================================================================
   Pipeline (How It Works) — sticky scroll sequence
   ======================================================================== */
.pipeline {
  background: var(--color-bg);
  position: relative;
  border-bottom: 1px solid var(--color-rule);
}
.pipeline-track { position: relative; }
.pipeline-pin {
  position: sticky; top: 0;
  height: 100vh; display: grid; place-items: center;
  overflow: hidden;
}
.pipeline-stage {
  position: relative;
  width: min(94vw, 1280px);
  height: min(74vh, 720px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .pipeline-stage { grid-template-columns: 1fr; gap: 24px; height: auto; min-height: 80vh; }
}
.pipeline-copy { position: relative; }
.pipeline-step-stack { position: relative; min-height: 320px; }
.pipeline-step {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 18px;
  opacity: 0; pointer-events: none;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-rivr), transform 700ms var(--ease-rivr);
}
.pipeline-step.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pipeline-step .num {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent);
  display: flex; align-items: center; gap: 12px;
}
.pipeline-step .num::before {
  content: ""; width: 32px; height: 1px; background: currentColor;
}
.pipeline-step h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.08;
}
/* Polish 3: was italic Cormorant accent — now color + weight contrast. */
.pipeline-step h3 em { color: var(--color-accent); font-weight: 700; font-style: normal; }
.pipeline-step p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 480px; }

.pipeline-progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 12px;
}
.pipeline-tick {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 500ms var(--ease-rivr);
}
.pipeline-tick .bar {
  width: 28px; height: 1px;
  background: var(--color-rule);
  transition: background 500ms var(--ease-rivr), width 600ms var(--ease-rivr);
}
.pipeline-tick.done .bar, .pipeline-tick.active .bar { background: var(--color-accent); }
.pipeline-tick.active { color: var(--color-text-primary); }
.pipeline-tick.active .bar { width: 56px; }

/* Pipeline visual stage on right */
.pipeline-vis {
  position: relative; width: 100%; height: 100%;
  min-height: 420px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
  border: 1px solid var(--color-rule);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.18),
              0 1px 0 rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}

.pipe-frame {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(0.96);
  transition: opacity 600ms var(--ease-rivr), transform 800ms var(--ease-rivr);
  pointer-events: none;
}
.pipe-frame.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.pipe-frame.past { opacity: 0; transform: scale(1.04); }

/* Step 1 & Step 3 now render imagery/product-step-{1,3}.png — single rule
   for the image fills the frame and matches its corner radius. */
.pipe-design img,
.pipe-handoff img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  display: block; border-radius: inherit;
}
.pipe-design, .pipe-handoff {
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.20);
}

/* Step 2: integration — pipes flowing from booking → calendar */
.pipe-integrate {
  background: var(--color-background);
  display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center;
  padding: 24px;
}
.pipe-integrate .col {
  background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 12px;
  padding: 16px; min-height: 240px;
  display: flex; flex-direction: column; gap: 8px;
}
.pipe-integrate .col h5 {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px;
}
.pipe-integrate .col .item {
  background: var(--color-background); border-radius: 8px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 500;
}
.pipe-integrate .col .item .ic {
  width: 26px; height: 26px; border-radius: 6px; background: var(--color-accent);
  color: var(--color-text); display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
}
.pipe-integrate .col .item.cal .ic { background: #1A73E8; }
.pipe-integrate .col .item.acuity .ic { background: #5BC0EB; }
.pipe-integrate .col .item.vagaro .ic { background: #FF7A59; }
.pipe-integrate .col .item.boulevard .ic { background: #0A0A0A; }

.pipe-integrate .pipes {
  position: relative; height: 200px;
}
.pipe-integrate .pipes svg { width: 100%; height: 100%; }
.pipe-integrate .pipes path {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 6 6;
  animation: dash 1.2s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -24; } }

/* Step 4: support — text conversation */
.pipe-support {
  background: var(--color-background);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.pipe-support .msg {
  max-width: 78%;
  padding: 10px 14px;
  font-size: 0.9375rem; line-height: 1.45;
  border-radius: 16px;
  background: var(--color-surface); border: 1px solid var(--color-rule);
  align-self: flex-start;
}
.pipe-support .msg.you {
  align-self: flex-end;
  background: var(--color-accent); color: var(--color-text); border-color: var(--color-accent);
}
.pipe-support .msg .who {
  display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 4px;
}
.pipe-support .msg .typing {
  display: inline-flex; gap: 4px; padding: 4px 0;
}
.pipe-support .msg .typing i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: 0.5;
  animation: typing 1.2s var(--ease-rivr) infinite;
}
.pipe-support .msg .typing i:nth-child(2) { animation-delay: 0.15s; }
.pipe-support .msg .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ========================================================================
   Section frames
   ======================================================================== */
.section {
  position: relative; padding-block: var(--space-section);
  border-bottom: 1px solid var(--color-rule);
}
.section-dark {
  background: var(--color-bg-dark); color: var(--color-text-primary-inverse);
  border-bottom: 0;
}
.section-dark .text-display-2 { color: var(--color-text-primary-inverse); }
.section-dark .text-body-lg { color: var(--color-text-muted-inverse); }

/* Section header */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-header .text-label-caps { color: var(--color-accent-strong); margin-bottom: 18px; display: block; }
/* Polish 3: was italic Cormorant accent on em inside section headlines.
   Now color + weight contrast only (no italic, no font-family swap). */
.section-header .text-display-2 em { color: var(--color-accent); font-weight: 700; font-style: normal; }

/* ========================================================================
   Stats — numbers count up + parallax
   ======================================================================== */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  position: relative;
  padding: 32px 0;
  border-top: 1px solid var(--color-rule);
}
.stat-card .n {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-sans);
  font-feature-settings: "tnum";
}
.stat-card .n sup {
  font-size: 0.95rem; font-weight: 500; color: var(--color-accent);
  vertical-align: super;
  margin-left: 4px;
}
.stat-card .lbl {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.stat-card .body {
  font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55;
}

/* ========================================================================
   Live Demo — 3 panel showcase with parallax
   ======================================================================== */
.demo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-card {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.18);
  transition: transform var(--dur-base) var(--ease-rivr), box-shadow var(--dur-base) var(--ease-rivr);
  will-change: transform;
}
.demo-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.24);
}
.demo-card .head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-rule);
}
.demo-card .head i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.demo-card .head i:nth-child(1) { background: #FF5F57; }
.demo-card .head i:nth-child(2) { background: #FEBC2E; }
.demo-card .head i:nth-child(3) { background: #28C840; }
.demo-card .body { aspect-ratio: 16/10; overflow: hidden; }
.demo-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ========================================================================
   Benefits (dark)
   ======================================================================== */
.benefits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
@media (max-width: 900px) { .benefits-grid { grid-template-columns: 1fr; gap: 56px; } }
.benefit {
  max-width: 360px;
}
.benefit .ico { width: 80px; height: 80px; margin-bottom: 24px; }
.benefit h3 {
  font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 600; letter-spacing: -0.005em;
  line-height: 1.18; margin-bottom: 12px;
}
.benefit p { color: var(--color-text-muted-inverse); line-height: 1.6; }

/* ========================================================================
   Sample Work (horizontal scroll)
   ======================================================================== */
.work-horizontal { position: relative; }
.work-track {
  position: sticky; top: 0;
  height: 100vh; display: flex; align-items: center;
  overflow: hidden;
}
.work-strip {
  display: flex; gap: 32px;
  padding-inline: 8vw;
  will-change: transform;
}
.work-tile {
  flex: 0 0 min(72vw, 540px);
  background: var(--color-surface); border-radius: 14px;
  border: 1px solid var(--color-rule);
  overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-rivr), box-shadow var(--dur-base) var(--ease-rivr);
}
.work-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.28);
}
.work-tile .head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-rule);
}
.work-tile .head i { width: 8px; height: 8px; border-radius: 50%; }
.work-tile .head i:nth-child(1) { background: #FF5F57; }
.work-tile .head i:nth-child(2) { background: #FEBC2E; }
.work-tile .head i:nth-child(3) { background: #28C840; }
.work-tile .head .brand-tag {
  margin-left: 8px; font-size: 0.6875rem; color: var(--color-text-muted);
}
.work-tile .preview { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.work-tile .preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1200ms var(--ease-rivr); }
.work-tile:hover .preview > img { transform: scale(1.04); }

/* Hover-cycle gallery — stacked screenshots that fade through on hover */
.work-tile .preview .hover-cycle { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-tile .preview .hover-cycle img,
.work-tile .preview .hover-cycle .hover-cycle-ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0;
  transition: opacity 600ms var(--ease-rivr), transform 1200ms var(--ease-rivr);
}
.work-tile .preview .hover-cycle img.is-active,
.work-tile .preview .hover-cycle .hover-cycle-ph.is-active { opacity: 1; }
.work-tile:hover .preview .hover-cycle img.is-active { transform: scale(1.04); }
.work-tile .preview .hover-cycle .hover-cycle-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-dark-bg) 0%, var(--color-walnut) 100%);
}
.work-tile .preview .hover-cycle .hover-cycle-ph span {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--color-accent); letter-spacing: 0.02em;
}
.hover-cycle-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-rivr);
}
.work-tile:hover .hover-cycle-dots { opacity: 1; }
.hover-cycle-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--dur-fast) var(--ease-rivr), width var(--dur-fast) var(--ease-rivr);
}
.hover-cycle-dots span.on { background: var(--color-accent); width: 14px; border-radius: 3px; }

.work-tile .meta .category {
  color: var(--color-text-muted); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.02em; margin-top: -2px;
}
.work-tile .meta { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.work-tile .meta .label { color: var(--color-accent); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.work-tile .meta h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.work-tile .meta p { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.55; }
.work-tile .meta .links {
  margin-top: 8px; padding-top: 18px;
  border-top: 1px solid var(--color-rule);
  display: flex; gap: 20px;
  font-size: 0.875rem; font-weight: 500;
}
.work-tile .meta .links a {
  transition: color var(--dur-fast) var(--ease-rivr);
}
.work-tile .meta .links a:hover { color: var(--color-accent); }

/* "Yours next" trailing card — closes the horizontal-scroll strip with the same
   question the three reference builds already answered. Subtle SVG grain breaks
   the flat dark; the three echo lines tie back to the preceding tile headlines. */
.work-tile-yours {
  background: var(--color-bg-dark);
  color: var(--color-dark-text);
  border: 0;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  padding: 0;
}
.work-tile-yours::before {
  content: "";
  position: absolute; inset: 0;
  /* Inline SVG fractal-noise turbulence, ~3% opacity overlay. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.86  0 0 0 0 0.72  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.yours-inner {
  position: relative; z-index: 1;
  padding: 56px 36px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0;
  max-width: 460px;
}
.yours-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-walnut);
  margin-bottom: 22px;
}
.yours-echoes {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.0625rem;
  color: var(--color-walnut);
  opacity: 0.78;
  margin: 0;
}
.yours-divider {
  display: block;
  width: 64px; height: 1px;
  background: var(--color-walnut);
  opacity: 0.45;
  margin: 22px 0 24px;
}
.yours-headline {
  /* Polish 3: was font-weight 500 with italic em accent. Bumped to 600 to
     match other display headlines now in Geist; em accent is color +
     weight contrast (no italic). */
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  color: var(--color-dark-text);
  text-wrap: balance;
}
.yours-headline em {
  font-style: normal; font-weight: 700;
  color: var(--color-accent);
}
.yours-cta { display: flex; justify-content: center; }

.work-progress {
  position: absolute; left: 50%; bottom: 60px;
  transform: translateX(-50%);
  width: min(280px, 60vw); height: 2px;
  background: var(--color-rule);
  z-index: 5;
}
.work-progress .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--color-accent);
  width: 0%;
}

/* ========================================================================
   Closing CTA — left-margin walkthrough timeline + centered body
   ======================================================================== */
.closing-cta {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-text-primary-inverse);
  /* Polish 3 / Task 4: 160 → 96 (-40%). YoursNextCTA + ClosingCTA are
     both doing CTA work; spec asks for them visually closer together.
     Internal timeline + headline structure unchanged. */
  padding-block: 96px;
  overflow: hidden;
}
@media (max-width: 900px) { .closing-cta { padding-block: 96px; } }

.closing-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  gap: 48px;
  align-items: start;
}
.closing-body {
  grid-column: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
/* Polish 3: "no pitch deck" was italic Cormorant accent in the closing
   headline. Italic on display reads AI-cliche, so swap to walnut color +
   weight bump. .serif class also normalizes font-style now (see line ~156). */
.closing-headline em.serif {
  font-style: normal;
  font-weight: 700;
  color: var(--color-walnut);
}
/* Walkthrough timeline — anchors the literal "15 minutes" promise. */
.closing-timeline {
  grid-column: 1;
  position: sticky;
  top: 120px;
  padding-top: 4px;
}
.closing-timeline-head {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 22px;
}
.closing-timeline ol {
  list-style: none;
  position: relative;
  padding-left: 18px;
}
/* Vertical hairline running through the dots. */
.closing-timeline ol::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 1px;
  height: calc(100% - 18px);
  background: linear-gradient(
    to bottom,
    rgba(var(--color-accent-rgb), 0.55) 0%,
    rgba(var(--color-accent-rgb), 0.18) 100%
  );
}
.closing-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 14px;
  padding-bottom: 26px;
}
.closing-timeline li:last-child { padding-bottom: 0; }
.closing-timeline li .dot {
  position: absolute;
  left: -18px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-bg-dark);
  border: 1.5px solid var(--color-accent);
}
.closing-timeline li.is-end .dot {
  background: var(--color-accent);
}
.closing-timeline li .t {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  line-height: 1.6;
}
.closing-timeline li .lbl {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted-inverse);
  line-height: 1.6;
}

/* Larger button variant for the closing CTA — keeps the dark section
   from feeling timid against the editorial typography. */
.btn-lg {
  font-size: 1.0625rem;
  padding: 17px 26px;
  letter-spacing: 0.005em;
}

@media (max-width: 900px) {
  .closing-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .closing-body { grid-column: 1; }
  .closing-timeline {
    grid-column: 1;
    position: static;
    padding-top: 0;
    max-width: 280px;
    margin: 0 auto;
  }
  .closing-timeline ol { padding-left: 24px; }
  .closing-timeline li .dot { left: -24px; }
}

/* ========================================================================
   Calendar mockup (product page)
   ======================================================================== */
.calendar-wrap {
  display: grid; grid-template-columns: 3fr 2fr; gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .calendar-wrap { grid-template-columns: 1fr; gap: 32px; } }

.calendar {
  border-radius: 12px; border: 1px solid var(--color-rule); overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.18);
}
.calendar .hd {
  padding: 12px 18px; background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-rule);
  display: flex; justify-content: space-between; align-items: center;
}
.calendar .hd .name {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 500;
}
.calendar .hd .name .ic { width: 12px; height: 12px; background: #1A73E8; border-radius: 2px; }
.calendar .hd .week { font-size: 0.75rem; color: var(--color-text-muted); }
.calendar .grid {
  display: grid;
  grid-template-columns: 56px repeat(5, minmax(96px, 1fr));
  font-size: 0.75rem;
  min-width: 560px;
}
.calendar .grid > div { border-bottom: 1px solid var(--color-rule); }
.calendar .grid .day {
  padding: 8px 12px; border-left: 1px solid var(--color-rule);
  font-weight: 500; color: var(--color-text-muted);
}
.calendar .grid .hour {
  padding: 12px 10px;
  font-size: 0.7rem; color: var(--color-text-muted); text-align: right;
}
.calendar .grid .cell {
  position: relative; min-height: 48px;
  border-left: 1px solid var(--color-rule);
}
.calendar .appt {
  position: absolute; left: 4px; right: 4px; top: 4px;
  border-radius: 6px;
  padding: 6px 8px;
  border-left-width: 3px; border-left-style: solid;
}
.calendar .appt .t { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
.calendar .appt .w { font-size: 0.65rem; opacity: 0.8; line-height: 1.2; }
.calendar .appt .via {
  display: inline-block;
  background: var(--color-bg-dark); color: var(--color-accent);
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 4px; border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  padding: 8px 14px; border-radius: 999px;
  background: var(--color-surface-muted); font-size: 0.8125rem; font-weight: 500;
  transition: background var(--dur-fast) var(--ease-rivr), transform var(--dur-fast) var(--ease-rivr);
  cursor: default;
}
.chip:hover {
  background: var(--color-accent); color: var(--color-text);
  transform: translateY(-2px);
}

/* ========================================================================
   Wedge (3-column)
   ======================================================================== */
.wedge-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
@media (max-width: 900px) { .wedge-grid { grid-template-columns: 1fr; } }
.wedge-card {
  padding-top: 24px; border-top: 2px solid var(--color-accent);
}
.wedge-card .label {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--color-text-muted); margin-bottom: 14px;
}
.wedge-card h3 {
  font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 600; letter-spacing: -0.005em;
  line-height: 1.2; margin-bottom: 14px;
}
.wedge-card p { color: var(--color-text-muted); line-height: 1.6; }

/* ========================================================================
   FAQ
   ======================================================================== */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid var(--color-rule);
  padding-block: 28px;
}
.faq-item:last-child { border-bottom: 1px solid var(--color-rule); }
.faq-item h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 12px; }
.faq-item p { color: var(--color-text-muted); line-height: 1.6; }

/* ========================================================================
   Page-specific: About — founders
   ======================================================================== */
.about-photo {
  position: relative; aspect-ratio: 16/9; width: 100%; max-width: 920px;
  margin: 0 auto 64px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--color-rule);
  background: var(--color-surface-muted);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.22);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--color-rule);
}
.about-photo--split figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-muted);
}
.about-photo--split figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.about-photo--split figcaption {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-dark-text);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
@media (max-width: 720px) {
  .about-photo--split { grid-template-columns: 1fr 1fr; }
  .about-photo--split figcaption { font-size: 1rem; top: 12px; left: 14px; }
}

/* Photo placeholder — stand-in for Thor's headshot while the replacement
   shot is taken. Matches the dimensions of a real <img> inside an
   .about-photo--split figure (full width/height, object-fit cover) so
   the two-up grid keeps its 1:1 rhythm. Understated treatment: warm
   cream ground, dashed walnut hairline, small mono caption. Reads as
   "intentionally blank for now" rather than broken. */
.about-photo-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cream-hover);
  border: 1px dashed rgba(139, 90, 60, 0.2);
}
.about-photo-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-walnut);
}

/* About / Where We're From — photo placeholder grid. Replace with real
   shots before deploy (founder is uploading TPC + hometown photos). */
.about-from-photos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .about-from-photos { grid-template-columns: 1fr; }
}
.about-from-photo-ph {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      45deg,
      var(--color-surface-muted),
      var(--color-surface-muted) 10px,
      var(--color-bg) 10px,
      var(--color-bg) 20px
    );
  border: 1px dashed var(--color-rule);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  text-align: center;
  padding: 16px;
}

.founders {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
@media (max-width: 900px) { .founders { grid-template-columns: 1fr; gap: 48px; } }
.founder .label { color: var(--color-accent); font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; margin-bottom: 14px; }
.founder h2 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.18; }
.founder .title { color: var(--color-text-muted); margin-bottom: 24px; }
.founder p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-primary); margin-bottom: 16px; }

/* ========================================================================
   Page-specific: Book — agenda
   ======================================================================== */
.book-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; gap: 40px; } }
.founder-card {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--color-rule); border-radius: 12px;
  background: var(--color-surface); padding: 14px;
  margin-bottom: 36px;
}
.founder-card .av {
  width: 80px; height: 80px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
}
.founder-card .av img { width: 100%; height: 100%; object-fit: cover; }
.founder-card .av--stack {
  width: auto;
  height: 64px;
  display: flex;
  align-items: center;
  border-radius: 0;
  overflow: visible;
}
.founder-card .av--stack img {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  object-fit: cover;
  object-position: center 25%;
}
.founder-card .av--stack img + img { margin-left: -18px; }
.founder-card .name { font-size: 0.9375rem; font-weight: 600; }
.founder-card .sub { font-size: 0.875rem; color: var(--color-text-muted); }

.agenda { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.agenda li {
  display: flex; gap: 14px; align-items: flex-start;
  list-style: none;
  padding: 14px 16px;
  background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 10px;
  transition: transform var(--dur-fast) var(--ease-rivr), border-color var(--dur-fast) var(--ease-rivr);
}
.agenda li:hover {
  transform: translateX(4px);
  border-color: var(--color-accent);
}
.agenda li .num {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 6px; background: var(--color-accent); color: var(--color-text);
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
}

.calendar-placeholder {
  background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 14px;
  padding: 28px; min-height: 620px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.16);
}
.cal-mini-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--color-rule); margin-bottom: 22px;
}
.cal-mini-head .month { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.cal-mini-head .nav-btns { display: flex; gap: 6px; }
.cal-mini-head .nav-btns button {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--color-rule); background: var(--color-surface);
  display: grid; place-items: center; color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-rivr), border-color var(--dur-fast) var(--ease-rivr), transform var(--dur-fast) var(--ease-rivr);
}
.cal-mini-head .nav-btns button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cal-mini-head .nav-btns button:active { transform: scale(0.92); }

.cal-grid-mini {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.cal-grid-mini .dow {
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600; padding-block: 6px;
}
.cal-grid-mini .day-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 0.875rem; font-weight: 500; border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease-rivr), color var(--dur-fast) var(--ease-rivr), transform var(--dur-fast) var(--ease-rivr);
}
.cal-grid-mini .day-cell:hover { background: var(--color-surface-muted); }
.cal-grid-mini .day-cell.muted { color: var(--color-rule); cursor: default; }
.cal-grid-mini .day-cell.available::after {
  content: ""; position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent);
}
.cal-grid-mini .day-cell.selected {
  background: var(--color-text-primary); color: var(--color-dark-text);
  transform: scale(1.05);
}

.times {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--color-rule);
}
.times .title { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; margin-bottom: 14px; }
.times-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.time-slot {
  padding: 12px 8px; border-radius: 8px;
  border: 1px solid var(--color-rule);
  background: var(--color-surface); font-size: 0.875rem; font-weight: 500;
  text-align: center;
  transition: all var(--dur-fast) var(--ease-rivr);
}
.time-slot:hover {
  border-color: var(--color-accent); color: var(--color-accent);
  transform: translateY(-1px);
}
.time-slot.selected {
  background: var(--color-text-primary); color: var(--color-dark-text); border-color: var(--color-text-primary);
}

/* ========================================================================
   Marquee row (used on home + product)
   ======================================================================== */
.marquee {
  overflow: hidden; position: relative;
  padding-block: 24px;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg);
}
.marquee-track {
  display: flex; gap: 64px;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-text-primary); opacity: 0.6;
  display: flex; align-items: center; gap: 64px;
  white-space: nowrap;
}
.marquee-item::after {
  content: "◆"; font-style: normal; color: var(--color-accent);
  font-size: 0.6em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========================================================================
   Page intro reveal — sequenced
   ======================================================================== */
.intro-line {
  display: block; overflow: hidden;
  /* Asymmetric bottom padding gives italic descenders ("y" in "you" /
     "already") room inside the mask without changing line rhythm. */
  padding: 0.04em 0 0.22em;
}
.intro-line > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 1100ms var(--ease-rivr);
}
.intro-line.in > span,
.in > .intro-line > span,
.in .intro-line > span { transform: translateY(0); }

/* Stream A (Category 6): the inline citation list was replaced by a discrete
   "see evidence →" link at the foot of the stats section. */
.stats-evidence {
  margin: 36px 0 0;
  font-size: 0.8125rem;
  text-align: right;
}
.stats-evidence a {
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-rivr);
}
.stats-evidence a:hover { color: var(--color-accent); }

/* Scroll indicator on hero */
.scroll-cue {
  position: absolute; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.scroll-cue .line {
  width: 1px; height: 32px; background: var(--color-text-muted);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%;
  height: 50%; background: var(--color-accent);
  animation: cueDown 2.4s var(--ease-rivr) infinite;
}
@keyframes cueDown {
  0% { top: -50%; }
  100% { top: 110%; }
}

/* ========================================================================
   Reduced motion
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-mask > span, .reveal-clip, .img-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee-track { animation: none; }
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 900px) {
  .section { padding-block: var(--space-section-mobile); }
  .hero-stage .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .hero-stage {
    /* Asymmetric bottom adds descender clearance from the section border. */
    padding: var(--space-section-mobile) 0 calc(var(--space-section-mobile) + 20px) !important;
    min-height: auto !important;
  }
  .pipeline { height: auto !important; }
  .pipeline-pin { position: relative; height: auto; padding-block: 60px; }
  .pipeline-stage { grid-template-columns: 1fr !important; }
  .work-horizontal { height: auto !important; }
  .work-track { position: relative; height: auto !important; overflow-x: auto; padding-block: 60px; }
  .work-strip { transform: none !important; }
  .we-do-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .book-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .calendar-wrap { grid-template-columns: 1fr !important; gap: 32px !important; }
  .founders { grid-template-columns: 1fr !important; gap: 40px !important; }
  .nav-inner { padding: 8px 8px 8px 18px; gap: 6px; }
  .nav-link { padding: 9px 12px 11px; font-size: 0.9375rem; }
  .nav-link::after { left: 12px; right: 12px; }
  .nav-cta { padding: 10px 16px 10px 18px; font-size: 0.875rem; }
  .nav-brand .wordmark { font-size: 1.3125rem; }
}
@media (max-width: 600px) {
  .nav { padding: 8px 12px !important; }
  .nav-inner { gap: 2px; padding: 6px 6px 6px 14px; }
  .nav-brand { margin-right: 4px; }
  .nav-brand .wordmark { font-size: 1.1875rem; letter-spacing: 0.035em; }
  .nav-inner > nav .nav-link { display: none; }
  .nav-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .benefits-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .demo-grid { grid-template-columns: 1fr !important; }
  .wedge-grid { grid-template-columns: 1fr !important; }
}

/* ========================================================================
   Prototype modal — full-screen iframe with backdrop, fade+scale entrance
   ======================================================================== */
.proto-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.proto-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-rivr);
  pointer-events: auto;
}
.proto-modal.is-open .proto-modal-backdrop { opacity: 1; }
.proto-modal-panel {
  position: absolute;
  top: 24px; right: 24px; bottom: 24px; left: 24px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-rivr), opacity var(--dur-base) var(--ease-rivr);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.proto-modal.is-open .proto-modal-panel { transform: scale(1); opacity: 1; }
.proto-modal-iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--color-bg);
}
.proto-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.78);
  color: var(--color-dark-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background var(--dur-fast) var(--ease-rivr), transform var(--dur-fast) var(--ease-rivr);
  z-index: 3;
}
.proto-modal-close:hover { background: var(--color-accent); transform: scale(1.05); }
.proto-modal-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.proto-modal-book {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--color-accent); color: var(--color-text);
  box-shadow: 0 8px 24px -8px rgba(var(--color-accent-rgb), 0.6);
  transition: transform var(--dur-fast) var(--ease-rivr), background var(--dur-fast) var(--ease-rivr), color var(--dur-fast) var(--ease-rivr);
}
.proto-modal-book:hover { background: var(--color-walnut); color: var(--color-dark-text); transform: translateY(-1px); }
.proto-modal-book span { font-size: 0.6875rem; letter-spacing: 0.04em; opacity: 0.85; }
.proto-modal-book strong { font-size: 0.875rem; font-weight: 600; }
@media (max-width: 720px) {
  .proto-modal-book { left: 12px; bottom: 12px; padding: 8px 14px; }
  .proto-modal-book span { display: none; }
}

.proto-modal-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  z-index: 1;
}
.proto-modal-skeleton .mk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: rivr-skeleton-pulse 1600ms var(--ease-rivr) infinite;
}
@keyframes rivr-skeleton-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (max-width: 720px) {
  .proto-modal-panel { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; }
  .proto-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .proto-modal-panel { transform: none; transition: opacity 150ms linear; }
  .proto-modal-backdrop { transition: opacity 150ms linear; }
  .proto-modal-skeleton .mk { animation: none; }
}

/* ========================================================================
   Hero video frame — iframe rendered directly (no BrowserFrame wrapper),
   reduced-motion fallback to a static poster image.
   ======================================================================== */
.hero-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: visible;
}
.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}
.hero-video-frame .fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-frame iframe { display: none; }
  .hero-video-frame .fallback-img { display: block; }
}

/* ========================================================================
   Book page — booking widget iframe sits in the right column of .book-grid
   (replaces the old mock CalendarWidget / .calendar-placeholder card).
   ======================================================================== */
.book-widget-wrap {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.16);
}
.book-widget-iframe {
  width: 100%;
  border: 0;
  display: block;
  background: var(--color-surface);
  transition: opacity var(--dur-base) var(--ease-rivr);
}
.book-widget-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-rivr);
}
.book-widget-skeleton.is-hidden { opacity: 0; }
.book-widget-skeleton .mk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: rivr-skeleton-pulse 1600ms var(--ease-rivr) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .book-widget-skeleton .mk { animation: none; }
}

/* ========================================================================
   Stream C v1 — Three-tile hero (real demo screenshots), integration mockup,
   and The Build page scroll-driven tiles.
   ======================================================================== */

/* Three-tile hero — sits below the hero copy section, replaces the old
   iframe booking mockup. Each tile is a 4:5 portrait card whose screenshot
   pans vertically on hover (4.5s ease-out forward, 1s ease-out return). */
.work-hero { padding-block: 60px 100px; }
@media (max-width: 900px) { .work-hero { padding-block: 60px var(--space-section-mobile); } }
.work-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.work-hero-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-elevated);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-rule);
  transition: box-shadow 240ms var(--ease-rivr);
}
.work-hero-tile:hover {
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
}
.work-hero-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0% 0%;
  transition: object-position 1s ease-out;       /* return transition */
  display: block;
}
.work-hero-tile:hover img {
  object-position: 0% 80%;
  transition: object-position 4.5s ease-out;     /* forward transition */
}
/* Stream C v2 final: practice-type eyebrow sits above each tile; mono URL
   caption (mixed-case, not all-caps) sits below. Tracking matches the
   canonical eyebrow pattern (.text-label-caps, 0.12em). */
.work-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin: 0 0 14px;
  text-align: left;
}
.work-hero-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: 14px;
  text-align: left;
}
.work-hero-supporting {
  color: var(--color-text-muted);
}
.work-hero-mobile-cta {
  display: none;
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: none; /* parent tile is the link */
}
@media (hover: none), (max-width: 1024px) {
  .work-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .work-hero-tile:hover img { object-position: 0% 0%; transition: none; }
  .work-hero-mobile-cta { display: inline-block; }
}

/* ========================================================================
   ReferenceBuilds (Polish 3 / Task 2) — consolidated demos showcase
   ------------------------------------------------------------------------
   Replaces the previous ThreeTileHero (preview grid) + SampleWork
   (horizontal-scroll per-tile copy strip) — both surfaced the same three
   demos. Each tile here carries the preview (hover-pan from the old
   ThreeTileHero) AND the per-tile headline + body + CTA row (from the old
   SampleWork .work-tile .meta).
   ======================================================================== */
.reference-builds { padding-block: 88px; }   /* Polish 3 / Task 4: was 120 */
@media (max-width: 900px) { .reference-builds { padding-block: var(--space-section-mobile); } }
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.ref-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Polish 4 / Task 1: hover bg warms to --bg-cream-hover alongside existing
     shadow + lift treatment. 180ms matches nav-link / secondary CTA. */
  transition: box-shadow 240ms var(--ease-rivr), transform 240ms var(--ease-rivr), background-color 180ms ease-in-out;
}
.ref-tile:hover {
  background: var(--bg-cream-hover);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.22);
  transform: translateY(-4px);
}
.ref-tile-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-rule);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.ref-tile-preview img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 0% 0%;
  transition: object-position 1s ease-out;
  display: block;
}
.ref-tile-preview:hover img {
  object-position: 0% 80%;
  transition: object-position 4.5s ease-out;
}
.ref-tile-mobile-cta {
  display: none;
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ref-tile-body {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ref-tile-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-strong);
  margin: 0;
}
.ref-tile-headline {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.22;
  margin: 0;
  color: var(--color-text-primary);
}
.ref-tile-copy {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.ref-tile-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0;
}
.ref-tile-cta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--color-rule);
  display: flex; gap: 18px;
  font-size: 0.875rem; font-weight: 500;
}
.ref-tile-cta a {
  padding: 4px 8px;
  border-radius: 6px;
  /* Polish 4 / Task 1: cream-hover surface highlights the link bbox */
  transition: color 180ms ease-in-out, background-color 180ms ease-in-out;
}
.ref-tile-cta a:hover { color: var(--color-walnut); background-color: var(--bg-cream-hover); }

@media (hover: none), (max-width: 1024px) {
  .ref-grid { grid-template-columns: 1fr; gap: 24px; }
  .ref-tile-preview:hover img { object-position: 0% 0%; transition: none; }
  .ref-tile-mobile-cta { display: inline-block; }
}

/* yours-next — extracted from the old SampleWork trailing card. Shared
   .yours-inner / .yours-caption / .yours-echoes / .yours-divider /
   .yours-headline / .yours-cta styles still apply (see ~lines 980-1027). */
.yours-next { padding-block: 64px 56px; }   /* Polish 3 / Task 4: tighter bottom to abut ClosingCTA */
@media (max-width: 900px) { .yours-next { padding-block: var(--space-section-mobile); } }
.yours-next-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg-dark);
  color: var(--color-dark-text);
  border-radius: 14px;
  overflow: hidden;
  display: grid; place-items: center;
}
.yours-next-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.86  0 0 0 0 0.72  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Integration section — "It lives where your patients already are."
   Mock browser frame holding a generic-practice site nav + an embedded
   RIVR booking screenshot inside it. */
.integration-section { padding-block: 88px; } /* Polish 3 / Task 4: was 120 */
@media (max-width: 900px) { .integration-section { padding-block: var(--space-section-mobile); } }
.integration-mock {
  max-width: 1100px;
  margin: 56px auto 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.28);
  background: #fff;
  border: 1px solid var(--color-rule);
  /* Stream C v2 final: materialize on scroll-in. Frame slides up + fades;
     the embedded widget materializes ~240ms after the frame. Gated by
     prefers-reduced-motion in JS (sets is-in immediately on reduced motion). */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 720ms var(--ease-rivr), transform 720ms var(--ease-rivr);
  will-change: opacity, transform;
}
.integration-mock.is-in {
  opacity: 1;
  transform: translateY(0);
}
.integration-mock .embed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease-rivr) 240ms, transform 640ms var(--ease-rivr) 240ms;
}
.integration-mock.is-in .embed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .integration-mock,
  .integration-mock.is-in,
  .integration-mock .embed,
  .integration-mock.is-in .embed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.integration-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 16px auto 0;
  max-width: 1100px;
  text-align: left;
}

/* ============================================================================
   Lumera-styled animated booking flow (PP2)
   ----------------------------------------------------------------------------
   The funnel UI inside the IntegrationSection's mock browser frame is rendered
   in LUMERA's actual brand tokens — confirmed against the Lumera demo repo at
   C:\Users\thora\rivr-funnels\lumera\app\globals.css:
     porcelain canvas  #ECEDE9   surface  #FBFBF9   hairline  #D9DAD4
     graphite ink      #1E2220   slate    #6B7270   accent    #16494A
     accent-deep       #0F3536   radius 4px
     Geist Sans (body) + Geist Mono (eyebrows, prices, step indicator)
   That's the point: each RIVR funnel is built to match the client's brand.
   ============================================================================ */
.lumera-embed {
  --lm-canvas: #ECEDE9;
  --lm-surface: #FBFBF9;
  --lm-ink: #1E2220;
  --lm-slate: #6B7270;
  --lm-accent: #16494A;
  --lm-accent-deep: #0F3536;
  --lm-hairline: #D9DAD4;

  position: relative;
  background: var(--lm-canvas);
  color: var(--lm-ink);
  font-family: "Geist", system-ui, sans-serif;
  /* Fixed aspect for cursor positioning + cross-state crossfade. */
  height: 540px;
  overflow: hidden;
}

/* State stack — every state element fills the embed, fades on .is-active. */
.lf-state {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 380ms var(--ease-rivr);
  pointer-events: none;
  display: flex; flex-direction: column;
}
.lf-state.is-active { opacity: 1; }

/* Funnel-state contains the step indicator + the four inner panels. */
.lf-state-funnel { display: flex; flex-direction: column; }
.lf-panels { position: relative; flex: 1; min-height: 0; }
.lf-state-inner {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease-rivr);
  display: flex; flex-direction: column;
}
.lf-state-inner.is-active { opacity: 1; }

/* ── Step indicator (mono, hairline-connected, petrol-teal dot) ───────────── */
.lf-steps {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 32px;
  margin: 0;
  background: var(--lm-canvas);
  border-bottom: 1px solid var(--lm-hairline);
  position: relative;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-slate);
}
.lf-step-count {
  position: absolute;
  left: 32px; top: 50%;
  transform: translateY(-50%);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-slate);
}
.lf-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lm-slate);
  transition: color 320ms var(--ease-rivr);
}
.lf-steps li + li::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--lm-hairline);
  margin-right: 8px;
}
.lf-steps .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--lm-hairline);
  background: var(--lm-canvas);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5625rem;
  color: var(--lm-canvas);
  transition: background 320ms var(--ease-rivr), border-color 320ms var(--ease-rivr), color 320ms var(--ease-rivr);
}
.lf-steps li.is-active { color: var(--lm-ink); }
.lf-steps li.is-active .dot {
  background: var(--lm-accent);
  border-color: var(--lm-accent);
}
.lf-steps li.is-done { color: var(--lm-ink); }
.lf-steps li.is-done .dot {
  background: var(--lm-accent);
  border-color: var(--lm-accent);
  color: var(--lm-canvas);
}

/* ── Shared panel layout ──────────────────────────────────────────────────── */
.lf-panel {
  padding: 36px 48px 40px;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--lm-canvas);
}
.lf-eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lm-accent);
  margin: 0 0 10px;
}
.lf-heading {
  font-family: "Geist", system-ui, sans-serif;
  font-style: normal;
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--lm-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.lf-sub {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--lm-slate);
  margin: 0 0 22px;
  line-height: 1.5;
}

/* ── State 1 — Lumera home preview panel ──────────────────────────────────── */
.lh-panel {
  flex: 1; min-height: 0;
  padding: 60px 56px;
  background: var(--lm-canvas);
  display: flex; flex-direction: column;
  justify-content: center;
}
.lh-eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lm-accent);
  margin-bottom: 18px;
}
.lh-headline {
  font-family: "Geist", system-ui, sans-serif;
  font-style: normal;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--lm-ink);
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 520px;
}
.lh-sub {
  font-size: 0.9375rem;
  color: var(--lm-slate);
  margin: 0 0 28px;
  max-width: 520px;
  line-height: 1.55;
}
.lh-meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lm-slate);
}
.lh-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--lm-slate);
  opacity: 0.5;
}

/* ── State 2 — Service grid ───────────────────────────────────────────────── */
.lf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.lf-card {
  border: 1px solid var(--lm-hairline);
  background: var(--lm-surface);
  padding: 18px 18px 16px;
  border-radius: 4px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 112px;
  transition: border-color 200ms var(--ease-rivr), transform 200ms var(--ease-rivr), background 200ms var(--ease-rivr);
}
.lf-card h4 {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lm-ink);
  margin: 0;
}
.lf-card p {
  font-size: 0.8125rem;
  color: var(--lm-slate);
  line-height: 1.45;
  margin: 0;
}
.lf-card .price {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--lm-accent);
  margin: 0;
}
.lf-card.is-pulse {
  border-color: var(--lm-accent);
  background: rgba(22, 73, 74, 0.04);
  animation: lf-pulse 320ms var(--ease-rivr);
}

/* ── State 3 — Time grid ──────────────────────────────────────────────────── */
.lf-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.lf-slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--lm-hairline);
  background: var(--lm-surface);
  border-radius: 4px;
  cursor: default;
  text-align: left;
  font-family: inherit;
  transition: border-color 200ms var(--ease-rivr), background 200ms var(--ease-rivr);
}
.lf-slot .day {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lm-slate);
}
.lf-slot .time {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--lm-ink);
  letter-spacing: 0.02em;
}
.lf-slot.is-pulse {
  border-color: var(--lm-accent);
  background: rgba(22, 73, 74, 0.06);
  animation: lf-pulse 320ms var(--ease-rivr);
}

/* ── State 4 — Confirm ────────────────────────────────────────────────────── */
.lf-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.lf-summary {
  border: 1px solid var(--lm-hairline);
  background: var(--lm-surface);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.lf-summary > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.lf-summary dt {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lm-slate);
}
.lf-summary dd {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 500;
  color: var(--lm-ink);
}
.lf-fields { display: flex; flex-direction: column; gap: 10px; }
.lf-fields label {
  display: flex; flex-direction: column; gap: 4px;
}
.lf-fields label span {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lm-slate);
}
.lf-fields label input {
  border: 1px solid var(--lm-hairline);
  background: var(--lm-surface);
  border-radius: 4px;
  padding: 10px 12px;
  font: inherit; font-size: 0.875rem;
  color: var(--lm-ink);
  outline: none;
}
.lf-confirm-btn {
  align-self: flex-end;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--lm-accent);
  color: var(--lm-canvas);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: default;
  border: 0;
  transition: background 200ms var(--ease-rivr), transform 200ms var(--ease-rivr);
}
.lf-confirm-btn.is-pulse {
  background: var(--lm-accent-deep);
  animation: lf-pulse 320ms var(--ease-rivr);
}

/* ── State 5 — Done ───────────────────────────────────────────────────────── */
.lf-panel-done {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 48px;
}
.lf-check {
  color: var(--lm-accent);
  margin-bottom: 18px;
  animation: lf-check-draw 480ms var(--ease-rivr);
}
.lf-heading-done {
  font-size: 1.75rem;
  margin-bottom: 10px;
}
.lf-panel-done .lf-sub { max-width: 420px; margin: 0 auto; }

/* ── Click-target pulse keyframe (shared) ─────────────────────────────────── */
@keyframes lf-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes lf-check-draw {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Animated cursor (graphite, porcelain stroke for contrast) ───────────── */
.lf-cursor {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 5;
  pointer-events: none;
  transform: translate(-2px, -2px) scale(1);
  transition: left 720ms var(--ease-rivr), top 720ms var(--ease-rivr), transform 200ms var(--ease-rivr);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.lf-cursor.is-clicking {
  transform: translate(-2px, -2px) scale(0.86);
}

/* BOOK link pulse — when cursor "clicks" the host nav. */
.integration-mock .practice-nav .links .book-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 200ms var(--ease-rivr), color 200ms var(--ease-rivr), background 200ms var(--ease-rivr);
}
.integration-mock .practice-nav .links .book-link.is-pulse {
  border-color: var(--lm-accent, #16494A);
  color: var(--lm-accent, #16494A);
  animation: lf-pulse 320ms var(--ease-rivr);
}

/* Static / reduced-motion fallback — hide cursor, JS renders the single
   service state inline (see .lf-state-funnel.is-static below). */
.integration-mock.is-static .lf-cursor { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lf-cursor { display: none; }
  .lf-state, .lf-state-inner { transition: none; }
}

/* Static fallback flow — drop the absolute stacking the animation relies on. */
.lumera-embed:has(.is-static),
.integration-mock.is-static .lumera-embed { height: auto; }
.lf-state-funnel.is-static { position: static; opacity: 1; }
.lf-panels-static { position: static; }
.lf-panels-static .lf-panel { position: static; }

@media (max-width: 900px) {
  .lumera-embed { height: auto; min-height: 0; }
  .lf-panel { padding: 24px 20px 28px; }
  .lh-panel { padding: 32px 20px; }
  .lf-cards, .lf-times { grid-template-columns: 1fr 1fr; }
  .lf-confirm-grid { grid-template-columns: 1fr; }
  .lf-steps { padding: 14px 18px; gap: 8px; font-size: 0.625rem; }
  .lf-step-count { display: none; }
  .lf-steps li + li::before { width: 16px; margin-right: 4px; }
  .lf-cursor { display: none; }
}
.integration-mock .browser-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-rule);
}
.integration-mock .browser-chrome i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
}
.integration-mock .browser-chrome i:nth-child(1) { background: #FF5F57; }
.integration-mock .browser-chrome i:nth-child(2) { background: #FEBC2E; }
.integration-mock .browser-chrome i:nth-child(3) { background: #28C840; }
.integration-mock .browser-chrome .url {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 4px 14px;
  border-radius: 6px;
  min-width: 260px;
  text-align: center;
}
.integration-mock .practice-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  /* Lumera's surface register — confirmed against lumera/app/globals.css. */
  background: #FBFBF9;
  border-bottom: 1px solid #D9DAD4;
}
.integration-mock .practice-nav .brand {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #1E2220;
}
.integration-mock .practice-nav .links {
  display: flex; align-items: center; gap: 26px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7270;
}
.integration-mock .practice-nav .links span { cursor: default; }
.integration-mock .embed {
  display: block;
  width: 100%;
  /* height intentionally not declared here — .lumera-embed sets its own fixed
     animation height (540px), and the static/mobile fallbacks override with
     height: auto via .integration-mock.is-static .lumera-embed and the
     ≤900px media query. A height: auto here used to win on specificity
     (.integration-mock .embed = 0,2,0 vs .lumera-embed = 0,1,0), collapsing
     the abs-positioned .lf-state panels to 0×0 — invisible content. */
}
@media (max-width: 720px) {
  .integration-mock .practice-nav { padding: 16px 20px; }
  .integration-mock .practice-nav .links { display: none; }
  .integration-mock .browser-chrome .url { min-width: 0; font-size: 0.6875rem; padding: 3px 10px; }
}

/* The Build page — three stacked demo sections, each ~250vh tall with a
   sticky-pinned tile whose screenshot pans by scroll progress. */
/* /the-build BuildProcess section (Polish 4 / Task 5) — methodology
   list above the demo deep-dives. Adds the missing "how a build works"
   beat that the demos alone don't communicate. */
.build-process { padding-block: 88px; border-bottom: 1px solid var(--color-rule); }
@media (max-width: 900px) { .build-process { padding-block: var(--space-section-mobile); } }
.process-list {
  list-style: none;
  display: grid;
  gap: 32px;
  margin: 56px auto 0;
  max-width: 780px;
  padding: 0;
}
.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-rule);
  align-items: start;
}
.process-step:last-child { border-bottom: 0; padding-bottom: 0; }
.process-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent-strong);
  padding-top: 6px;
}
.process-body h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.22;
  color: var(--color-text);
  margin: 0 0 8px;
}
.process-body p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 720px) {
  .process-step { grid-template-columns: 1fr; gap: 8px; }
  .process-num { padding-top: 0; }
}

.build-section { position: relative; padding-block: 80px 0; }
.build-section + .build-section { border-top: 1px solid var(--color-rule); }
.build-stage {
  height: 250vh;
  position: relative;
}
.build-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  padding-block: 48px;
}
.build-copy {
  max-width: 480px;
}
/* Stream C v2 final: tracking unified with the canonical eyebrow pattern
   (.text-label-caps, 0.12em). Sub-eyebrow unified with .work-hero-caption /
   .integration-caption — mono URL caption, mixed-case. */
.build-copy .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: 10px;
}
.build-copy .sub-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.build-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.build-copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 18px;
}
.build-copy .cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--color-accent-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 4px;
  transition: color 200ms var(--ease-rivr);
}
.build-copy .cta:hover { color: var(--color-accent); }
.build-tile {
  position: relative;
  height: min(80vh, 720px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-rule);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
}
.build-tile img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}
@media (max-width: 1024px) {
  .build-stage { height: auto; }
  .build-pin {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 48px;
  }
  .build-tile {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .build-tile img {
    position: relative;
    transform: none !important;          /* mobile: static, no scroll-driven motion */
    height: auto;
  }
}

/* ========================================================================
   .termly-policy — namespace scope for Termly Starter-plan HTML exports.
   The Termly snippet ships Arial + #595959 grey via inline styles and a
   <style> block scoped to [data-custom-class='…'] selectors. These rules
   re-map the typography and link colour to the rivr-web palette so the
   policy reads as part of the site, while leaving Termly's structural
   styles (lists, indentation, BDT spans, branding watermark) intact.
   Used by privacy.jsx and terms.jsx via <div class="termly-policy">.
   ======================================================================== */
.termly-policy {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 1rem;
}
.termly-policy h1,
.termly-policy h2,
.termly-policy h3,
.termly-policy h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.25;
  margin: 2rem 0 0.75rem;
}
.termly-policy p {
  margin: 0 0 1rem 0;
}
.termly-policy ul,
.termly-policy ol {
  margin: 1rem 0 1rem 1.5rem;
}
.termly-policy li {
  margin-bottom: 0.5rem;
}
.termly-policy a,
.termly-policy a * {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.termly-policy a:hover,
.termly-policy a:hover * {
  color: var(--color-walnut);
}
/* Re-paint Termly's [data-custom-class] inline overrides so its !important
   colours/families don't survive into the rendered policy. We win the
   specificity battle by matching the same attribute + adding !important. */
.termly-policy [data-custom-class='title'],
.termly-policy [data-custom-class='title'] * {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-size: 1.75rem !important;
}
.termly-policy [data-custom-class='subtitle'],
.termly-policy [data-custom-class='subtitle'] * {
  font-family: var(--font-body) !important;
  color: var(--color-text-subtle) !important;
}
.termly-policy [data-custom-class='heading_1'],
.termly-policy [data-custom-class='heading_1'] * {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-size: 1.25rem !important;
}
.termly-policy [data-custom-class='heading_2'],
.termly-policy [data-custom-class='heading_2'] * {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-size: 1.0625rem !important;
}
.termly-policy [data-custom-class='body_text'],
.termly-policy [data-custom-class='body_text'] * {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
.termly-policy [data-custom-class='link'],
.termly-policy [data-custom-class='link'] * {
  color: var(--color-accent-strong) !important;
  text-decoration: underline !important;
}
.termly-policy [data-custom-class='link']:hover,
.termly-policy [data-custom-class='link']:hover * {
  color: var(--color-walnut) !important;
}
/* Termly Starter-plan branding/watermark must stay visible (ToS requires it
   on the Starter tier). Just nudge it into the prose rhythm. */
.termly-policy [data-custom-class='body'] {
  background: transparent !important;
}

/* Hero shim for /privacy and /terms — narrower container than the home/about
   heroes, and the grid-bg fades a touch faster so it doesn't compete with
   the policy text below. */
.policy-hero .hero-grid-bg {
  opacity: 0.4;
}