/* =====================================================================
   THE BEHAVIOURAL RESET — CINEMATIC SYSTEM + THE CLIMB
   Nocturnal behavioural cartography. A path you
   ascend to reach your result. Gold is rare; motion is intentional.
   ===================================================================== */

/* ---------------------------------------------------------- atmosphere */
.aurora{position:fixed; inset:-20% -10% auto -10%; height:120vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 40% at 22% 12%, rgba(47,107,255,.16), transparent 70%),
    radial-gradient(42% 38% at 82% 26%, rgba(242,184,75,.10), transparent 70%),
    radial-gradient(60% 50% at 50% 92%, rgba(11,20,38,.9), transparent 75%);
  animation:auroraDrift 26s var(--ease) infinite alternate;} /* gradients are soft already; a blur filter here costs a full-screen repaint */
@keyframes auroraDrift{ from{transform:translate3d(-2%, -1%, 0) scale(1.02)} to{transform:translate3d(3%, 2%, 0) scale(1.08)} }

/* ---------------------------------------------------------- chrome */
.topbar{position:sticky; top:0; z-index:30; backdrop-filter:blur(16px) saturate(1.1);
  background:linear-gradient(180deg,rgba(4,7,15,.86),rgba(4,7,15,.35) 70%,transparent);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:.65rem; font-family:var(--body); font-weight:600; letter-spacing:.16em; font-size:.8rem; text-transform:uppercase}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(242,184,75,.5); animation:beacon 3.4s ease-out infinite; flex:none}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(242,184,75,.45)} 70%{box-shadow:0 0 0 10px rgba(242,184,75,0)} 100%{box-shadow:0 0 0 0 rgba(242,184,75,0)}}
.brand small{display:block; color:var(--muted); letter-spacing:.12em; font-size:.6rem; font-weight:500}
.topbar .exit{font-size:.78rem; color:var(--muted); letter-spacing:.05em}
.topbar .exit:hover{color:var(--gold-2)}

.site-footer{position:relative; z-index:2; border-top:1px solid var(--line); margin-top:var(--s-8); padding:var(--s-5) 0; color:var(--muted); font-size:var(--t-sm)}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between}
.site-footer nav{display:flex; gap:1.2rem}
.site-footer a:hover{color:var(--gold-2)}

/* ---------------------------------------------------------- buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:1rem 1.9rem; border-radius:var(--r-pill); min-height:54px; text-align:center; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s}
.btn-primary{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#231703; box-shadow:0 14px 40px rgba(242,184,75,.32), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%); transform:translateX(-120%); transition:none}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 56px rgba(242,184,75,.46), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover::after{animation:sheen .9s var(--ease)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn-ghost{border:1px solid var(--line-strong); color:var(--ink); background:rgba(255,255,255,.02); backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--gold-line); color:var(--gold-2); background:rgba(242,184,75,.06)}
.btn-block{display:flex; width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none}
.btn[disabled]::after{display:none}
.btn-sm{padding:.6rem 1.2rem; min-height:44px; font-size:.9rem}

.eyebrow{font-family:var(--body); text-transform:uppercase; letter-spacing:.38em; font-size:.7rem; font-weight:600; color:var(--gold); margin-bottom:1.2rem; position:relative; display:inline-block}

/* reveal-on-load / on-scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
[data-stagger]>*{opacity:0; transform:translateY(20px); animation:riseIn .8s var(--ease) forwards}
@keyframes riseIn{to{opacity:1; transform:none}}

/* =====================================================================
   CINEMATIC HERO
   ===================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; z-index:1}
@keyframes kenburns{from{transform:scale(1.06) translateY(0)} to{transform:scale(1.14) translateY(-2%)}}
.hero-media::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 18% 42%, rgba(4,7,15,.35), transparent 60%),
    linear-gradient(90deg, var(--void) 12%, rgba(4,7,15,.35) 58%, rgba(4,7,15,.72)),
    linear-gradient(0deg, var(--void), transparent 40%)}
/* floating motes */
@keyframes mote{0%{opacity:0; transform:translateY(20px)} 10%{opacity:.7} 90%{opacity:.5} 100%{opacity:0; transform:translateY(-90px)}}


@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes travel{to{stroke-dashoffset:-960}}

.hero .wrap{position:relative; z-index:2; padding-top:var(--s-6); padding-bottom:var(--s-6)}
.hero-inner{max-width:720px}
.hero h1{font-size:var(--t-hero); margin-bottom:1.3rem; letter-spacing:-.02em; text-wrap:balance}
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(28px) rot3d; animation:wordIn .9s var(--ease) forwards}
@keyframes wordIn{to{opacity:1; transform:none}}
.hero .lead{font-size:var(--t-lead); color:var(--ink-dim); max-width:600px; margin-bottom:2rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2rem}
.indicators{display:flex; flex-wrap:wrap; gap:1.4rem; color:var(--muted); font-size:.84rem}
.indicators span{display:inline-flex; align-items:center; gap:.5rem}
.indicators span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 8px var(--gold)}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; color:var(--muted-2); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem}
.scroll-cue i{width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)}}

/* =====================================================================
   NEURAL HERO — Ben's figure dissolving into a living network
   ===================================================================== */
.neural-hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; z-index:1;
  background:radial-gradient(120% 90% at 62% 40%, rgba(20,14,4,.6), var(--void) 70%)}
.neural-canvas{position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; animation:fadeCanvas 2.4s var(--ease) .6s forwards}
@keyframes fadeCanvas{to{opacity:1}}

/* masked portrait: real figure dissolving into black + neural field */
.hero-portrait{position:absolute; top:0; right:0; width:56%; height:100%; z-index:0; overflow:hidden;
  opacity:0; animation:portraitReveal 2.4s var(--ease) .3s forwards}
@keyframes portraitReveal{from{opacity:0; transform:scale(1.08)} to{opacity:1; transform:scale(1)}}
/* Studio portrait: already dark + cinematically lit, so keep the face READABLE.
   Light touch only — lift brightness, gentle warm grade, mask centred on the face. */
/* Vertical 1200x1600 studio portrait — frame on the face (upper third). */
.hero-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:brightness(.94) contrast(1.06) saturate(.92);
  -webkit-mask-image:radial-gradient(56% 70% at 50% 40%, #000 48%, rgba(0,0,0,.7) 68%, transparent 90%);
  mask-image:radial-gradient(56% 70% at 50% 40%, #000 48%, rgba(0,0,0,.7) 68%, transparent 90%);}
/* blend the frame edges into the void, keep a warm rim — never cover the face */
.hero-portrait::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(34% 44% at 52% 40%, rgba(242,184,75,.10), transparent 66%),
    radial-gradient(62% 78% at 52% 44%, transparent 56%, var(--void) 86%),
    linear-gradient(90deg, var(--void) 4%, transparent 34%),
    linear-gradient(0deg, var(--void), transparent 26%),
    linear-gradient(270deg, var(--void) 1%, transparent 18%)}
.portrait-note{position:absolute; right:14px; bottom:12px; z-index:3; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); background:rgba(4,7,15,.66); border:1px solid var(--line); padding:.28rem .6rem; border-radius:var(--r-pill)}

