/* ============================================================
   Oe rating — oerating.com
   Dark instrument-of-record. Charcoal from the Oe sales deck,
   one committed gold accent. See DESIGN.md for the system.
   ============================================================ */

/* ---------- Fonts (self-hosted) ----------
   Mirrors of Google's own latin / latin-ext woff2 subsets (unicode-range
   means the browser only fetches the ~85KB latin set for this page).
   Self-hosting removes the last third-party origin: faster first paint
   (no fonts.googleapis.com round-trip), no visitor IP sent to Google
   (the Munich GDPR ruling), and CSP tightened to 'self' everywhere. */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/red-hat-display-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/red-hat-display-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/red-hat-display-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/red-hat-display-italic-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mono 400 and 500 share one variable file */
@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/red-hat-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/red-hat-mono-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/red-hat-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/red-hat-mono-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --bg:        #181512;
  --bg-deep:   #121009;
  --surface:   #221f1a;
  --surface-2: #2a2620;
  --ink:       #f5f1e8;
  --ink-2:     #bcb4a5;
  --ink-3:     #928a7b;
  --gold:      #fec40e;
  --gold-deep: #d9a606;
  --green:     #6f9f5e;
  --line:      rgba(245, 241, 232, 0.12);
  --line-soft: rgba(245, 241, 232, 0.07);
  --gold-tint: rgba(254, 196, 14, 0.10);

  /* type */
  --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", monospace;

  --text-hero: clamp(3rem, 7vw, 5.9rem);      /* scene scale — the words are the set dressing */
  --text-h2:   clamp(2.15rem, 4.3vw, 3.5rem);
  --text-h3:   1.375rem;
  --text-body: 1.0625rem;
  --text-sm:   0.9375rem;
  --text-mono: 0.8125rem;

  /* space (8px scale) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --section: clamp(6rem, 11vw, 10.5rem);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 3px;
  --radius-lg: 10px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-ish */
  --z-nav: 50;
  --z-menu: 60;
}

@supports (color: oklch(50% 0.1 90)) {
  :root {
    --bg:        oklch(20% 0.008 80);
    --bg-deep:   oklch(16.5% 0.008 80);
    --surface:   oklch(24% 0.009 80);
    --surface-2: oklch(27.5% 0.01 80);
    --ink:       oklch(95% 0.012 85);
    --ink-2:     oklch(78% 0.014 82);
    --ink-3:     oklch(65% 0.014 80);
    --gold:      oklch(85% 0.165 88);
    --gold-deep: oklch(76% 0.155 85);
    --green:     oklch(64% 0.09 140);
  }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* touch polish: no grey tap-flash, no 300ms tap delay (touch devices only —
   these properties have no effect on desktop pointer input or rendering) */
a, button, .btn, input, textarea, select, summary, .nav__toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: var(--gold); color: var(--bg-deep); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

section { scroll-margin-top: 5.5rem; }

/* the brand full stop */
.stop { color: var(--gold); }

/* numerals */
.num, dd, .gauge__value {
  font-variant-numeric: tabular-nums lining-nums;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--bg-deep);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-300%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* scroll-progress bar + Lenis smooth scroll (classes added by JS only) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* loading / intro screen (JS-controlled; noscript + reduced-motion hide it) */
html.is-loading { overflow: hidden; }
html.no-loader #loader { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-deep);
  display: grid; place-items: center;
  transition: transform 0.9s var(--ease-out);
}
.loader.is-done { transform: translateY(-101%); }
.loader__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); width: min(300px, 64vw); text-align: center;
}
.loader__mark { width: 60px; height: 60px; color: var(--gold); }
.loader__word { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.loader__track { width: 100%; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.loader__bar { display: block; height: 100%; width: 0; background: var(--gold); }
.loader__count { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.1em; color: var(--ink-3); }
/* logo: 3D spin on the loader, hover-spin on the brand mark */
.loader__mark { transform-style: preserve-3d; animation: spin3d 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes spin3d { to { transform: rotateY(360deg); } }
.brand__mark { transition: transform 0.65s var(--ease-out); transform-style: preserve-3d; }
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: rotateY(360deg); }
@media (prefers-reduced-motion: reduce) {
  .loader__mark { animation: none; }
  .brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: none; }
}

/* ============================================================
   Cinematic FX — procedural backdrop (no image assets required)
   ============================================================ */
.fx {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  box-shadow: inset 0 0 180px 30px rgba(0, 0, 0, 0.45); /* cinematic vignette */
}
.fx::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(46% 52% at var(--fx-x, 72%) var(--fx-y, 26%),
      rgba(254, 196, 14, 0.21), rgba(254, 196, 14, 0.055) 42%, transparent 68%),
    radial-gradient(80% 70% at 18% 110%, rgba(254, 196, 14, 0.04), transparent 55%);
  /* no blur: repainting a blurred full-section layer per scrub frame is costly
     and the gradients are already soft */
}
.fx::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245, 241, 232, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 241, 232, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  /* mask stays static: re-rasterising a masked grid per scroll frame is paint
     cost for a barely-visible drift */
  -webkit-mask-image: radial-gradient(82% 80% at 72% 26%, #000, transparent 72%);
  mask-image: radial-gradient(82% 80% at 72% 26%, #000, transparent 72%);
}

/* page-wide film grain for cohesion. NOTE: no blend mode — a full-viewport
   fixed mix-blend-mode layer re-composites against everything on every scroll
   frame and was a measurable part of the scroll lag on mid hardware. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.04;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hero gets the richest backdrop */
.hero { position: relative; }
.hero > .container { position: relative; z-index: 2; }
.hero__bars { z-index: 0; }

/* ============================================================
   CINEMA — full-bleed generated film-still scenes (assets/scenes/)
   Static-first: the imagery is plain <img> markup so no-JS and
   reduced-motion visitors see the full scene; GSAP only adds the
   camera moves. Every scene sits under a charcoal scrim engineered
   so copy zones keep their AA contrast.
   ============================================================ */
.scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.scene__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 42%;
  transform: scale(1.06); will-change: transform;
  /* saturation is baked into the graded asset — a live filter on a scrubbed
     layer forces an extra render pass per frame */
}
.scene__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #121009 0%, rgba(18,16,9,0.88) 30%, rgba(18,16,9,0.6) 56%, rgba(18,16,9,0.16) 76%, rgba(18,16,9,0.38) 100%),
    linear-gradient(180deg, rgba(18,16,9,0.74) 0%, transparent 24%, transparent 58%, #121009 97%);
}
/* under a scene the procedural glow/bars retire — the photograph carries the light */
.hero--scene .fx { display: none; }
.hero--scene .hero__bars { display: none; }
.hero--scene .hero__gauge { position: relative; }
.hero--scene .hero__gauge::before {
  content: ""; position: absolute; inset: -10% -14%;
  background: radial-gradient(52% 52% at 50% 46%, rgba(18,16,9,0.82), transparent 72%);
}

/* Sticky full-viewport corridor. Default is a video/poster divider; on desktop
   JS adds .walk--scrub for the scroll-scrubbed frame sequence. Mobile,
   reduced-motion, no-JS and data-saver keep the video or its poster still. */
.walk { position: relative; height: 235vh; background: var(--bg-deep); }
.walk__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.walk__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
  will-change: transform;
}
.walk__film { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
/* scrub travel is (height − 100vh); the driver reads offsetHeight, so the frame
   pace follows from this one value */
.walk--scrub { height: 260vh; }
.walk--scrub .walk__film { display: block; }
.walk--scrub .walk__img { display: none; }
.walk__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 40%, rgba(24,21,18,0.55) 66%, rgba(24,21,18,0.92) 88%, var(--bg) 100%),
    radial-gradient(130% 90% at 50% 60%, transparent 42%, rgba(18,16,9,0.5) 100%);
}
/* .walk__stage prefix beats the generic `main .container` position rule */
.walk__stage .walk__copy { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12vh; width: 100%; z-index: 1; }
.walk__tag {
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.08em; color: var(--gold); margin: 0 0 var(--s-2);
}
.walk__line {
  font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 1.06; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance; max-width: 16ch; margin: 0;
}
.walk__l1, .walk__l2, .walk__tag { display: inline-block; }
.walk__l2 { color: var(--ink-2); }
@media (max-width: 720px) {
  .walk { height: 190vh; }
  .walk__stage .walk__copy { bottom: 16vh; bottom: 16svh; }
}

