/* ============================================================
   JV CONSULTING — TITANIUM. Graphite, brushed metal, cognac amber.
   Dark only.

   Design rules that keep this out of "generic SaaS" territory:
     · NO coloured glow. Depth comes from black shadow and hairlines.
     · Near-square corners (2–4px), never pills, never 18px cards.
     · The accent is rationed — numbers, rules, CTAs, current state.
       If everything is amber, nothing is.
     · Rules are brushed-metal gradients, not flat 1px greys.
     · Display type is tight and uppercase; body is quiet.
   ============================================================ */

:root{
  color-scheme: dark;

  /* ---- surfaces ---- */
  --bg:#0B1A2E;
  --surface:#112742;
  --surface-2:#16304F;
  --elev:#1B3A5E;
  --void:#071322;

  /* ---- hairlines ---- */
  --rule:rgba(237,242,248,.10);
  --rule-2:rgba(237,242,248,.19);
  --rule-lit:rgba(217,164,65,.38);

  /* ---- ink ---- */
  --text:#EDF2F8;
  --text-2:#93A7C0;
  --faint:#5E7392;              /* DECORATIVE ONLY — fails AA for body text */

  /* ---- accent: gold, used sparingly ---- */
  --accent:#D9A441;
  --accent-hover:#F0C36B;
  --accent-ink:#0B1A2E;
  --wash:rgba(217,164,65,.10);

  /* ---- brushed metal ---- */
  --metal-1:#A8BBD2;
  --metal-2:#5A7A9E;
  --metal:linear-gradient(90deg,var(--metal-1),var(--metal-2) 42%,transparent);
  --hero-tint:#EBCB93;

  /* The recessive half of every figure on the site — the bar the accent is
     being compared against. A blue-grey rather than a neutral one: the
     graphite theme's #6B7075 measures 3.02:1 on this surface, a hair over
     the floor and visibly muddy against blue. #647F9C clears every surface
     it lands on (3.63 tinted band / 4.21 page / 4.49 void). Measured on the
     navy surfaces, not carried over. */
  --chart-rec:#647F9C;

  /* ---- type ---- */
  --display:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- space ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:120px;
  --max:1120px;
  --gutter:clamp(20px,5vw,48px);
  --nav-h:70px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- shape + elevation: square-ish, black shadow, no colour ---- */
  --r-sm:2px; --r:3px; --r-lg:4px; --r-pill:2px;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 12px 40px -16px rgba(0,0,0,.85);
  --shadow-3:0 28px 80px -28px rgba(0,0,0,.9);

  /* Raw channels, because these are used inside rgba() with varying alpha.
     Everything a theme has to repaint lives here — if a colour is written
     literally further down this file, the navy theme cannot reach it. */
  --glow-warm-rgb:217,164,65;      /* the amber wash and the hero's warm blob */
  --glow-cool-rgb:104,140,184;     /* the cool blob */
  --glow-3-rgb:72,110,158;        /* home-only third blob */
  --ink-rgb:237,242,248;           /* hero grid hairlines */
  --plate:#071322;                 /* letterbox behind the car; seq.js reads this */
  --plate-rgb:7,19,34;               /* the scrim gradients over the car */
  --seq-grid-rgb:228,196,140;      /* the grid drawn across the sequence */
  --text-bright:#FFFFFF;           /* beat and guarantee headings */
  --beat-body:#C9D6E6;
  --beat-note:#93A7C0;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   GRAPHITE — the alternate theme, selected with data-theme="graphite".

   Navy and gold is the default and lives in the bare :root block
   above, so it is what renders with no JavaScript at all. This was
   the other way round until navy won; the blocks were swapped rather
   than the theme being forced on in script, because a default that
   depends on a script running is a default that flashes the wrong
   palette on a slow connection and shows the wrong one if the script
   fails.

   Graphite is the original: graphite and cognac rather than navy and
   gold. The same structure, the same rationing, a cooler and less
   formal register.

   Only tokens are redefined. Nothing below this block knows which
   theme is running, which is the whole point — if a rule needs
   editing to support a theme, that rule has a literal colour in it
   and should be using a token instead.

   Both palettes were measured against the surfaces they land on
   rather than chosen by eye. On navy: text 15.5:1 on the page,
   secondary text 7.1:1, gold 7.8:1, and the ink on a gold button
   7.8:1. Each theme's --chart-rec differs because the other's
   measured under the 3:1 floor on the opposite surface.
   ============================================================ */
:root[data-theme="graphite"]{
  --bg:#0A0A0B;
  --surface:#121214;
  --surface-2:#171719;
  --elev:#1D1D20;
  --void:#050505;

  --rule:rgba(237,234,230,.08);
  --rule-2:rgba(237,234,230,.16);
  --rule-lit:rgba(200,135,60,.34);

  --text:#EDEAE6;
  --text-2:#8A8580;
  --faint:#5A5651;              /* DECORATIVE ONLY — fails AA for body text */

  --accent:#C8873C;
  --accent-hover:#E0A155;
  --accent-ink:#120A03;
  --wash:rgba(200,135,60,.09);

  --metal-1:#9BA0A6;
  --metal-2:#5C6166;
  --metal:linear-gradient(90deg,var(--metal-1),var(--metal-2) 42%,transparent);
  --hero-tint:#D9B98C;

  /* NOT --metal-2 (#5C6166), which measures 2.99:1 against the tinted band
     the charts sit on and so fails the 3:1 floor — a bar nobody can see is a
     bar that isn't there. #6B7075 clears every graphite surface (3.74 tint /
     3.96 page / 4.08 void) while keeping the widest separation from the
     cognac accent (ΔE 18.6 normal vision, 14.9 worst-case colour blindness). */
  --chart-rec:#6B7075;

  --glow-warm-rgb:200,135,60;
  --glow-cool-rgb:155,160,166;
  --glow-3-rgb:120,110,100;
  --ink-rgb:237,234,230;
  --plate:#050506;
  --plate-rgb:5,5,5;
  --seq-grid-rgb:217,185,140;
  --text-bright:var(--text-bright);
  --beat-body:var(--beat-body);
  --beat-note:var(--beat-note);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.62; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Ambient wash — fixed, so it never repaints on scroll, and drifting, so the
   amber on every page is a light that moves rather than a stain that doesn't.
   Transform only: it composites on the GPU and repaints nothing underneath.
   It rests slightly scaled up so the drift can never pull an edge into view,
   and the period is long and prime-ish against the hero blobs so the two
   never visibly sync into a pulse. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 42vw at 84% -10%, rgba(var(--glow-warm-rgb),.055), transparent 66%),
    radial-gradient(50vw 36vw at -12% 46%, rgba(var(--glow-cool-rgb),.045), transparent 70%);
  transform:scale(1.1);
  will-change:transform;
  animation:wash 43s ease-in-out infinite alternate;
}
@keyframes wash{to{transform:translate3d(11vw,7vh,0) scale(1.26)}}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--noise); opacity:.032; mix-blend-mode:overlay;
}
main{position:relative; z-index:1}

img,video,canvas{max-width:100%; display:block}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit}
ul{margin:0; padding:0}
:focus-visible{outline:2px solid var(--accent-hover); outline-offset:3px; border-radius:3px}
.seq :focus-visible,.hero :focus-visible{outline-color:var(--hero-tint)}

.micro{font-family:var(--data); font-size:10.5px; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; font-weight:400}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.prose{max-width:68ch}
.sr-only{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:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:var(--r-sm); font-weight:600}
.skip:focus{left:12px; top:12px}

.fig{
  font-family:var(--data); font-size:clamp(24px,3.6vw,34px); font-weight:500;
  letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;
  color:var(--accent-hover); display:block; padding-top:12px;
  border-top:1px solid; border-image:var(--metal) 1;
}
.footnote{margin-top:var(--s3); color:var(--text-2); font-size:14px; max-width:68ch}

/* ============================================================ BUTTONS ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:13px 26px; border-radius:var(--r-sm);
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-family:var(--data); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--accent); white-space:nowrap; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn:active{background:var(--accent); border-color:var(--accent)}
.btn--lg{padding:17px 34px; min-height:54px; font-size:11.5px}
/* secondary: hairline ghost, for anything that isn't the one CTA */
.btn--ghost{background:transparent; color:var(--text); border-color:var(--rule-2)}
.btn--ghost:hover{background:transparent; border-color:var(--accent); color:var(--accent-hover)}