/* neural pathways from the mind to the pillars */
.p-confidence{top:11%; right:8%;  --pc:#F2B84B}
.p-communication{top:29%; right:4%; --pc:#5E93FF}
.p-composure{top:47%; right:3%;    --pc:#35D9A4}
.p-action{top:65%; right:6%;       --pc:#9B6BFF}
.p-leadership{top:83%; right:12%;  --pc:#F7CE78}
.pillar-links{position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none}
.pillar-links .plink{fill:none; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--pc, rgba(242,184,75,.6)));
  stroke-dasharray:4 9; opacity:0; animation:linkIn 1s var(--ease) forwards, linkFlow 7s linear infinite}
/* bright signal travelling mind → pillar (accumulation toward the node) */
.pillar-links .psignal{fill:none; stroke-width:3; stroke-linecap:round; opacity:.9;
  stroke-dasharray:16 460; filter:drop-shadow(0 0 7px currentColor);
  animation:signalTravel 3.6s var(--ease) infinite}
@keyframes linkIn{to{opacity:1}}
@keyframes linkFlow{to{stroke-dashoffset:-260}}
@keyframes signalTravel{0%{stroke-dashoffset:476}70%,100%{stroke-dashoffset:0}}

/* the five diagnostic-area nodes */
.pillar-node{position:absolute; z-index:4; display:flex; align-items:center; gap:.7rem; opacity:0;
  animation:nodeIn .8s var(--ease) forwards}
@keyframes nodeIn{from{opacity:0; transform:translateY(8px) scale(.9)} to{opacity:1; transform:none}}
.pillar-node .pn-dot{width:12px; height:12px; border-radius:50%; flex:none; background:var(--pc, var(--gold));
  box-shadow:0 0 16px var(--pc, var(--gold)), 0 0 40px -6px var(--pc, var(--gold))}
.pillar-node .pn-dot svg{display:none}
.pillar-node .pn-meta{line-height:1.2}
.pillar-node .pn-meta b{display:block; font-family:var(--body); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.pillar-node .pn-meta i{font-style:normal; font-size:.74rem; color:var(--muted)}

/* left content — staged reveal after the network */
.neural-hero .wrap{position:relative; z-index:5}
/* hero proof anchor — real Google rating, links to the live listing */
.hero-rating{display:inline-flex; align-items:center; gap:.6rem; margin-top:1rem; font-size:.86rem;
  color:var(--ink-dim); transition:color .3s}
.hero-rating:hover{color:var(--gold-2)}
.hero-rating .stars{color:var(--gold); letter-spacing:.08em; font-size:.9rem}
.shared-note{font-family:var(--disp); font-style:italic; font-size:1.02rem; color:var(--ink-dim); margin-bottom:1rem}
.shared-note b{color:var(--gold-2); font-weight:600}
.neural-hero .hero-inner{max-width:540px}
.neural-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem); letter-spacing:-.025em; line-height:1.02; margin-bottom:1.3rem; text-wrap:balance}
.neural-hero .lead{font-size:var(--t-lead); color:var(--ink-dim); max-width:440px; margin-bottom:2rem}
.neural-hero .hero-cta{margin-bottom:1.9rem}
.neural-hero .indicators{gap:1.4rem}
/* Fast, legible stagger — headline+CTA readable within ~300ms (NN/g fold).
   The neural canvas animates behind, but copy never waits on it. */
.hero-in{opacity:0; animation:heroRise .6s var(--ease) forwards}
.hero-in.d1{animation-delay:.08s}.hero-in.d2{animation-delay:.16s}.hero-in.d3{animation-delay:.28s}
.hero-in.d4{animation-delay:.4s}.hero-in.d5{animation-delay:.52s}
@keyframes heroRise{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}

@media (max-width:900px){
  .neural-hero .hero-inner{max-width:100%}
  .hero-portrait{width:100%; opacity:.5}
  .hero-portrait img{object-position:50% 12%; -webkit-mask-image:radial-gradient(90% 60% at 60% 22%, #000 20%, transparent 70%); mask-image:radial-gradient(90% 60% at 60% 22%, #000 20%, transparent 70%)}
  /* The connecting SVG is hidden below 900px, which leaves the five nodes as
     unconnected decoration overlapping the headline. Hide them with it — the
     five areas are named in full in the section below. */
  .pillar-links,.pillar-node{display:none}
}
@media (prefers-reduced-motion: reduce){
  .neural-canvas,.hero-portrait,.pillar-node,.hero-in,.pillar-links .plink{animation:none !important; opacity:1 !important; transform:none !important}
}

/* ---------------------------------------------------------- sections */
.section{position:relative; z-index:1; padding:var(--s-8) 0}
.section-tight{position:relative; z-index:1; padding:var(--s-6) 0}
.section h2{font-size:var(--t-h1); margin-bottom:1rem; max-width:18ch; letter-spacing:-.015em}
.section .lead{font-size:var(--t-lead); color:var(--ink-dim); max-width:60ch}

/* =====================================================================
   THE GOLDEN THREAD — one continuous line drawn by scroll, walking the
   visitor down the story. Track = faint; draw = lit portion behind you.
   ===================================================================== */
.landing{position:relative}
svg.thread{position:absolute; top:0; left:0; width:100%; z-index:0; pointer-events:none; overflow:visible}
.thread .t-track{fill:none; stroke:rgba(148,166,210,.14); stroke-width:2; stroke-dasharray:2 9; stroke-linecap:round}
/* no filter here: a 6000px filtered layer repaints on every scroll frame */
.thread .t-draw{fill:none; stroke:rgba(247,206,120,.9); stroke-width:3; stroke-linecap:round;
  transition:stroke-dashoffset .25s linear}
.story-sec{position:relative; z-index:1}
.story-sec .wrap{position:relative}

/* story sections — pure typography, no cards */
.story{max-width:820px}
.story h2{max-width:22ch}
.story-line{font-size:var(--t-lead); color:var(--ink-dim); max-width:58ch; margin:0 0 1.2em; line-height:1.55}

/* the four forces — points ON the thread, not boxes */
.forces{margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-5)}
.force{display:flex; gap:1.6rem; align-items:flex-start; max-width:620px}
.force:nth-child(even){margin-left:auto; text-align:left}
.force-dot{width:16px; height:16px; border-radius:50%; flex:none; margin-top:.5rem;
  background:var(--muted-2); transition:background .6s, box-shadow .6s}
.force[data-pillar=confidence].lit .force-dot{background:#F2B84B; box-shadow:0 0 18px #F2B84B}
.force[data-pillar=communication].lit .force-dot{background:#5E93FF; box-shadow:0 0 18px #5E93FF}
.force[data-pillar=composure].lit .force-dot{background:#35D9A4; box-shadow:0 0 18px #35D9A4}
.force[data-pillar=action].lit .force-dot{background:#9B6BFF; box-shadow:0 0 18px #9B6BFF}
.force[data-pillar=leadership].lit .force-dot{background:#F7CE78; box-shadow:0 0 18px #F7CE78}
.force h3{font-size:var(--t-h2); margin-bottom:.4rem}
.force h3 i{font-family:var(--disp); font-style:italic; font-weight:400; color:var(--gold); font-size:1.1rem; margin-right:.7rem}
.force p{color:var(--muted); font-size:1.02rem; max-width:46ch; margin:0}

/* how it works — numbered stations, no boxes */
.how-steps{list-style:none; padding:0; margin:var(--s-5) 0 0; display:flex; flex-direction:column; gap:var(--s-5)}
.how-steps li{display:flex; gap:1.6rem; align-items:flex-start; max-width:640px}
.how-steps li:nth-child(even){margin-left:auto}
.hs-n{font-family:var(--disp); font-style:italic; font-size:2.2rem; color:var(--muted-2); line-height:1; flex:none; width:64px; height:64px;
  display:grid; place-items:center; border-radius:50%; transition:color .6s, text-shadow .6s}
.how-steps li.lit .hs-n{color:var(--gold-2); text-shadow:0 0 24px rgba(242,184,75,.6)}
.how-steps h3{font-size:var(--t-h3); margin-bottom:.4rem}
.how-steps p{color:var(--muted); margin:0; max-width:46ch}

/* the seven patterns — identity rows, no boxes */
.patterns{margin-top:var(--s-5); border-top:1px solid var(--line)}
.pattern-row{display:grid; grid-template-columns:3rem 15rem 1fr 2rem; align-items:baseline; gap:1rem; width:100%;
  text-align:left; padding:1.15rem 0; border-bottom:1px solid var(--line); cursor:pointer;
  transition:padding-left .35s var(--ease), background .35s}
.pattern-row:hover{padding-left:.9rem; background:linear-gradient(90deg, rgba(242,184,75,.05), transparent 70%)}
.pattern-row .pr-n{font-family:var(--disp); font-style:italic; color:var(--gold-deep); font-size:.95rem}
.pattern-row .pr-name{font-family:var(--disp); font-size:clamp(1.25rem,2.2vw,1.7rem); color:var(--ink); transition:color .3s}
.pattern-row:hover .pr-name{color:var(--gold-2)}
.pattern-row .pr-short{color:var(--muted); font-size:.92rem; line-height:1.4}
.pattern-row .pr-go{color:var(--muted-2); font-size:1.1rem; transition:color .3s, transform .3s var(--ease)}
.pattern-row:hover .pr-go{color:var(--gold); transform:translateX(4px)}
@media (max-width:760px){
  /* keep the curiosity teaser visible on mobile — it's WHY people tap Start */
  .pattern-row{grid-template-columns:2.2rem 1fr 1.4rem; grid-template-areas:"n name go" "n short go"; row-gap:.2rem}
  .pattern-row .pr-n{grid-area:n}
  .pattern-row .pr-name{grid-area:name}
  .pattern-row .pr-short{grid-area:short; font-size:.86rem}
  .pattern-row .pr-go{grid-area:go}
}

/* authority block — Ben, integrated not boxed */
.ben-block{display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s-5); align-items:center; max-width:1000px}
.ben-photo{margin:0; position:relative}
.ben-photo img{width:100%; border-radius:var(--r-lg); filter:grayscale(.15) contrast(1.05);
  mask-image:linear-gradient(180deg,#000 70%,transparent); -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent)}
.ben-photo figcaption{margin-top:.7rem; font-size:.8rem; color:var(--muted-2); font-style:italic; font-family:var(--disp)}
.ben-quote{font-family:var(--disp); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.35; color:var(--gold-2);
  border-left:2px solid var(--gold-line); padding-left:1.1rem; margin:1.6rem 0}
.ben-links{display:flex; flex-wrap:wrap; gap:.5rem .5rem; margin-top:1.6rem}
.ben-links a{font-size:.8rem; letter-spacing:.03em; color:var(--ink-dim); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.4rem .9rem; transition:border-color .3s, color .3s, background .3s}
.ben-links a:hover{border-color:var(--gold-line); color:var(--gold-2); background:rgba(242,184,75,.06)}
@media (max-width:760px){ .ben-block{grid-template-columns:1fr; gap:var(--s-4)} }

/* =====================================================================
   THE LOOP — the mechanism, made visible. A closed pattern repeating,
   then the cut that opens it into forward motion. Motion = meaning.
   ===================================================================== */
.loopwrap{max-width:560px; margin:var(--s-5) auto 0; text-align:center}
.loopwrap svg{width:100%; height:auto; overflow:visible}
.loop-orbit{fill:none; stroke:var(--line-strong); stroke-width:2}
.loop-node{transition:filter .6s}
.loop-pulse{fill:none; stroke:var(--gold-2); stroke-width:3; stroke-linecap:round; stroke-dasharray:34 300;
  filter:drop-shadow(0 0 6px rgba(242,184,75,.7))}
.loopwrap.spin .loop-pulse{animation:loopTravel 3.4s linear infinite}
@keyframes loopTravel{to{stroke-dashoffset:-334}}
/* the cut + escape appear when the section is reached */
.loop-cut{stroke:var(--coral); stroke-width:3; stroke-linecap:round; opacity:0; stroke-dasharray:120; stroke-dashoffset:120}
.loop-escape{fill:none; stroke:url(#escGrad); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260;
  filter:drop-shadow(0 0 7px rgba(242,184,75,.6))}
.loopwrap.cut .loop-cut{opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset .5s var(--ease) .1s, opacity .3s}
.loopwrap.cut .loop-pulse{animation:none; opacity:.15; transition:opacity .5s}
.loopwrap.cut .loop-orbit{stroke-dasharray:4 8; opacity:.4; transition:.6s}
.loopwrap.cut .loop-escape{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease) .5s}
.loop-caption{margin-top:var(--s-3); font-family:var(--disp); font-style:italic; font-size:var(--t-h3); color:var(--ink-dim); transition:color .5s}
.loopwrap.cut .loop-caption{color:var(--gold-2)}

/* ===================================================================
   PROOF VIDEO — real client, above the review wall
   =================================================================== */
.proof-video-block{margin:var(--s-5) 0 var(--s-6); max-width:820px}
.pv-kicker{font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.6rem}
.pv-lead{font-family:var(--disp); font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.4; color:var(--ink); margin-bottom:1.4rem; max-width:44ch}
/* Sherryl's clip is vertical (1080x1920) — frame it as a portrait card,
   centred, so it never letterboxes or crops her face. */
.proofvid{margin:0; display:flex; flex-direction:column; align-items:center}
.proofvid-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--gold-line);
  aspect-ratio:9/16; width:min(340px,80vw); background:#05080f; box-shadow:0 34px 90px rgba(0,0,0,.55)}
.proofvid-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.vid-fallback{position:absolute; inset:0; display:grid; place-items:center; padding:2rem; text-align:center; color:var(--ink-dim)}
.vid-fallback a{color:var(--gold-2); border-bottom:1px solid var(--gold-line)}
.proofvid-cap{margin-top:.8rem; font-size:.78rem; color:var(--muted-2)}
/* portrait-shot videos shouldn't letterbox awkwardly on mobile */
@media (max-width:760px){ .proofvid-frame{aspect-ratio:4/5} .proofvid-frame video{object-fit:contain; background:#05080f} }

/* ===================================================================
   REVIEW CAROUSEL — swipeable, keyboard-navigable, no auto-advance
   (reviews must stay readable; motion never steals the text)
   =================================================================== */
.rev-carousel{margin-top:var(--s-5)}
.rev-track{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.25rem .25rem 1.25rem; -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-track:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:var(--r)}
.rev-card{flex:0 0 min(380px,82vw); scroll-snap-align:start; margin:0;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-4);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); display:flex; flex-direction:column;
  transition:border-color .35s}
.rev-card:hover{border-color:var(--gold-line)}
.rev-card p{font-family:var(--disp); font-size:1.02rem; line-height:1.5; color:var(--ink); margin:0 0 1.1rem; flex:1}
.rev-card footer{font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.8rem}
.rev-card footer b{display:block; color:var(--gold-2); font-family:var(--body); font-weight:600; margin-bottom:.15rem}
.rev-ctrls{display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:.4rem}
.rev-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink-dim);
  font-size:1.1rem; display:grid; place-items:center; transition:.3s; cursor:pointer; background:transparent}
.rev-btn:hover{border-color:var(--gold-line); color:var(--gold-2); background:rgba(242,184,75,.06)}
.rev-count{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}

/* review wall — every verbatim review visible, no carousel hiding proof */
@media (max-width:760px){ .proof-wall{grid-template-columns:1fr; gap:var(--s-4)} }

/* editorial pull-quotes — no card grid */
.quotes{margin-top:var(--s-5); display:flex; flex-direction:column; gap:var(--s-5)}
.quote{margin:0; max-width:680px}
.quote:nth-child(even){margin-left:auto}
.quote p{font-family:var(--disp); font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.45; color:var(--ink); margin:0 0 .8rem}
.quote footer{font-size:.86rem; color:var(--muted)}
.quote footer b{color:var(--gold-2); font-weight:600}

/* recognition */
.recognition{display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 2.2rem; margin-top:var(--s-5); counter-reset:r}
.recognition li{list-style:none; padding:1.05rem 0 1.05rem 2.6rem; border-bottom:1px solid var(--line); position:relative; color:var(--ink-dim); transition:color .3s, padding-left .3s}
.recognition li:hover{color:var(--ink); padding-left:2.9rem}
.recognition li::before{counter-increment:r; content:counter(r,decimal-leading-zero); position:absolute; left:0; top:1.05rem; color:var(--gold-deep); font-family:var(--disp); font-style:italic; font-size:.95rem}

/* proof */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:var(--s-5)}
.review{padding:var(--s-4); border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(255,255,255,.02); transition:transform .4s var(--ease), border-color .4s}
.review:hover{transform:translateY(-4px); border-color:var(--gold-line)}
.review p{font-family:var(--disp); font-size:1.02rem; line-height:1.5; color:var(--ink); margin:0 0 1rem}
.review .who{font-size:.82rem; color:var(--muted); font-weight:500}
.review .who b{color:var(--gold-2); font-weight:600; display:block; font-family:var(--body)}
.proof-note{margin-top:1.6rem; color:var(--muted-2); font-size:.82rem}

.final{position:relative; z-index:1; text-align:center; padding:var(--s-8) 0}
.final h2{font-size:clamp(2.2rem,5vw,3.8rem); max-width:18ch; margin:0 auto 1.8rem; letter-spacing:-.02em}

/* =====================================================================
   VSL PLAYER — cinematic frame
   ===================================================================== */
.vsl{max-width:920px; margin:0 auto}
.vsl-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--gold-line);
  aspect-ratio:16/9; background:#05080f; box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(242,184,75,.08)}
.vsl video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#04070F; display:block}
/* Cloudflare Stream renders as an iframe; the 16/9 .vsl-frame holds the
   ratio and the iframe fills it, so the player can never overflow. */
.vsl iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#04070F}
.vsl-cta{display:flex; justify-content:center; margin-top:var(--s-4)}
.vsl-transcript{margin-top:1.2rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.vsl-transcript summary{cursor:pointer; padding:.9rem 1.2rem; color:var(--muted); font-size:.85rem; letter-spacing:.04em; list-style:none; display:flex; align-items:center; gap:.5rem}
.vsl-transcript summary::-webkit-details-marker{display:none}
.vsl-transcript summary::before{content:"＋"; color:var(--gold)}
.vsl-transcript[open] summary::before{content:"－"}
.vsl-transcript .body{padding:0 1.2rem 1.2rem; color:var(--ink-dim); font-size:.95rem}
.vsl-transcript .body p{margin:0 0 .8rem}

/* =====================================================================
   THE CLIMB — journey path map (Duolingo-style ascent to the summit)
   ===================================================================== */
.journey{position:relative; min-height:100svh; z-index:1; background:
  radial-gradient(80% 50% at 50% 0%, rgba(47,107,255,.08), transparent 60%),
  radial-gradient(90% 60% at 50% 108%, rgba(242,184,75,.06), transparent 60%),
  var(--audit); display:flex; flex-direction:column}

.climb{position:relative; width:100%; max-width:560px; margin:0 auto; padding:var(--s-5) clamp(1rem,4vw,2rem) var(--s-7); flex:1}
.climb-head{text-align:center; margin-bottom:var(--s-4)}
.climb-head .kick{font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem}
.climb-head h2{font-size:var(--t-h2); margin-bottom:.5rem}
.climb-head p{color:var(--muted); font-size:.95rem; max-width:40ch; margin:0 auto}
.climb-progress{display:inline-flex; align-items:center; gap:.6rem; margin-top:1rem; font-size:.78rem; color:var(--gold-2); letter-spacing:.06em}
.climb-progress .bar{width:120px; height:5px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.climb-progress .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); width:0; transition:width 1s var(--ease)}

.path-wrap{position:relative; margin-top:var(--s-4)}
.path-wrap svg.trail{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.trail .track{fill:none; stroke:var(--line-strong); stroke-width:3; stroke-linecap:round; stroke-dasharray:1 12}
.trail .fill{fill:none; stroke:url(#climbGrad); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(242,184,75,.5));
  transition:stroke-dashoffset 1.2s var(--ease)}
.nodes{position:relative; z-index:1}
.node-row{position:relative; display:flex; align-items:center; min-height:118px}
.node-row.right{justify-content:flex-end}
.node-row.left{justify-content:flex-start}
.waypoint{position:relative; display:flex; align-items:center; gap:.9rem; max-width:74%}
.node-row.right .waypoint{flex-direction:row-reverse; text-align:right}
/* stations are glowing points on the thread — no bordered discs */
.disc-node{position:relative; width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--muted-2); transition:.5s var(--ease); --wc:var(--gold)}
.disc-node .lbl-in, .disc-node svg{display:none}
.waypoint[data-key=confidence] .disc-node{--wc:#F2B84B}
.waypoint[data-key=communication] .disc-node{--wc:#5E93FF}
.waypoint[data-key=composure] .disc-node{--wc:#35D9A4}
.waypoint[data-key=action] .disc-node{--wc:#9B6BFF}
.waypoint[data-key=leadership] .disc-node{--wc:#F7CE78}
/* done — lit in its pillar colour */
.waypoint.done .disc-node{background:var(--wc); box-shadow:0 0 16px var(--wc), 0 0 42px -8px var(--wc)}
/* active — the traveller is here */
.waypoint.active .disc-node{background:var(--gold-2); transform:scale(1.35);
  box-shadow:0 0 0 7px rgba(242,184,75,.14), 0 0 34px rgba(242,184,75,.75)}
.waypoint.active .disc-node::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(242,184,75,.55); animation:beacon 2.6s ease-out infinite}
/* locked — ahead, dim */
.waypoint.locked{opacity:.45}
/* summit — the report, gold ring waiting to be earned */
.waypoint.summit .disc-node{width:30px; height:30px; background:transparent; border:2px solid var(--gold-line)}
.waypoint.summit.locked{opacity:.9}
.waypoint.summit.active .disc-node,.waypoint.summit.done .disc-node{background:var(--gold-2); border-color:var(--gold-2)}
.waypoint .meta{min-width:0}
.waypoint .meta .n{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}
.waypoint.active .meta .n, .waypoint.done .meta .n{color:var(--gold-deep)}
.waypoint .meta .nm{font-family:var(--disp); font-size:1.12rem; color:var(--ink-dim); line-height:1.15}
.waypoint.active .meta .nm{color:var(--ink)}
.waypoint .youare{display:inline-block; margin-top:.35rem; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2);
  background:rgba(242,184,75,.12); border:1px solid var(--gold-line); padding:.2rem .55rem; border-radius:var(--r-pill)}

.climb-cta{position:sticky; bottom:0; z-index:5; padding:var(--s-4) clamp(1rem,4vw,2rem) var(--s-4);
  background:linear-gradient(0deg, var(--audit) 55%, transparent); text-align:center}
.climb-cta .btn{min-width:min(360px,90%)}
.climb-cta .sub{margin-top:.7rem; color:var(--muted-2); font-size:.78rem}

/* stage intro (entering a waypoint) */
.stage-portal{position:relative; z-index:1; min-height:calc(100svh - 68px); display:flex; align-items:center}
.stage-intro{text-align:center; max-width:640px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem); animation:screenIn .6s var(--ease)}
.stage-intro .num{font-family:var(--disp); font-style:italic; color:var(--gold); font-size:1.5rem; margin-bottom:.7rem}
.stage-intro h2{font-size:clamp(2rem,5vw,3rem); margin-bottom:1.1rem; letter-spacing:-.02em}
.stage-intro p{color:var(--ink-dim); font-size:var(--t-lead); max-width:52ch; margin:0 auto 2.2rem}

/* =====================================================================
   QUESTION SCREENS
   ===================================================================== */
.journey-head{position:sticky; top:68px; z-index:15; background:linear-gradient(180deg,var(--audit) 62%,transparent); padding-top:var(--s-3)}
.mini-rail{max-width:720px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem) .6rem; display:flex; align-items:center; gap:.7rem}
.mini-rail .track{flex:1; height:4px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.mini-rail .track i{display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); width:0; transition:width .6s var(--ease); box-shadow:0 0 10px rgba(242,184,75,.5)}
.mini-rail .lbl{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2); white-space:nowrap}
.mini-rail .lbl b{font-family:var(--disp); font-style:italic; margin-right:.35rem; color:var(--gold)}

.journey-body{flex:1; display:flex; align-items:center; padding:var(--s-5) 0 var(--s-6)}
.screen{width:100%; max-width:720px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem); animation:screenIn .5s var(--ease)}
@keyframes screenIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.q-eyebrow{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem}
.q-title{font-size:var(--t-h2); margin-bottom:.5rem; letter-spacing:-.01em}
.q-prompt{color:var(--muted); margin-bottom:1.7rem; font-size:1.03rem}
.q-help{color:var(--muted-2); font-size:.86rem; margin-top:-.2rem; margin-bottom:1.7rem}

/* answers as editorial lines on the path — not stacked boxes */
.options{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.opt{position:relative; display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  padding:1.15rem .4rem; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink-dim); font-size:1.02rem; line-height:1.45;
  transition:padding-left .3s var(--ease), color .25s, background .3s}
.opt:hover{color:var(--ink); padding-left:1rem; background:linear-gradient(90deg, rgba(242,184,75,.06), transparent 70%)}
.opt .tick{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); flex:none; display:grid; place-items:center; transition:.3s}
.opt.sel{color:var(--ink); padding-left:1rem; background:linear-gradient(90deg, rgba(242,184,75,.1), transparent 75%)}
.opt.sel::before{content:""; position:absolute; left:0; top:14%; bottom:14%; width:2.5px; border-radius:2px; background:var(--gold); box-shadow:0 0 12px rgba(242,184,75,.7)}
.opt.sel .tick{background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(242,184,75,.65)}
.scale-ends{display:flex; justify-content:space-between; color:var(--muted-2); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem}

.reflection textarea{width:100%; min-height:150px; resize:vertical; padding:1.15rem 1.25rem; font-family:var(--body); font-size:1.03rem; line-height:1.6;
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); transition:border-color .3s, box-shadow .3s}
.reflection textarea:focus{border-color:var(--gold-line); outline:none; box-shadow:0 0 0 1px var(--gold-line)}
.reflection .count{text-align:right; color:var(--muted-2); font-size:.76rem; margin-top:.5rem}

.q-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:var(--s-5)}
.q-nav .back{color:var(--muted); font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem}
.q-nav .back:hover{color:var(--gold-2)}
.q-nav .skip{color:var(--muted-2); font-size:.85rem}
.q-nav .skip:hover{color:var(--ink)}

/* coaching insight — cinematic full-screen moment */
.insight-screen{position:relative; z-index:1; min-height:calc(100svh - 68px); display:flex; align-items:center}
.insight{position:relative; text-align:center; max-width:660px; margin:0 auto; padding:var(--s-6) clamp(1.1rem,4vw,2rem)}
.insight .mark{color:var(--gold); font-family:var(--disp); font-size:3rem; line-height:1; margin-bottom:1.2rem; opacity:0; animation:riseIn .7s var(--ease) .1s forwards}
.insight p{font-family:var(--disp); font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.32; color:var(--ink); margin-bottom:2.2rem; text-wrap:balance; opacity:0; animation:riseIn .9s var(--ease) .25s forwards}
.insight .stage-earned{color:var(--muted); font-size:.82rem; letter-spacing:.08em; margin-bottom:1.8rem; opacity:0; animation:riseIn .8s var(--ease) .5s forwards}
.insight .stage-earned b{color:var(--gold-2)}
.insight .btn{opacity:0; animation:riseIn .8s var(--ease) .65s forwards}

/* =====================================================================
   LEAD GATE
   ===================================================================== */
.gate-screen{position:relative; z-index:1; min-height:calc(100svh - 68px); display:flex; align-items:center}
.gate{max-width:520px; margin:0 auto; padding:var(--s-5) clamp(1.1rem,4vw,2rem); width:100%}
.gate .assembled{text-align:center; margin-bottom:var(--s-4)}
.gate .assembled .ring{width:120px; height:120px; margin:0 auto 1rem}
.gate h2{font-size:var(--t-h1); text-align:center; margin-bottom:.8rem; letter-spacing:-.01em}
.gate .sub{color:var(--ink-dim); text-align:center; font-size:.95rem; margin-bottom:var(--s-4)}
.field{margin-bottom:1.1rem}
.field label{display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.field input{width:100%; padding:1rem 1.15rem; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); font-family:var(--body); font-size:1rem; transition:border-color .3s, box-shadow .3s}
.field input:focus{border-color:var(--gold-line); outline:none; box-shadow:0 0 0 1px var(--gold-line)}
.field .err{color:var(--coral); font-size:.8rem; margin-top:.4rem}
.consent{display:flex; gap:.7rem; align-items:flex-start; margin:1.2rem 0 1.4rem; color:var(--ink-dim); font-size:.86rem; line-height:1.45}
.consent input{margin-top:.2rem; width:18px; height:18px; accent-color:var(--gold); flex:none}
.gate-privacy{text-align:center; color:var(--muted-2); font-size:.78rem; margin-top:1rem}

/* =====================================================================
   REPORT
   ===================================================================== */
.report{max-width:860px; margin:0 auto; padding:var(--s-5) clamp(1.1rem,4vw,2rem) 0; position:relative; z-index:1}
.report-disclaimer{color:var(--muted); font-size:.8rem; margin-top:1rem; border-left:2px solid var(--gold-line); padding-left:.9rem; max-width:60ch}


.overall{display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap}
.score-ring{position:relative; width:150px; height:150px; flex:none}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.score-ring .val b{font-family:var(--disp); font-size:2.7rem; line-height:1}
.score-ring .val span{color:var(--muted); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase}
.overall .meaning{flex:1; min-width:260px}
.overall .meaning .band{font-family:var(--disp); font-size:var(--t-h2); color:var(--gold-2); margin-bottom:.5rem}
.overall .meaning p{color:var(--ink-dim); margin:0}

.meter{height:7px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; margin-bottom:1rem}
.meter i{display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); width:0; transition:width 1.1s var(--ease); box-shadow:0 0 10px rgba(242,184,75,.4)}