/* the hero carries the boldest glow (first impression) */
.hero .fx::before {
  background:
    radial-gradient(52% 60% at 73% 22%, rgba(254, 196, 14, 0.27), rgba(254, 196, 14, 0.075) 40%, transparent 66%),
    radial-gradient(90% 80% at 12% 116%, rgba(254, 196, 14, 0.055), transparent 55%);
}

/* backdrop placement across key sections (content sits above the .fx layer) */
.rating, .results { position: relative; }
.rating > .container, .results > .container { position: relative; z-index: 2; }
.week__stage { position: relative; }
.week__panels { position: relative; z-index: 2; }

/* ============================================================
   WORKLIGHT — one page-global lamp (JS-built; html.lamp-on only)
   The auditor's work-lamp: a single fixed light source the whole
   page passes under. Beam aim/spread ride transforms, room
   darkness and warmth ride opacity — compositor-only. Without
   html.lamp-on (no-JS, reduced-motion, ?static=1, ?lamp=0) none
   of this renders and the static .fx build above is unchanged.
   ============================================================ */
.lamp { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; display: none; }
html.lamp-on .lamp { display: block; }
/* content sits above the lamp; .fx / hero bars stay below it as lit scenery */
main .container { position: relative; z-index: 2; }
.footer { position: relative; z-index: 2; }         /* footer sits outside main */
.week__nav { position: relative; z-index: 2; }      /* mobile carousel dots/counter */
.lamp__amb { position: absolute; inset: 0; background: #000; opacity: 0.1; }
.lamp__beam, .lamp__breathe { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lamp__beam { will-change: transform; }
.lamp__glow {
  position: absolute; left: 0; top: 0;
  width: 140vmax; height: 140vmax;
  max-width: 2600px; max-height: 2600px;   /* caps layer memory on ultrawide; gradient is transparent from 70% so no edge shows */
  border-radius: 50%;
  transform: translate(-50%, -50%);        /* centred on the beam origin whatever the clamped size */
  will-change: opacity;
}
.lamp__glow--gold { background: radial-gradient(closest-side, rgba(254, 196, 14, 0.17), rgba(254, 196, 14, 0.05) 42%, transparent 70%); }
.lamp__glow--bone { background: radial-gradient(closest-side, rgba(245, 241, 232, 0.09), rgba(245, 241, 232, 0.025) 42%, transparent 70%); opacity: 0; }
.lamp__vignette { position: absolute; inset: 0; box-shadow: inset 0 0 190px 34px rgba(0, 0, 0, 0.5); }

/* under the lamp the per-section glows/vignettes retire; the grid bed stays as static texture */
html.lamp-on .fx { box-shadow: none; }
html.lamp-on .fx::before { content: none; }

/* dim grid-only bed — extends the world into journey / cta / contact */
.fx--dim { box-shadow: none; }
.fx--dim::before { content: none; }
.fx--dim::after { opacity: 0.55; }
.journey, .cta-band, .contact { position: relative; }

/* shadow coherence: floating elements cast away from the lamp (JS sets --lamp-sx per scene) */
:root { --lamp-sx: 0px; }

/* settle grammar: a measured value stamps a hairline rule as it settles (JS adds the class) */
.is-stamped::after {
  content: ""; display: block; height: 1px; margin-top: 0.45rem;
  background: var(--gold); opacity: 0.55;
  transform: scaleX(0); transform-origin: left center;
  animation: stampline 1s var(--ease-out) forwards;
}
.results__source.is-stamped::after { max-width: 38ch; opacity: 0.4; }
@keyframes stampline {
  40%  { transform: scaleX(1); opacity: 0.55; }
  100% { transform: scaleX(1); opacity: 0.16; }
}
@media (prefers-reduced-motion: reduce) {
  .is-stamped::after { animation: none; transform: scaleX(1); opacity: 0.16; }
}

/* the radar's one-shot readout sweep (rests invisible; only the reveal shows it) */
.radar__sweep { stroke: var(--gold); stroke-width: 1; opacity: 0; }

/* journey contour echoes — the annual re-ratings receding behind the curve */
.curve__echo { fill: none; stroke: var(--ink-3); stroke-width: 2; pointer-events: none; }

/* the lamp holds the form: labels catch the light while a field is being filled */
.form__field:focus-within label { color: var(--gold); }

@media (max-width: 1024px) {
  .lamp__glow--bone { display: none; }   /* mobile tier: single warm disc */
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out);
}

.btn--gold {
  background: var(--gold);
  color: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.btn--gold:hover { background: var(--gold-deep); }
.btn--gold::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.btn--gold:hover::after { left: 140%; }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9375rem; }

.btn__arrow {
  display: inline-block;
  transition: transform 0.22s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.chip--gold {
  color: var(--gold);
  border: 1px solid rgba(254, 196, 14, 0.35);
  background: var(--gold-tint);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  transition: border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* The scrolled background + blur live on a pseudo-element, NOT on .nav itself.
   A backdrop-filter (like any filter/transform) on .nav would make it the
   containing block for the position:fixed mobile menu (.nav__links), collapsing
   the fullscreen menu to the height of the bar once scrolled — it then showed
   only a sliver with one link. The pseudo is a sibling of the menu, so it can
   blur the bar without ever trapping the menu. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(14px);
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}

.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled { border-bottom-color: var(--line-soft); }

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__mark { width: 30px; height: 30px; color: var(--gold); flex: none; }

.brand__word {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-left: -0.45rem; /* the mark is the O */
}
.brand__sub { font-weight: 400; letter-spacing: -0.01em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav__links > a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.nav__links > a:not(.btn):hover { color: var(--ink); }

.nav__links > a.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* the bar keeps a short, scannable list — there is no room for more at tablet
   widths. The fullscreen menu has the space, so it carries the whole page. */
.nav__link--more { display: none; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--bg-deep);
  padding-top: clamp(8rem, 16vh, 11rem);
  padding-bottom: var(--s-5);
  overflow: clip;
}

.hero__bars {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 240px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-inline: 2vw;
  opacity: 0.55;
  pointer-events: none;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent 85%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent 85%);
}

.hero__bars span {
  flex: 1 1 0;
  background: rgba(245, 241, 232, 0.11);
  border-radius: 1px 1px 0 0;
  transform-origin: bottom;
}
.hero__bars span.is-gold { background: rgba(254, 196, 14, 0.65); }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero__kicker {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.hero__kicker em { font-style: italic; }

.hero__title {
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1.02;
  margin-bottom: var(--s-3);
}

.hero__sub {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.7;
  margin-bottom: var(--s-4);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* gauge */
.hero__gauge {
  display: grid;
  justify-items: center;
  gap: var(--s-1);
}

.gauge {
  position: relative;
  width: min(380px, 78vw);
  aspect-ratio: 1;
}

.gauge::before {
  /* one allowed glow */
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 196, 14, 0.13), transparent 65%);
  pointer-events: none;
}

.gauge__svg { width: 100%; height: 100%; }

.gauge__ticks line { stroke: var(--line); stroke-width: 2; }
.gauge__ticks line.is-major { stroke: var(--ink-3); }

.gauge__track { stroke: var(--surface-2); stroke-width: 10; stroke-linecap: round; }
.gauge__fill  { stroke: var(--gold); stroke-width: 10; stroke-linecap: round; }

.gauge__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.gauge__value {
  color: var(--ink);
  font-size: clamp(4rem, 9vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}

.gauge__pct {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--gold);
  margin-left: 0.08em;
}

.gauge__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* hero ledger */
.hero__ledger {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.ledger__item {
  padding: var(--s-3) var(--s-3) var(--s-2) 0;
  display: flex; flex-direction: column;   /* let the value bottom-align so all 4 numbers line up even when a label wraps to two lines */
}
.ledger__item + .ledger__item { padding-left: var(--s-3); border-left: 1px solid var(--line-soft); }

.ledger__item dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}

.ledger__item dd {
  color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: auto;
}

.ledger__item--note dd {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.5;
  padding-top: 0.4rem;
}

/* ============================================================
   QUESTIONS
   ============================================================ */
.questions { padding-block: var(--section); }

.questions__title {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 21ch;
}
.questions__title em { font-style: italic; font-weight: 600; }

.questions__lead {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.questions__list {
  margin-top: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.qrow {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-top: 1px solid var(--line);
}

.qrow__index {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1;
  transition: color 0.25s var(--ease-out);
}

.qrow__text {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--ink);
  max-width: 28ch;
  transition: color 0.25s var(--ease-out);
}

.qrow:hover .qrow__index { color: var(--gold); }

.questions__close {
  margin-top: var(--s-4);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--gold);
}

/* ============================================================
   VALUE
   ============================================================ */
.value {
  padding-block: var(--section);
  background: var(--bg-deep);
  border-block: 1px solid var(--line-soft);
}

.value__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.value__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }

.value__intro { max-width: 32rem; }

.value__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.value__lead, .value__item {
  background: var(--bg-deep);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.value__item:hover { background: var(--surface); }
.value__lead:hover { background: var(--surface-2); }
.value__item:hover, .value__lead:hover { box-shadow: inset 0 2px 0 var(--gold); }

.value__lead {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
}
.value__lead .value__range { margin-top: auto; padding-top: var(--s-3); }

.value__lead h3, .value__item h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 0.8rem;
}

.value__lead > p:not([class]), .value__item p { font-size: 1rem; line-height: 1.7; }

.value__lead .value__range {
  color: var(--ink);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.value__range .num { color: var(--gold); }
.value__range-to {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  padding-inline: 0.3em;
}
.value__lead .value__range-note { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }

/* ============================================================
   THE WEEK — phased, day by day  (replaces old .process)
   Default styling = readable stacked panels (no-JS / reduced-motion).
   JS adds .week--pinned (desktop + motion) for the sticky overlay mode.
   ============================================================ */
.week { padding-block: var(--section) 0; }

.week__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.week__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.week__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.week__intro { font-size: var(--text-body); max-width: 40rem; }

.week__cue { display: none; }   /* shown only in pinned mode */

/* ---------- chapter cues ----------
   The guided-scroll affordance: a small ring + mono label
   that glides you to the next chapter. Plain anchors, so they work with
   no JS (native jump), with JS (the shared smooth-anchor handler), and for
   screen readers (real links with real names). Used sparingly: hero + results. */
.cue {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  transition: color 0.25s var(--ease-out);
}
.cue:hover, .cue:focus-visible { color: var(--gold); }
.cue__ring {
  width: 22px; height: 30px; border-radius: 11px; border: 1px solid var(--line);
  position: relative; display: flex; justify-content: center; padding-top: 6px; flex: none;
}
.cue__fill { width: 4px; height: 7px; border-radius: 2px; background: var(--gold); animation: weekCue 1.7s var(--ease-out) infinite; }
.hero__cue { position: relative; z-index: 2; margin-top: var(--s-4); }
.results__cue { margin-top: var(--s-4); }
@media (prefers-reduced-motion: reduce) { .cue__fill { animation: none; } }
@media (max-width: 720px) { .hero__cue { display: none; } }   /* the bookbar carries mobile */

/* ---- stacked (default / fallback) ---- */
.week__viewport { position: relative; }
.week__stage {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.week__hud { display: none; }
.week__panels { display: block; }

.phase {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--line-soft);
}
.phase:first-child { border-top: 0; padding-top: 0; }

.phase__media { display: none; }   /* atmospheric bg only meaningful in pinned mode */

.phase__ghost {
  position: absolute;
  top: clamp(1rem, 4vw, 2.5rem);
  right: 0;
  font-size: clamp(5.5rem, 15vw, 12rem);
  font-weight: 800;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.045;
  letter-spacing: -0.05em;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.phase__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.phase__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.phase__title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: var(--s-3);
}
.phase__text { font-size: var(--text-body); max-width: 33rem; color: var(--ink-2); }

/* split-text line mechanics — text shows normally without JS.
   The mask needs overflow:hidden, but line-height is 1.0, so descenders (p, g,
   y) sit below the line box and get clipped. The padding gives them room and
   the matching negative margin keeps the line advance unchanged. */
.lines .line {
  display: block; overflow: hidden;
  padding-bottom: 0.18em; margin-bottom: -0.14em;
}
.lines .line__in { display: block; }

/* ---- the bespoke per-phase visuals ---- */
.phase__viz { position: relative; width: 100%; max-width: 34rem; justify-self: end; }

.viz-card {
  background: linear-gradient(160deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  box-shadow: 0 36px 70px -48px rgba(0,0,0,0.85);
}
.viz-card__cap {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.viz-card__cap .dotpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* phase 1 — data request checklist (click a row to open its explainer pop-up) */
.viz-request__row { border-bottom: 1px solid var(--line-soft); }
.viz-request__row:last-child { border-bottom: 0; }

.viz-request__head {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; padding: 0.6rem 0;
  background: none; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.viz-request__head:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 7px; }
.viz-request__label { font-size: 0.92rem; color: var(--ink-2); margin-right: auto; transition: color 0.3s var(--ease-out); }
.viz-request__head:hover .viz-request__label,
.viz-request__head:focus-visible .viz-request__label { color: var(--ink); }
.viz-request__status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.viz-check {
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid var(--ink-3); display: grid; place-items: center;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.viz-check svg { width: 10px; height: 10px; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.viz-check svg path { stroke: var(--bg-deep); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.viz-request__row.is-on .viz-check { background: var(--gold); border-color: var(--gold); }
.viz-request__row.is-on .viz-check svg { opacity: 1; }
.viz-request__row.is-on .viz-request__status { color: var(--gold); }

/* "open" affordance — a plus that fills gold and rotates on hover/focus */
.viz-request__more {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3);
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.viz-request__more svg { width: 11px; height: 11px; display: block; }
.viz-request__more svg path { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.viz-request__head:hover .viz-request__more,
.viz-request__head:focus-visible .viz-request__more {
  color: var(--bg-deep); background: var(--gold); border-color: var(--gold); transform: rotate(90deg);
}

/* phase 1 — engine intake: six streams converge into a core meter that fills
   as each item is "received". Default/resting state is full (6/6); motion
   empties it (weekHides) then refills it in step with the rows (weekShows). */
.viz-intake { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.viz-intake__cap {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.55rem;
}
.viz-intake__cap .dotpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.viz-intake__svg { display: block; width: 100%; height: auto; overflow: visible; }

.intake__conn { stroke: var(--gold); stroke-width: 1; fill: none; opacity: 0.16; transition: opacity 0.3s var(--ease-out); }
.intake__conn.is-flow { opacity: 0.5; }
.intake__inlet { fill: var(--ink-3); transition: fill 0.3s var(--ease-out); }
.intake__inlet.is-live { fill: var(--gold); }
.intake__track { stroke: var(--line); stroke-width: 6; fill: none; }
.intake__ring  { stroke: var(--gold); stroke-width: 6; fill: none; stroke-linecap: round; }
.intake__halo  {
  fill: var(--gold); opacity: 0.12; transform-box: fill-box; transform-origin: center;
  animation: intakePulse 3.4s ease-in-out infinite;
}
.intake__core  { fill: var(--bg-deep); stroke: var(--gold); stroke-width: 1; }
.intake__count { font-family: var(--font-mono); fill: var(--gold); font-size: 26px; font-weight: 600; }
.intake__den   { fill: var(--ink-3); font-size: 13px; }
.intake__packet { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(254, 196, 14, 0.75)); }

@keyframes intakePulse {
  0%, 100% { transform: scale(1); opacity: 0.10; }
  50%      { transform: scale(1.2); opacity: 0.20; }
}
@media (prefers-reduced-motion: reduce) {
  .intake__halo { animation: none; }
}

/* ---- the reusable pop-up card (appended to <body>) ----
   One component, two callers: Day-1 "pre-read" rows and the journey maturity
   levels. open() shows only the slots it is given, so empty slots collapse. */
.popcard { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); }
.popcard[hidden] { display: none; }
.popcard__backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: color-mix(in oklab, var(--bg-deep) 80%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.popcard.is-open .popcard__backdrop { opacity: 1; }
.popcard__dialog {
  position: relative; width: min(38rem, 100%); max-height: min(86vh, 46rem); overflow-y: auto;
  background: linear-gradient(160deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.7rem);
  box-shadow: var(--lamp-sx) 50px 100px -50px rgba(0,0,0,0.92);
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.popcard.is-open .popcard__dialog { opacity: 1; transform: none; }
.popcard__dialog::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent 72%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.popcard__close {
  position: absolute; top: clamp(1rem, 2.6vw, 1.5rem); right: clamp(1rem, 2.6vw, 1.5rem);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
  transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.popcard__close svg { width: 13px; height: 13px; }
.popcard__close svg path { stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.popcard__close:hover, .popcard__close:focus-visible { color: var(--bg-deep); background: var(--gold); border-color: var(--gold); outline: none; }

.popcard__head { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 var(--s-2); padding-right: 2.4rem; }
.popcard__head[hidden] { display: none; }
/* gold sparkle mark in a soft tinted disc */
.popcard__spark {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent);
}
.popcard__spark svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.popcard__kicker { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.popcard__kicker[hidden] { display: none; }
.popcard__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.06; color: var(--ink); margin: 0 0 0.55rem; padding-right: 2.4rem; }
.popcard__status { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s-3); }
.popcard__status[hidden] { display: none; }
.popcard__status .viz-check { width: 18px; height: 18px; background: var(--gold); border-color: var(--gold); }
.popcard__status .viz-check svg { opacity: 1; }
.popcard__media { margin: 0 0 var(--s-3); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-deep); }
.popcard__media[hidden] { display: none; }
.popcard__media img { width: 100%; height: auto; display: block; }

/* mini maturity-curve shown inside a level pop-up, with the current level lit */
.minicurve { display: block; width: 100%; height: auto; padding: clamp(0.9rem, 3vw, 1.5rem); box-sizing: border-box; }
.minicurve__path { stroke: var(--ink-3); stroke-width: 4; }
.minicurve__dot { fill: var(--ink-3); }
.minicurve__dot.is-on { fill: var(--gold); }
.popcard__lead { font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 34rem; margin: 0; }
.popcard__lead[hidden] { display: none; }

/* "signals" list — gold dash markers */
.popcard__bullets { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 0.7rem; }
.popcard__bullets[hidden] { display: none; }
.popcard__bullets li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.popcard__bullets li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 2px; background: var(--gold); border-radius: 2px; }
.popcard__marker { margin: var(--s-3) 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--line-soft); font-size: 0.84rem; line-height: 1.5; color: var(--ink-3); }
.popcard__marker[hidden] { display: none; }
.popcard__marker strong { color: var(--gold); font-weight: 700; }

/* Journey level pop-up: fit on one screen with no scrolling, mobile + desktop.
   Mobile: drop the decorative mini-curve and the lead line (it just restates the
   first signals) and tighten the list. Desktop: two columns (summary + curve on the
   left, signals on the right) so even the 7-signal levels fit. Scoped to --level so
   the Day-1 "req" pop-up is unaffected. */
@media (max-width: 719px) {
  .popcard--level .popcard__media,
  .popcard--level .popcard__lead { display: none; }
  .popcard--level .popcard__bullets { margin-top: var(--s-2); gap: 0.5rem; }
  .popcard--level .popcard__bullets li { font-size: 0.9rem; line-height: 1.45; }
}
@media (min-width: 720px) {
  .popcard--level .popcard__dialog {
    width: min(54rem, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3vw, 2.6rem);
    align-content: start;
    grid-template-areas:
      "head    bullets"
      "title   bullets"
      "lead    bullets"
      "media   bullets"
      "marker  bullets";
  }
  .popcard--level .popcard__head    { grid-area: head; }
  .popcard--level .popcard__title   { grid-area: title; }
  .popcard--level .popcard__lead    { grid-area: lead; max-width: none; }
  .popcard--level .popcard__media   { grid-area: media; align-self: start; margin-bottom: 0; }
  .popcard--level .popcard__bullets { grid-area: bullets; align-self: start; margin-top: 0; padding-top: 1.7rem; }
  .popcard--level .popcard__marker  { grid-area: marker; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .popcard__backdrop, .popcard__dialog { transition: none; }
}

/* journey levels become click-to-open cards (interaction added by JS) */
.level.is-clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.level.is-clickable { transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.level.is-clickable:hover { transform: translateY(-3px); }
.level.is-clickable:hover .level__name { color: var(--gold); }
.level__name { transition: color 0.25s var(--ease-out); }
.level.is-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }
.level.is-clickable::after {
  content: "Details +"; display: inline-block; margin-top: 0.7rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.level.is-clickable:hover::after, .level.is-clickable:focus-visible::after { opacity: 1; transform: none; color: var(--gold); }
/* touch devices have no hover, so keep the "tap me" hint visible there */
@media (hover: none) { .level.is-clickable::after { opacity: 0.75; transform: none; } }

/* counters glow gold while running, then settle to their resting colour */
.num { transition: color 0.6s var(--ease-out); }
.num.is-ticking { color: var(--gold); }

/* phase 2 — agenda grid */
.viz-agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.viz-agenda__col { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.viz-agenda__head {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 0.3rem; border-bottom: 1px solid var(--line-soft);
}
.viz-agenda__loc { color: var(--ink-2); }
.viz-agenda__loc--on { color: var(--gold); }
.viz-pill {
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: 0.4rem 0.45rem; font-size: 0.64rem; line-height: 1.25; color: var(--ink-2);
  /* Break only at the &shy; points baked into the labels in js/main.js.
     overflow-wrap must stay `normal`: break-word makes every character a break
     opportunity, and the greedy line-filler then prefers a later mid-word chop
     over the soft hyphen, which is the bug this replaced. */
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
}
.viz-pill--on { border-color: rgba(254,196,14,0.32); background: var(--gold-tint); color: var(--ink); }
/* Phone layout: five day columns leave each pill only ~48px of text room, which
   is narrower than the longest labels ("Engineering" needs 54px), so no amount
   of padding or font tuning fits them. Turn the week on its side instead — one
   row per day, day label left, sessions flowing across. Pills are then sized to
   their content and every label sits on one line. */
@media (max-width: 1024px) {
  .viz-agenda { grid-template-columns: 1fr; gap: 0; }
  .viz-agenda__col {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.3rem; padding-block: 0.42rem;
    border-top: 1px solid var(--line-soft);
  }
  .viz-agenda__col:first-child { border-top: 0; padding-top: 0; }
  /* day over location, in a narrow fixed column so the pills all start flush */
  .viz-agenda__head {
    flex: 0 0 3.4rem; padding-bottom: 0; border-bottom: 0; line-height: 1.35;
  }
  /* never let a pill shrink below its label */
  .viz-pill { flex: 0 0 auto; }
}

/* phase 3 — functions constellation (SVG) */
.viz-net { width: 100%; height: auto; overflow: visible; }
.viz-net__link { stroke: var(--line); stroke-width: 1; transition: stroke 0.4s var(--ease-out); }
.viz-net__link.is-on { stroke: var(--gold-deep); }
.viz-net__node { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.5; transition: fill 0.35s var(--ease-out), stroke 0.35s var(--ease-out); }
.viz-net__node.is-on { fill: var(--gold); stroke: var(--gold); }
.viz-net__hub { fill: var(--bg-deep); stroke: var(--gold); stroke-width: 2; }
.viz-net__label { fill: var(--ink-3); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em; transition: fill 0.35s var(--ease-out); }
.viz-net__label.is-on { fill: var(--ink); }
.viz-net__hublabel { fill: var(--gold); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- on-site voice pins (Days 2–3) ----
   Each function that was interviewed carries its real quote, opened as the same
   pop-up card the pre-read rows and maturity levels use. Buttons sit over the
   spider in a positioned wrapper; the ::before gives a ~44px tap target without
   growing the visible dot. */
.viz-net-wrap { position: relative; }
.voicepin {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-deep); border: 1px solid var(--gold);
  color: var(--gold); line-height: 1;
  box-shadow: 0 0 0 3px rgba(24,21,18,0.9), 0 8px 18px -10px rgba(0,0,0,0.9);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.voicepin::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
/* pins ride in behind their node during the day's reveal; default = on, so the
   static / reduced-motion / no-GSAP page shows the finished state */
.voicepin { opacity: 0; transition: opacity 0.45s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.voicepin.is-on { opacity: 1; }
.voicepin__mark { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; transform: translateY(0.28em); }
.voicepin:hover, .voicepin:focus-visible { background: var(--gold); color: var(--bg-deep); transform: translate(-50%, -50%) scale(1.12); }
.voicepin--hub { width: 26px; height: 26px; }
/* the pin is a fixed CSS size sitting on a diagram that scales with the
   viewport, so it grows relative to the labels as the SVG shrinks. Trim it on
   narrow screens; the ::before keeps the tap target at 44px. */
@media (max-width: 1024px) {
  .voicepin {
    width: 16px; height: 16px;
    box-shadow: 0 0 0 2px rgba(24,21,18,0.9), 0 8px 18px -10px rgba(0,0,0,0.9);
  }
  .voicepin::before { inset: -14px; }
  .voicepin__mark { font-size: 0.8rem; }
}
.viz-net__hint {
  margin: var(--s-2) 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
/* the leadership quote, printed under the spider: proof for the visitor who
   scrolls past without opening a single pin */
.viz-net__voice { margin: var(--s-2) 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--line-soft); }
.viz-net__voice blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); }
.viz-net__voice figcaption { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* ---- the quote pop-up ---- */
.popcard--voice .popcard__lead {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5; color: var(--ink); font-style: italic; max-width: 30rem;
}

/* ---- through-page quote card (?quotes=float / both) ----
   Slides in beside the section it speaks to and retracts again. Desktop-only,
   motion-only, aria-hidden (the #voices section carries the same quotes to
   screen readers). */
.voicecard {
  position: fixed; left: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 4vh, 3rem);
  z-index: 60; width: min(23rem, 32vw); padding: 1.15rem 1.3rem 1.05rem;
  background: linear-gradient(160deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,0.95);
  opacity: 0; transform: translateX(-14px); pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.voicecard.is-visible { opacity: 1; transform: none; }
.voicecard__mark { position: absolute; top: 0.35rem; right: 0.75rem; font-family: var(--font-display); font-size: 2rem; color: var(--gold); opacity: 0.35; line-height: 1; }
.voicecard__quote { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
.voicecard__role { margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .voicecard { display: none; } }

/* phase 4 — mini radar (its own scoped styling; RATING radar styles are .radar__svg-scoped) */
.viz-assess { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.viz-assess__svg { width: 100%; max-width: 22rem; overflow: visible; }
.viz-assess__svg .grid-line { stroke: var(--line-soft); fill: none; }
.viz-assess__svg .axis-line { stroke: var(--line-soft); }
.viz-assess__svg .poly--industry { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linejoin: round; }
.viz-assess__svg .poly--assessed { fill: rgba(254, 196, 14, 0.12); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.viz-assess__svg .vertex { fill: var(--gold); }
.viz-assess__svg .axis-label { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; }
.viz-assess__read {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.viz-assess__mark { color: var(--gold); font-weight: 700; letter-spacing: 0.12em; }

/* phase 5 — roadmap milestones */
.viz-road__rail { position: relative; margin-left: 0.5rem; padding-left: 1.6rem; }
.viz-road__rail::before { content: ""; position: absolute; left: 5px; top: 0.3rem; bottom: 0.3rem; width: 1px; background: var(--line); }
.viz-road__prog { position: absolute; left: 5px; top: 0.3rem; bottom: 0.3rem; width: 1px; background: var(--gold); transform: scaleY(1); transform-origin: top; }
.viz-road__mile { position: relative; padding: 0.55rem 0 0.9rem; }
.viz-road__mile::before {
  content: ""; position: absolute; left: calc(-1.6rem + 1px); top: 0.85rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--ink-3);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.viz-road__mile.is-on::before { background: var(--gold); border-color: var(--gold); }
.viz-road__h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.viz-road__v { font-size: 0.98rem; color: var(--ink); font-weight: 600; }
.viz-road__out { display: flex; gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.viz-road__out-h { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 0.2rem; }
.viz-road__out-v { font-size: 1.05rem; font-weight: 800; color: var(--gold); letter-spacing: -0.01em; }

/* ============================================================
   THE WEEK — pinned overlay (desktop + motion only)
   ============================================================ */
@media (min-width: 1025px) {
  .week--pinned { padding-bottom: 0; }
  .week--pinned .week__head { margin-bottom: 0; }
  .week--pinned .week__cue {
    display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--s-4);
    font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .week--pinned .week__cue-ring {
    width: 22px; height: 30px; border-radius: 11px; border: 1px solid var(--line);
    position: relative; display: flex; justify-content: center; padding-top: 6px;
  }
  .week--pinned .week__cue-fill { width: 4px; height: 7px; border-radius: 2px; background: var(--gold); animation: weekCue 1.7s var(--ease-out) infinite; }

  .week--pinned .week__viewport { height: 540vh; }
  .week--pinned .week__stage {
    position: sticky; top: 0; height: 100vh; max-width: 1340px;
    display: grid; grid-template-columns: minmax(150px, 215px) 1fr;
    gap: clamp(2rem, 5vw, 5rem); align-items: center; overflow: hidden;
  }

  .week--pinned .week__hud { display: flex; flex-direction: column; gap: var(--s-5); position: relative; z-index: 3; }
  .week--pinned .week__count { display: flex; align-items: baseline; gap: 0.12em; }
  .week--pinned .week__count-cur { font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: 800; color: var(--gold); line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .week--pinned .week__count-sep, .week--pinned .week__count-tot { font-size: 1.4rem; color: var(--ink-3); }

  .week--pinned .week__rail { display: flex; flex-direction: column; }
  .week--pinned .week__seg {
    padding: 0.5rem 0 0.5rem 1rem; border-left: 2px solid var(--line);
    opacity: 0.45; transition: opacity 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  }
  .week--pinned .week__seg-day { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .week--pinned .week__seg-name { display: block; font-size: 0.9rem; color: var(--ink-2); font-weight: 600; }
  .week--pinned .week__seg.is-passed { opacity: 0.75; border-color: var(--gold-deep); }
  .week--pinned .week__seg.is-active { opacity: 1; border-color: var(--gold); }
  .week--pinned .week__seg.is-active .week__seg-name { color: var(--ink); }
  .week--pinned .week__seg.is-clickable { cursor: pointer; }
  .week--pinned .week__seg.is-clickable:not(.is-active):hover { opacity: 0.9; border-color: var(--gold-deep); }
  .week--pinned .week__seg.is-clickable:not(.is-active):hover .week__seg-name { color: var(--ink); }

  .week--pinned .week__panels { position: relative; height: 78vh; z-index: 2; }
  .week--pinned .phase {
    position: absolute; inset: 0; padding: 0; border: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 0.7s var(--ease-out), visibility 0.7s linear;
  }
  .week--pinned .phase.is-active { opacity: 1; visibility: visible; }
  .week--pinned .phase__inner { grid-template-columns: 1fr 1.06fr; width: 100%; height: 100%; align-content: center; }
  .week--pinned .phase__viz { justify-self: center; }
  /* sized and inset so the day numeral reads whole, not clipped by the corner */
  .week--pinned .phase__ghost { top: 1vh; right: 2rem; font-size: clamp(7.5rem, 14vw, 13rem); opacity: 0.06; }
  /* scene scale: one large line carries each day */
  .week--pinned .phase__title { font-size: clamp(2.8rem, 5.6vw, 4.9rem); letter-spacing: -0.03em; }

  .week--pinned .phase__media {
    display: block; position: absolute; inset: -8% -16%;
    background-size: cover; background-position: center;
    opacity: 0; z-index: 0;
    transition: opacity 0.9s var(--ease-out);
  }
  /* Day 1: keep the fanned documents in the clear zone right of the copy */
  .week--pinned .phase[data-phase="0"] .phase__media { background-position: 74% 62%; }
  /* promoted from faint texture (0.14) to a real scene per day — the scrim
     below keeps the left copy column and the viz zone on solid charcoal */
  .week--pinned .phase.is-active .phase__media.has-media { opacity: 0.52; }
  .week--pinned .phase__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--bg) 10%, rgba(24,21,18,0.78) 34%, rgba(24,21,18,0.22) 58%, rgba(24,21,18,0.5) 100%),
      linear-gradient(180deg, rgba(24,21,18,0.85) 0%, transparent 30%, transparent 62%, rgba(24,21,18,0.9) 100%);
  }
}

/* mobile/tablet carousel: each day card gets its scene too (lighter) */
@media (max-width: 1024px) {
  .week--carousel .phase { position: relative; overflow: hidden; }
  .week--carousel .phase__inner { position: relative; z-index: 1; }
  .week--carousel .phase__media {
    display: block; position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; z-index: 0;
    transition: opacity 0.9s var(--ease-out);
  }
  .week--carousel .phase__media.has-media { opacity: 0.34; }
  .week--carousel .phase__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(24,21,18,0.88), rgba(24,21,18,0.42) 42%, rgba(24,21,18,0.88) 92%);
  }
}

@keyframes weekCue {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}

/* poster capture mode (dev / screenshots only — ?poster=N).
   transition:none makes phases snap instantly — headless render contexts don't
   advance the compositor clock, so a transitioned opacity would stay stuck at 1. */
@media (min-width: 1025px) {
  .week--poster .week__viewport { height: 100vh; }
  .week--poster .week__stage { position: fixed; inset: 0; height: 100vh; z-index: 300; background: var(--bg); }
  .week--poster .phase { transition: none; }
}

/* ============================================================
   RATING (radar + elements)
   ============================================================ */
.rating {
  padding-block: var(--section);
  background: var(--bg-deep);
  border-block: 1px solid var(--line-soft);
}

.rating__head {
  max-width: 50rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.rating__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; margin-bottom: var(--s-2); }

.rating__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.radar { display: grid; gap: var(--s-3); justify-items: center; }

.radar__svg { width: 100%; max-width: 560px; height: auto; }

.radar__svg .grid-line { stroke: var(--line-soft); fill: none; }
.radar__svg .axis-line { stroke: var(--line-soft); }
.radar__svg .axis-label {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.radar__svg .axis-label.is-hot { fill: var(--gold); }
.radar__svg .poly--assessed {
  fill: rgba(254, 196, 14, 0.10);
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar__svg .poly--industry {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  stroke-linejoin: round;
}
.radar__svg .vertex { fill: var(--gold); transition: r 0.2s var(--ease-out); }
.radar__svg .vertex.is-hot { fill: var(--ink); }

.radar__legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.legend__item {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.legend__item::before { content: ""; width: 18px; height: 0; border-top: 2px solid; }
.legend__item--gold::before { border-color: var(--gold); }
.legend__item--ghost::before { border-top-style: dashed; border-color: var(--ink-3); }

.elements { border-bottom: 1px solid var(--line); }

.element { border-top: 1px solid var(--line); }

.element__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 1.05rem 0.25rem;
  text-align: left;
  transition: padding-left 0.25s var(--ease-out);
}

.element__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.element__score {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--ink-3);
  letter-spacing: 0.05em;
  transition: color 0.2s var(--ease-out);
}

.element.is-hot .element__row { padding-left: 0.75rem; }
.element.is-hot .element__name { color: var(--gold); }
.element.is-hot .element__score { color: var(--ink); }

.element__def {
  max-height: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 44ch;
  padding-right: var(--s-2);
  transition: max-height 0.35s var(--ease-out), padding-bottom 0.35s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0;
}

.element.is-open .element__def {
  max-height: 8rem;
  padding-bottom: 1.05rem;
  opacity: 1;
}

.rating__note {
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
  max-width: 52rem;
}

/* ============================================================
   JOURNEY (maturity curve)
   ============================================================ */
.journey { padding-block: var(--section); overflow: clip; }

.journey__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.journey__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; max-width: 18ch; }
.journey__intro { max-width: 34rem; }

.journey__scene { position: relative; }

.curve__svg { width: 100%; height: auto; }

.curve__path {
  stroke: var(--ink-3);
  stroke-width: 2;
}

.curve__svg .curve__node { fill: var(--bg); stroke: var(--ink-3); stroke-width: 2; }
.curve__svg .curve__node.is-lit { fill: var(--gold); stroke: var(--gold); }

/* floating sparkle pills sitting on the curve; JS positions left/top */
.curve__pin {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.74rem 0.42rem 0.56rem;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--ink); cursor: pointer; white-space: nowrap;
  box-shadow: var(--lamp-sx) 14px 30px -20px rgba(0,0,0,0.95);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.curve__pin svg { flex: none; width: 13px; height: 13px; fill: var(--gold); display: block; }
.curve__pin-label { font-size: 0.8rem; font-weight: 600; letter-spacing: -0.005em; }
.curve__pin::after {     /* short stem tying the pill to its point on the curve */
  content: ""; position: absolute; left: 50%; width: 1px; height: 13px;
  background: var(--ink-3); transform: translateX(-50%); opacity: 0.6;
}
.curve__pin--above { transform: translate(-50%, calc(-100% - 15px)); }
.curve__pin--below { transform: translate(-50%, 15px); }
.curve__pin--above::after { top: 100%; }
.curve__pin--below::after { bottom: 100%; }
.curve__pin:hover, .curve__pin:focus-visible { border-color: var(--gold); background: var(--surface); outline: none; }
.curve__pin--above:hover, .curve__pin--above:focus-visible { transform: translate(-50%, calc(-100% - 19px)); }
.curve__pin--below:hover, .curve__pin--below:focus-visible { transform: translate(-50%, 19px); }
/* the curve scales down on smaller screens — pills would collide, so hand off to the cards below */
@media (max-width: 900px) { .curve__pin { display: none; } }

.curve__svg .curve__node-label {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* index chip per node (dark disc + hairline gold ring + gold mono numeral) —
   carries its own backing so it stays legible on any part of the backdrop */
.curve__svg .curve__idx-disc {
  fill: var(--bg-deep);
  fill-opacity: 0.92;
  stroke: var(--gold);
  stroke-opacity: 0.55;
  stroke-width: 1.25;
}
.curve__svg .curve__idx-num {
  fill: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.curve__badge {
  position: absolute;
  /* JS positions against the path; fallback */
  left: 38%;
  top: 48%;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0.95rem 0.5rem;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: var(--radius-sm);
  text-align: center;
}

.curve__badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--gold);
}

.curve__badge-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.curve__badge-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.curve__axis {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.curve__axis--x { bottom: -0.5rem; right: 0; }
.curve__axis--y { top: 0; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); }

.levels {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}

.level {
  border-top: 2px solid var(--line);
  padding-top: var(--s-2);
  transition: border-color 0.3s var(--ease-out);
}
.level.is-lit { border-top-color: var(--gold); }

.level__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--ink-3);
  letter-spacing: 0.1em;
}

.level__name {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0.35rem 0 0.5rem;
}

.level__text { font-size: 0.9rem; line-height: 1.6; }

/* ============================================================
   RESULTS
   ============================================================ */
.results {
  padding-block: var(--section);
  background: var(--bg-deep);
  border-block: 1px solid var(--line-soft);
}

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.results__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }

.results__source {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  max-width: 34rem;
}

.results__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.findings { display: grid; }

.finding {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) 1fr;
  align-items: baseline;
  column-gap: var(--s-3);
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.findings .finding:last-child { border-bottom: 1px solid var(--line); }

.finding dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.finding dd {
  color: var(--ink);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
}

.finding dd .num { color: var(--gold); }
.finding__to { color: var(--ink-3); font-weight: 400; padding-inline: 0.18em; }
.finding__unit { font-size: 0.45em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

.finding__note {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-top: 0.45rem;
}

.results__side { display: grid; gap: var(--s-4); }

.oee {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
}

.oee__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.oee__bars { display: grid; gap: 0.9rem; }

.oee__row {
  display: grid;
  grid-template-columns: 3.6rem 1fr 3.4rem;
  align-items: center;
  gap: 0.8rem;
}

.oee__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.oee__bar {
  height: 10px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.oee__fill {
  height: 100%;
  width: 0;
  background: var(--ink-3);
  border-radius: 2px;
}
.oee__fill--gold { background: var(--gold); }

.oee__val {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.toc {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
}

.toc__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--s-2); }

.toc__list { display: grid; }

.toc__list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.toc__list li + li { border-top: 1px solid var(--line-soft); }

.toc__list li::after {
  content: "";
  order: 2;
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-3px);
}
.toc__list li span:first-child { order: 1; }
.toc__page {
  order: 3;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--ink-3);
}

.toc__note {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* departments */
.depts { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.depts__title { font-size: var(--text-h3); margin-bottom: var(--s-3); }

.depts__scale {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.28fr) 1fr minmax(7rem, 0.24fr);
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.depts__scale-labels { position: relative; height: 1.1em; }

.depts__scale-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.depts__scale-labels span:nth-child(1) { left: 0; transform: none; }
.depts__scale-labels span:nth-child(2) { left: 25%; }
.depts__scale-labels span:nth-child(3) { left: 50%; }
.depts__scale-labels span:nth-child(4) { left: 75%; }
.depts__scale-labels span:nth-child(5) { left: 100%; transform: translateX(-100%); }

.dept {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.28fr) 1fr minmax(7rem, 0.24fr);
  align-items: center;
  gap: var(--s-2);
  padding-block: 0.8rem;
  border-top: 1px solid var(--line-soft);
}
.depts__list .dept:last-child { border-bottom: 1px solid var(--line-soft); }

.dept__name { font-weight: 600; color: var(--ink); font-size: 1rem; }

.dept__track {
  position: relative;
  height: 3px;
  background: var(--surface-2);
  border-radius: 3px;
}

.dept__bar {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.dept__bar::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translate(50%, -50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-tint);
}

.dept__level {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-align: right;
}

.depts__note {
  margin-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
  max-width: 48rem;
}

/* ============================================================
   MID-PAGE CTA BAND (after Results) + MOBILE STICKY BOOK BAR
   ============================================================ */
.cta-band { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cta-band__inner {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 150% at 50% -25%, var(--gold-tint), transparent 58%),
    linear-gradient(160deg, var(--surface), var(--bg-deep));
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem);
  text-align: center;
  overflow: hidden;
}
.cta-band__inner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.cta-band__kicker {
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--s-2);
}
.cta-band__title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 20ch; margin-inline: auto; }
.cta-band__text { color: var(--ink-2); max-width: 54ch; margin: var(--s-2) auto 0; }
.cta-band__actions {
  display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s-4);
}

/* mobile-only sticky CTA: slides up after the hero, retracts at the contact form / footer */
.bookbar { display: none; }
@media (max-width: 768px) {
  .bookbar:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: color-mix(in oklab, var(--bg-deep) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(110%);
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
  }
  .bookbar.is-visible { transform: translateY(0); }
  .bookbar__inner { display: flex; align-items: center; gap: var(--s-2); padding-block: 0.7rem; }
  .bookbar__text {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em;
    color: var(--ink-2); margin-right: auto; line-height: 1.25;
  }
  .bookbar__btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .bookbar:not([hidden]) { transition: none; } }

/* ============================================================
   FAQ ("why a rating, not an audit") — native <details> accordion
   ============================================================ */
.faq { padding-block: var(--section); }
.faq__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.faq__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
.faq__lead { color: var(--ink-3); margin-top: var(--s-2); }
.faq__list { max-width: 820px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
/* explicit collapse — don't rely on the UA details rule (some engines leave
   closed content rendered); this guarantees the body hides when closed */
.faq__item:not([open]) .faq__body { display: none; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.2rem 0;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > span:first-child { margin-right: auto; transition: color 0.25s var(--ease-out); }
.faq__item summary:hover > span:first-child { color: var(--gold); }
.faq__item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; margin-top: 0.15rem; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--gold); border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__body { padding: 0 0 1.35rem; max-width: 64ch; }
.faq__body p { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after { transition: none; }
}

/* ============================================================
   TESTIMONIALS — a row of gold-medallion cards.
   ============================================================ */
.voices { padding-block: var(--section); }
.voices[hidden] { display: none; }
.voices__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.voices__kicker {
  font-family: var(--font-mono); font-size: var(--text-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-2);
}
.voices__head h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
.voices__row {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); row-gap: clamp(2rem, 3.5vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  max-width: 1000px; margin-inline: auto;
}
/* Milled-coin treatment: an inner depth layer carries a reeded gold edge band
   and the face rides 14px above it in Z, so the tilt exposes the coin's side.
   The contact shadow grounds each coin. */
.coin { position: relative; perspective: 900px; }
.coin::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -22px; height: 32px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
  filter: blur(8px);
}
.coin__inner { position: relative; height: 100%; transform-style: preserve-3d; will-change: transform; }
.coin__inner::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  transform: translateZ(0);
  background: repeating-linear-gradient(90deg, var(--gold-deep) 0 2px, #4a3a02 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(254, 196, 14, 0.24); opacity: 0.85;
}
.coin__face {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(120% 80% at 50% 0, #2e2a22 0, var(--surface) 55%),
    linear-gradient(160deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem); text-align: center;
  transform: translateZ(14px); transform-style: preserve-3d;
  transition: box-shadow 0.4s var(--ease-out);
}
.coin__face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(254, 196, 14, 0.14);
}
.coin__mark {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 1.1rem; flex: none; transform: translateZ(24px);
  background: radial-gradient(circle at 38% 32%, #ffe79a, var(--gold) 50%, var(--gold-deep) 82%, #8f6c04);
  color: #241c05; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1;
  box-shadow: 0 0 0 6px var(--gold-tint), inset 0 1px 2px rgba(255,255,255,0.45), 0 12px 22px -14px #000;
}
.coin__quote { color: var(--ink); font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.55; font-weight: 500; transform: translateZ(16px); }
.coin__role { margin-top: auto; padding-top: 1.1rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); transform: translateZ(10px); }
.coin__role::before {
  content: ""; display: block; width: 30px; height: 2px; margin: 0 auto 0.7rem;
  background: var(--gold); opacity: 0.55; border-radius: 2px;
}
.coin.is-tilting .coin__face { box-shadow: 0 30px 50px -30px rgba(0,0,0,0.9); }
@media (prefers-reduced-motion: reduce) {
  .coin__inner, .coin__face { transition: none; transform: none; }
  .coin__mark, .coin__quote, .coin__role { transform: none; }
  .coin::after, .coin__inner::before { display: none; }
}

/* ============================================================
   AUDIENCE
   ============================================================ */
.audience { padding-block: var(--section); }

.audience h2 { font-size: var(--text-h2); letter-spacing: -0.02em; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.audience__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.persona { padding-block: var(--s-2); }

.persona + .persona {
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(1.5rem, 3.5vw, 3rem);
}
.persona:not(:last-child) { padding-right: clamp(1.5rem, 3.5vw, 3rem); }

.persona__role {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}

.persona p { font-size: 1rem; line-height: 1.7; }
.persona__role { transition: color 0.3s var(--ease-out); }
.persona:hover .persona__role { color: var(--gold); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { padding-block: var(--section); padding-top: 0; }

.pricing__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(158deg, var(--surface), var(--bg-deep));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
}

.pricing__main h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}

.pricing__fee {
  color: var(--gold);
  font-size: clamp(3.4rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.pricing__terms {
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 600;
  margin: var(--s-1) 0 var(--s-1);
}

.pricing__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}

.pricing__included ul { list-style: none; padding: 0; margin: 0; }

.pricing__included h3 {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}

.pricing__included li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.7rem;
  font-size: 1rem;
  line-height: 1.55;
}
.pricing__included li + li { border-top: 1px solid var(--line-soft); }

.pricing__included li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.18rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================================================
   LEGACY
   ============================================================ */
.legacy {
  padding-block: var(--section);
  background: var(--bg-deep);
  border-block: 1px solid var(--line-soft);
}

.legacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.legacy__copy h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  max-width: 18ch;
}

.legacy__copy p { max-width: 36rem; }
.legacy__copy p + p { margin-top: var(--s-2); }

.legacy__stats { display: grid; }

.legacy__stat {
  display: grid;
  gap: 0.3rem;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}
.legacy__stats .legacy__stat:last-child { border-bottom: 1px solid var(--line); }

.legacy__stat dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.legacy__stat dd {
  color: var(--ink);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-block: var(--section); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact__copy h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}

.contact__copy p { max-width: 28rem; margin-bottom: var(--s-4); }

.contact__email {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 196, 14, 0.4);
  padding-bottom: 0.15rem;
  transition: border-color 0.2s var(--ease-out);
}
.contact__email:hover { border-color: var(--gold); }

.form { display: grid; gap: var(--s-3); }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.form__field { display: grid; gap: 0.5rem; }

.form__field label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.form__field input,
.form__field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.form__field ::placeholder { color: var(--ink-3); opacity: 1; }

.form__field input:focus-visible,
.form__field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-2);
}