/* ============================================================ NAV ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; height:var(--nav-h); z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter); gap:var(--s4);
  background:transparent; border-bottom:1px solid transparent; color:#F2F0FF;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
/* scrim in the transparent state — keeps nav text legible over the bright mesh */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,10,11,.62), transparent);
  transition:opacity .35s var(--ease);
}
.nav.is-solid::before,.nav.is-panel::before{opacity:0}

.nav.is-solid,.nav.is-panel{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(18px);
          backdrop-filter:blur(18px);
  border-bottom-color:var(--rule); color:var(--text);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.is-solid,.nav.is-panel{background:color-mix(in srgb, var(--bg) 94%, transparent)}
}

.nav__brand{
  font-family:var(--display); font-size:15px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; z-index:2;
}
.nav__brand span{color:var(--accent)}

.nav__menu{display:flex; align-items:center; gap:var(--s4)}
.nav__list{display:flex; align-items:center; gap:var(--s1); list-style:none}
.nav__item{position:relative}

.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:var(--r-sm);
  font-family:var(--data); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:inherit; text-decoration:none; background:none; border:0; cursor:pointer;
  transition:background .2s, color .2s;
}
.nav__link:hover{background:color-mix(in srgb, currentColor 9%, transparent)}
.nav__link[aria-current="page"],.nav__toggle.is-current{color:var(--accent-hover)}
.nav__link:hover{background:none; color:var(--accent-hover)}
.nav__chev{width:10px; height:6px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s var(--ease)}
[aria-expanded="true"] > .nav__chev{transform:rotate(180deg)}

.nav__sub{
  position:absolute; top:calc(100% + 10px); left:-8px; min-width:330px;
  margin:0; padding:0; list-style:none; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--elev) 94%, transparent);
  -webkit-backdrop-filter:blur(22px);
          backdrop-filter:blur(22px);
  border:1px solid var(--rule-2);
  box-shadow:var(--shadow-3);
  color:var(--text);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__sub{background:var(--elev)}
}
.nav__sub a{display:grid; gap:3px; padding:16px 18px; text-decoration:none; border-bottom:1px solid var(--rule)}
.nav__sub li:last-child a{border-bottom:0}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--wash)}
.nav__sub strong{font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--data); color:var(--accent-hover)}
.nav__sub span{color:var(--text-2); font-size:13.5px; line-height:1.45; letter-spacing:-.005em}

.nav__burger{
  display:none; width:40px; height:40px; border-radius:var(--r-sm);
  align-items:center; justify-content:center;
  background:transparent; border:1px solid color-mix(in srgb, currentColor 32%, transparent);
  color:inherit; cursor:pointer; z-index:2;
}
.nav__burger-box{position:relative; width:16px; height:10px}
.nav__burger-box::before,.nav__burger-box::after{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s;
}
.nav__burger-box::before{top:0}
.nav__burger-box::after{bottom:0}
[aria-expanded="true"] .nav__burger-box::before{transform:translateY(4.25px) rotate(45deg)}
[aria-expanded="true"] .nav__burger-box::after{transform:translateY(-4.25px) rotate(-45deg)}

/* ---- theme toggle. Temporary by design: it exists to compare the two
   palettes, and when one wins this button and the losing token block come out
   together. It names what it will DO, not what is on — a switch labelled with
   its own state is the oldest ambiguity in interface design. ---- */
