/* ================================================================
   PIXEL UNIVERSE — Dark. Sharp. Alive.  (v4 rework, Oct 2026)
   System:  Noir #0A0A0C · Surface #141215 · Bone #F4F1EA
            Crimson #D11A2A (≤5%, one element per section) · Dim #8E877C
   Type:    Anton (display) · Satoshi (body) · Space Mono (labels)
   Motion:  GSAP + ScrollTrigger + Lenis (main.js) — unchanged from v3
   Spec:    "Pixel Universe Site Rework Guide" (Claude Docs) — wins over
            the Design & Motion Direction PDF wherever they disagree.
   ================================================================ */

/* ---------------- fonts (self-hosted) ---------------- */
@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* palette — every color in the build comes from these */
  --noir:    #0A0A0C;
  --surface: #141215;
  --bone:    #F4F1EA;
  --sand:    #CFC8BD;
  --dim:     #8E877C;
  --crimson: #D11A2A;
  --flare:   #E63950;
  --blood:   #7A1020;
  --ash:     #6B655C;
  --hairline:       rgba(244,241,234,.08);
  --hairline-light: rgba(10,10,12,.10);

  /* inversion variables — animated by GSAP at the Solution section */
  --bg:  var(--noir);
  --ink: var(--bone);
  --tx:  var(--sand);
  --mut: var(--dim);

  /* type */
  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, monospace;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* space */
  --sec-pad: clamp(96px, 14vw, 200px);
}

/* ---------------- reset & base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* hard guarantee: nothing (transforms, glows, marquees, slide-ins)
   may widen the page — clip beats hidden because it can't scroll */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.3vw + 1.03rem, 1.25rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* display: Anton, uppercase always */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
  text-wrap: balance;
}
h3 { line-height: 1; }   /* 0.92 is for display sizes; smaller Anton needs air */
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
strong { color: var(--ink); font-weight: 700; }
em { font-style: italic; }

::selection { background: var(--crimson); color: var(--bone); }

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 999px; }

.container { width: min(1200px, 92vw); margin-inline: auto; position: relative; z-index: 2; }
.container.narrow { width: min(860px, 92vw); }

section { position: relative; padding: var(--sec-pad) 0; }

/* ---------------- grain ---------------- */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .028;
  mix-blend-mode: overlay;
}

/* ---------------- starfield ---------------- */
#starfield {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* ---------------- type helpers ---------------- */
.mono, .mono-label, .eyebrow.mono, .micro.mono { font-family: var(--f-mono); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 1.75rem;
}
.eyebrow .glyph { color: var(--ink); margin-right: .4em; }

.mono-label {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}

.h1 { font-size: clamp(3rem, 6.4vw, 5.75rem); }
.h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 1.75rem; }
.h3 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.25rem; }

.intro {
  font-size: clamp(1.125rem, 1.4vw, 1.3rem);
  color: var(--tx);
  max-width: 60ch;
  margin-bottom: 2rem;
}

.micro { font-size: .8rem; color: var(--mut); letter-spacing: .04em; }

/* the one gradient line: Flare → Crimson, inside text only */
.grad-text {
  background: linear-gradient(92deg, var(--flare) 0%, var(--crimson) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* inline-block: the box follows the line-height, not Anton's tall ascent/descent,
   so the rule sits just under the baseline */
.crimson-underline { position: relative; display: inline-block; white-space: nowrap; }
.crimson-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.05em;
  height: 3px; background: var(--crimson);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease) .3s;
}
.is-inview .crimson-underline::after, .crimson-underline.is-on::after { transform: scaleX(1); }

/* guide says 15%, but that's ~1.3:1 and fails the guide's own contrast check — Dim still reads as faded (5.6:1) */
.dimmed { color: var(--dim); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-body); font-weight: 700; font-size: .95rem;
  padding: .95em 1.9em; border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.96); }
.btn .arr { transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* hero: the only solid light button on the page */
.btn-hero {
  background: var(--bone); color: var(--noir);
  font-size: 1.05rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.btn-hero:hover { box-shadow: 0 0 0 2px var(--crimson), 0 8px 32px rgba(0,0,0,.45); }

.btn-crimson { background: var(--crimson); color: var(--bone); }
.btn-crimson:hover { box-shadow: 0 0 0 4px rgba(209,26,42,.28); }

.btn-ink { background: var(--noir); color: var(--bone); }
.btn-ink:hover { box-shadow: 0 0 0 2px var(--hairline-light), 0 10px 28px rgba(10,10,12,.22); }

.btn-outline {
  background: transparent; color: var(--bone);
  border-color: rgba(209,26,42,.7);
}
.btn-outline:hover { border-color: var(--flare); background: rgba(209,26,42,.10); }

.btn-sm { font-size: .82rem; padding: .7em 1.4em; }

/* underline-draw link */
.link-draw {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; color: var(--ink); position: relative; padding-bottom: .2em;
  transition: color .18s var(--ease);
}
.link-draw::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease);
}
.link-draw:hover { color: var(--flare); }
.link-draw:hover::after { transform: scaleX(1); }
.link-draw .arr { transition: transform .18s var(--ease); }
.link-draw:hover .arr { transform: translateX(4px); }

