/* =====================================================================
   V5 · OWNER COMPOSITE · True Performance homepage mockup (GATE 1.5 round 2)
   The V1 Film Room system (tokens, type scale, spacing rhythm, telecast
   chrome, motion feel) carrying sections harvested from V1 to V4, each
   re-skinned into it. Type: Big Shoulders Display · Onest · JetBrains Mono.
   Colour: warm off-black ink, ONE accent (crimson), wine fields; crimson and
   wine COLOUR FIELDS (from V4) rise out of the previous section on scroll.
   Motion: GSAP + ScrollTrigger (+ ScrambleText) only, js/motion.js; the film
   canvas is the canon scroll-film engine (js/film.js). No CSS @keyframes.
   Content is fully visible with JS off.
   ===================================================================== */

@font-face { font-family: 'Big Shoulders Display'; src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ink-0: #0e0b0c;
  --ink-1: #151113;
  --ink-2: #1d1719;
  --ink-3: #272023;
  --line: rgba(243, 236, 232, 0.10);
  --line-2: rgba(243, 236, 232, 0.18);
  --paper: #f3ece8;
  --muted: #b9aeaa;
  --dim: #948985;
  --crimson: #ab1e34;
  --crimson-hi: #ec6b7e;
  --wine: #631232;
  --wine-deep: #3a0a1d;
  --gold: #fbbc04;
  --seam: #514643;
  --on-field: #ffd6dc;           /* highlight words / labels on a crimson or wine field */
  --cta-clipboard-o: .26;        /* the faint clipboard still behind the CTA band (home + every template); TASK T 2026-09-26: .16 -> .26 */
  --color-primary-rgb: 171, 30, 52;
  --f-display: 'Big Shoulders Display', 'Oswald', sans-serif;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --radius: 28px;
  --radius-in: 22px;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(96px, 12vw, 184px);
  --header-height: 72px;
  --brand-accent: var(--crimson);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.32, .72, 0, 1);
  --dur: .55s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--ink-0); color: var(--paper);
  font: 400 17px/1.62 var(--f-body); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink-0); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: 3px; border-radius: 6px; }
.field :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.dim { color: var(--dim); }
.stars { color: var(--gold); letter-spacing: 2px; }
.fine { font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .03em; color: var(--dim); }

/* ---------- type primitives (V1) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(243, 236, 232, 0.03);
  font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.chev { color: var(--crimson-hi); display: inline-flex; }
.h2 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .9; letter-spacing: -.005em;
  max-width: 16ch; text-wrap: balance;
}
.h2--sm { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: none; }
.hl { color: var(--crimson-hi); }
.lede { margin-top: 24px; max-width: 58ch; color: var(--muted); font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
[data-split] .ln { display: block; overflow: clip; padding-bottom: .04em; }
[data-split] .ln > span { display: inline-block; }

/* ---------- buttons (button-in-button) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  border-radius: 999px; padding: 8px 8px 8px 22px; font-weight: 600; font-size: 15px; letter-spacing: .01em;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.btn--book { background: var(--crimson); color: #fff; }
.btn--book:hover { background: #bd2239; }
.btn--ghost { border: 1px solid var(--line-2); color: var(--paper); background: rgba(243, 236, 232, .03); }
.btn--ink { background: var(--ink-0); color: var(--paper); }
.btn--ink:hover { background: var(--ink-2); }
.btn:active { transform: scale(.98); }
.btn__icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__icon { transform: translate(3px, -1px) scale(1.06); }
.btn--sm { padding: 5px 5px 5px 16px; font-size: 14px; gap: 10px; }
.btn--sm .btn__icon { width: 28px; height: 28px; }
.btn--lg { padding: 10px 10px 10px 28px; font-size: 16px; }
.btn--lg .btn__icon { width: 42px; height: 42px; }
.link-tel { color: var(--muted); text-decoration: none; font-size: 15px; }
.link-tel strong { color: var(--paper); font-weight: 600; border-bottom: 1px solid var(--line-2); transition: border-color var(--dur) var(--ease-out); }
.link-tel:hover strong { border-color: var(--crimson-hi); }
.link-tel--light { color: #ffe3e7; }
.link-tel--light strong { color: #fff; border-color: rgba(255, 255, 255, .5); }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; text-decoration: none; }
.arrow-link .btn__icon { background: var(--crimson); color: #fff; }
.arrow-link:hover .btn__icon { transform: translate(3px, -1px) scale(1.06); }
.tile__a { align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--crimson); padding-bottom: 2px; transition: color var(--dur) var(--ease-out); }
.tile__a:hover { color: var(--crimson-hi); }

/* =====================================================================
   CHROME (V1)
   ===================================================================== */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 14px; padding-inline: 14px; pointer-events: none; }
.nav__pill {
  pointer-events: auto; margin-inline: auto; max-width: 1180px; display: flex; align-items: center; gap: 22px;
  padding: 8px 8px 8px 22px; border-radius: 999px;
  background: rgba(14, 11, 12, .62); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -24px rgba(58, 10, 29, .7);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); transition: color var(--dur) var(--ease-out); }