/* report reveal — the journey resolving into focus */
.score-ring svg circle:last-of-type{transition:stroke-dashoffset 1.6s var(--ease)}

/* the pattern card — a branded artifact worth screenshotting */
.profile-card{position:relative; border:1px solid var(--gold-line); border-radius:var(--r-lg); padding:var(--s-4); overflow:hidden;
  background:linear-gradient(180deg,var(--gold-soft),transparent)}
.pc-share{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem}



/* routes */
.route{position:relative; border:1px solid var(--gold-line); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg,rgba(242,184,75,.06),transparent); box-shadow:0 30px 80px rgba(0,0,0,.35)}
.route .route-head{padding:var(--s-4) var(--s-4) var(--s-3)}
.route .lead{color:var(--gold-2); font-family:var(--disp); font-style:italic; font-size:var(--t-h3); margin-bottom:1rem}
.route h2{font-size:var(--t-h2); margin-bottom:.5rem}
.route .price{font-family:var(--disp); font-size:2.1rem; color:var(--gold-2); margin:.4rem 0 0}
.route-body{padding:0 var(--s-4) var(--s-4)}
.route-body h4{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin:1.5rem 0 .6rem}
.route-body p{color:var(--ink-dim); margin:0}
.why-list{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.7rem}
.why-list li{display:flex; gap:.7rem; color:var(--ink-dim); align-items:flex-start; font-size:.95rem}
.why-list li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; margin-top:.5rem; box-shadow:0 0 8px var(--gold)}
.inclusions{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.55rem}
.inclusions li{display:flex; gap:.7rem; color:var(--ink-dim); font-size:.95rem; align-items:flex-start}
.inclusions li svg{flex:none; margin-top:.15rem; color:var(--gold)}
.route-cta{padding:var(--s-4); border-top:1px solid var(--line); background:rgba(4,7,15,.4)}
.route-note{color:var(--muted); font-size:.8rem; margin-top:.9rem; text-align:center}
.not-connected{color:var(--coral); font-size:.78rem; text-align:center; margin-top:.7rem; opacity:.85}