.nav__theme{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:7px 12px; border:1px solid var(--rule-2); border-radius:var(--r-sm);
  background:transparent; color:var(--text-2); cursor:pointer;
  font-family:var(--data); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.nav__theme:hover{border-color:var(--accent); color:var(--text)}
.nav__swatch{
  width:11px; height:11px; border-radius:50%; flex:none;
  /* the palette it would switch TO, so the control previews its own result */
  background:linear-gradient(135deg,#0A0A0B 48%,#C8873C 52%);
  border:1px solid var(--rule-2);
}
:root[data-theme="graphite"] .nav__swatch{background:linear-gradient(135deg,#0B1A2E 48%,#D9A441 52%)}

/* ============================================================ HERO ============================================================ */
.hero,.page-hero{
  position:relative; display:grid; align-content:center;
  padding:calc(var(--nav-h) + var(--s5)) 0 var(--s6);
  overflow:hidden; isolation:isolate;
}
.hero{min-height:100svh; padding-bottom:calc(var(--s6) + var(--s4))}
.page-hero{min-height:min(74svh,660px); border-bottom:1px solid var(--rule)}

.hero__bg{position:absolute; inset:0; z-index:-1; pointer-events:none}

.hero__blob{
  position:absolute; width:62vmax; aspect-ratio:1; border-radius:50%;
  will-change:transform; contain:strict;
}
/* ease-in-out, NOT --ease. --ease is an ease-out (cubic-bezier(.22,1,.36,1)):
   on a 34s alternate loop it covers most of its travel in the first few
   seconds and then sits parked for the rest of the cycle, which is why these
   were animating and still reading as a static stain. An in-out curve spreads
   the movement across the whole period, so the hero is always gently in
   motion without any moment of it being fast. */
.hero__blob--a{background:radial-gradient(closest-side, rgba(var(--glow-warm-rgb),.16), transparent 70%);
               top:-24vmax; left:-10vmax; animation:drift-a 29s ease-in-out infinite alternate}
.hero__blob--b{background:radial-gradient(closest-side, rgba(var(--glow-cool-rgb),.10), transparent 70%);
               top:4vmax;  right:-20vmax; animation:drift-b 41s ease-in-out infinite alternate}
.hero__blob--c{background:radial-gradient(closest-side, rgba(var(--glow-3-rgb),.12), transparent 74%);
               bottom:-32vmax; left:26vmax; animation:drift-c 53s ease-in-out infinite alternate}

/* co-prime durations — the composite doesn't visibly repeat for ~37 hours */
@keyframes drift-a{to{transform:translate3d(18vw, 11vh, 0) scale(1.26)}}
@keyframes drift-b{to{transform:translate3d(-19vw, 13vh, 0) scale(.8)}}
@keyframes drift-c{to{transform:translate3d(6vw,-9vh, 0) scale(1.2)}}

.hero__grid{
  position:absolute; inset:0; opacity:.5;
  background:linear-gradient(to right,  rgba(var(--ink-rgb),.05) 1px, transparent 1px) 0 0/88px 88px,
             linear-gradient(to bottom, rgba(var(--ink-rgb),.035) 1px, transparent 1px) 0 0/88px 88px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 38%, #000 12%, transparent 78%);
          mask-image:radial-gradient(78% 62% at 50% 38%, #000 12%, transparent 78%);
}
/* ---- the network: the hero's motion, and the only layer that answers the
   cursor. Everything that makes it move lives in net.js; this sizes it and
   masks it to the same soft ellipse as the grid underneath, so the field
   dissolves before it reaches any edge and never collides with the nav.

   The element is inert without JS — an empty canvas paints nothing, and the
   hero was composed to stand up on the blobs and the grid alone. */
.hero__net{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  -webkit-mask-image:radial-gradient(82% 68% at 50% 42%, #000 34%, transparent 88%);
          mask-image:radial-gradient(82% 68% at 50% 42%, #000 34%, transparent 88%);
}

.hero__noise{position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay; background:var(--noise)}

/* off screen → drop the layers entirely so the frame sequence below has the
   compositor to itself. net.js stops its own loop on the same signal. */
.hero.is-away .hero__blob,.page-hero.is-away .hero__blob{animation-play-state:paused; visibility:hidden}
.hero.is-away .hero__net,.page-hero.is-away .hero__net{visibility:hidden}

/* motion is decoration here — with it suppressed net.js paints one still
   frame and never animates, so the constellation stays without the drift */

.hero__inner{display:grid; gap:var(--s3); justify-items:start; position:relative}
/* justify-items:start sizes each child to its content, so a ch-based max-width
   can exceed the viewport and clip. Cap every child at the container width. */
.hero__inner > *{max-width:100%; min-width:0}
.hero__eyebrow{color:var(--hero-tint)}

.hero__title{
  font-size:clamp(38px,5.5vw,72px); font-weight:600;
  letter-spacing:-.022em; line-height:1.04; text-transform:uppercase;
  max-width:min(18ch,100%); color:var(--text);
}
.hero__accent{display:block; color:var(--accent)}
/* The home headline is a longer sentence than the subpage ones and 18ch broke
   it three-up with "A SUPERCAR." orphaned on a line of its own. Scoped to
   .hero so the subpage heroes keep the tighter measure they were set to. */
.hero .hero__title{max-width:min(22ch,100%)}
/* a thin brushed-metal rule under the eyebrow — the one "engineered" flourish */
.hero__eyebrow{position:relative; padding-bottom:var(--s2)}
.hero__eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; width:96px; height:1px;
  background:var(--metal);
}
.page-hero .hero__title{font-size:clamp(32px,4.4vw,56px); letter-spacing:-.018em; line-height:1.06; max-width:min(20ch,100%)}

.hero__sub{
  color:var(--text-2); font-size:clamp(17px,1.55vw,21px); letter-spacing:-.011em; line-height:1.55;
  max-width:min(58ch,100%);
}
.hero__actions{margin-top:var(--s2); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4)}
.hero__note{
  color:var(--text-2); max-width:36ch; line-height:1.55;
  font-family:var(--body); font-size:14px; font-weight:400;
  letter-spacing:0; text-transform:none;
}

.hero__cue{
  position:absolute; left:50%; translate:-50% 0;
  bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  display:grid; gap:10px; justify-items:center;
  color:var(--text-2); text-decoration:none; z-index:2;
  transition:color .2s;
}
.hero__cue:hover{color:var(--text)}
.hero__cue-line{width:1px; height:38px; background:linear-gradient(var(--accent),transparent)}

/* ============================================================ SCROLL SEQUENCE ============================================================ */
.seq{position:relative; height:600vh; background:var(--void)}
.seq__stage{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--void)}
#film{position:absolute; inset:0; width:100%; height:100%}
.seq__poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.seq__scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(var(--plate-rgb),.95) 0%, rgba(var(--plate-rgb),.76) 34%, rgba(var(--plate-rgb),.12) 64%, rgba(var(--plate-rgb),0) 84%),
             linear-gradient(to top, rgba(var(--plate-rgb),.84) 0%, rgba(var(--plate-rgb),0) 42%)}
.seq__grid{position:absolute; inset:0; pointer-events:none; opacity:.30;
  background:linear-gradient(to right, rgba(var(--seq-grid-rgb),.10) 1px, transparent 1px) 0 0/25% 100%,
             linear-gradient(to bottom, rgba(var(--seq-grid-rgb),.07) 1px, transparent 1px) 0 0/100% 33.333%}

.beats{position:absolute; inset:0}
.beat{position:absolute; inset:0; display:grid; align-content:center;
  padding:calc(var(--nav-h) + var(--s4)) var(--gutter) 128px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s}
.beat.is-in{opacity:1; visibility:visible; transition:opacity .55s var(--ease) .12s, visibility 0s}
.beat.is-in a{pointer-events:auto}
.beat__box{max-width:min(680px,94%); display:grid; gap:var(--s2); text-shadow:0 2px 30px rgba(0,0,0,.92), 0 0 12px rgba(0,0,0,.65)}
.beat__eyebrow{color:var(--hero-tint); margin:0}
.beat__rule{height:1px; width:0; max-width:210px; background:var(--metal)}
.beat.is-in .beat__rule{width:100%; transition:width .8s var(--ease) .05s}
.beat h2{color:var(--text-bright); font-size:clamp(28px,4vw,52px); font-weight:600; letter-spacing:-.02em; line-height:1.06; text-transform:uppercase; max-width:18ch}
.beat__body{color:var(--beat-body); font-size:clamp(16px,1.55vw,19px); line-height:1.6; max-width:52ch}
.beat__body strong,.beat__body b{color:#F2EFEA; font-weight:600}
.beat__actions{margin-top:var(--s2); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3)}
.beat__note{
  color:var(--beat-note); font-family:var(--body); font-size:14px; font-weight:400;
  letter-spacing:0; text-transform:none; max-width:36ch; line-height:1.55;
}
.seq__hint{position:absolute; left:0; right:0; bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  text-align:center; color:var(--beat-note); z-index:4; transition:opacity .4s}

/* ---- the scrub on a phone ----
   Same engine, three accommodations. The container is shorter because 600vh is
   six screens of thumb on a phone and the beat centres are fractions of the
   whole, so shortening it compresses the pacing without touching any of them.
   The copy moves to the bottom half, because seq.js sits the car high on a
   portrait screen — text over the car reads as neither. And svh matches the
   sticky stage's own unit, so the ratio between them can't drift when the
   address bar moves. */
@media (max-width:768px){
  .seq{height:430svh}
  .beat{align-content:end; padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .beat__box{max-width:100%; gap:var(--s1)}
  .beat h2{font-size:clamp(25px,6.4vw,34px); max-width:16ch}
  .beat__body{font-size:15.5px; line-height:1.55}
  /* the scrim is tuned for a wide plate lit from the right; on a portrait
     screen the copy needs the bottom darkened instead of the left */
  .seq__scrim{background:linear-gradient(to top, rgba(var(--plate-rgb),.94) 0%, rgba(var(--plate-rgb),.72) 38%, rgba(var(--plate-rgb),.10) 68%, rgba(var(--plate-rgb),0) 88%)}
  .seq__grid{opacity:.18}
}

/* static fallback (Data Saver): poster + stacked text */
body.is-static .seq{height:auto}
body.is-static .seq__stage{position:relative; height:auto; overflow:visible}
body.is-static #film,body.is-static .seq__scrim,body.is-static .seq__grid,body.is-static .seq__hint{display:none}
body.is-static .seq__poster{position:relative; display:block; height:auto; aspect-ratio:16/9; border-bottom:1px solid var(--rule)}
body.is-static .beats{position:static}
body.is-static .beat{position:static; opacity:1; visibility:visible; pointer-events:auto;
  padding:var(--s5) var(--gutter); border-bottom:1px solid var(--rule); min-height:0}
body.is-static .beat:last-child{border-bottom:none}
body.is-static .beat__rule{width:100%; max-width:180px}
body.is-static .beat__box{max-width:none; text-shadow:none}
body.is-static .beat h2{color:var(--text)}
body.is-static .beat__body{color:var(--text-2)}
body.is-static .beat__body strong,body.is-static .beat__body b{color:var(--text)}
body.is-static .beat__eyebrow{color:var(--accent)}

/* ============================================================ BANDS ============================================================ */
.band{position:relative; padding:var(--s6) 0; border-top:1px solid var(--rule)}
/* brushed-metal catch-light along each section edge */
.band::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, var(--metal-2) 0%, transparent 42%);
  opacity:.55;
}
.band--tint{background:var(--surface)}
.band--tint::before{background:linear-gradient(270deg, var(--metal-2) 0%, transparent 42%); opacity:.55}

.band__eyebrow{color:var(--accent); margin:0 0 var(--s3)}
.band h2{font-size:clamp(26px,3.2vw,40px); font-weight:600; letter-spacing:-.021em; line-height:1.12; max-width:20ch}
.band__intro{margin-top:var(--s3); color:var(--text-2); font-size:clamp(17px,1.55vw,21px); letter-spacing:-.011em; line-height:1.55}
.band__lede{margin-top:var(--s3); font-size:clamp(17px,1.55vw,21px); letter-spacing:-.011em; line-height:1.55}

.rise{opacity:0; transform:translateY(14px);
      transition:opacity .55s var(--ease-out), transform .55s var(--ease-out)}
.rise.is-in{opacity:1; transform:none}

/* ============================================================ TABLES ============================================================ */
table{width:100%; border-collapse:collapse; margin-top:var(--s4); font-size:16px}
caption{text-align:left; color:var(--text-2); font-size:14px; padding-bottom:var(--s2)}
th,td{text-align:left; vertical-align:top; padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--rule)}
thead th{font-family:var(--data); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:400; padding-top:0}
tbody th{font-weight:600; width:26%; color:var(--text); letter-spacing:-.012em; font-size:17px}
.t-mono{font-family:var(--data); color:var(--accent-hover); font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.t-own{background:var(--wash)} .t-own strong{color:var(--accent-hover); font-weight:500}
/* comparison marks — decorative summary of the cell they lead */
.mk{display:inline-block; width:1.15em; margin-right:.4em; font-weight:600; line-height:1}
.mk--y{color:var(--accent-hover)}
.mk--n{color:var(--text-2)}
.leak-cost{color:var(--text-2); font-size:15px}

/* ============================================================ LISTS ============================================================ */
.notes{margin-top:var(--s4); display:grid; gap:var(--s2); max-width:68ch}
.notes--wide{margin-top:var(--s5)}
.notes p{padding-left:var(--s3); border-left:1px solid; border-image:linear-gradient(var(--accent),transparent) 1; color:var(--text)}
.notes__title{color:var(--accent); border:0!important; padding-left:0!important; margin-bottom:4px}

.stack{display:grid; gap:var(--s3); margin-top:var(--s4); max-width:68ch}
.stack li{list-style:none; padding-left:var(--s3); border-left:1px solid var(--rule)}
.stack strong{display:block; font-weight:600; color:var(--text); font-size:clamp(18px,1.4vw,21px); letter-spacing:-.015em; line-height:1.3; margin-bottom:6px}
.stack span{color:var(--text-2)}

.two{display:grid; gap:var(--s5); margin-top:var(--s4)}
.person h3{font-size:clamp(19px,1.5vw,22px); letter-spacing:-.018em}
.person .role{color:var(--accent); margin:8px 0 var(--s2)}
.person p{color:var(--text-2); max-width:52ch}

.fitcols{display:grid; gap:var(--s4); margin-top:var(--s4)}
.fit h3{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-bottom:var(--s2)}
.fit li{list-style:none; padding:12px 0 12px var(--s3); border-bottom:1px solid var(--rule); position:relative; color:var(--text)}
.fit li::before{position:absolute; left:0; top:12px; font-family:var(--data); font-size:13px}
.fit--yes li::before{content:"+"; color:var(--accent)}
.fit--no li{color:var(--text-2)} .fit--no li::before{content:"–"; color:var(--faint)}
.limits{margin-top:var(--s5); max-width:68ch}

/* ============================================================ CARDS ============================================================ */
.cards{display:grid; gap:var(--s3); margin-top:var(--s5)}
.card{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:var(--s2); align-content:start;
  padding:var(--s5) var(--s4); border-radius:var(--r-lg); text-decoration:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--rule); box-shadow:var(--shadow-2);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* metal edge that lights along the top on hover — no coloured bloom */
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--metal); opacity:0; transition:opacity .3s var(--ease);
}
.card:hover{border-color:var(--rule-2); box-shadow:var(--shadow-3)}
.card:hover::after{opacity:1}
.card__glow{
  position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0), rgba(237,234,230,.045), transparent 70%);
  transition:opacity .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .card:hover .card__glow{opacity:1} }