.nav__links a:hover { color: var(--paper); }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 13px/1 var(--f-mono); color: var(--paper); }
.nav__tel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson-hi); }
.nav__menu { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(243, 236, 232, .04); cursor: pointer; }
.nav__menu-lines { position: relative; display: block; width: 18px; height: 10px; margin: auto; }
.nav__menu-lines i { position: absolute; left: 0; right: 0; height: 1.6px; background: var(--paper); border-radius: 2px; transition: transform var(--dur) var(--ease-out); }
.nav__menu-lines i:first-child { top: 0; } .nav__menu-lines i:last-child { bottom: 0; }
.nav__menu[aria-expanded="true"] i:first-child { transform: translateY(4.2px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child { transform: translateY(-4.2px) rotate(-45deg); }
.menu {
  pointer-events: auto; position: fixed; inset: 0; z-index: -1; padding: 110px 24px 40px;
  background: rgba(14, 11, 12, .94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: 800 clamp(2.2rem, 11vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; text-decoration: none; padding: 6px 0; }
.menu__foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.menu__tel { font: 500 16px var(--f-mono); text-decoration: none; }

.mbar { display: none; }
.nownext {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: baseline;
  padding: 12px 16px; border-radius: 16px; background: rgba(14, 11, 12, .72); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none;
}
.nownext__k { color: #fff; background: var(--crimson); padding: 3px 6px; border-radius: 4px; }
.nownext__k--next { background: transparent; color: var(--dim); padding: 3px 6px 3px 0; }
.nownext__v { color: var(--paper); min-width: 16ch; }
.nownext__v--next { color: var(--dim); }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vbadge {
  position: fixed; left: 14px; bottom: 14px; z-index: 70; padding: 8px 12px; border-radius: 10px;
  background: var(--paper); color: var(--ink-0); font: 700 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}

/* =====================================================================
   1 · HERO: the scroll film (V1). Default markup = STATIC mode (no-JS,
   mobile, reduced motion); the scrub layout needs JS + >=769 px + motion.
   ===================================================================== */
.film { position: relative; background: var(--ink-0); }
.film__stage { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; background: var(--ink-0); }
.film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poster-pos, 60% 50%); z-index: 0; }
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; }
.film__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(14, 11, 12, .72) 0%, rgba(14, 11, 12, .55) 30%, rgba(14, 11, 12, .82) 70%, rgba(14, 11, 12, .96) 100%); }
.film__vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 70% 40%, transparent 40%, rgba(58, 10, 29, .35) 100%); }
.film__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--seam) 16%, transparent) 30%, rgba(14, 11, 12, .8) 70%, var(--ink-0) 100%); }
.film__copy { position: relative; z-index: 8; display: flex; flex-direction: column; gap: 36px; padding: 118px var(--gutter) 64px; max-width: var(--wrap); margin-inline: auto; }
.bug, .chapters, .film__progress, .film__load { display: none; }
.hero__kicker { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.hero__kicker .chev { margin-top: 5px; flex: none; }
.hero__h1 { font: 600 15px/1.45 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); max-width: 40ch; }
.hero__display {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.3rem, 8.2vw, 8.4rem); line-height: .84; letter-spacing: -.01em; color: var(--paper);
  margin-bottom: 26px; text-wrap: balance;
}
.hero__line { display: block; }
.hero__amp { color: var(--crimson-hi); font-weight: 700; display: inline-block; transform: skewX(-8deg); }
.hero__sub { max-width: 54ch; color: #ddd3cf; font-size: clamp(1rem, 1.25vw, 1.15rem); margin-bottom: 30px; }
.hero__ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lower3__tag { display: inline-block; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; background: var(--crimson); color: #fff; padding: 6px 9px; border-radius: 4px; margin-bottom: 12px; }
.lower3__big { font: 800 clamp(2.2rem, 5vw, 4.6rem)/.9 var(--f-display); text-transform: uppercase; margin-bottom: 12px; max-width: 18ch; }
.lower3__line { color: #ddd3cf; max-width: 48ch; }
.lower3__src { display: inline-block; margin-top: 12px; font: 500 13px var(--f-mono); color: var(--crimson-hi); text-underline-offset: 4px; }
.cta__line { font: 800 clamp(1.8rem, 3.4vw, 3rem)/.95 var(--f-display); text-transform: uppercase; max-width: 22ch; margin-bottom: 26px; }
.chip-rating { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 10px 16px; border-radius: 999px; background: rgba(14, 11, 12, .58); border: 1px solid var(--line); text-decoration: none; font-size: 14px; color: var(--muted); }
.chip-rating strong { color: var(--paper); }
.beat--proof { border-left: 2px solid var(--crimson); padding-left: 20px; }
.beat--cta .hero__ctas { display: none; }
/* TASK Q: the last chapter = the "Back on the field" box, then (clear space) the first-visit CTA block, both low */
.film__final { display: flex; flex-direction: column; gap: 36px; }

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .js .film { height: var(--film-vh, 310vh); }
  .js .film__stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .film__canvas { display: block; }
  /* TASK T 2026-09-26: the left-side darkening is 30% lighter (stops x0.7, was .93/.80/.30/.06) so the people in the film read;
     the top/bottom band is unchanged. Hero text contrast is re-measured against the frames (TASK-T report). */
  .js .film__scrim {
    background:
      linear-gradient(90deg, rgba(14, 11, 12, .651) 0%, rgba(14, 11, 12, .56) 32%, rgba(14, 11, 12, .21) 60%, rgba(14, 11, 12, .042) 80%),
      linear-gradient(180deg, rgba(14, 11, 12, .70) 0%, rgba(14, 11, 12, 0) 22%, rgba(14, 11, 12, 0) 62%, rgba(14, 11, 12, .78) 100%);
  }
  .js .film__fade { height: 62%; opacity: 0; }
  .js .film__copy { position: absolute; inset: 0; display: grid; padding: 120px var(--gutter) 110px; max-width: none; }
  .js .beat { grid-area: 1 / 1; will-change: opacity, transform; }
  .js .beat--cta .hero__ctas { display: flex; }
  .js .film.is-static .beat--cta .hero__ctas { display: none; }
  .js .beat p, .js .beat h1 { text-shadow: 0 2px 24px rgba(14, 11, 12, .6); }
  /* TASK T: with the lighter left scrim, "or call (858) ..." over the brightest film pixels fell under AA (max-pixel 3.8:1);
     a tight shadow on this link only (not a wider scrim) */
  .js .film .link-tel { text-shadow: 0 1px 2px rgba(14, 11, 12, .9), 0 0 12px rgba(14, 11, 12, .6); }
  .js .beat:not(.beat--hero) { opacity: 0; visibility: hidden; }
  .js .beat--hero { align-self: center; max-width: 980px; }
  .js .beat--proof { align-self: end; max-width: 640px; margin-bottom: 36px; }
  .js .beat--right { justify-self: end; margin-right: 150px; }
  .js .beat--cta { align-self: center; max-width: 760px; }
  .js .film__final { grid-area: 1 / 1; align-self: end; max-width: 760px; margin-bottom: 36px; gap: 56px; }
  .js .film__final .beat { align-self: auto; margin-bottom: 0; }
  .js .bug { display: flex; position: absolute; z-index: 9; top: 104px; left: var(--gutter); gap: 18px; align-items: center; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .js .bug__rec { display: inline-flex; align-items: center; gap: 8px; }
  .js .bug__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson-hi); }
  .js .bug__tc { color: var(--paper); padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 11, 12, .5); font-variant-numeric: tabular-nums; }
  .js .chapters { display: flex; flex-direction: column; gap: 10px; position: absolute; z-index: 9; right: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0; list-style: none; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 14px 14px 14px 18px; border-radius: 14px; background: rgba(14, 11, 12, .55); border: 1px solid var(--line); }
  .js .chapters li { position: relative; padding-right: 22px; transition: color var(--dur) var(--ease-out); }
  .js .chapters li::after { content: ''; position: absolute; right: 0; top: 50%; width: 12px; height: 2px; background: var(--line-2); transform-origin: right; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
  .js .chapters li.is-on { color: var(--paper); }
  .js .chapters li.is-on::after { background: var(--crimson-hi); transform: scaleX(1.6); }
  .js .film__progress { display: block; position: absolute; z-index: 9; left: var(--gutter); right: var(--gutter); bottom: 44px; height: 2px; background: var(--line); }
  .js .film__progress i { display: block; height: 100%; background: var(--crimson); transform-origin: left; transform: scaleX(0); }
  .js .film__load { display: block; position: absolute; z-index: 10; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .08); transition: opacity .32s var(--ease-out); }
  .js .film__load i { display: block; height: 100%; background: var(--crimson-hi); transform-origin: left; transform: scaleX(0); }
  .js .film__load.done { opacity: 0; }
  .js .film.is-static { height: auto; }
  .js .film.is-static .film__stage { position: relative; height: auto; min-height: 100vh; }
  .js .film.is-static .film__canvas { display: none; }
  .js .film.is-static .film__copy { position: relative; display: flex; }
  .js .film.is-static .beat { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .js .film.is-static .film__final { margin-bottom: 0; gap: 36px; }
}

@media (min-width: 769px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  .js .film__final { gap: 28px; margin-bottom: 8px; }
  .js .film__final .lower3__big { font-size: clamp(2rem, 4vw, 3.4rem); }
  .js .film__final .cta__line { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 16px; }
  .js .film__final .chip-rating { margin-top: 14px; }
}

/* 2 · trust bar + 3 · kinetic services ticker (V1) */
.trustbar { background: var(--ink-0); border-top: 1px solid var(--line); }
.trustbar__list { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--wrap); display: grid; grid-template-columns: auto 1.6fr auto; }
.trustbar__list li { padding: 18px 22px; border-left: 1px solid var(--line); }
.trustbar__list li:first-child { border-left: 0; padding-left: 0; }
.trustbar__list a { text-decoration: none; font-size: 14px; color: var(--muted); transition: color var(--dur) var(--ease-out); }
.trustbar__list a strong { color: var(--paper); }
.trustbar__list a:hover { color: var(--paper); }
.ticker { background: var(--ink-0); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee { overflow: clip; padding: 26px 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__track span {
  font: 900 clamp(3rem, 7vw, 6.4rem)/1 var(--f-display); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(243, 236, 232, .32); padding-right: .5em; display: inline-flex; align-items: center; gap: .5em;
}
.marquee__track span::after { content: ''; width: .18em; height: .18em; border-radius: 50%; background: var(--crimson); }

/* =====================================================================
   CHAPTERS · shared
   ===================================================================== */
.chapter { position: relative; padding-block: var(--section); }
.chapter::before { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 2px; background: var(--crimson); transform-origin: left; transform: scaleX(var(--stinger, 0)); }
html:not(.js) .chapter::before { transform: scaleX(1); opacity: .5; }
.field::before { background: var(--on-field); }
.bezel { padding: 6px; border-radius: var(--radius); background: rgba(243, 236, 232, .035); border: 1px solid var(--line); }
.bezel__core { position: relative; border-radius: var(--radius-in); overflow: clip; background: var(--ink-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }

/* colour fields (V4) re-toned to V1: crimson / wine; the curtain = the previous section's colour retracting upward */
.field--crimson { background: var(--crimson); color: #fff; }
.field--wine { background: var(--wine); color: #fff; }
.field .eyebrow--field { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #ffe3e7; }
.field .eyebrow--field .chev, .field .chev { color: #fff; }
.field .hl { color: var(--on-field); }
.field .lede { color: #ffe9ec; }
.has-curtain { isolation: isolate; }
.has-curtain > :not(.curtain):not(.cta__bg) { position: relative; z-index: 2; }
.curtain { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-origin: 50% 0; }

/* =====================================================================
   4 · THE DIFFERENCE (V4 crimson field) + the V2 GyroStim loop with the
   pitch / yaw / roll HUD in the bottom-left column
   ===================================================================== */
.diff__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 110px); align-items: stretch; }
.diff__left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.diff .h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.diff__rows { list-style: none; margin: 0; padding: 0; align-self: start; }
.diff__row { border-top: 1px solid rgba(255, 255, 255, .32); padding: 28px 0 34px; }
.diff__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .32); }
.diff__title { font: 900 clamp(2.2rem, 4.2vw, 4rem)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 14px; }
.diff__row p:not(.diff__title) { max-width: 54ch; color: #ffeef0; }
.gyro { width: 100%; max-width: 460px; }
.gyro__bezel { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.gyro__frame { aspect-ratio: 1 / 1; background: #1c1416; }
.gyro__video { width: 100%; height: 100%; object-fit: cover; }
.gimbal { position: absolute; left: 12%; top: 12%; width: 76%; height: auto; overflow: visible; pointer-events: none; }
.gimbal__tick { stroke: rgba(255, 255, 255, .55); stroke-width: .8; }
.gimbal ellipse { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: .9; }
.gimbal__ring[data-ring="3"] ellipse { stroke: rgba(236, 107, 126, .95); stroke-dasharray: 3 5; }
.gimbal__core { fill: #fff; }
.gyro__rec { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; background: rgba(14, 11, 12, .6); font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.gyro__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson-hi); }
.readout { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 9px 12px; list-style: none; display: flex; gap: 16px; border-radius: 12px; background: rgba(14, 11, 12, .66); border: 1px solid var(--line); color: #fff; font: 500 11px/1.35 var(--f-mono); letter-spacing: .08em; }
.readout li { display: flex; flex-direction: column; }
.readout span { color: var(--muted); text-transform: uppercase; font-size: 10px; }
.readout b { font-weight: 600; min-width: 4ch; font-variant-numeric: tabular-nums; }
.gyro figcaption { margin-top: 12px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #ffe3e7; }

/* =====================================================================
   5 · WHERE THE PROS GO (V4 McCaffrey section, re-headed; V3 word reveal)
   ===================================================================== */
.pros { background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%); overflow: clip; padding-bottom: calc(var(--section) * .8); }
.pros__name {
  font: 900 min(13.5vw, 13rem)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.01em;
  color: var(--paper); margin-bottom: clamp(28px, 4vw, 56px); text-wrap: balance;
}
.pros__w { display: inline-block; }
.pros__w.pm { overflow: clip; vertical-align: top; padding-bottom: .03em; }
.pros__w .pc { display: inline-block; }
.pros__story { padding-block: 8px; }
.pros__feature { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.pros__feature > * { min-width: 0; }
.pros__video { max-width: 460px; }
.pros__video .bezel__core { aspect-ratio: 4 / 5; }
.pros__video video { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 14px; padding: 22px; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(14, 11, 12, .82), rgba(14, 11, 12, 0) 55%); color: var(--paper); text-align: left;
}
.play__disc { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--crimson); color: #fff; box-shadow: 0 0 0 10px rgba(171, 30, 52, .22); transition: transform var(--dur) var(--ease-out); }
.play:hover .play__disc { transform: scale(1.06); }
.play__label { font: 600 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 20px; }
.play[hidden], html:not(.js) .play { display: none; }
.pros__h3 { font: 800 clamp(2.8rem, 5.6vw, 5.4rem)/.9 var(--f-display); text-transform: uppercase; max-width: 14ch; }
.pros__pull { margin-top: 26px; padding-left: 20px; border-left: 2px solid var(--crimson); }
.pros__pull p { font: 600 clamp(1.75rem, 3.2vw, 3rem)/1.16 var(--f-body); letter-spacing: -.015em; color: #fff; max-width: 26ch; }
.pros__pull footer { margin-top: 16px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rw { display: inline; }
.transcript { margin-top: 26px; font-size: 15px; max-width: 62ch; color: var(--muted); }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-underline-offset: 5px; }
.transcript p { margin-top: 12px; }
.transcript .fine { margin-top: 8px; }
.rail-pin { margin-top: clamp(80px, 10vw, 140px); overflow: clip; }
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.rail-head__h { font: 800 clamp(1.8rem, 3vw, 2.8rem)/.95 var(--f-display); text-transform: uppercase; max-width: 22ch; }
.rail {
  display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) 22px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.rail::-webkit-scrollbar { display: none; }
.card { --h: clamp(300px, 32vw, 440px); flex: none; scroll-snap-align: start; width: calc(var(--h) * 900 / 788); margin: 0; }
.card--9x16 { width: calc(var(--h) * 9 / 16); }
.card--4x5 { width: calc(var(--h) * 4 / 5); }
.card__media { position: relative; height: var(--h); border-radius: var(--radius-in); overflow: clip; background: var(--ink-2); border: 1px solid var(--line); }
.card__media img, .card__media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.04); transition: filter var(--dur) var(--ease-out), transform 1.1s var(--ease-out); }
.card:hover .card__media img, .card:hover .card__media video { filter: none; transform: scale(1.035); }
.card__play { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; border: 0; cursor: pointer; background: linear-gradient(to top, rgba(14, 11, 12, .7), rgba(14, 11, 12, 0) 50%); color: #fff; }
.card__play .play__disc { width: 52px; height: 52px; box-shadow: 0 0 0 8px rgba(171, 30, 52, .22); }
.card__play.is-playing { background: transparent; }
.card__play.is-playing .play__disc { opacity: .55; }
.card__play[hidden] { display: none; }
.card h4 { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--crimson); font: 800 1.45rem/.95 var(--f-display); text-transform: uppercase; }
.card p { margin-top: 6px; padding-left: 16px; font: 500 12px/1.45 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 40ch; }
.card p.fine { text-transform: none; letter-spacing: .02em; color: var(--dim); }
.rail__bar { max-width: var(--wrap); margin: 8px auto 0; padding-inline: var(--gutter); }
.rail__bar::before { content: ''; display: block; height: 2px; margin-bottom: -2px; background: var(--line); }
.rail__bar i { display: block; height: 2px; background: var(--crimson); transform-origin: left; transform: scaleX(.18); }

/* =====================================================================
   6 · IN THEIR OWN WORDS (V3 review wall)
   ===================================================================== */
.words { background: var(--ink-0); }
.words__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 64px); }
.rating { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; padding: 12px 20px 12px 12px; border-radius: 999px; border: 1px solid var(--line-2); transition: border-color var(--dur) var(--ease-out); }
.rating:hover { border-color: var(--crimson-hi); }
.rating__num { font: 900 3.4rem/1 var(--f-display); padding: 0 6px; }
.rating__txt { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.wall { columns: 3 300px; column-gap: 18px; }
.pull { break-inside: avoid; margin-bottom: 18px; padding: 30px 24px 22px; border-radius: 22px; background: rgba(243, 236, 232, .04); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); position: relative; }
.pull blockquote { margin-top: 14px; font-size: 1.12rem; line-height: 1.5; color: #e6dcd8; }
.pull--xl { background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%); border-color: rgba(236, 107, 126, .22); }
.pull--xl blockquote { font: 800 clamp(1.7rem, 2.4vw, 2.2rem)/1 var(--f-display); text-transform: uppercase; color: #fff; }
.pull figcaption { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.pull figcaption::before { content: '★★★★★'; color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.tag { display: inline-block; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--crimson); color: #fff; padding: 6px 9px; border-radius: 999px; }
.pull--xl .tag { background: rgba(255, 255, 255, .14); }
.words__note { margin-top: 22px; font-size: 13px; color: var(--dim); }

/* =====================================================================
   7 · THE FIRST STEP (V3 booking content in V1's wine call-sheet field)
   ===================================================================== */
.booking { background: radial-gradient(120% 120% at 0% 0%, var(--wine) 0%, var(--wine-deep) 55%, var(--ink-0) 100%); }
.booking .eyebrow { border-color: rgba(255, 255, 255, .16); color: #f1d8dc; }
.booking .hl { color: #ffb3bf; }
.booking__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.callsheet { list-style: none; margin: 34px 0; padding: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, .14); }
.callsheet li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #f3e4e7; }
.callsheet__k { font: 600 12px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ffb3bf; }
.link-tel--big { font-size: 17px; color: #e5cfd3; }
.poptin-host {
  position: relative; min-height: 560px; border-radius: var(--radius); padding: 24px;
  background: rgba(14, 11, 12, .55); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.poptin-host__label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.poptin-host__label code { font-family: var(--f-mono); color: var(--paper); }
.poptin-host__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; margin-top: 6px; }
.poptin-host__ghost { display: grid; gap: 14px; }
.poptin-host__ghost span { height: 52px; border-radius: 12px; background: rgba(243, 236, 232, .07); border: 1px dashed rgba(243, 236, 232, .16); }
.poptin-host__ghost .w60 { width: 60%; }
.poptin-host__ghost .btnish { height: 56px; width: 50%; border-radius: 999px; background: rgba(171, 30, 52, .5); border-style: solid; }

/* =====================================================================
   8 · SERVICES "MOST REQUESTED" (V4 index layout + V3 hover preview)
   ===================================================================== */
.services { background: var(--ink-1); }
.index__head { margin-bottom: clamp(40px, 5vw, 72px); }
.index__title { font: 900 clamp(2.8rem, 7vw, 7rem)/.86 var(--f-display); text-transform: uppercase; max-width: 14ch; }
.index__rows { border-bottom: 1px solid var(--line); }
.irow {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 16px 40px; align-items: center;
  padding: 30px 14px; border-top: 1px solid var(--line); text-decoration: none; color: var(--paper); overflow: clip;
}
.irow::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--crimson); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.irow:hover::before, .irow:focus-visible::before { transform: scaleX(1); }
.irow__rule { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--crimson); transform-origin: 0 50%; }
.irow__thumb { display: none; }
.irow__h { font: 800 clamp(1.7rem, 3vw, 2.9rem)/.92 var(--f-display); text-transform: uppercase; transition: transform .6s var(--ease-out); }
.irow:hover .irow__h { transform: translateX(10px); }
.irow__city { display: block; margin-top: 10px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .14em; color: var(--muted); transition: color var(--dur) var(--ease-out); }
.irow:hover .irow__city { color: #ffe3e7; }
.irow__p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 54ch; transition: color var(--dur) var(--ease-out); }
.irow:hover .irow__p { color: #fff; }
.irow__go { width: 46px; height: 46px; background: rgba(243, 236, 232, .08); transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.irow:hover .irow__go { background: #fff; color: var(--crimson); transform: translateX(4px); }
/* the peek lives in a section-sized clip box (TASK P): it scrolls with section 8 and can never paint over another section */
.peek-clip { position: absolute; inset: 0; z-index: 4; overflow: hidden; overflow: clip; pointer-events: none; }
.peek { position: absolute; left: 0; top: 0; width: 280px; height: 210px; object-fit: cover; border-radius: 18px; pointer-events: none; opacity: 0; visibility: hidden; z-index: 45; border: 6px solid rgba(243, 236, 232, .06); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.peek[src=""] { display: none; }
.elevated { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; }
.elevated__label { grid-column: 1 / -1; padding: 16px 24px; background: var(--ink-2); font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.etile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 260px; padding: 28px; background: var(--ink-0); text-decoration: none; overflow: clip; }
.etile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--crimson); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease-out); }
.etile:hover::before, .etile:focus-visible::before { transform: scaleY(1); }
.etile__kick { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--crimson-hi); }
.etile:hover .etile__kick { color: #ffe3e7; }
.etile__name { font: 800 clamp(1.8rem, 2.8vw, 2.6rem)/.92 var(--f-display); text-transform: uppercase; }
.etile:first-of-type .etile__name { font-size: clamp(2.4rem, 4vw, 3.8rem); }
.etile__p { font-size: 14.5px; color: var(--muted); max-width: 40ch; }
.etile:hover .etile__p { color: #fff; }
/* touch / small screens / no JS: the preview image is shown inline in each row (nothing hidden behind hover) */
@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  .irow { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .irow__thumb { display: block; grid-row: 1 / span 2; width: 96px; height: 96px; object-fit: cover; border-radius: 14px; align-self: start; }
  .irow__h { grid-column: 2; }
  .irow__p { grid-column: 2 / -1; grid-row: 2; }
  .irow__go { grid-column: 3; grid-row: 1; }
}
html:not(.js) .irow__thumb { display: block; }
html:not(.js) .irow { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) auto; }
html:not(.js) .irow__thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }

/* =====================================================================
   9 · THE NUMBERS (V4 crimson field + odometer) in V1 scoreboard type
   ===================================================================== */
.stats__h { max-width: 18ch; margin-bottom: clamp(40px, 5vw, 72px); font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255, 255, 255, .4); }
.stat { padding: 28px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .25); }
.stat__v { font: 900 clamp(4.4rem, 9vw, 9.6rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.stat dd { margin: 14px 0 0; font-size: 15px; line-height: 1.45; max-width: 26ch; color: #ffeef0; }
.odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; }
.odo__col { display: flex; flex-direction: column; }
.odo__col span, .odo__static { display: block; height: 1em; }
.stats__note { margin-top: 40px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .06em; color: #ffe3e7; }

/* =====================================================================
   10 · FIND YOUR STARTING POINT (V3 sticky head + chip index)
   ===================================================================== */
.router { background: var(--ink-0); }
.router__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.router__head { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.router__head .eyebrow { margin-bottom: 0; }
.router__groups { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; }
.chipset { background: var(--ink-0); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; }
.chipset:first-child { background: linear-gradient(140deg, rgba(99, 18, 50, .55) 0%, var(--ink-0) 70%); }
.chipset h3 { font: 800 clamp(1.5rem, 2.2vw, 2.1rem)/.95 var(--f-display); text-transform: uppercase; }
.chipset:first-child h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.chips a:hover { background: var(--crimson); border-color: var(--crimson); transform: translateY(-2px); }
.chipset:first-child .chips a { font-size: 17px; padding: 13px 22px; }

/* =====================================================================
   11 · WHO YOU WORK WITH (V1 team)
   ===================================================================== */
.team { background: var(--ink-1); }
.team__grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 20px; }
.person { margin: 0; }
.person--lead { grid-column: span 2; grid-row: span 2; }
.person--text { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px 22px; padding: 22px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(243, 236, 232, .03); }
.person--text .person__line { color: var(--muted); font-size: 15px; }
.person__mono { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wine); font: 800 1.3rem/1 var(--f-display); color: #fff; }
.person__a { display: block; text-decoration: none; }
.person__media { display: block; border-radius: var(--radius-in); overflow: clip; background: var(--ink-2); aspect-ratio: 4 / 5; }
.person--lead .person__media { aspect-ratio: auto; height: min(720px, 62vw); }
.person__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.06); transition: filter var(--dur) var(--ease-out), transform 1.1s var(--ease-out); }
.person:hover .person__media img { filter: grayscale(0); transform: scale(1.03); }
.person__name { display: block; margin-top: 14px; font: 800 1.35rem/1 var(--f-display); text-transform: uppercase; }
.person__cred { margin-top: 6px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crimson-hi); }
.person--text .person__name, .person--text .person__cred { margin: 0; }
.person--lead .person__a { position: relative; }
.person--lead .person__l3 { position: absolute; left: 18px; bottom: 18px; right: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(14, 11, 12, .78); border-left: 3px solid var(--crimson); }
.person--lead .person__name { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.person__bio { margin-top: 18px; color: var(--muted); max-width: 60ch; }

/* =====================================================================
   12 · HOW IT WORKS (V1 phase rail; pinned horizontal scrub on desktop)
   ===================================================================== */
.process { padding-bottom: calc(var(--section) * .6); overflow: clip; }
.process__head { margin-bottom: clamp(36px, 5vw, 60px); }
.process__rail {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) 10px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.process__rail::-webkit-scrollbar { display: none; }
.step { flex: none; width: min(80vw, 440px); scroll-snap-align: start; }
.step__media .bezel__core { aspect-ratio: 16 / 10; }
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__n { display: block; margin-top: 20px; font: 600 13px/1 var(--f-mono); letter-spacing: .12em; color: var(--crimson-hi); }
.step h3 { margin-top: 10px; font: 800 2rem/.95 var(--f-display); text-transform: uppercase; }
.step p { margin-top: 10px; color: var(--muted); max-width: 40ch; }
.step--quote { display: flex; flex-direction: column; justify-content: center; padding: 36px; border-radius: var(--radius); background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%); align-self: stretch; }
.step--quote blockquote { margin: 0; font: 800 clamp(2rem, 3vw, 2.8rem)/.98 var(--f-display); text-transform: uppercase; }
.step--quote cite { margin-top: 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: #ffb3bf; }

/* =====================================================================
   13 · HOW PAYMENT WORKS (V4 wine field, factors only)
   ===================================================================== */
.pay__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pay__big { font: 900 clamp(4.6rem, 13vw, 13rem)/.8 var(--f-display); text-transform: uppercase; margin-top: 26px; white-space: nowrap; color: #fff; }
.pay__copy .lede { margin-top: 0; }
.pay__list { list-style: none; padding: 0; margin: 32px 0; }
.pay__list li { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .26); font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-display); text-transform: uppercase; }
.pay__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .26); }
.pay .link-tel { color: #ffe3e7; }
.pay .link-tel strong { color: #fff; border-color: rgba(255, 255, 255, .5); }
.pay__fine { margin-top: 24px; font-size: 14px; color: #f1d8dc; max-width: 58ch; }

/* =====================================================================
   14 · INSIDE THE CLINIC (V1 monitor wall)
   ===================================================================== */
.monitors { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, 17vw); grid-auto-flow: dense; gap: 14px; }
.mon { margin: 0; position: relative; border-radius: 20px; padding: 5px; background: rgba(243, 236, 232, .035); border: 1px solid var(--line); }
.mon--program { grid-column: span 2; grid-row: span 2; }
.mon__screen { position: absolute; inset: 5px; border-radius: 15px; overflow: clip; background: var(--ink-2); }
.mon__screen img, .mon__video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.mon:hover .mon__screen img { transform: scale(1.04); }
.mon__screen picture { display: block; width: 100%; height: 100%; }
/* TASK T: the hard-shell HBOT still (3:2) keeps the chamber in frame when cropped square or tall */
.img--hbot { object-position: 62% 50%; }
.mon figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(14, 11, 12, .78); font: 500 12px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.mon__tag { background: var(--crimson); color: #fff; padding: 4px 7px; border-radius: 4px; }

/* =====================================================================
   15 · VISIT (V1)
   ===================================================================== */
.locations { background: var(--ink-1); }
.loc__grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 8fr 4fr; gap: 20px; align-items: stretch; }
.loc__main .bezel__core { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 460px; }
.loc__nap { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.loc__nap h3 { font: 800 clamp(1.8rem, 2.6vw, 2.4rem)/.95 var(--f-display); text-transform: uppercase; }
.loc__nap address { color: #ddd3cf; }
.loc__tel { font: 600 18px var(--f-mono); text-decoration: none; }
.hours { border-collapse: collapse; font-size: 14px; width: 100%; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hours th { font-weight: 500; color: var(--muted); padding-right: 16px; }
.loc__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: auto; }
.loc__travel { font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--crimson); }
.loc__map { position: relative; min-height: 320px; background: #1a1416; overflow: clip; }
.loc__map-grid { position: absolute; inset: -20%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; transform: rotate(-12deg); }
.loc__pin { position: absolute; left: 50%; top: 46%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 10px rgba(171, 30, 52, .25), 0 0 0 24px rgba(171, 30, 52, .1); }
.loc__map-btn { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 11, 12, .8); cursor: pointer; font-size: 14px; font-weight: 600; }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.6) invert(.9) hue-rotate(180deg); }
.loc__side { border-radius: var(--radius); padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; align-self: start; }
.loc__side h3 { font: 800 1.6rem/.95 var(--f-display); text-transform: uppercase; }
.loc__side address, .loc__svc { color: var(--muted); font-size: 15px; }

/* =====================================================================
   16 · FAQs (V1)
   ===================================================================== */
.faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.scope { margin-top: 36px; }
.scope__h { font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.scope__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.scope__t th, .scope__t td { text-align: left; vertical-align: top; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); }
.scope__t thead th { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.scope__t tbody th { font-weight: 600; width: 38%; }
.scope__t td { color: var(--muted); }
.scope__us th, .scope__us td { color: var(--paper); }
.scope__us th { color: var(--crimson-hi); }
.faq__list { display: grid; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 800 clamp(1.35rem, 2vw, 1.8rem)/1.05 var(--f-display); text-transform: uppercase; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px -6px; background: var(--paper); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); background: var(--crimson); border-color: var(--crimson); }
.qa__a { padding: 0 0 26px; color: var(--muted); max-width: 64ch; }

/* =====================================================================
   17 · CTA (V4 crimson field + velocity marquee) with V1's clipboard still
   faint behind it
   ===================================================================== */
.cta { overflow: clip; padding-top: clamp(64px, 8vw, 110px); isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--cta-clipboard-o); filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; pointer-events: none; }
.cta__mq { overflow: hidden; margin-bottom: clamp(56px, 7vw, 96px); }
.cta__track { display: flex; width: max-content; }
.cta__item { display: inline-flex; align-items: center; gap: .32em; padding-right: .32em; white-space: nowrap; font: 900 clamp(4rem, 12vw, 12.5rem)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.cta__item svg { width: auto; height: .46em; color: var(--ink-0); }
.cta__item path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.cta__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.cta__h { font: 900 clamp(2.8rem, 6vw, 6rem)/.86 var(--f-display); text-transform: uppercase; max-width: 13ch; }
.cta__row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

/* =====================================================================
   18 · FOOTER (V2 content, V1 styling; both offices, Rancho Santa Fe first)
   ===================================================================== */
.foot { background: var(--ink-1); border-top: 1px solid var(--line); padding: 72px 0 110px; font-size: 14px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
.foot__brand img { width: 220px; height: auto; margin-bottom: 18px; }
.foot__brand p { color: var(--muted); max-width: 36ch; }
.foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__col p { color: var(--muted); }
.foot__col a { text-decoration: none; color: var(--muted); transition: color var(--dur) var(--ease-out); }
.foot__col a:hover { color: var(--paper); }
.foot__nav { gap: 8px; }
.foot__h { font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper) !important; margin-bottom: 6px; }
.foot__hours { font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .03em; color: var(--dim) !important; }
.foot__fine { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--dim); font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .04em; }

/* =====================================================================
   RESPONSIVE (designed, not shrunk): single column below 768
   ===================================================================== */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__tel { margin-left: auto; }
  .nownext { display: none; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .person--lead { grid-column: 1 / -1; grid-row: auto; }
  .person--lead .person__media { height: min(620px, 110vw); }
  .monitors { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, 30vw); }
  .loc__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .diff__grid, .pros__feature, .pay__grid, .router__grid { grid-template-columns: 1fr; }
  .router__head { position: static; }
  .elevated { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat { padding-bottom: 28px; }
  .gyro { max-width: 520px; }
}
@media (max-width: 768px) {
  :root { --section: 88px; }
  body { font-size: 16px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .nav { top: 10px; padding-inline: 10px; }
  .nav__pill { padding: 6px 6px 6px 16px; gap: 10px; }
  .nav__logo img { height: 28px; }
  .nav__tel, .nav__pill > .btn--book { display: none; }
  .nav__menu { display: grid; }
  .film__copy { padding: 104px var(--gutter) 48px; gap: 28px; }
  .hero__h1 { font-size: 14px; letter-spacing: .1em; }
  .hero__display { font-size: clamp(3.1rem, 15vw, 4.4rem); }
  .lower3__big { font-size: 2.2rem; }
  .beat--proof { padding-left: 16px; }
  .beat--chapter { display: none; }   /* phones = the poster version (no scrub): hero + the final first-visit block only */
  .trustbar__list { grid-template-columns: 1fr; }
  .trustbar__list li { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0; }
  .trustbar__list li:first-child { border-top: 0; }
  /* TASK T (owner): phones show the rating once, in the hero's first-visit block; the trust-list repeat is hidden here only (desktop keeps it) */
  .trustbar__list .trustbar__rating { display: none; }
  .trustbar__list .trustbar__rating + li { border-top: 0; }
  .booking__grid, .faq__grid { grid-template-columns: 1fr; }
  .diff__left { gap: 36px; }
  .diff__title { font-size: 2.3rem; }
  .readout { gap: 12px; padding: 8px 10px; }
  .pros__name { font-size: 18.5vw; }
  .pros__h3 { font-size: 2.9rem; }
  .pros__pull p { font-size: 1.65rem; }
  .card { --h: 360px; }
  .rail-pin { margin-top: 72px; }
  .wall { columns: 1; }
  .rating__num { font-size: 2.8rem; }
  .irow { padding: 24px 6px; gap: 12px 16px; grid-template-columns: 72px minmax(0, 1fr) auto; }
  .irow__thumb { width: 72px; height: 72px; border-radius: 12px; }
  .irow__h { font-size: 1.6rem; }
  .index__title { font-size: 3.1rem; }
  .etile { min-height: 200px; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat__v { font-size: 4.6rem; }
  .stat dd { font-size: 14px; }
  .team__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .person--text { grid-template-columns: auto 1fr; }
  .person--text .person__line { grid-column: 1 / -1; }
  .person--text .person__name { grid-column: 2; justify-self: start; }
  .person--text .person__cred { grid-column: 1 / -1; }
  .person__name { font-size: 1.1rem; }
  .pay__big { white-space: normal; font-size: 5.4rem; }
  .monitors { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; }
  .mon--program { grid-column: 1 / -1; grid-row: span 2; }
  .mon figcaption { left: 10px; bottom: 10px; font-size: 10.5px; padding: 6px 8px; }
  .loc__main .bezel__core { grid-template-columns: 1fr; }
  .loc__map { min-height: 240px; }
  .cta__item { font-size: 4.2rem; }
  .cta__h { font-size: 3rem; }
  .foot__grid { grid-template-columns: 1fr; }
  .mbar {
    display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
    background: rgba(14, 11, 12, .86); border-top: 1px solid var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px; text-decoration: none; font-weight: 600; }
  .mbar__call { border: 1px solid var(--line-2); color: var(--paper); }
  .mbar__call svg { color: var(--crimson-hi); }
  .mbar__book { background: var(--crimson); color: #fff; }
  .vbadge { bottom: calc(76px + env(safe-area-inset-bottom)); left: 10px; font-size: 10.5px; padding: 6px 9px; }
}
@media (max-width: 420px) {
  .team__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding-left: 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid rgba(255, 255, 255, .25); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}