.doc-page{max-width:var(--readw); margin:0 auto; padding:var(--s-6) clamp(1.1rem,4vw,2rem); position:relative; z-index:1}
.doc-page h1{font-size:var(--t-h1); margin-bottom:1.4rem}
.doc-page h2{font-size:var(--t-h3); margin:2rem 0 .8rem; color:var(--gold-2)}
.doc-page p, .doc-page li{color:var(--ink-dim)}
.doc-page ul{padding-left:1.2rem}
.doc-page a.back{color:var(--gold-2); font-size:.9rem}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); z-index:50;
  background:var(--panel-2); border:1px solid var(--gold-line); color:var(--ink); padding:.9rem 1.3rem; border-radius:var(--r-pill); font-size:.9rem; box-shadow:var(--shadow); opacity:0; transition:.35s var(--ease); pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:760px){
  /* the thread runs as a left spine; indent story content clear of it */
  .story-sec .wrap{padding-left:3rem}
  .thread .t-draw{stroke-width:2}
  .force:nth-child(even),.how-steps li:nth-child(even),.quote:nth-child(even){margin-left:0}
  .recognition{grid-template-columns:1fr; gap:0}
  .reviews{grid-template-columns:1fr}
  .brand small{display:none}
  .overall{gap:var(--s-3)}
  .q-nav{flex-wrap:wrap}
  .waypoint{max-width:82%}
  .climb-head h2{font-size:var(--t-h3)}
}
@media (min-width:761px) and (max-width:1000px){ .reviews{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion: reduce){
  .hero-media img, .aurora, .waypoint.active .disc-node, .brand .dot{animation:none !important}
  .hero h1 .w{opacity:1; transform:none}
}

/* why-it-happens pivot line + agency headline */
.why-pivot{font-family:var(--disp); font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.35; color:var(--gold-2);
  border-left:2px solid var(--gold-line); padding-left:1.2rem; margin:var(--s-4) 0 0; max-width:44ch}
.control-head{max-width:26ch}

/* challenge contract blocks */
.rc-predict textarea{width:100%; min-height:74px; resize:vertical; padding:.85rem 1rem; font-family:var(--body); font-size:.97rem;
  background:rgba(242,184,75,.04); border:1px solid var(--gold-line); border-radius:var(--r); color:var(--ink)}

/* keystone banner + ladder */
.keystone{border:1px solid var(--gold-line); border-radius:var(--r); padding:1.2rem 1.3rem; margin:0 0 1.6rem;
  background:linear-gradient(160deg,rgba(242,184,75,.09),rgba(242,184,75,.02))}
.rung{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1)}
.rung.done{background:var(--gold-deep)} .rung.now{background:var(--gold); box-shadow:0 0 10px rgba(242,184,75,.6)}
/* day-1 prescription capture */
.rc-prescribe input{width:100%; padding:.7rem .9rem; background:rgba(255,255,255,.03); border:1px solid var(--gold-line);
  border-radius:var(--r); color:var(--ink); font-family:var(--body); font-size:.94rem}