.card__label{color:var(--accent)}
.card__title{font-size:clamp(20px,1.8vw,24px); font-weight:600; letter-spacing:-.018em; line-height:1.22}
.card__body{color:var(--text-2)}
.card__list{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s1)}
.card__list li{
  list-style:none; font-family:var(--data); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); padding:6px 11px; border:1px solid var(--rule); border-radius:var(--r-pill);
}
.card__link{margin-top:var(--s2); color:var(--accent-hover); font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; gap:10px; align-items:center}
.card__arrow{transition:transform .3s var(--ease)}
.card:hover .card__arrow{transform:translateX(4px)}

/* five service cards, not two path cards: smaller type, tighter padding, and
   three across on a wide screen so the set reads as a menu rather than as five
   consecutive decisions */
.cards--svc{margin-top:var(--s4)}
.cards--svc .card{padding:var(--s4) var(--s4) var(--s3); gap:var(--s2)}
.cards--svc .card__title{font-size:clamp(19px,1.5vw,22px)}
.cards--svc .card__body{font-size:16px}
.cards--svc .card__list{margin-top:auto; padding-top:var(--s2)}
@media (min-width:720px){ .cards.cards--svc{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){
  /* both classes, deliberately: the generic .cards two-column rule lives in the
     responsive section hundreds of lines below and would otherwise win on order */
  .cards.cards--svc{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================ FAQ ============================================================ */
.faq{margin-top:var(--s4); max-width:68ch}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer; padding:var(--s3) 44px var(--s3) 0; position:relative; font-weight:500; font-size:17px; letter-spacing:-.012em; list-style:none; color:var(--text)}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:10px; top:var(--s3);
  font-family:var(--data); color:var(--accent); font-size:18px; line-height:1.4;
  transition:transform .25s var(--ease);
}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 var(--s3); color:var(--text-2); max-width:68ch}

/* ============================================================ BOOKING ============================================================ */
.book{background:var(--surface); border-top:1px solid var(--rule-2)}
.book__sub{color:var(--text-2); margin-top:var(--s2); font-size:clamp(17px,1.55vw,21px); letter-spacing:-.011em; max-width:52ch}
.form{margin-top:var(--s4); max-width:560px; display:grid; gap:var(--s3)}
.field{display:grid; gap:6px}
.field label{font-family:var(--data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2)}
.field input,.field select{
  font-family:var(--body); font-size:16px; color:var(--text); background:var(--bg);
  border:1px solid var(--rule-2); border-radius:var(--r-sm); padding:12px 14px; min-height:48px; width:100%;
}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--wash)}
.data-note{color:var(--text-2); font-size:14px; max-width:46ch}
.book__direct{margin-top:var(--s4); display:grid; gap:var(--s3); max-width:60ch}
.book__mail{
  font-family:var(--data); font-size:clamp(18px,2.6vw,26px); letter-spacing:-.02em;
  color:var(--accent-hover); text-decoration:none; justify-self:start; word-break:break-all;
  padding-bottom:6px;
  background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;
}
.book__mail:hover{background-size:100% 2px}

/* ============================================================ EXPERIENCE STRIP ============================================================ */
/* Names, not logos: no third-party image is reachable under the CSP, and a
   wordmark row reads as provenance rather than as a client list. */
.cred{
  position:relative; z-index:1;
  background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.cred .wrap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4);
  padding-top:var(--s3); padding-bottom:var(--s3);
}
.cred__label{color:var(--text-2); flex:none}
.cred__list{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); list-style:none; margin:0; padding:0}
.cred__list li{
  font-family:var(--display); font-weight:600; color:var(--text); opacity:.62;
  font-size:clamp(15px,1.4vw,19px); letter-spacing:-.01em;
}

/* ============================================================ THE COST OF WAITING ============================================================ */
.waiting__body{display:grid; gap:var(--s2); margin-top:var(--s3); max-width:64ch; color:var(--text-2)}
.waiting__close{
  margin-top:var(--s4); max-width:44ch; color:var(--text);
  font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.3;
  font-size:clamp(20px,2.1vw,28px);
}

/* ============================================================ BOOKING OVERLAY ============================================================ */
/* z-index 150: above the nav (90) and the sticky bar (80), below the
   skip link (200) so keyboard escape routes still win. */
.bookmodal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:var(--s3)}
.bookmodal[hidden]{display:none}
.bookmodal__scrim{position:absolute; inset:0; background:rgba(var(--plate-rgb),.82); animation:bm-fade .2s var(--ease)}
.bookmodal__panel{
  position:relative; display:flex; flex-direction:column;
  width:min(1040px,100%); height:min(880px,100%);
  background:var(--surface); border:1px solid var(--rule-2); border-radius:var(--r-lg);
  box-shadow:0 40px 90px rgba(0,0,0,.62); overflow:hidden;
  animation:bm-rise .26s var(--ease);
}
.bookmodal__panel:focus{outline:none}
.bookmodal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:14px var(--s3); background:var(--surface-2); border-bottom:1px solid var(--rule);
}
.bookmodal__title{color:var(--text-2)}
.bookmodal__x{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; margin-right:-6px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--text-2); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.bookmodal__x svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5}
.bookmodal__x:hover{color:var(--text); border-color:var(--rule-2)}
.bookmodal__x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* min-height:0 lets the frame shrink inside the flex column instead of
   overflowing the panel — without it the footer is pushed off-screen. */