/* ---------------- logo ---------------- */
.logo-mark { display: block; width: auto; color: var(--bone); }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10,10,12,.95);   /* stays a clean dark bar over the bone section */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  width: min(1200px, 94vw); margin-inline: auto;
  display: flex; align-items: center; gap: 2.5rem;
  padding: .9rem 0;
}
.nav-logo { color: var(--bone); display: flex; }
.nav-logo .logo-mark { height: 42px; }
.nav-menu { display: flex; gap: 1.8rem; margin-left: auto; }
.nav-menu a {
  font-size: .9rem; font-weight: 500; color: var(--sand);
  transition: color .18s var(--ease);
}
.nav-menu a:hover, .nav-menu a[aria-current] { color: var(--bone); }
.nav-cta { flex-shrink: 0; }

/* ================================================================
   01 · HERO — the observatory
   ================================================================ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(120px, 16vh, 180px) 0 120px;
  overflow: hidden;
}

/* Blood glow: hero and §12 only, never in between */
.hero-glow {
  position: absolute; z-index: 0;
  left: 50%; top: 34%; transform: translate(-50%, -50%);   /* behind the video */
  width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(122,16,32,.42) 0%, rgba(122,16,32,.16) 36%, transparent 68%);
  pointer-events: none;
}

/* the rings sit behind the video card, centred on it */
.orbit-wrap {
  position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130%; aspect-ratio: 1;
  pointer-events: none;
}
#orbit { width: 100%; height: 100%; overflow: visible; }
#orbit .orbit-path { fill: none; stroke: rgba(244,241,234,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
#orbit .node { fill: var(--bone); }
#orbit .node.live {
  fill: var(--crimson);
  filter: drop-shadow(0 0 6px rgba(209,26,42,.85)) drop-shadow(0 0 16px rgba(209,26,42,.45));
}
#orbit .node-label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  fill: var(--dim);
}
#orbit .node-label.live { fill: var(--bone); }
#orbit .core { stroke: rgba(244,241,234,.75); stroke-width: 1.2; fill: none; }
#orbit .core .dot { fill: rgba(244,241,234,.75); stroke: none; }
/* the video card sits in front: keep just the rings, an echo of the logo's orbit */
.hero:has(.hero-video) #orbit :is(.node, .node-label, .core) { display: none; }

/* Hiba on camera first, the copy below, everything centred */
.hero-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(3rem, 6vw, 4.5rem); text-align: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow {
  font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: .01em; color: var(--sand);
  margin-bottom: 1.4rem;
}

.hero-title {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  margin-bottom: 2.2rem;
}
/* masks pad a hair above caps and below the baseline so no line clips */
.hero-title .mask { display: block; overflow: hidden; padding: .05em 0 .07em; margin: -.05em 0 -.07em; }
.hero-title .h-line { display: inline-block; white-space: nowrap; }
html.js.has-motion .hero-title .h-line { transform: translateY(110%); }

.hero-sub {
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  max-width: 46ch; margin: 0 auto 2.6rem;
}
.hero-sub em { color: var(--bone); font-style: italic; }

.hero-cta { display: flex; flex-direction: column; gap: .9rem; align-items: center; margin-bottom: 3.2rem; }

.proof-strip {
  font-size: .95rem; color: var(--sand);
  border-top: 1px solid var(--hairline);
  padding-top: 1.4rem; max-width: 60ch; margin-inline: auto;
}
.proof-strip .mono-label { display: block; margin-bottom: .5rem; }

html.js.has-motion [data-hero-rise] { opacity: 0; transform: translateY(32px); }

/* hero video: poster + play button until pressed, then native controls */
.hero-video { margin: 0; width: min(820px, 100%); position: relative; isolation: isolate; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(244,241,234,.08), 0 24px 60px rgba(0,0,0,.5);
}
.video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bone); color: var(--noir);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.video-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.video-play::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(244,241,234,.55);
  animation: play-pulse 2.4s var(--ease) infinite;
}
@keyframes play-pulse {
  0% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.video-play:hover { transform: scale(1.06); }
.video-len {
  position: absolute; right: 12px; bottom: 12px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  padding: .3em .6em; border-radius: 6px;
  background: rgba(10,10,12,.72); color: var(--bone);
  transition: opacity .3s var(--ease);
}
.hero-video.is-playing .video-play,
.hero-video.is-playing .video-len { opacity: 0; pointer-events: none; }

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 56px; overflow: hidden; z-index: 2;
}
.scroll-cue span {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(244,241,234,.6));
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ================================================================
   02 · PROBLEMS — the spotlight read
   ================================================================ */
.problems { padding-bottom: 0; }
.problems-pin { min-height: 100vh; display: flex; align-items: center; padding: 8vh 0; }