/* measurement */
.rm-btn{padding:.4rem 1.1rem; border-radius:99px; border:1px solid var(--gold-line); background:transparent;
  color:var(--ink-dim); font-family:var(--body); font-size:.88rem; cursor:pointer}
/* progression */
.progression{margin-top:1.8rem; padding:1.4rem 1.3rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.02)}

.el-tag{display:inline-block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .55rem;
  border-radius:99px; margin-left:.5rem; vertical-align:middle}

/* ---- Day 1 audit instrument ---- */
.audit textarea{width:100%; padding:.75rem .95rem; background:rgba(255,255,255,.03); border:1px solid var(--gold-line);
  border-radius:var(--r); color:var(--ink); font-family:var(--body); font-size:.94rem; line-height:1.5; resize:vertical}
/* ---- daily commitment checklist ---- */
.c-b{padding:.25rem .7rem; border-radius:99px; border:1px solid var(--gold-line); background:transparent;
  color:var(--ink-dim); font-family:var(--body); font-size:.78rem; cursor:pointer}

/* ---- B2B teams page ---- */
.t-h1{font-family:var(--disp); font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.12; margin:.5rem 0 0; max-width:20ch}
.t-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.4rem}
.t-card{padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r); background:rgba(255,255,255,.02)}
.t-card h3{margin:0 0 .4rem; font-size:1.02rem; color:var(--gold-2)}
.t-card p{margin:0; font-size:.93rem; color:var(--ink-dim); line-height:1.6}
.t-quote{margin:1.4rem 0 0; padding:1.3rem 1.4rem; border-left:2px solid var(--gold); background:linear-gradient(90deg,rgba(242,184,75,.06),transparent); border-radius:0 var(--r) var(--r) 0}
.t-quote p{margin:0; font-size:1rem; line-height:1.65; color:var(--ink)}
.t-quote footer{margin-top:.8rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep)}
.t-rating{margin-top:.9rem; font-size:.85rem; color:var(--ink-dim)}
.t-note{margin-top:1.2rem; font-size:.85rem; color:var(--ink-dim); opacity:.8}