.bookmodal__body{position:relative; flex:1; min-height:0; display:flex}
.bookmodal__frame{flex:1; width:100%; border:0; background:#fff; opacity:0; transition:opacity .3s var(--ease)}
.bookmodal.is-ready .bookmodal__frame{opacity:1}
.bookmodal__state{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:var(--s3); margin:0 auto; color:var(--text-2);
}
.bookmodal.is-ready .bookmodal__state{display:none}
.bookmodal__foot{
  padding:12px var(--s3) calc(12px + env(safe-area-inset-bottom));
  background:var(--surface-2); border-top:1px solid var(--rule); margin:0; max-width:none;
}
.bookmodal__foot a{color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px}
.bookmodal.is-stuck .bookmodal__foot{color:var(--text)}
@keyframes bm-fade{from{opacity:0}}
@keyframes bm-rise{from{opacity:0; transform:translateY(10px)}}
/* full-bleed sheet on phones — a floating card wastes scarce height */
@media (max-width:700px){
  .bookmodal{padding:0}
  .bookmodal__panel{width:100%; height:100%; border:0; border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .bookmodal__scrim,.bookmodal__panel{animation:none}
  .bookmodal__frame{transition:none}
}

/* ============================================================ STICKY + FOOTER ============================================================ */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--rule);
  transform:translateY(120%); transition:transform .35s var(--ease);
}
.sticky.is-up{transform:none}
.sticky__line{font-size:14px; color:var(--text-2); margin:0; font-family:var(--body); letter-spacing:0; text-transform:none}
.sticky__line b{color:var(--text); font-weight:600}

footer.site-footer{position:relative; z-index:1; background:var(--surface); border-top:1px solid var(--rule); padding:var(--s4) 0 calc(var(--s5) + env(safe-area-inset-bottom))}
.site-footer{letter-spacing:.14em}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:space-between; align-items:center}
.site-footer,.site-footer a{color:var(--text-2)}
.site-footer a{text-decoration:none; transition:color .2s}
.site-footer a:hover{color:var(--text)}

/* ============================================================ WORKSHOP ============================================================ */
/* Same tokens, same rules: no coloured glow, near-square corners, and the
   amber stays rationed — it appears here on the live price, the timestamps,
   the seat count and the guarantee hairlines, and nowhere else. */

/* the workshop hero carries five lines of meta under the button, so it grows
   with its content instead of sitting at a fixed 74svh */
.wshero{min-height:min(88svh,860px)}
.wshero .hero__inner{gap:var(--s2)}
.wshero .hero__title{margin:var(--s1) 0 0; max-width:min(26ch,100%); font-size:clamp(30px,4vw,52px)}
.wshero .hero__sub{margin:var(--s1) 0 0; max-width:min(62ch,100%)}
/* the page's central promise, pulled out of the subhead onto its own line —
   inline it reads as one more clause, and it is the whole offer */
.hero__promise{
  margin:0; color:var(--text); font-weight:600; max-width:min(38ch,100%);
  font-size:clamp(17px,1.6vw,21px); letter-spacing:-.013em; line-height:1.4;
}
.hero__fine{margin:0; color:var(--text-2); font-size:14px; line-height:1.55; max-width:56ch}

/* the line under the workshop's seat buttons. Carries the cohort, the cap and
   the city — no price: the page states none. */
.pricebar{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px var(--s2);
  font-family:var(--data); color:var(--text-2);
}
.pricebar span{color:var(--text-2)}

/* "Not sure it's for you? Book a Free Consultation →" — a text link, never a
   second button. One primary action per screen is the whole point. */
.secondary{margin:var(--s1) 0 0; color:var(--text-2); font-size:15px}
.secondary__link{
  color:var(--accent-hover); text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;
  padding-bottom:2px;
}
.secondary__link:hover{background-size:100% 2px}
.secondary__arrow{color:var(--accent-hover); margin-left:8px; display:inline-block; transition:transform .3s var(--ease)}
.secondary:hover .secondary__arrow{transform:translateX(4px)}

/* ---- three moments ---- */
.moments{display:grid; gap:var(--s4); margin-top:var(--s4); list-style:none; padding:0}
.moments li{display:grid; gap:var(--s2); align-content:start; padding-top:var(--s3); border-top:1px solid var(--rule)}
.moment__time{margin:0; font-size:13px; letter-spacing:.06em; color:var(--accent-hover)}
.moment__body{margin:0; color:var(--text-2); max-width:44ch}

/* a mono sub-label inside a band, above a list that follows */
.ws-subhead{margin-top:var(--s5); margin-bottom:0}

/* ---- the guarantee: the load-bearing block on the page ----
   Full-bleed void with an accent hairline top and bottom, and nothing else
   on screen. No card, no radius, no glow — the weight comes from the space
   around it, which is why the padding here is larger than any other band. */
.guarantee{background:var(--void); border-top:1px solid var(--rule-lit); border-bottom:1px solid var(--rule-lit); padding:calc(var(--s6) + var(--s3)) 0}
.guarantee::before{background:linear-gradient(90deg,var(--accent) 0%,transparent 38%); opacity:.5}
.guarantee__h{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(28px,3.9vw,52px); letter-spacing:-.022em; line-height:1.06;
  max-width:16ch; color:var(--text-bright); margin:0;
}
.guarantee__body{display:grid; gap:var(--s3); margin-top:var(--s4); max-width:60ch}
.guarantee__body p{margin:0; color:var(--beat-body); font-size:clamp(16px,1.5vw,19px); line-height:1.6}

/* ---- run of show: the time column is data, the rest is prose ---- */
.runsheet tbody th{width:22%; white-space:nowrap}
.run__title{display:block; font-weight:600; color:var(--text); font-size:18px; letter-spacing:-.014em; line-height:1.3; margin-bottom:6px}
.run__body{color:var(--text-2)}

/* ---- proof (rendered only once CONTENT.workshop.proof.hold is deleted) ---- */
.quote{margin:var(--s4) 0 0; padding-left:var(--s4); border-left:1px solid; border-image:linear-gradient(var(--accent),transparent) 1; max-width:60ch}
.quote p{margin:0; font-size:clamp(19px,2vw,26px); line-height:1.4; letter-spacing:-.018em; color:var(--text)}
.quote cite{display:block; margin-top:var(--s3); font-style:normal; color:var(--text-2); font-size:14px; line-height:1.55}

/* ---- reserve ---- */
.reserve{border-top:1px solid var(--rule-2)}
.seats{
  margin:var(--s3) 0 0; display:inline-block; color:var(--accent-hover);
  border:1px solid var(--rule-lit); border-radius:var(--r-sm); padding:7px 12px;
}
.reserve__date{margin:var(--s2) 0 0; color:var(--text-2)}
.form__intro{margin:var(--s2) 0 0; color:var(--text-2); max-width:52ch}

/* every seat button jumps here, so it must clear the fixed nav — without the
   scroll-margin the "Tell us about your business" label lands underneath it */
#signup{scroll-margin-top:calc(var(--nav-h) + var(--s3))}

/* ---- form: textarea matches the input contract exactly ---- */
.field textarea{
  font-family:var(--body); font-size:16px; line-height:1.55; color:var(--text); background:var(--bg);
  border:1px solid var(--rule-2); border-radius:var(--r-sm); padding:12px 14px;
  min-height:96px; width:100%; resize:vertical;
}
.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--wash)}
.field__opt{color:var(--faint); letter-spacing:.1em}
.wsform{max-width:620px; margin-top:var(--s4)}
.wsform button{justify-self:start; margin-top:var(--s2)}
/* Netlify honeypot — present in the DOM, never shown, never focusable by tab */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#ws-form-state:empty{display:none}
#ws-form-state.is-fail{color:var(--accent-hover)}