.symptoms { margin-top: 4rem; display: flex; flex-direction: column; gap: 2.6rem; max-width: 70ch; }
.symptom {
  position: relative;
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--bone);
  opacity: .15; filter: blur(5px);   /* dormant sentences read as dusty ghosts */
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
.symptom.is-lit { opacity: 1; filter: blur(0); }

/* dust motes scattered off a sentence as it materializes (spawned in JS) */
.dust-mote {
  position: absolute; top: 0; left: 0;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(244,241,234,.85);
  pointer-events: none; will-change: transform, opacity;
}

.beat { height: 40vh; }  /* the pause is the design */

.reframe {
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--sand);
  padding-bottom: var(--sec-pad);
  max-width: 62ch;
}
.reframe strong { color: var(--bone); }

/* ================================================================
   03 · GRAVEYARD — failed fixes (no crimson: this section stays colorless)
   ================================================================ */
.fix-cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.fix-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-radius: 16px;
  padding: 1.8rem 1.6rem 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.06),
    0 1px 2px rgba(0,0,0,.4),
    0 12px 32px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.fix-card::after {  /* ghost attempt number */
  content: attr(data-n); position: absolute; top: .6rem; right: 1rem;
  font-family: var(--f-display); font-size: 3.6rem; line-height: 1;
  color: rgba(244,241,234,.05); pointer-events: none;
}
.fix-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(244,241,234,.09),
    0 2px 4px rgba(0,0,0,.4),
    0 22px 48px rgba(0,0,0,.5);
}
.fix-card:active { transform: scale(.96); }
.fix-card-wide { grid-column: 1 / -1; }

.fix-card h3 { font-size: 1.7rem; line-height: .98; }
.fix-card p { font-size: .95rem; color: var(--sand); }
.fix-card .mono-label { color: var(--dim); }

/* per-line strike: box-decoration-break clones the background onto
   each wrapped line, so multi-line titles get one strike per line */
.strike-wrap {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--bone), var(--bone));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 50%;
  transition: background-size .45s var(--ease);
}
.fix-card.is-dead .strike-wrap { background-size: 100% 2px; }
.fix-card.is-dead h3 { color: var(--dim); transition: color .45s var(--ease); }

/* ---- animated failure icons — top-left, ghosted like the number */
.fix-icon {
  align-self: flex-start; height: 58px; width: auto;
  margin-bottom: .35rem;
  fill: none; stroke: rgba(244,241,234,.38);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fix-icon * { vector-effect: non-scaling-stroke; }
.fix-icon .fi-fill { fill: rgba(244,241,234,.26); stroke: none; }
.fix-icon [class^="a-"] { transform-box: fill-box; }

/* transient parts stay hidden until the card is struck out */
.fix-icon .a-coin, .fix-icon .a-h1, .fix-icon .a-h2, .fix-icon .a-flat { opacity: 0; }
.fix-icon .a-w1, .fix-icon .a-w2, .fix-icon .a-w3 { opacity: .5; }
.fix-icon .a-cursor { opacity: .85; }
.fix-icon .a-charge { transform-origin: left center; }
.fix-icon .a-r1, .fix-icon .a-r2, .fix-icon .a-r3 { transform-origin: center bottom; }
.fix-icon .a-dead { stroke-dasharray: 3 42; }

/* each icon's story loops once its card has flatlined */
.fix-card.is-dead .a-coin { animation: fiCoin 3s ease-in infinite; }
.fix-card.is-dead .a-w1 { animation: fiWave 3s ease-out infinite .55s; }
.fix-card.is-dead .a-w2 { animation: fiWave 3s ease-out infinite .67s; }
.fix-card.is-dead .a-w3 { animation: fiWave 3s ease-out infinite .79s; }
.fix-card.is-dead .a-flat { animation: fiFlat 3s ease-out infinite; }
.fix-card.is-dead .a-h1 { animation: fiFloat 2.6s ease-out infinite; }
.fix-card.is-dead .a-h2 { animation: fiFloat 2.6s ease-out infinite 1.2s; }
.fix-card.is-dead .a-cursor { animation: fiBlink 1.1s steps(1) infinite; }
.fix-card.is-dead .a-charge { animation: fiDrain 4.5s linear infinite; }
.fix-card.is-dead .a-r1 { animation: fiRise 3.4s var(--ease) infinite; }
.fix-card.is-dead .a-r2 { animation: fiRise 3.4s var(--ease) infinite .15s; }
.fix-card.is-dead .a-r3 { animation: fiRise 3.4s var(--ease) infinite .3s; }
.fix-card.is-dead .a-dead { animation: fiPulse 2.2s linear infinite; }

@keyframes fiCoin {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translateY(15px); opacity: 1; }
  40%  { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}
@keyframes fiWave {
  0%   { opacity: 0; }
  16%  { opacity: .9; }
  32%  { opacity: .9; }
  52%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fiFlat {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  68%  { opacity: .8; }
  88%  { opacity: .8; }
  100% { opacity: 0; }
}
@keyframes fiFloat {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: .9; }
  60%  { transform: translateY(-16px); opacity: 0; }
  100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes fiBlink {
  0%, 100% { opacity: .85; }
  50%      { opacity: 0; }
}
@keyframes fiDrain {
  0%   { transform: scaleX(1); }
  80%  { transform: scaleX(.06); }
  90%  { transform: scaleX(.06); }
  100% { transform: scaleX(1); }
}
@keyframes fiRise {
  0%   { transform: scaleY(.06); }
  22%  { transform: scaleY(1); }
  72%  { transform: scaleY(1); }
  86%  { transform: scaleY(.06); }
  100% { transform: scaleY(.06); }
}
@keyframes fiPulse {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -45; }
}

@media (prefers-reduced-motion: reduce) {
  .fix-icon * { animation: none !important; }
  .fix-icon .a-flat { opacity: .8; } /* static story still reads */
}

.pivot {
  margin-top: clamp(96px, 15vh, 30vh);
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--bone);
  max-width: 62ch;
}