/* ---- progression chart ---- */
.chart{margin:0 0 1.5rem;padding:0}
.chart figcaption{margin-bottom:.9rem}
.chart figcaption h3{margin:.25rem 0 0;font-family:var(--disp);font-size:clamp(1rem,2.2vw,1.25rem);line-height:1.35;color:var(--ink)}
.chart svg{width:100%;height:auto;display:block}
.chart-key{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.5rem;font-size:.76rem;color:var(--ink-dim)}
.chart-key i{display:inline-block;width:16px;height:2px;margin-right:.35rem;vertical-align:middle}
.chart-key .k-diff{background:var(--gold)}
.chart-key .k-stake{background:rgba(237,230,216,.4)}
.chart-key .k-axis{margin-left:auto;opacity:.6}
.chart-empty{margin-bottom:1.4rem}
.chart-empty p:last-child{margin:.3rem 0 0;font-size:.9rem;color:var(--ink-dim);line-height:1.6}

/* ---- completion guarantee ---- */
.guarantee{margin:1.4rem 0 0;padding:1.1rem 1.2rem;border:1px solid var(--gold-line);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(242,184,75,.06),transparent)}
/* ---- second support route ---- */
.direct{padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)}
.direct h3{margin:0 0 .6rem;font-family:var(--disp);font-size:clamp(1.15rem,2.4vw,1.4rem);color:var(--ink)}
/* ---- checkout consent ---- */
.consent-backdrop{position:fixed;inset:0;background:rgba(4,7,15,.82);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:9000}
.consent{max-width:460px;width:100%;padding:1.6rem;border:1px solid var(--gold-line);border-radius:var(--r);background:#0A0E1A}
.consent h3{margin:0 0 .8rem;font-family:var(--disp);font-size:1.3rem;color:var(--ink)}
.c-check{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;padding:.85rem;border-radius:var(--r);
  background:rgba(242,184,75,.05);border:1px solid var(--gold-line)}

.rc-fb input{width:100%;padding:.7rem .9rem;background:rgba(255,255,255,.03);border:1px solid var(--gold-line);
  border-radius:var(--r);color:var(--ink);font-family:var(--body);font-size:.93rem}
/* day 14 progression report */
.prog-report{margin-top:1.8rem;padding:1.5rem 1.4rem;border:1px solid var(--gold-line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(242,184,75,.06),transparent)}


/* =====================================================================
   THE RESULT PAGE  (final production pass, 3 Sep 2026)
   Hierarchy: score → pattern → all five areas → focus → action.
   Same Pressure Room palette: near-black navy ground, gold as the only
   signal colour, Fraunces for statements, Instrument Sans for interface.
   Two secondary signals are added, and only two: mint for a strength,
   coral for a development area. Both already exist in tokens.css.
   ===================================================================== */
.report{max-width:920px}
.r-head{border-bottom:1px solid var(--line); padding-bottom:var(--s-4); margin-bottom:var(--s-5)}
.r-head .kicker{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1rem}
.r-head .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--gold); box-shadow:0 0 10px var(--gold)}
.r-head h1{font-size:var(--t-h1); margin-bottom:.6rem; letter-spacing:-.02em; text-wrap:balance}
.r-head .meta{color:var(--muted); font-size:.86rem; margin:0}