.wsdone{margin-top:var(--s4); max-width:560px; padding:var(--s4); background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-lg)}
.wsdone__h{margin:0 0 var(--s2); font-family:var(--display); font-weight:600; font-size:clamp(20px,2.1vw,26px); letter-spacing:-.018em; color:var(--text)}
.wsdone .data-note{margin:0; max-width:none}

/* ---- close ---- */
.wsclose{background:var(--surface); border-top:1px solid var(--rule-2)}
.wsclose__h{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(24px,3.2vw,42px); letter-spacing:-.022em; line-height:1.08;
  max-width:20ch; margin:0 0 var(--s4);
}
.wsclose .hero__actions{margin-top:0; margin-bottom:var(--s3)}

@media (min-width:769px){
  .moments{grid-template-columns:repeat(3,1fr); gap:var(--s4)}
}
@media (max-width:768px){
  .guarantee{padding:var(--s6) 0}
  .runsheet tbody th{width:auto}
}

/* ============================================================ ACUPUNCTURE ============================================================ */
/* The vertical pages use the site's existing components — bands, .stack,
   .two, .fitcols, faqSection — so they read as subpages rather than as a
   microsite. Only what genuinely did not exist is added here. */

/* ---- the demo line. The one claim on that page a reader can check at 2am
   without speaking to anyone, so it is sized like a claim and not like a
   caption. Mono and tabular, because a phone number is data; hairline
   underline that lights on hover, in the same idiom as .secondary__link. */
.dial{
  display:inline-block; margin-top:var(--s4);
  font-family:var(--data); font-weight:500; color:var(--accent-hover);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap;
  text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;
  padding-bottom:4px; transition:background-size .25s var(--ease), color .25s var(--ease);
}
.dial:hover{background-size:100% 2px; color:var(--text-bright)}
.dial--lg{font-size:clamp(28px,5.2vw,50px)}
/* inline in the hero note, where it sits in a sentence and must not shout */
.dial--sm{
  margin-top:0; font-size:13px; letter-spacing:.02em; padding-bottom:2px;
  color:var(--accent-hover); vertical-align:baseline;
}
.dial__after{margin-top:var(--s3); color:var(--text-2); max-width:60ch}

/* ---- the four figures. Two columns of hairline cells on desktop, one on
   mobile; the same .fig treatment the home page uses for its case study, so
   a number means the same thing wherever it appears on the site. */
.numgrid{list-style:none; display:grid; gap:0; margin-top:var(--s4); border-top:1px solid var(--rule)}
.numgrid li{padding:var(--s4) 0; border-bottom:1px solid var(--rule); display:grid; gap:6px; align-content:start}
.numcell__what{font-weight:600; color:var(--text); letter-spacing:-.012em; font-size:17px}
.numgrid span:last-child{color:var(--text-2); font-size:15.5px; max-width:40ch}

/* ---- numbered stack: .stack, plus a mono ordinal in the gutter. Used for
   "three things, in this order" and for the four-step path, where the order
   is the argument and unnumbered bullets would throw it away. */
.stack--num{counter-reset:st; max-width:72ch}
.stack--num li{counter-increment:st; position:relative; padding-left:var(--s5)}
.stack--num li::before{
  content:"0" counter(st); position:absolute; left:var(--s3); top:2px;
  font-family:var(--data); font-size:11px; letter-spacing:.16em; color:var(--accent);
}

/* ---- eight services read as a wall in one column; two keeps them scannable
   without turning each into a card that asks to be clicked. */
.stack--two{max-width:none}

/* ---- the acupuncture hero's lead capture ----
   Two columns above 1000px, stacked below, and the card comes second in the
   source either way so a screen reader and a phone both get the argument
   before the ask. The card is the one raised surface on the page: everything
   else here is hairlines on flat ground, so a panel with a shadow reads as
   "this is the thing to do" without needing a colour to say it. */
.acu-hero{min-height:0; padding-bottom:var(--s6)}
.acu-hero__grid{display:grid; gap:var(--s5); align-items:start; position:relative}
.acu-hero__copy{display:grid; gap:var(--s3); justify-items:start}
.acu-hero__copy > *{max-width:100%; min-width:0}
.acu-hero .hero__note{margin:0; color:var(--text-2)}

.lead{
  display:grid; gap:var(--s2); align-content:start;
  padding:var(--s3) var(--s4) calc(var(--s3) + 6px);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--rule-2); border-radius:var(--r-lg); box-shadow:var(--shadow-3);
}
.lead__eyebrow{margin:0; color:var(--accent)}
.lead__h{font-family:var(--display); font-weight:600; font-size:clamp(22px,2.3vw,28px);
         letter-spacing:-.02em; line-height:1.14; color:var(--text); margin:0}
.lead__body{margin:0; color:var(--text-2); font-size:15.5px; line-height:1.55}
/* the shared .form sets a 560px cap for the full-width consultation form; in a
   420px column that cap is meaningless and the top margin is too much */
/* Six fields including a textarea is a tall card, and a hero form whose submit
   button sits below the fold on a laptop is a hero form nobody submits. These
   trims buy back about 80px without making anything feel cramped. */
.lead__form{margin-top:var(--s2); max-width:none; gap:14px}
.lead__form .field input,.lead__form .field select{min-height:44px; padding:10px 14px}
.lead__form .field textarea{min-height:78px; padding:10px 14px}
.lead__form .field label{line-height:1.35}
.lead__form .btn{width:100%; margin-top:var(--s1)}
.lead__form .data-note{font-size:12.5px; line-height:1.5; max-width:none}
#lead-state:empty{display:none}
#lead-state.is-fail{color:var(--accent-hover)}

/* the success card replaces the form — leaving five filled fields on screen
   after a successful submit invites a second submit */
.lead__done{display:grid; gap:var(--s2); margin-top:var(--s2)}
.lead__done .lead__h{font-size:clamp(20px,2vw,24px)}
.lead__done .btn{width:100%; margin-top:var(--s1)}

@media (min-width:1000px){
  /* centre the copy against the card rather than top-aligning it: the card is
     the taller column and start-alignment leaves the headline floating over a
     screen of empty ground */
  .acu-hero__grid{grid-template-columns:minmax(0,1fr) minmax(360px,410px); gap:var(--s5); align-items:center}
  /* the hero's usual breathing room is tuned for a hero with a button in it;
     with a six-field card in the column it just pushes the submit off screen */
  .acu-hero{padding-top:calc(var(--nav-h) + var(--s3))}
  .acu-hero .hero__title{font-size:clamp(30px,3.5vw,46px)}
}

/* ============================================================ FIGURES ============================================================ */
/* Three figures, all of them bars, all built from HTML boxes — correct
   proportions, labels under the right mark, and they reflow on a phone.
   Every value is printed beside its own mark, which is both the accessible
   answer and the one that survives a thumb: there is no tooltip to miss.
   Marks are flat fills with the same 2px radius as everything else here and
   no outline, because a border around a mark is chrome pretending to be data. */
.cfigure{margin:var(--s5) 0 0; display:grid; gap:var(--s3); max-width:74ch}
.cfigure__cap{color:var(--text-2); margin:0}

/* ---- meter: one ratio against its whole ---- */
.cfigure--meter{max-width:62ch}
.meter{height:12px; border-radius:var(--r-sm); background:var(--chart-rec); opacity:1;
       position:relative; overflow:hidden}
.meter::after{content:""; position:absolute; inset:0; background:var(--bg); opacity:.55}
.meter__fill{position:absolute; inset:0 auto 0 0; z-index:1; background:var(--accent);
             border-radius:var(--r-sm)}
.meter__keys{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin:0}
.meter__key{font-size:15px; color:var(--text-2); display:flex; align-items:baseline; gap:9px}
.meter__key b{font-family:var(--data); font-size:20px; font-weight:500; letter-spacing:-.01em}
.meter__key--on b{color:var(--accent-hover)}
.meter__key--off b{color:var(--text)}

/* ---- range bars: two ranges on one scale. Each bar starts at its floor, so
   the distance between them is the claim the copy is making. ---- */