.form__field.has-error input,
.form__field.has-error textarea { border-color: #d8704a; }

.form__error {
  min-height: 1.1rem;
  font-size: 0.8125rem;
  color: #e08a66;
  line-height: 1.3;
}

.form__submit { justify-self: start; }

.form__success {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gold);
}

.form__failure {
  font-size: 0.9375rem;
  color: #e08a66;
  line-height: 1.4;
}

.form__failure a { color: inherit; text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s-6) var(--s-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.footer__word {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.brand--footer .brand__mark { width: 26px; height: 26px; }
.brand--footer .brand__word { font-size: 1.25rem; }

.footer__nav {
  display: grid;
  gap: 0.6rem;
}

.footer__nav a {
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--ink); }

.footer__contact { justify-self: end; text-align: right; max-width: 22rem; }

.footer__contact a {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--gold);
  text-decoration: none;
}

.footer__contact p {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.6;
}

.footer__legal { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; }

/* region switcher (UK / US) — lives in the footer, sits with the legal line */
.region-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s-2);
}
.region-switch__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.region-switch a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.region-switch a:hover { color: var(--ink); border-color: var(--ink-3); }
.region-switch a[aria-current="true"] {
  color: var(--bg-deep);
  background: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__gauge { justify-items: center; }
  .gauge { width: min(330px, 70vw); }

  /* "The week, day by day" → one-day-at-a-time horizontal swipe carousel.
     Replaces the all-days-stacked layout on tablet/mobile; desktop (>=1025px) keeps
     its pinned scroll sequence, untouched. */
  .week__cue { display: none; }
  .week__panels {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 0;
    padding: var(--s-2) 0 var(--s-3);
    margin-inline: calc(-1 * var(--gutter));   /* break out of .week__stage padding → full-bleed */
  }
  /* JS carousel (the dot nav is built) hides the scrollbar; the no-JS / reduced-motion
     fallback (no .week--carousel class) keeps a native scrollbar so days 2–5 are
     discoverable without the dots */
  .week--carousel .week__panels { scrollbar-width: none; }
  .week--carousel .week__panels::-webkit-scrollbar { display: none; }
  .week:not(.week--carousel) .week__panels { scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }
  .week:not(.week--carousel) .week__panels::-webkit-scrollbar { height: 6px; }
  .week:not(.week--carousel) .week__panels::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
  .week--carousel .week__panels:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .phase {
    flex: 0 0 100%;                            /* one full-width day per screen */
    scroll-snap-align: start;
    border-top: 0;
    padding: var(--s-3) var(--gutter);         /* gutter lives inside each full-width card */
  }
  .phase:first-child { padding-top: var(--s-3); }
  .phase__inner { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
  .phase__ghost { top: 0; }
  .phase__viz { max-width: 30rem; width: 100%; justify-self: start; }

  .week__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); margin-top: var(--s-2); padding-inline: var(--gutter);
  }
  .week__nav-count { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .week__nav-cur { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
  .week__dots { display: flex; gap: 0.9rem; }
  .week__dot {
    position: relative;                        /* anchors the enlarged hit area below */
    width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid var(--gold-deep); background: transparent;
    transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  }
  /* keep the painted dot 9px but make the touch/click target ~25px (WCAG 2.5.8) */
  .week__dot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .week__dot.is-active { background: var(--gold); transform: scale(1.3); border-color: var(--gold); }
  .week__dot:active { transform: scale(1.15); background: var(--gold); border-color: var(--gold); }
  .week__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

  /* the panels are full-bleed with no peek of the next card, so the gesture has
     to be said out loud. Retires itself the moment the visitor swipes. */
  .week__hint {
    margin: var(--s-2) 0 0; padding-inline: var(--gutter); text-align: center;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
    transition: opacity 0.4s var(--ease-out);
  }
  .week__hint.is-gone {
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
  }
  .week__hint-arrow {
    display: inline-block; margin-left: 0.35em; color: var(--gold-deep);
    animation: weekHintNudge 1.9s var(--ease-out) infinite;
  }
  @keyframes weekHintNudge {
    0%, 100% { transform: translateX(0); opacity: 0.65; }
    50%      { transform: translateX(5px); opacity: 1; }
  }
  .btn:active { transform: translateY(1px); }  /* press feedback (mobile only — desktop ≥1025 unaffected) */

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

  .levels { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-4); }

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

  .value__head, .journey__head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;                               /* the full page list is long — keep it on one screen */
    background: color-mix(in oklab, var(--bg-deep) 96%, transparent);
    backdrop-filter: blur(18px);
    transform: translateY(-102%);
    transition: transform 0.45s var(--ease-out);
    overflow-y: auto;                          /* short / landscape screens: menu scrolls, never clipped */
    padding: max(env(safe-area-inset-top), var(--s-5)) var(--s-4)
             max(env(safe-area-inset-bottom), var(--s-4));
  }
  .nav__links.is-open { transform: none; }
  .nav__links > a:not(.btn) { font-size: 1.5rem; font-weight: 600; color: var(--ink); }
  .nav__links > .btn { margin-top: var(--s-2); }
  .nav__link--more { display: block; }

  .nav__toggle { display: flex; position: relative; z-index: calc(var(--z-menu) + 1); }

  .hero__ledger { grid-template-columns: 1fr 1fr; border-top: 0; }
  .ledger__item { border-top: 1px solid var(--line); padding-right: var(--s-2); }
  .ledger__item + .ledger__item { padding-left: 0; border-left: 0; }
  .ledger__item:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid var(--line-soft); }

  .value__grid { grid-template-columns: 1fr; }
  .value__lead { grid-row: auto; }

  .phase__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .phase__viz { width: 100%; max-width: 100%; min-width: 0; justify-self: stretch; }
  .phase__ghost { font-size: clamp(5rem, 22vw, 9rem); }

  .audience__cols { grid-template-columns: 1fr; }
  .persona + .persona { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: var(--s-3); margin-top: var(--s-2); }
  .persona:not(:last-child) { padding-right: 0; }

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

  .legacy__grid, .contact__grid { grid-template-columns: 1fr; }

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

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__contact { justify-self: start; text-align: left; }
  .region-switch { justify-content: flex-start; gap: 0.75rem; }
  .footer__nav a { display: inline-block; padding-block: 0.6rem; }   /* easier to tap */

  /* thumb-sized targets for the small text links: an invisible slop box grows
     the tap area to 44px while the mark itself — pill border, gold underline —
     keeps its drawn size. Same trick as the diagram pins. */
  .region-switch a,
  .footer__contact a,
  .contact__email { position: relative; }
  .region-switch a::after,
  .footer__contact a::after,
  .contact__email::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  .footer { padding-bottom: max(env(safe-area-inset-bottom), var(--s-4)); }  /* clear the home indicator */

  .curve__axis--y { display: none; }

  .qrow { grid-template-columns: 3rem 1fr; gap: var(--s-2); }

  .finding { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .finding__note { grid-column: 1; }

  .depts__scale { display: none; }
  .dept { grid-template-columns: minmax(6.5rem, 0.4fr) 1fr; }
  .dept__level { grid-column: 2; text-align: left; margin-top: -0.4rem; }
  .dept { row-gap: 0.5rem; }
}

@media (max-width: 520px) {
  .levels { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .gauge { width: min(300px, 84vw); }
}

/* ============================================================
   MOTION
   ============================================================ */
/* Content is fully visible by default; GSAP animates FROM hidden
   states only when it loads. No content is gated on a class. */

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