.r-eyebrow{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.9rem; display:flex; align-items:center; gap:.7rem}
.r-eyebrow::after{content:""; height:1px; flex:1; background:var(--line)}
.r-h2{font-size:var(--t-h2); margin-bottom:var(--s-3); text-wrap:balance}

/* ---------------------------------------------------------- 1. SCORE */
.r-score{margin-bottom:var(--s-6); border:1px solid var(--gold-line); border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--panel-2),var(--deep)); padding:var(--s-5) clamp(1.1rem,4vw,var(--s-5)); position:relative; overflow:hidden}
.r-score::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 85% -10%, rgba(242,184,75,.14), transparent 62%); pointer-events:none}
.r-score>*{position:relative}
.r-score-main{display:flex; gap:clamp(1.2rem,4vw,2.6rem); align-items:center; flex-wrap:wrap}
.r-score .score-ring{width:190px;height:190px}
.r-score .score-ring .val b{font-size:3.6rem}
.r-score-meaning{flex:1 1 320px; min-width:0}
.band-label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 .35rem}
.band-name{font-family:var(--disp); font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--gold-2); line-height:1.1; margin-bottom:.7rem}
.band-line{color:var(--ink-dim); margin-bottom:1.1rem}

.band-scale{position:relative; display:flex; gap:6px; padding-bottom:1.4rem}
.bs-seg{flex:1; display:block}
.bs-seg i{display:block; height:6px; border-radius:var(--r-pill); background:var(--line)}
.bs-seg.on i{background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); box-shadow:0 0 12px rgba(242,184,75,.45)}
.bs-seg em{display:block; font-style:normal; font-size:.66rem; letter-spacing:.1em; color:var(--muted-2); margin-top:.4rem}
.bs-seg.on em{color:var(--gold-2)}
.bs-marker{position:absolute; top:-7px; width:2px; height:20px; background:var(--ink); transform:translateX(-1px); border-radius:2px}
.bs-marker::after{content:""; position:absolute; top:-5px; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px var(--void)}

.area-gauge{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line)}
.gauge{display:flex; min-width:0; flex-direction:column; gap:.45rem; text-align:center; padding:.5rem .25rem; border-radius:10px; transition:background .25s var(--ease)}
.gauge:hover,.gauge:focus-visible{background:rgba(148,166,210,.07)}
.g-bar{display:block; height:74px; border-radius:var(--r-pill); background:var(--line); position:relative; overflow:hidden}
.g-bar i{position:absolute; left:0; right:0; bottom:0; height:0; border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep)); transition:height 1.1s var(--ease)}
.g-strong .g-bar i{background:linear-gradient(180deg,var(--mint),#1E9E74)}
.g-focus .g-bar i{background:linear-gradient(180deg,var(--coral),#C4402A)}
.g-num{font-family:var(--disp); font-size:1.15rem; line-height:1; color:var(--ink)}
.g-lbl{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); overflow-wrap:anywhere}

/* -------------------------------------------------------- 2. PATTERN */
.r-pattern{margin-bottom:var(--s-6)}
.pattern-card{position:relative; border:1px solid var(--gold-line); border-radius:var(--r-lg); padding:var(--s-5) clamp(1.1rem,4vw,var(--s-5));
  background:linear-gradient(150deg,rgba(242,184,75,.09),transparent 55%),var(--panel); overflow:hidden}
.pattern-card::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 92% 0%, rgba(242,184,75,.13), transparent 60%); pointer-events:none}
.pattern-card>*{position:relative}
.pc-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem}
.pc-name{font-family:var(--disp); font-size:clamp(1.9rem,4.6vw,3rem); color:var(--gold-2); line-height:1.05}
.pc-conf{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:.35rem .8rem; white-space:nowrap}
.pc-short{font-family:var(--disp); font-style:italic; font-size:var(--t-lead); color:var(--ink); margin-bottom:1rem}
.pc-body{color:var(--ink-dim); max-width:66ch}
.pc-secondary,.pc-flag{font-size:.92rem; color:var(--ink-dim); border-left:2px solid var(--gold-line); padding-left:.9rem; margin:1rem 0 0}
.pc-flag b,.pc-secondary b{color:var(--gold-2)}
.pattern-card--none{border-color:var(--line-strong); background:var(--panel)}
.pattern-card--none .pc-name{color:var(--ink)}
.pc-share{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line)}
.pc-share-note{font-size:.76rem; color:var(--muted)}