.rbars{list-style:none; display:grid; gap:var(--s4); margin:0}
.rbars li{display:grid; gap:10px}
.rbar__what{margin:0; color:var(--text); font-weight:600; font-size:16.5px; letter-spacing:-.012em}
.rbar__track{position:relative; height:18px; border-radius:var(--r-sm);
             background:linear-gradient(var(--rule),var(--rule))}
.rbar__fill{position:absolute; top:0; bottom:0; border-radius:var(--r-sm)}
.rbar__fill--rec{background:var(--chart-rec)}
.rbar__fill--on{background:var(--accent)}
.rbar__val{margin:0; font-family:var(--data); font-size:clamp(17px,2vw,21px);
           color:var(--accent-hover); letter-spacing:-.01em; display:flex;
           flex-wrap:wrap; align-items:baseline; gap:6px var(--s2)}
.rbar__val span{font-family:var(--body); font-size:14.5px; color:var(--text-2); letter-spacing:0}

/* ---- columns: before and after, one baseline ---- */
.cols{display:flex; align-items:flex-end; gap:var(--s5); flex-wrap:wrap}
.col{display:grid; gap:8px; justify-items:center; width:104px}
.col__plot{height:180px; width:100%; display:flex; align-items:flex-end}
.col__bar{display:block; width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0}
.col__bar--rec{background:var(--chart-rec)}
.col__bar--on{background:var(--accent)}
.col__val{margin:0; font-family:var(--data); font-size:clamp(19px,2.3vw,24px);
          font-weight:500; letter-spacing:-.02em; color:var(--accent-hover)}
.col:first-child .col__val{color:var(--text-2)}
.col__when{margin:0; color:var(--text-2)}
.cols__delta{margin:0 0 var(--s5); font-family:var(--data);
             font-size:clamp(19px,2.4vw,26px); color:var(--accent-hover); letter-spacing:-.01em}

/* ---- iconography: 24px line marks at the hairline weight, so they sit in the
   type rather than on top of it ---- */
.ico{width:24px; height:24px; flex:none; margin-top:3px;
     fill:none; stroke:var(--accent); stroke-width:1.75;
     stroke-linecap:round; stroke-linejoin:round}
.stack li.has-ico{display:flex; gap:var(--s2); align-items:flex-start}
.stack li.has-ico > div{display:grid; gap:6px; min-width:0}

/* ============================================================ THE VOICE ============================================================ */
/* A portrait and a sentence, immediately before the ask. Squared with a
   hairline, never a circle — near-square corners is a house rule, and a
   circular avatar would read as a testimonial widget from another website. */
.voice{display:grid; gap:var(--s4); margin-top:var(--s4); align-items:center}
.voice__photo{
  width:100%; max-width:300px; height:auto; aspect-ratio:9/11; object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--rule-2); box-shadow:var(--shadow-2);
}
/* the empty frame, until the portrait arrives. Visible on purpose: a debt
   somebody fixes beats a section nobody remembers is missing. */
.voice__slot{
  width:100%; max-width:300px; aspect-ratio:9/11; display:grid; align-content:center;
  gap:8px; padding:var(--s3); text-align:center;
  border:1px dashed var(--rule-lit); border-radius:var(--r-lg);
  background:var(--surface); color:var(--text-2); font-size:13.5px; line-height:1.5;
}
.voice__slot b{
  font-family:var(--data); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.voice__quote{margin:0; padding-left:var(--s4); border-left:2px solid var(--accent); max-width:56ch}
.voice__quote p{
  margin:0; color:var(--text); font-size:clamp(20px,2.4vw,28px);
  line-height:1.38; letter-spacing:-.018em;
}
.voice__quote cite{
  display:grid; gap:4px; margin-top:var(--s3); font-style:normal;
  font-size:14px; color:var(--text-2); line-height:1.5;
}
.voice__quote cite b{color:var(--text); font-weight:600; font-size:16px; letter-spacing:-.012em}

@media (min-width:820px){
  .voice{grid-template-columns:300px 1fr; gap:var(--s5)}
}

/* ============================================================ VERTICAL STRIP ============================================================ */
/* Home → /acupuncture. The home page already asks the reader to choose
   between two path cards; a third card would dilute that choice, so this
   is one quiet row instead — hairline top and bottom, like .cred. */
.vstrip{position:relative; z-index:1; background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.vstrip .wrap{padding-top:var(--s4); padding-bottom:var(--s4)}
.vstrip__head{color:var(--text-3); margin:0 0 var(--s3)}
.vstrip__rows{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
/* a hairline between industries, never above the first or below the last —
   the section already has its own top and bottom rules */
.vstrip__row + .vstrip__row{border-top:1px solid var(--rule); padding-top:var(--s3)}
.vstrip__row{display:grid; gap:var(--s2) var(--s4); align-items:baseline}
.vstrip__label{color:var(--accent); margin:0}
.vstrip__line{margin:0; color:var(--text-2); max-width:64ch}
.vstrip__link{
  color:var(--accent-hover); text-decoration:none; justify-self:start;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
}
.vstrip__link:hover .card__arrow{transform:translateX(4px)}

@media (min-width:900px){
  .numgrid{grid-template-columns:1fr 1fr; column-gap:var(--s5)}
  .numgrid--3{grid-template-columns:repeat(3,1fr)}
  .stack--two{grid-template-columns:1fr 1fr; column-gap:var(--s5)}
  .vstrip__row{grid-template-columns:minmax(14rem,auto) 1fr auto}
  .vstrip__label{justify-self:start}
}

/* ============================================================ RESPONSIVE ============================================================ */
/* The burger breakpoint. It was 860px when the bar held Home + one dropdown +
   the theme toggle + the CTA. A second dropdown pushed the bar's needed width
   to ~970px, so between 861 and 960 the menu ran off the right edge of the
   viewport — the CTA half off screen and no way to scroll to it, because the
   bar is fixed. Measured, not guessed: 954px needed at 861, and it first fits
   at 960. 1000 leaves headroom for a nav item gaining a word.

   KEEP THIS IN SYNC WITH nav.js. The matchMedia there decides whether a
   dropdown hides on close and whether Escape closes the panel or the menu; if
   the two numbers disagree there is a band of widths where the panel is open
   and the script thinks it isn't. */
@media (max-width:1000px){
  .nav{gap:var(--s2)}
  .nav__burger{display:inline-flex}

  /* ---- THE MOBILE MENU BUG. Read this before adding a filter to .nav ----
     A backdrop-filter makes an element the containing block for any
     position:fixed descendant. .nav__menu below IS fixed, so the moment .nav
     picked up `backdrop-filter:blur(18px)` — which it does on both .is-solid
     and .is-panel — the panel stopped resolving `inset:70px 0 0` against the
     viewport and started resolving it against a 70px-tall bar. It collapsed to
     a ~104px sliver and `overflow-y:auto` clipped everything below the first
     link: tapping the burger appeared to open nothing but the word "Home".
     Desktop never showed it because the menu isn't fixed there.

     So: no filter on the bar at this width, opaque colour instead. The glass
     is a detail nobody studies on a phone, and a full-screen blur is an
     expensive thing to ask a phone GPU for. Same reason the panel itself is
     solid rather than 96% + blur. */
  .nav.is-solid,.nav.is-panel{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
  }
  .nav.is-panel{background:var(--bg)}
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 0; display:grid; align-content:start;
    gap:var(--s2); padding:var(--s3) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
    background:var(--bg);
    overflow-y:auto; color:var(--text);
    opacity:0; transform:translateY(-10px); visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-panel .nav__menu{opacity:1; transform:none; visibility:visible; pointer-events:auto}
  .nav__list{display:grid; gap:4px; align-items:stretch}
  .nav__item{position:static}
  .nav__link{font-size:15px; letter-spacing:.16em; padding:14px 0}
  .nav__link:hover{background:none}
  /* inline and always expanded — an accordion over two items is friction for nothing */
  .nav__sub{
    position:static; min-width:0; margin:4px 0 var(--s2) 2px; padding:0 0 0 var(--s3);
    background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    border:0; border-left:1px solid var(--rule-2); border-radius:0; box-shadow:none;
  }
  .nav__sub a{padding:9px 0}
  /* Six submenu items with a line of description each ran the panel ~75px
     past the bottom of a phone, putting the CTA below the fold of a menu
     nobody expects to scroll. The labels carry it on their own here. */
  .nav__sub span{display:none}
  .nav__theme{width:100%; justify-content:center; margin-top:var(--s3); padding:13px 12px}
  .nav__cta{width:100%; margin-top:var(--s2)}
  .nav__chev{display:none}   /* it's inline-expanded; a chevron would lie */
}

@media (max-width:768px){
  body{font-size:16px}
  .band{padding:var(--s5) 0}
  .hero__cue{display:none}
  table.stacks,table.stacks tbody,table.stacks tr,table.stacks th,table.stacks td{display:block; width:auto}
  table.stacks thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  table.stacks tr{border-bottom:1px solid var(--rule); padding:var(--s3) 0}
  table.stacks th,table.stacks td{border:none; padding:0 0 8px}
  table.stacks tbody th{font-size:18px}
  table.stacks td[data-label]::before{
    content:attr(data-label) " "; display:block; font-family:var(--data); font-size:10px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin-bottom:2px;
  }
  table.stacks td.t-own{background:var(--wash); border-left:2px solid var(--accent); padding:8px var(--s2); margin-top:4px}
  .sticky__line{display:none} .sticky{justify-content:stretch} .sticky .btn{width:100%}
}

@media (min-width:769px){
  .two{grid-template-columns:1fr 1fr; gap:var(--s5)}
  .fitcols{grid-template-columns:1fr 1fr; gap:var(--s5)}
  .cards{grid-template-columns:1fr 1fr}
  table.stacks tbody tr{transition:background .2s}
  table.stacks tbody tr:hover{background:var(--wash)}
}

@media (min-width:1024px){
  /* .beat is full-bleed with no max-width, so it needs explicit padding to
     line up with the centred content column. .wrap must NOT get this — it
     already has max-width + auto margins, and adding the padding on top
     double-indents it (at 1920 the column collapsed to 320px). */
  .beat{
    padding-left:max(var(--gutter),calc(50vw - var(--max)/2));
    padding-right:max(var(--gutter),calc(50vw - var(--max)/2));
  }
}

/* the one services card with a page behind it */
.card__more{
  margin-top:var(--s3); color:var(--accent-hover); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; align-self:start;
}
.card__more:hover .card__arrow{transform:translateX(4px)}

/* ============================================================ AI FRONT DESK ============================================================
   Four components, all of them only on /ai-front-desk: the hero's call
   log, the comparison table, the pricing tiers, and the break-even
   figure. Built entirely from tokens, so the navy theme repaints them
   with everything else and there is nothing here to keep in sync.
   ============================================================ */

/* ---- the hero's call log. The claim in the headline, itemised: it sits
   where /healthcare-acupuncture puts its form, because on this page the
   argument has to land before the price does. ---- */
.log{
  margin:0; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); align-self:start;
}
.log__head{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule); color:var(--text-2);
}
.log__rows{list-style:none; margin:0; padding:0}
.log__row{
  display:flex; gap:var(--s3); align-items:baseline;
  padding:14px var(--s3); border-bottom:1px solid var(--rule);
}
.log__t{font-family:var(--data); font-size:13.5px; color:var(--text-2); min-width:6.4rem; flex:none}
.log__s{font-size:15.5px}
/* the two states are told apart by their words first — "Missed", "Answered" —
   with colour only reinforcing it, so the log survives greyscale and CVD */
.log__s--miss{color:var(--text-2)}
.log__s--won{color:var(--text)}
.log__foot{margin:0; padding:var(--s2) var(--s3); background:var(--wash); color:var(--accent-hover); font-size:15px}

/* ---- the comparison table. Nine rows against five providers is a matrix,
   and a matrix drawn as cards stops being scannable — so it is a table, and
   it scrolls inside this container rather than making the page scroll
   sideways on a phone. ---- */
.scroller{
  overflow-x:auto; margin-top:var(--s4);
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surface);
}
/* Column widths are declared, not left to the browser. Auto layout gave the
   row labels the narrowest column on the table — "Answers evenings and
   weekends" over four lines — and then overflowed anyway, which pushed our
   own column off the right edge where the argument couldn't be read without
   scrolling for it. 13rem + five at 7.5rem is 50.5rem, which fits the content
   column on a laptop and scrolls inside .scroller below that. */