/* ================================================================
   04 · WHO WE ARE — quiet (no crimson)
   ================================================================ */
.who-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.who-copy p { margin-bottom: 1.4rem; max-width: 58ch; }

.founder { display: flex; flex-direction: column; gap: 1.4rem; }
.founder-photo {
  aspect-ratio: 4 / 5; border-radius: 16px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--noir) 100%);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.06), 0 12px 32px rgba(0,0,0,.35);
  overflow: hidden;
}
.founder-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top;
}
html.js.has-motion .founder-photo { clip-path: inset(100% 0 0 0); }
.founder-photo.is-open { clip-path: inset(0 0 0 0) !important; transition: clip-path .7s var(--ease); }

/* the bridge: Hiba's one line, in her own voice, attributed */
.founder-quote p {
  font-family: var(--f-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.35;
  color: var(--bone); margin-bottom: .7rem;
}
.founder-quote cite { font-style: normal; display: block; }

/* ================================================================
   05 · SOLUTION — the inversion (bone room)
   ================================================================ */
.solution { color: var(--tx); }
.solution .h2, .solution h3 { color: var(--ink); }

/* no motion (reduced-motion or no JS): the section is statically bone */
html:not(.has-motion) .solution {
  --bg: var(--bone); --ink: var(--noir); --tx: var(--noir); --mut: var(--ash);
  background: var(--bg);
}

.solution-cols {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin: 4rem 0 3.5rem;
  align-items: stretch;
}
.sol-col {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.sol-col h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.sol-col p { max-width: 46ch; }

/* §5's one crimson element */
.crimson-rule { width: 2px; background: var(--crimson); border-radius: 2px; }

/* rocket motion graphic — inks in --ink so it survives the inversion */
.rocket-stage { margin-top: clamp(3rem, 7vw, 5rem); }
.rocket-stage svg { display: block; width: 100%; height: auto; }
.rk-part { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rk-guide, .rk-cross { fill: none; stroke: var(--mut); stroke-width: 1; opacity: .5; }
.rk-cross { stroke-width: 1.1; }
.rk-dim { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; fill: var(--mut); }
.rk-speed { stroke: var(--mut); stroke-width: 1.5; stroke-linecap: round; }
.rk-puff { fill: none; stroke: var(--mut); stroke-width: 1.2; }
.rk-flame-outer { fill: var(--mut); fill-opacity: .3; stroke: var(--mut); stroke-width: 1.5; }
.rk-flame-inner { fill: var(--ink); fill-opacity: .8; }

.sol-close {
  font-family: var(--f-display); font-weight: 400;
  text-transform: uppercase; line-height: .95; letter-spacing: .005em;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  color: var(--ink);
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

/* ================================================================
   06 · FOUNDATION — the blueprint (no crimson)
   ================================================================ */
.pillars { margin-top: 4.5rem; display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 7rem); }

.pillar {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.pillar:nth-child(even) { grid-template-columns: 1.3fr 1fr; }
.pillar:nth-child(even) .blueprint { order: 2; }

.blueprint { width: 100%; max-width: 340px; justify-self: center; }
.blueprint * {
  fill: none; stroke: rgba(244,241,234,.7); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blueprint .bp-mark { stroke: var(--bone); fill: rgba(244,241,234,.08); }

.pillar-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: .9rem; }
.pillar-copy p { max-width: 50ch; }

/* ================================================================
   07 · THREE FRONTS — sticky panels
   ================================================================ */
.fronts-grid {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: 1fr 1px 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.fronts-sticky {
  position: sticky; top: 22vh;
  align-self: start;
  height: fit-content;
}

.odometer {
  font-family: var(--f-display);
  font-size: clamp(5rem, 10vw, 8.5rem);
  color: var(--bone); line-height: 1;
  height: 1em; overflow: hidden;
  margin-bottom: 1.4rem;
}
.odo-track { display: flex; flex-direction: column; transition: transform .6s var(--ease); }
.odo-track span { height: 1em; line-height: 1; display: block; }

.front-names { position: relative; min-height: 2.2em; display: block; }
.front-name {
  position: absolute; inset: 0 auto auto 0;
  font-family: var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: .95;
  color: var(--bone);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.front-name.is-active { opacity: 1; transform: translateY(0); }

/* §7's one crimson element */
.fronts-progress { background: var(--hairline); position: relative; }
.fronts-progress span {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: var(--crimson);
}

.fronts-panels { display: flex; flex-direction: column; gap: clamp(5rem, 18vh, 11rem); padding: 4vh 0 10vh; }
.front-panel h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.front-panel p { max-width: 52ch; margin-bottom: 1.2rem; }
.front-stat { color: var(--bone); }

/* ================================================================
   08 · FUNNEL
   ================================================================ */
.funnel { padding: 0; }
.funnel-pin { min-height: 100vh; display: flex; align-items: center; padding: 12vh 0; }

.funnel-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}

.stages { margin-top: 3rem; display: flex; flex-direction: column; gap: 2.2rem; }
.stage {
  opacity: .35; padding-left: 1.1rem; border-left: 2px solid transparent;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.stage.is-active { opacity: 1; border-left-color: var(--bone); }
.stage h3 { font-size: 1.6rem; margin: .5rem 0 .4rem; }
.stage p { font-size: 1rem; max-width: 46ch; }

.funnel-canvas-wrap { position: relative; aspect-ratio: 3 / 4; max-height: 76vh; }
#funnelCanvas { width: 100%; height: 100%; display: block; }

/* ================================================================
   09 · WHO IT'S FOR — marquee (no crimson)
   ================================================================ */
.for { overflow: hidden; }

.marquee {
  margin-top: clamp(4rem, 8vh, 6rem);
  display: flex; flex-direction: column; gap: .6rem;
  user-select: none;
}
.marquee-row {
  display: flex; white-space: nowrap; will-change: transform;
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 8.5vw, 7.5rem);
  text-transform: uppercase; letter-spacing: .005em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--bone);
}
.marquee-row > span { padding-right: .25em; }
.mq-item { transition: color .35s var(--ease); }
.mq-item:hover { color: var(--bone); }
.mq-sep { -webkit-text-stroke-color: rgba(244,241,234,.4); padding: 0 .2em; }

.for-closer {
  margin: clamp(5rem, 20vh, 20vh) auto;
  text-align: center;
  font-family: var(--f-display);
  text-transform: uppercase; letter-spacing: .005em; line-height: .95;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  color: var(--bone);
  max-width: 16ch;
  text-wrap: balance;
}

/* ================================================================
   10 · CASE STUDY — the numbers testify
   ================================================================ */
.case { padding-top: 0; }
.case-panel {
  background: var(--surface);
  border-radius: 24px;
  padding: clamp(2.5rem, 6vw, 5.5rem);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.06), 0 30px 80px rgba(0,0,0,.45);
}

.stat-trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin: 3.5rem 0;
  padding: 2.4rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(4rem, 10vw, 9rem);
  text-transform: uppercase;
  color: var(--bone); line-height: .92;
  margin-bottom: 1rem;
}
/* the "before": small, Dim, sits above the big "after" number */
.stat-before {
  display: flex; align-items: center; gap: .3em;
  font-size: .3em; line-height: 1.2; min-height: 1.2em;
  color: var(--dim); margin-bottom: .35em;
}
.stat-after { display: block; white-space: nowrap; }
.stat-unit { font-size: .38em; letter-spacing: .02em; margin-left: .14em; }
.count { display: inline-block; text-align: right; }
.stat-arrow { width: 1.4em; height: .7em; overflow: visible; }
.stat-arrow path {
  stroke: var(--dim); stroke-width: 2; vector-effect: non-scaling-stroke;
}

.case-body { max-width: 66ch; margin-bottom: 1.4rem; }
.case-result strong, .case-result { color: var(--bone); }

.pull-quote {
  margin: 3rem 0; position: relative;
  padding-left: clamp(2.5rem, 5vw, 4rem);
}
.pull-quote .qmark {
  position: absolute; left: 0; top: -0.08em;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 6.5vw, 5.5rem); line-height: 1; color: var(--bone);
}
.pull-quote p {
  font-family: var(--f-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35;
  letter-spacing: -0.01em; color: var(--sand);
  max-width: 40ch;
}

/* ================================================================
   11 · HOW WE WORK — quiet (no crimson)
   ================================================================ */
.how-rows { margin-top: 3rem; }
.how-row {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 2rem; align-items: baseline;
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline);
}
.how-rows .how-row:last-child { border-bottom: 1px solid var(--hairline); }
.how-row p { max-width: 60ch; }
.terms { color: var(--bone); font-weight: 700; }

/* ================================================================
   12 · FINAL CTA — the glow returns
   ================================================================ */
.cta { min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.cta-glow {
  position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%) scale(.6);
  width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px;
  background: radial-gradient(circle, rgba(122,16,32,.42) 0%, rgba(122,16,32,.15) 40%, transparent 70%);
  opacity: 0; pointer-events: none;
}
html:not(.js) .cta-glow, html:not(.has-motion) .cta-glow { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.cta-inner { text-align: center; }
.cta-inner .intro { margin-inline: auto; }

/* booking embed: the engine's calendar sits in the void on a hairline-framed, see-through
   Noir panel (the glow shows through). Crimson (data-accent) only on the chosen day/slot + confirm.
   The iframe sizes itself (embed.js); the frame only sets width and the radius. */
.booking-embed {
  margin: 3rem auto 1.6rem; max-width: 760px;
  text-align: left;
  background: rgba(10,10,12,.55);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(.25rem, 2vw, 1.25rem) clamp(.25rem, 1vw, .75rem);
  min-height: 560px;  /* reserve the iframe's first height so the page doesn't jump */
}
/* color-scheme must match the dark booking page, or Chrome paints an opaque backdrop behind it */
.booking-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; color-scheme: dark; }
.booking-fallback { display: flex; justify-content: center; padding: 3rem 1rem; }
html:not(.js) .booking-embed { min-height: 0; }

/* ================================================================
   footer
   ================================================================ */
.footer { border-top: 1px solid var(--hairline); padding: 4rem 0; position: relative; z-index: 2; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.footer-logo { height: 48px; }
.footer-tag { color: var(--sand); max-width: 52ch; }
.footer-bridge { color: var(--sand); font-size: .95rem; }
.footer-bridge a { color: var(--bone); border-bottom: 1px solid rgba(244,241,234,.3); transition: color .18s var(--ease), border-color .18s var(--ease); }
.footer-bridge a:hover { color: var(--flare); border-color: var(--flare); }
.footer .micro a { color: var(--sand); }
.footer .micro a:hover { color: var(--flare); }

/* ================================================================
   CASE STUDY PAGE
   ================================================================ */
.cs-hero { padding-top: clamp(150px, 22vh, 240px); }
.cs-hero .h1 { margin-bottom: 1.8rem; }
.cs-hero .stat-trio { margin-top: 3.5rem; margin-bottom: 0; }

.cs-section p { margin-bottom: 1.4rem; max-width: 66ch; }
.cs-surface {
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(244,241,234,.05);
}
.cs-phase { display: block; margin: 3rem 0 0; color: var(--bone); }
.results-band {
  font-size: .95rem; color: var(--bone);
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 1.1rem 1.4rem; margin: 2rem 0;
  display: inline-block;
}

/* ================================================================
   PRIVACY PAGE — plain prose on the case-study shell
   ================================================================ */
.legal-hero { padding-bottom: 0; }
.legal-hero + .legal { padding-top: clamp(3rem, 6vw, 4.5rem); }
.legal-hero .micro a { color: var(--sand); border-bottom: 1px solid var(--hairline); }
.legal h2:not(.h3) { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 3.2rem 0 1rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { list-style: none; margin: 0 0 1.4rem; max-width: 66ch; }
.legal li { position: relative; padding-left: 1.2em; margin-bottom: .7rem; }
.legal li::before { content: "·"; position: absolute; left: .2em; color: var(--mut); }
.legal a { color: var(--bone); border-bottom: 1px solid rgba(244,241,234,.3); }
.legal a:hover { color: var(--flare); border-color: var(--flare); }
/* draft placeholders: impossible to miss; remove the marks once filled in */
mark.todo { background: rgba(209,26,42,.18); color: var(--bone); padding: 0 .25em; border-radius: 3px; font-family: var(--f-mono); font-size: .85em; }

/* ================================================================
   reveals (JS-driven; content always visible without JS)
   ================================================================ */
html.js.has-motion [data-reveal] { opacity: 0; transform: translateY(32px); }
html.js.has-motion [data-reveal].is-inview { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ================================================================
   reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-hero-rise],
  html.js .hero-title .h-line, html.js .founder-photo {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .scroll-cue span, .video-play::before { animation: none; }
  .symptom { opacity: 1; filter: none; }
  .dust-mote { display: none; }
  .stage { opacity: 1; }
  .cta-glow { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ================================================================
   responsive
   ================================================================ */
@media (max-width: 1024px) {
  .fix-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sec-pad: clamp(80px, 18vw, 120px); }

  .nav-menu { display: none; }
  .nav-inner { justify-content: space-between; gap: .8rem; }
  /* logo + CTA must fit side by side down to 320px-wide phones */
  .nav-logo { min-width: 0; }
  .nav-logo .logo-mark { height: 30px; max-width: 44vw; }
  .nav-cta { font-size: .78rem; padding: .6em 1.1em; white-space: nowrap; }

  .hero { padding-top: 130px; }
  .video-play { width: 68px; height: 68px; }
  .video-play svg { width: 24px; height: 24px; }
  .hero { flex-direction: column; align-items: stretch; }
  .hero-glow { top: 22%; width: 130vw; height: 130vw; }
  .scroll-cue { display: none; }

  .symptoms { gap: 1.9rem; }
  .problems-pin { min-height: 100svh; padding: 4vh 0; }
  .beat { height: 18vh; }

  .fix-cards { grid-template-columns: 1fr; gap: 1.1rem; }

  .who-grid { grid-template-columns: 1fr; }
  .founder { max-width: 380px; }

  .solution-cols { grid-template-columns: 1fr; }
  .crimson-rule { width: 100%; height: 2px; }

  .pillar, .pillar:nth-child(even) { grid-template-columns: 1fr; }
  .pillar:nth-child(even) .blueprint { order: 0; }
  .blueprint { max-width: 260px; }

  .fronts-grid { grid-template-columns: 1fr; }
  /* a sticky side odometer can't follow panels in a single column —
     hide it and let every panel carry its own number instead */
  .fronts-sticky { display: none; }
  .fronts-progress { display: none; }
  .front-names { display: none; }
  .fronts-panels { gap: 3.5rem; padding: 1rem 0 0; counter-reset: front; }
  .front-panel::before {
    counter-increment: front;
    content: "0" counter(front);
    display: block;
    font-family: var(--f-display);
    font-size: 4rem; line-height: 1;
    color: var(--bone);
    margin-bottom: .7rem;
  }

  .funnel-pin { min-height: 0; padding: var(--sec-pad) 0; }
  .funnel-grid { grid-template-columns: 1fr; }
  .funnel-canvas-wrap { max-width: 380px; margin-inline: auto; width: 100%; }
  .stage { opacity: 1; }

  .stat-trio { grid-template-columns: 1fr; gap: 2rem; }
  .stat-before:empty { display: none; }
  .case-panel { padding: 2rem 1.25rem; border-radius: 18px; }
  .how-row { grid-template-columns: 1fr; gap: .4rem; }

  .cta { min-height: 0; }

  .btn { min-height: 44px; }
}

/* phones: the 3.5rem hero floor would push "AND CLIENTS WHO" past a 390px screen */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.6rem, 14vw, 3.5rem); }
  /* forced desktop breaks make one-word lines on phones; balance does the job here */
  .h2 br { display: none; }
}

/* reduced motion: the marquee can't scroll, so let it wrap instead of cutting words */
@media (prefers-reduced-motion: reduce) {
  .marquee-row { flex-wrap: wrap; white-space: normal; transform: none !important; padding-inline: 4vw; }
  .marquee-row > span + span { display: none; }
}

/* ================================================================
   AUDIT — the free booking audit before the Growth Call (audit.html)
   One question per screen. Crimson stays on the progress line, the
   chosen answer, the leak marks and the one button per screen.
   ================================================================ */
.audit {
  min-height: 100vh; min-height: 100svh;
  padding-top: clamp(130px, 18vh, 190px);
  overflow: hidden;
}
.audit-glow {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(122,16,32,.30) 0%, rgba(122,16,32,.10) 40%, transparent 70%);
  pointer-events: none;
}