/* ---------------------------------------------------------- 3. AREAS */
.r-areas{margin-bottom:var(--s-6)}
.area-row{padding:var(--s-4) 0; border-bottom:1px solid var(--line)}
.area-row:last-child{border-bottom:0}
.area-row.is-focus{border-left:2px solid var(--coral); padding-left:1.1rem; background:linear-gradient(90deg,rgba(255,107,74,.05),transparent 45%)}
.ar-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.3rem}
.ar-top h3{font-size:var(--t-h3)}
.ar-num{font-family:var(--disp); font-size:1.7rem; color:var(--gold-2); line-height:1}
.ar-num small{color:var(--muted-2); font-size:.85rem; font-family:var(--body)}
.ar-blurb{color:var(--muted); font-size:.88rem; margin-bottom:.8rem}
.area-row .meter{margin-bottom:.8rem}
.area-low .meter i{background:linear-gradient(90deg,#C4402A,var(--coral)); box-shadow:0 0 10px rgba(255,107,74,.35)}
.area-high .meter i{background:linear-gradient(90deg,#1E9E74,var(--mint)); box-shadow:0 0 10px rgba(53,217,164,.3)}
.ar-tags{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem}
.tag{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem .7rem; border-radius:var(--r-pill); border:1px solid}
.tag-strong{color:var(--mint); border-color:rgba(53,217,164,.45); background:rgba(53,217,164,.08)}
.tag-weak{color:var(--coral); border-color:rgba(255,107,74,.45); background:rgba(255,107,74,.08)}
.tag-focus{color:var(--void); background:var(--gold); border-color:var(--gold); font-weight:600}
.ar-detail{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem}
.ar-detail .k{display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.35rem}
.ar-detail p{color:var(--ink-dim); font-size:.92rem; margin:0}
.r-diffs{margin-top:var(--s-4); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-3) var(--s-4); background:rgba(148,166,210,.04)}
.r-diffs .k{display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.7rem}
.r-diffs ul{margin:0; padding-left:1.1rem}
.r-diffs li{color:var(--ink-dim); margin-bottom:.6rem}
.r-diffs li:last-child{margin-bottom:0}

/* ------------------------------------------ what it looks like now */
.r-pressure{margin-bottom:var(--s-6); max-width:70ch}
.up-line{color:var(--ink-dim)}
.up-lead{font-family:var(--disp); font-size:var(--t-lead); color:var(--ink); line-height:1.45}

/* ---------------------------------------------------------- 4. FOCUS */
/* Deliberately the loudest block on the page after the score. */
.r-focus{margin-bottom:var(--s-6)}
.focus-card{position:relative; border:2px solid var(--gold); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(155deg,rgba(242,184,75,.16),rgba(10,20,43,.9) 55%),var(--panel-2);
  padding:var(--s-5) clamp(1.1rem,4vw,var(--s-5)); box-shadow:var(--glow-gold)}
.fc-eyebrow{font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 .5rem; font-weight:600}
.fc-name{font-family:var(--disp); font-size:clamp(1.8rem,4.2vw,2.8rem); line-height:1.06; margin-bottom:1rem}
.fc-score{display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem}
.fc-num{font-family:var(--disp); font-size:2.4rem; color:var(--gold-2); line-height:1}
.fc-of{color:var(--ink-dim); font-size:.9rem}
.fc-meter{flex:1; height:8px; border-radius:var(--r-pill); background:rgba(4,7,15,.6); overflow:hidden; min-width:90px}
.fc-meter i{display:block; height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); transition:width 1.1s var(--ease)}
.fc-why{color:var(--ink); max-width:64ch; margin-bottom:var(--s-4)}
.fc-steps{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fc-step{border:1px solid var(--gold-line); border-radius:var(--r); padding:1rem 1.1rem; background:rgba(4,7,15,.45)}
.fc-step .k{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem}
.fc-step p{margin:0; color:var(--ink-dim); font-size:.94rem}

/* --------------------------------------------------------- 5. ROUTE */
.r-route{margin-bottom:var(--s-5)}
.route-len{color:var(--muted); font-size:.86rem; margin:.5rem 0 0}
.route-teams{margin-top:1.1rem; font-size:.9rem; color:var(--muted); text-align:center}
.route-teams a{color:var(--gold-2); text-decoration:underline; text-underline-offset:3px}

/* ------------------------------------------------------------ reveal */
.report-reveal .r-head,.report-reveal .r-score,.report-reveal .r-pattern,
.report-reveal .r-areas,.report-reveal .r-pressure,.report-reveal .r-focus,
.report-reveal .r-route{opacity:0; animation:riseIn .8s var(--ease) forwards}
.report-reveal .r-head{animation-delay:.05s}
.report-reveal .r-score{animation-delay:.35s}
.report-reveal .r-pattern{animation-delay:.7s}
.report-reveal .r-areas{animation-delay:.95s}
.report-reveal .r-pressure{animation-delay:1.15s}
.report-reveal .r-focus{animation-delay:1.35s}
.report-reveal .r-route{animation-delay:1.55s}

@media (max-width:640px){
  .r-score{padding:var(--s-4) 1.1rem}
  .r-score-main{justify-content:center; text-align:center}
  .r-score .score-ring{width:150px;height:150px}
  .r-score .score-ring .val b{font-size:2.8rem}
  .r-score-meaning{text-align:left}
  .area-gauge{gap:.35rem}
  .g-bar{height:56px}
  .g-lbl{font-size:.58rem; letter-spacing:.04em}
  .pc-top{flex-direction:column; align-items:flex-start; gap:.6rem}
  .ar-detail{grid-template-columns:1fr}
  .fc-steps{grid-template-columns:1fr}
}

.mini-rail .rail-count{display:block; font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-top:.2rem}


/* ------------------------------------------------------------ the films */
/* VSL 1 in the hero. The hero is normally locked to one viewport height;
   with a film in it that would clip, so `has-vsl` releases the lock. */
.hero-vsl{margin:0 0 1.5rem; max-width:460px}
.hero-vsl .vsl{max-width:100%}
.hero-transcript{max-width:460px; margin-top:1.4rem}
.hero-transcript .vsl-transcript{margin-top:0}
/* With a film in the hero the whole opening flow — headline, copy, film,
   CTA — has to fit the first screen, so the spacing tightens rather than
   pushing the CTA out of sight. */
.neural-hero.has-vsl{min-height:auto; padding:clamp(3.4rem,7vh,5rem) 0 clamp(3rem,6vh,4rem)}
.neural-hero.has-vsl h1{font-size:clamp(2.2rem,4.2vw,3.4rem); margin-bottom:1rem}
.neural-hero.has-vsl .lead{margin-bottom:1.4rem; font-size:1.05rem}
.neural-hero.has-vsl .hero-cta{margin-bottom:1.2rem}

/* VSL 2 on the result, and VSL 3 in the route block. Both inherit the
   .vsl frame; they only need their own spacing. */
.r-video{margin-bottom:var(--s-6)}
.r-video .vsl{max-width:100%}
.route-video{padding:0 clamp(1.1rem,4vw,var(--s-4)) var(--s-4)}
.route-video .vsl{max-width:100%}

@media (max-width:900px){
  .hero-vsl{max-width:100%; margin-bottom:1.5rem}
  .neural-hero.has-vsl{padding:clamp(3.5rem,9vh,5.5rem) 0 3rem}
}