/* margin-top:0 overrides the global table rule (see `table{}` above): .scroller
   already carries that gap, and inheriting it again indented the table 40px
   down inside its own scroll box, leaving an empty band above the header. */
.cmp{border-collapse:collapse; width:100%; min-width:50.5rem; font-size:15px; margin-top:0}
.cmp th,.cmp td{padding:14px var(--s2); text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; min-width:7.5rem}
.cmp tbody th,.cmp tfoot th,.cmp thead td:first-child{min-width:13rem; width:13rem}
.cmp thead th{
  font-family:var(--data); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:var(--text-2); background:var(--surface-2); line-height:1.35;
}
.cmp tbody th{font-weight:500; color:var(--text)}
.cmp thead td:first-child{background:var(--surface-2); border-bottom:1px solid var(--rule)}
/* every cell carries its own words, so nothing here is encoded in colour
   alone; these two only reinforce what the text already says */
.cmp .c-y{color:var(--text); font-weight:500}
.cmp .c-n{color:var(--text-2)}
/* our column: a tint and an accent head. Emphasis, not a status colour. */
.cmp .c-us{background:var(--wash)}
.cmp thead .c-us{color:var(--accent); background:var(--wash); border-bottom-color:var(--rule-lit)}
.cmp tfoot th,.cmp tfoot td{background:var(--surface-2); font-weight:500; border-bottom:0}
.cmp tfoot .c-us{color:var(--accent); background:var(--wash)}

/* ---- break-even, as the one number on a full-bleed band ---- */
.mathfig{
  margin:var(--s4) 0 0; font-size:clamp(38px,6vw,64px); line-height:1.02;
  letter-spacing:-.03em; color:var(--text-bright);
}
.mathfig span{
  display:block; margin-top:var(--s2); font-size:16px; line-height:1.6;
  letter-spacing:normal; color:var(--beat-note); max-width:44ch;
}

/* ---- pricing. The only page on the site that carries a number. ---- */
.tiers{display:grid; gap:var(--s3); margin-top:var(--s4)}
.tier{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column;
}
.tier--on{border-color:var(--rule-lit)}
.tier h3{font-size:clamp(19px,1.5vw,22px); letter-spacing:-.018em; margin:0}
/* where the price used to sit — a word about who the tier is for instead */
.tier__kicker{color:var(--accent); margin:0 0 var(--s1)}
.tier h3{margin-bottom:var(--s1)}
.tier__who{color:var(--text-2); font-size:15.5px; margin:0}
.tier ul{list-style:none; margin:var(--s3) 0 0; padding:0; flex:1}
.tier li{
  position:relative; padding:12px 0 12px var(--s3);
  border-bottom:1px solid var(--rule); font-size:15.5px; color:var(--text-2);
}
.tier li:last-child{border-bottom:0}
.tier li::before{
  content:""; position:absolute; left:0; top:19px;
  width:6px; height:6px; background:var(--accent); border-radius:var(--r-sm);
}
.offer{
  margin-top:var(--s3); padding:var(--s3) var(--s4);
  border:1px solid var(--rule-lit); border-radius:var(--r); background:var(--wash);
}
.offer h3{margin:0; font-size:18px; letter-spacing:-.014em; color:var(--accent-hover)}
.offer p{margin:var(--s1) 0 0; color:var(--text-2); font-size:15.5px; max-width:68ch}

@media (min-width:820px){
  .tiers{grid-template-columns:1fr 1fr}
}

/* ============================================================ REDUCED MOTION ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; filter:none; transition:none}
  .beat__rule{width:100%!important}
  .hero__blob{animation:none}
  /* blanket net — placed last so the targeted rules above still win */
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* stagger for .rise children that opt in with --i */
.stack li,.card{transition-delay:calc(var(--i,0) * 60ms)}