/* progress */
.audit-bar {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .9rem 1.2rem; margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.audit-bar[hidden] { display: none; }
.audit-back {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  color: var(--dim); transition: color .18s var(--ease);
}
.audit-back:hover { color: var(--bone); }
.audit-count { justify-self: end; }
.audit-track { grid-column: 1 / -1; height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.audit-track span {
  display: block; height: 100%; width: 0; background: var(--crimson);
  transition: width .5s var(--ease);
}

/* each screen rises in */
.audit-screen { animation: auRise .55s var(--ease) both; }
@keyframes auRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.audit-title { margin-bottom: 1.6rem; }
.audit [data-focus]:focus { outline: none; }
.audit-q {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: .98; margin-bottom: .9rem; max-width: 22ch;
}
.audit-sub { color: var(--dim); font-size: .95rem; }

/* answers */
.audit-options { list-style: none; display: grid; gap: .7rem; margin-top: 2.2rem; max-width: 640px; }
.audit-opt {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; min-height: 56px; padding: .95rem 1.2rem;
  font: inherit; font-size: 1.05rem; text-align: left; color: var(--bone);
  background: rgba(20,18,21,.72);
  border: 1px solid var(--hairline); border-radius: 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.audit-opt:hover { border-color: rgba(244,241,234,.28); }
.audit-opt:active { transform: scale(.985); }
.audit-opt:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }
.audit-opt[aria-pressed="true"] { border-color: var(--crimson); background: rgba(209,26,42,.09); }
.audit-key {
  flex-shrink: 0; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  font-family: var(--f-mono); font-size: .75rem; color: var(--dim);
  border: 1px solid var(--hairline); border-radius: 7px;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.audit-opt[aria-pressed="true"] .audit-key { background: var(--crimson); border-color: var(--crimson); color: var(--bone); }

.audit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.audit .btn[disabled] { opacity: .35; pointer-events: none; }
.audit-skip {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--dim);
  border-bottom: 1px solid var(--hairline);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.audit-skip:hover { color: var(--bone); border-color: rgba(244,241,234,.3); }

/* text fields */
.audit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; max-width: 640px; }
.audit-field { display: grid; gap: .55rem; }
.audit-field input {
  width: 100%; min-height: 54px; padding: .8rem 1rem;
  font: inherit; font-size: 1.05rem; color: var(--bone);
  background: rgba(20,18,21,.72);
  border: 1px solid var(--hairline); border-radius: 12px;
  transition: border-color .18s var(--ease);
}
.audit-field input:hover { border-color: rgba(244,241,234,.28); }
.audit-field input:focus { outline: none; border-color: var(--crimson); }

/* audit notes, between questions */
.audit-note-big {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.22;
  font-weight: 500; color: var(--bone);
  max-width: 30ch; text-wrap: balance;
}
.audit-note-small { margin-top: 1.4rem; max-width: 56ch; }
.audit-counter {
  font-family: var(--f-display); font-size: clamp(4.5rem, 12vw, 8rem);
  line-height: .9; color: var(--crimson); margin-bottom: 1rem;
}

/* the diagnosis */
.audit-path {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .6rem; margin: 2.6rem 0 2.4rem;
}
.audit-path li {
  display: grid; gap: .35rem; padding-top: .9rem;
  border-top: 2px solid var(--hairline);
}
.audit-path-name { font-family: var(--f-display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; color: var(--dim); }
.audit-path .is-leak { border-top-color: var(--crimson); }
.audit-path .is-leak .audit-path-name { color: var(--bone); }
.audit-path .is-leak .audit-path-status { color: var(--flare); }
.audit-path .is-watch { border-top-color: var(--sand); }
.audit-path .is-watch .audit-path-name { color: var(--sand); }

.audit-lost {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.4rem 0; margin-bottom: 2.4rem;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.audit-lost .audit-counter { font-size: clamp(3.5rem, 8vw, 5.5rem); margin: 0; }
.audit-lost p:last-child { max-width: 34ch; }

.audit-cards { display: grid; gap: 1rem; }
.audit-card {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: rgba(20,18,21,.72);
  border: 1px solid var(--hairline); border-radius: 16px;
}
.audit-card.is-leak { border-left: 2px solid var(--crimson); }
.audit-card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.audit-pill {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .3em .8em; border-radius: 999px; border: 1px solid var(--hairline); color: var(--sand);
}
.audit-card.is-leak .audit-pill { border-color: rgba(209,26,42,.7); color: var(--flare); }
.audit-card h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 1rem 0 .8rem; }
.audit-card p { max-width: 62ch; }
.audit-told { color: var(--dim); font-size: .95rem; margin-bottom: .6rem; }

.audit-pattern { margin-top: 2.4rem; max-width: 60ch; }

.audit-cta { margin-top: clamp(4rem, 9vh, 6rem); padding-top: clamp(3rem, 7vh, 4.5rem); border-top: 1px solid var(--hairline); }
.audit-cta .booking-embed { margin-inline: 0; }
.audit-proof { margin: 0 0 1rem; text-align: left; margin-inline: 0; }

@media (max-width: 768px) {
  .audit { padding-top: 110px; }
  .audit-fields { grid-template-columns: 1fr; }
  .audit-path { grid-template-columns: 1fr; gap: 0; }
  .audit-path li {
    grid-template-columns: 2.2rem 1fr auto; align-items: baseline;
    padding: .8rem 0; border-top-width: 1px;
  }
  .audit-path li:last-child { border-bottom: 1px solid var(--hairline); }
  .audit-lost { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .audit-screen { animation: none; }
  .audit-track span { transition: none; }
}

/* the final CTA on index / case study: one button into the audit */
.audit-start { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 2.8rem auto 1.6rem; }

/* audit notes: the sourced fact and the cost, in their own numbers */
.audit-fact {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
  margin: 1.6rem 0 0; max-width: 680px;
  padding: 1.4rem 1.5rem;
  background: rgba(20,18,21,.72);
  border: 1px solid var(--hairline); border-radius: 16px;
}
.audit-fact-num { font-family: var(--f-display); font-size: clamp(2.8rem, 6vw, 4rem); line-height: .9; color: var(--bone); }
.audit-fact .mono-label { margin-bottom: .5rem; }
.audit-fact div p:not(.mono-label) { color: var(--sand); font-size: 1rem; }
.audit-fact figcaption { margin-top: .8rem; }
.audit-cost { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); max-width: 680px; }
.audit-cost .mono-label { margin-bottom: .45rem; }
.audit-cost p:not(.mono-label) { color: var(--bone); font-weight: 500; }
@media (max-width: 480px) {
  .audit-fact { grid-template-columns: 1fr; gap: .6rem; }
}