@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Anton-400.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Archivo-400.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Archivo-600.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Archivo-800.woff2) format('woff2');}/* ============================================================
   ROLO PERFORMANCE — design tokens
   World: a forge at night. Warm carbon, bone type, heat ramp.
   Single-theme dark by design.
   ============================================================ */
:root{
  color-scheme: dark;
  --carbon:#0B0907;          /* page ground */
  --soot:#151110;            /* panels */
  --soot-2:#1D1714;          /* raised panels */
  --bone:#EFE7DB;            /* primary text */
  --ash:#A2968A;             /* muted text */
  --ash-dim:#6E655B;         /* faint text */
  --ember:#E5170F;           /* primary accent */
  --ember-hot:#FF3B22;
  --amber:#FF7B6B;
  --crimson:#B90D12;
  --line:rgba(239,231,219,.13);
  --line-soft:rgba(239,231,219,.07);
  --heat:linear-gradient(96deg,#FF7B6B 0%,#FF3B22 34%,#E5170F 62%,#B90D12 100%);
  --heat-v:linear-gradient(180deg,#FF7B6B,#E5170F 55%,#B90D12);
  --display:'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --pad:clamp(20px, 5vw, 72px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-swift:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--carbon);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#rolo{position:relative;background:var(--carbon);min-height:100svh}
::selection{background:var(--ember);color:#0B0907}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember-hot);outline-offset:3px;border-radius:2px}

/* --------- global atmosphere --------- */
#emberfield{position:fixed;inset:0;z-index:1;pointer-events:none}
.grain{
  position:fixed;inset:-40px;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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");
  background-size:240px 240px;
}
.vign{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 10%, transparent 55%, rgba(5,3,2,.5) 100%)}

/* --------- typography helpers --------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.01em;text-wrap:balance}
.d1{font-size:clamp(3.4rem, 11.5vw, 11rem)}
.d2{font-size:clamp(2.4rem, 6.6vw, 6rem)}
.d3{font-size:clamp(1.5rem, 3.2vw, 2.6rem)}
.outline{color:transparent;-webkit-text-stroke:2px var(--bone)}
.outline-ember{color:transparent;-webkit-text-stroke:2px var(--ember)}
.fill-heat{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ember-hot);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ember);flex:none}
.lede{color:var(--ash);font-size:clamp(1.02rem,1.4vw,1.25rem);line-height:1.65;max-width:56ch}
.mono-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--ash-dim);text-transform:uppercase}

/* --------- layout scaffolding --------- */
.act{position:relative;z-index:3;padding:clamp(90px,12vh,150px) var(--pad)}
.act-inner{max-width:1280px;margin:0 auto}
.act-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(40px,6vh,72px)}
.act-head .d2{max-width:18ch}
section{scroll-margin-top:70px}

/* --------- reveal engine --------- */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].is-in{opacity:1;transform:none}
.hline{position:relative;overflow:hidden}
.hline>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0)*110ms)}
.is-in .hline>span, .hline.is-in>span{transform:none}

/* --------- progress + cursor --------- */
#scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
#scrollbar i{display:block;height:100%;background:var(--heat);transform-origin:0 50%;transform:scaleX(0)}
#cursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;mix-blend-mode:difference;display:none;opacity:0;transition:opacity .3s}
#cursor.on{opacity:1}
#cursor .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
#cursor .ring{position:absolute;width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .25s}
#cursor.is-hot .ring{width:64px;height:64px;opacity:.9}
@media (pointer:fine){ #cursor{display:block} }

/* --------- preloader --------- */
#loader{position:fixed;inset:0;z-index:300;background:var(--carbon);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:transform .9s var(--ease-swift);will-change:transform}
#loader.done{transform:translateY(-100.5%)}
#loader .wordmark{font-family:var(--display);font-size:clamp(3rem,10vw,7.5rem);text-transform:uppercase;line-height:.9;display:flex;overflow:hidden}
#loader .wordmark span{display:inline-block;transform:translateY(110%);animation:riseup .7s var(--ease-out) forwards;animation-delay:calc(var(--i)*70ms + .1s)}
#loader .wordmark .hot{color:var(--ember)}
@keyframes riseup{to{transform:none}}
#loader .sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.5em;color:var(--ash);text-transform:uppercase;animation:fadein .8s .6s both}
#loader .count{position:absolute;bottom:34px;right:44px;font-family:var(--display);font-size:clamp(2rem,6vw,4rem);color:var(--ash-dim)}
#loader .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--heat);width:0%}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* --------- nav --------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad);transition:transform .45s var(--ease-out),background .3s,border-color .3s;border-bottom:1px solid transparent}
#nav.scrolled{background:rgba(11,9,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
#nav.hidden{transform:translateY(-110%)}
.logo{font-family:var(--display);font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:baseline;gap:2px}
.logo b{color:var(--ember);font-weight:400}
.logo small{font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;color:var(--ash);margin-left:10px;transform:translateY(-2px)}
#nav .links{display:flex;gap:30px;align-items:center}
#nav .links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);transition:color .2s}
#nav .links a:hover{color:var(--bone)}
@media (max-width:900px){ #nav .links{display:none} }
@media (max-width:700px){ .xs-hide{display:none} #nav .btn-sm{padding:11px 18px} }
/* Dutch labels are longer than the English ones, and the language switch now sits
   outside .links so it survives the mobile breakpoint. Below 430px the logo and the
   apply button both give ground so the bar never scrolls sideways. */
#nav{flex-wrap:nowrap;min-width:0;max-width:100vw}
/* every full-width fixed bar gets pinned to the viewport, not to the page, or one
   overflowing element widens the page and they all stretch to match it */
#scrollbar{max-width:100vw}
.lang{flex:none}
@media (max-width:430px){
  #nav{gap:10px;padding-left:16px;padding-right:16px}
  #nav .logo{font-size:1.1rem}
  #nav .logo small{display:none}
  #nav .btn-sm{padding:10px 13px;font-size:.62rem}
  .lang{padding:3px 7px;font-size:.58rem}
}

/* --------- buttons --------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:18px 34px;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:transform .3s var(--ease-out),box-shadow .3s;will-change:transform}
.btn .arr{transition:transform .3s var(--ease-out)}
.btn:hover .arr{transform:translateX(5px)}
.btn-fire{background:var(--heat);color:#140A04;box-shadow:0 8px 40px -12px rgba(229,23,15,.55);overflow:hidden}
.btn-fire::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .55s var(--ease-swift)}
.btn-fire:hover::after{left:130%}
.btn-fire:hover{box-shadow:0 14px 54px -10px rgba(229,23,15,.75)}
.btn-ghost{border:1px solid var(--line);color:var(--bone)}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember-hot)}
.btn-sm{padding:12px 22px;font-size:.72rem}

/* --------- marquee seams --------- */
.seam{position:relative;z-index:3;overflow:hidden;padding:26px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(21,17,16,.4)}
.seam-track{display:flex;width:max-content;animation:mq var(--mq-t,26s) linear infinite}
.seam-track>span{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);text-transform:uppercase;white-space:nowrap;padding-right:.6em;color:var(--bone)}
.seam-track>span i{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--ember)}
.seam-track>span em{font-style:normal;color:var(--ember);padding:0 .55em;font-size:.6em;transform:translateY(-.25em);display:inline-block}
.seam.rev .seam-track{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}
/* ============================================================
   ACT 0 — HERO
   ============================================================ */
#hero{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px var(--pad) 0;overflow:hidden}
#hero .halo{position:absolute;z-index:0;left:50%;bottom:-42%;width:130vmax;height:80vmax;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 100%,rgba(229,23,15,.22) 0%,rgba(234,12,20,.1) 38%,transparent 70%);pointer-events:none}
.hero-grid{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%}
.hero-eyebrow{margin-bottom:clamp(22px,4vh,44px)}
.hero-h1{font-family:var(--display);text-transform:uppercase;line-height:.85;font-size:clamp(4.2rem,14.5vw,14.5rem);letter-spacing:.005em}
.hero-h1 .row{display:block;overflow:hidden}
.hero-h1 .row>span{display:inline-block}
.hero-h1 .l{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-out)}
.hero-ready .hero-h1 .l{transform:none}
.hero-h1 .row-2{color:transparent;-webkit-text-stroke:2.5px var(--bone);margin-left:.35em}
.hero-h1 .row-3{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:clamp(30px,5vh,56px);flex-wrap:wrap}
.hero-copy{max-width:46ch;color:var(--ash);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.65}
.hero-copy strong{color:var(--bone);font-weight:600}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
.hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
.hero-proof span{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);display:flex;align-items:center;gap:8px}
.hero-proof span b{color:var(--ember-hot);font-weight:400}

/* rotating seal */
.seal{position:relative;width:clamp(150px,16vw,210px);aspect-ratio:1;flex:none}
.seal svg{width:100%;height:100%;animation:spin 22s linear infinite}
.seal .core{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:clamp(2.2rem,3.4vw,3.2rem);color:var(--ember)}
@keyframes spin{to{transform:rotate(360deg)}}

.scroll-cue{position:absolute;bottom:96px;left:var(--pad);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim);z-index:2}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--ember),transparent);animation:drip 1.8s var(--ease-swift) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){ .scroll-cue{display:none} .hero-h1 .row-2{-webkit-text-stroke-width:1.6px} }

/* ---------- hero: the photo of him, fading into the dark on the right ---------- */
.hero-photo{position:absolute;z-index:1;top:0;right:0;bottom:0;width:min(48vw,720px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 38%),linear-gradient(to top,transparent 0%,#000 30%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 38%),linear-gradient(to top,transparent 0%,#000 30%);mask-composite:intersect}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:.9}
@media (max-width:900px){
  .hero-photo{width:72vw;height:58svh;bottom:auto;top:40px;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 40%),linear-gradient(to top,transparent 0%,#000 40%);
    mask-image:linear-gradient(to right,transparent 0%,#000 40%),linear-gradient(to top,transparent 0%,#000 40%)}
  .hero-photo img{object-position:50% 6%;opacity:.85}
  #hero .hero-eyebrow{max-width:44vw}
}

/* ============================================================
   PROOF BAR — counters
   ============================================================ */
#proof-bar{border-top:1px solid var(--line-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.stat{background:var(--carbon);padding:clamp(26px,3.4vw,48px) clamp(20px,2.6vw,40px);display:flex;flex-direction:column;gap:10px}
.stat .num{font-family:var(--display);font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;color:var(--ember)}
.stat .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim);line-height:1.7}
@media (max-width:900px){ .stats{grid-template-columns:1fr 1fr} }

/* ============================================================
   ACT 1 — THE TRUTH (scroll-scrubbed manifesto)
   ============================================================ */
#truth .manifesto{font-family:var(--body);font-weight:600;font-size:clamp(1.7rem,4.1vw,3.6rem);line-height:1.28;letter-spacing:-.01em;max-width:24ch;margin:0 0 clamp(50px,8vh,90px)}
#truth .manifesto .w{color:var(--bone);opacity:.14;transition:opacity .35s linear}
#truth .manifesto .w.lit{opacity:1}
#truth .manifesto .w.fire{color:var(--ember-hot)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pain{border:1px solid var(--line);background:linear-gradient(180deg,rgba(29,23,20,.55),rgba(21,17,16,.25));padding:34px 30px 38px;border-radius:4px;position:relative;overflow:hidden;transition:border-color .3s,transform .5s var(--ease-out)}
.pain:hover{border-color:rgba(229,23,15,.5);transform:translateY(-6px)}
.pain .x{font-family:var(--display);font-size:2.1rem;color:var(--ember);line-height:1}
.pain h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;margin:18px 0 12px}
.pain p{color:var(--ash);font-size:.95rem}
.pain p b{color:var(--bone);font-weight:600}
.truth-kicker{margin-top:clamp(48px,7vh,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.truth-kicker .d3{max-width:20ch;grid-row:span 2}
.truth-kicker .d3 i{font-style:normal;color:var(--ember)}
.truth-kicker p{color:var(--ash);line-height:1.75;max-width:56ch}
.truth-kicker p b{color:var(--bone);font-weight:600}
@media (max-width:860px){ .truth-kicker{grid-template-columns:1fr} .truth-kicker .d3{grid-row:auto;max-width:24ch} }
@media (max-width:900px){ .pain-grid{grid-template-columns:1fr} }

/* ============================================================
   ACT 2 — METHOD (pillars w/ film frames)
   ============================================================ */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.method-aside{margin-top:clamp(26px,3.5vw,40px);color:var(--ash);font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.7;max-width:60ch}
.pillar{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--soot);display:flex;flex-direction:column;transition:transform .5s var(--ease-out),border-color .3s;will-change:transform}
.pillar:hover{border-color:rgba(255,41,26,.45)}
.frame{position:relative;aspect-ratio:4/3;background:#0E0B09;overflow:hidden}
.frame canvas{width:100%;height:100%}
.frame .tag{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:rgba(239,231,219,.55);text-transform:uppercase;background:rgba(11,9,7,.55);padding:4px 8px;backdrop-filter:blur(4px)}
.pillar-body{padding:28px 26px 34px;display:flex;flex-direction:column;gap:12px;flex:1}
.pillar-body h3{font-family:var(--display);font-weight:400;font-size:2rem;text-transform:uppercase;display:flex;align-items:baseline;gap:12px}
.pillar-body h3 small{font-family:var(--mono);font-size:.6rem;letter-spacing:.25em;color:var(--ember);transform:translateY(-4px)}
.pillar-body p{color:var(--ash);font-size:.95rem}
.pillar-body p b{color:var(--bone);font-weight:600}
.pillar-body .foot{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
@media (max-width:900px){ .method-grid{grid-template-columns:1fr} }

/* ============================================================
   ACT 3 — TRANSFORMATION LAB (morph slider)
   ============================================================ */
#lab .lab-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.lab-stage{position:relative;border:1px solid var(--line);border-radius:8px;background:
  radial-gradient(90% 70% at 50% 105%,rgba(229,23,15,.14),transparent 60%),
  linear-gradient(180deg,#12100E,#0C0A08);
  overflow:hidden}
.lab-stage canvas{width:100%;aspect-ratio:10/11}
.lab-stage .corner{position:absolute;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--ash-dim);text-transform:uppercase}
.lab-stage .c-tl{top:14px;left:16px}.lab-stage .c-tr{top:14px;right:16px;color:var(--ember-hot)}
.lab-slider{margin-top:2px;padding:22px 24px 26px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px}
.lab-slider .lbls{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.lab-slider .lbls b{color:var(--ember-hot);font-weight:400;flex:none}
@media (max-width:640px){ .lab-slider .lbls{font-size:.54rem;letter-spacing:.16em} }
input[type=range].scrub{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:ew-resize}
input[type=range].scrub::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--ember) var(--fill,0%),rgba(239,231,219,.15) var(--fill,0%));border-radius:2px}
input[type=range].scrub::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--heat);margin-top:-14px;border:6px solid #0B0907;box-shadow:0 0 0 1.5px var(--ember),0 6px 24px rgba(229,23,15,.5)}
input[type=range].scrub::-moz-range-track{height:3px;background:rgba(239,231,219,.15);border-radius:2px}
input[type=range].scrub::-moz-range-progress{height:3px;background:var(--ember)}
input[type=range].scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--heat);border:5px solid #0B0907;box-shadow:0 0 0 1.5px var(--ember)}
.lab-metrics{display:flex;flex-direction:column;gap:14px}
.metric{border:1px solid var(--line);border-radius:6px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(21,17,16,.5)}
.metric .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.metric .v{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.3rem);color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.metric .v i{font-style:normal;color:var(--ember);font-size:.65em}
.metric .bar{position:relative;flex:1;height:3px;background:rgba(239,231,219,.12);border-radius:2px;overflow:hidden;min-width:60px}
.metric .bar i{position:absolute;inset:0;background:var(--heat);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .1s linear}
.lab-note{margin-top:6px}
@media (max-width:980px){ #lab .lab-wrap{grid-template-columns:1fr} }

/* ============================================================
   ACT 4 — RESULTS (testimonial marquees)
   ============================================================ */
#results{padding-left:0;padding-right:0;overflow:hidden}
#results .act-head{padding:0 var(--pad);max-width:calc(1280px + 2*var(--pad));margin-left:auto;margin-right:auto}
/* real reviews — a few long ones, sitting still. Three honest reviews read as more
   credible than a scrolling wall of short ones, which is why the marquee is gone. */
#results .act-inner{padding:0 var(--pad);max-width:calc(1280px + 2*var(--pad));margin:clamp(34px,5vh,56px) auto 0}
/* Two reviews, so one column and full-width rows. With a two-column grid the second
   review sat alone beside an empty half. Put the third slot back and this wants
   repeat(2,1fr) again. */
.review-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.5vw,26px)}
/* keep the line length readable now that a card can be the full width of the page */
.review q{max-width:68ch}

/* the panel beside a text-only review. Numbers here come from the reviewer's own
   sentence, never from anywhere else — see the comment on Michael's card. */
.review-aside{flex:none;width:min(34%,300px);align-self:flex-start;border:1px solid var(--line);border-radius:9px;padding:20px 18px;background:rgba(229,23,15,.04)}
.aside-h{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}
/* two columns of equal width, so the bars are directly comparable by eye */
.staff{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.staff-col{display:flex;flex-direction:column;gap:7px}
.staff-when{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.staff-bar{height:8px;border-radius:999px;background:rgba(239,231,219,.1);overflow:hidden}
.staff-bar i{display:block;height:100%;width:calc(var(--p)*100%);border-radius:999px;background:rgba(239,231,219,.28)}
.staff-time{font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--ash);font-variant-numeric:tabular-nums}
.staff-time em{font-style:normal;font-size:.75rem;margin-left:1px}
.staff-lbl{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);margin-top:6px;padding-top:9px;border-top:1px solid var(--line-soft)}
.staff-res{font-size:.86rem;line-height:1.4;color:var(--ash)}
.staff-col.now .staff-bar i{background:var(--heat)}
.staff-col.now .staff-when,.staff-col.now .staff-time,.staff-col.now .staff-res{color:var(--bone)}
.staff-col.now .staff-res{font-weight:600}
.aside-foot{margin-top:14px;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim)}
@media (max-width:900px){ .review-aside{width:100%} }
.review{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(29,23,20,.6),rgba(17,13,11,.65));padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:22px}
.review-wide{grid-column:1 / -1;flex-direction:row;align-items:stretch;gap:clamp(24px,3vw,38px)}
.review-body{display:flex;flex-direction:column;gap:18px;flex:1;justify-content:center}
.review q{quotes:"“" "”";color:var(--ash);font-size:1.02rem;line-height:1.75}
.review-who b{display:block;font-weight:600;font-size:.95rem;color:var(--bone)}
.review-who span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
/* 46% left the text in a tall thin column. The photos are the supporting act here,
   the words are the point, so the pictures get a third and the words get the rest. */
.review-shots{display:flex;gap:12px;flex:none;width:min(34%,300px);align-self:flex-start}
/* 4/5 matches the photographs exactly (1080x1350), so nothing is cropped and the
   matched framing built into the originals survives. At 3/4 the frame sliced 3.3%
   off each side, which was enough to cut an arm off. */
.shot{flex:1;aspect-ratio:4/5;border:2px dashed /* Olaf's pair is still 1080x1350 */ rgba(255,41,26,.55);border-radius:9px;background:repeating-linear-gradient(45deg,rgba(229,23,15,.06) 0 10px,transparent 10px 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px}
.shot-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-hot);font-weight:700}
.shot-ph{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);line-height:1.5}
/* an unfilled slot reads as unfinished on purpose, so it can't ship by accident */
.review-empty{border-style:dashed;border-color:rgba(255,41,26,.4);opacity:.75}
.review-empty .review-who b{color:var(--ember-hot);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:900px){ .review-grid{grid-template-columns:1fr} .review-wide{flex-direction:column} .review-shots{width:100%} }
/* his own before/after, sitting under the portrait in the coach section */
.coach-media{display:flex;flex-direction:column;gap:14px}
.coach-shots{display:flex;gap:12px;margin:0;flex-wrap:wrap}
/* Rolo's pair was re-cropped to 828x1350 on 12 Sep to centre him in each shot, so
   these frames are narrower than Olaf's. Again: frame follows photograph. */
.coach-shots .shot{aspect-ratio:828/1350}
/* a .shot holding a real photo: the image fills the frame, the label sits on top */
.shot-live{position:relative;padding:0;border-style:solid;border-color:var(--line);overflow:hidden}
.shot-live img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.shot-live .shot-tag{position:absolute;left:10px;bottom:10px;z-index:1;background:rgba(10,7,5,.72);backdrop-filter:blur(4px);padding:5px 10px;border-radius:999px}
.coach-shots figcaption{flex-basis:100%;font-size:.78rem;line-height:1.6;color:var(--ash-dim)}

.t-row{display:flex;width:max-content;gap:18px;padding:9px 0;animation:mq var(--t,60s) linear infinite}
.t-row:hover{animation-play-state:paused}
.t-row.rev{animation-direction:reverse}
.t-card{width:min(420px,84vw);flex:none;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,rgba(29,23,20,.6),rgba(17,13,11,.65));padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px}
.t-card .top{display:flex;align-items:center;gap:14px}
.t-card .avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;color:#140A04;background:var(--heat)}
.t-card .avatar.alt{background:linear-gradient(135deg,#EFE7DB,#A2968A);}
.t-card .who b{display:block;font-weight:600;font-size:.95rem;color:var(--bone)}
.t-card .who span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.t-card q{quotes:"“" "”";color:var(--ash);font-size:.98rem;line-height:1.6}
.t-card q b{color:var(--bone);font-weight:600}
.t-card .res{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-hot);border:1px solid rgba(229,23,15,.4);padding:6px 12px;border-radius:999px}
.t-stars{color:var(--ember);letter-spacing:.2em;font-size:.8rem}
/* ============================================================
   ACT 5 — COACH
   ============================================================ */
#coach .coach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.portrait{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0E0B09}
/* the portrait photograph is square (1200x1200), so the frame is square too and
   nothing is cropped. Match the frame to the photograph, never the other way round. */
.portrait canvas{width:100%;aspect-ratio:1/1}
.portrait .tag{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:rgba(239,231,219,.6);text-transform:uppercase;background:rgba(11,9,7,.55);padding:4px 8px}
/* The portrait is daylight on a white wall; the page is near-black and ember. Without
   this it reads as a bright rectangle pasted on. Nothing is done to the photograph
   itself — delete these two rules and the original is back, untouched. */
/* The warmth and contrast are now baked into the file itself (see content/photos/
   originals/ for the untouched version), so this only takes the brightness down a
   touch to sit against the black. Delete it and nothing is lost but that. */
.portrait-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:brightness(.95) saturate(1.02)}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 32%,transparent 38%,rgba(11,9,7,.5) 100%),
             linear-gradient(180deg,transparent 55%,rgba(11,9,7,.45) 100%)}
/* when the photo is missing the artwork already suits the palette, so no grade */
.portrait.no-photo::after{background:none}
.coach-copy{display:flex;flex-direction:column;gap:22px}
.coach-copy .d2 i{font-style:normal;color:transparent;-webkit-text-stroke:1.8px var(--ember)}
.coach-copy p{color:var(--ash);max-width:52ch}
.coach-copy p b{color:var(--bone);font-weight:600}
.coach-quote{border-left:2px solid var(--ember);padding:6px 0 6px 22px;font-weight:600;color:var(--bone);font-size:1.12rem;line-height:1.55;max-width:44ch}
.coach-creds{display:flex;gap:12px;flex-wrap:wrap}
.coach-creds span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.coach-sign{font-family:var(--display);font-size:2rem;color:var(--ember);text-transform:uppercase;transform:rotate(-2deg);display:inline-block}
@media (max-width:980px){ #coach .coach-grid{grid-template-columns:1fr} .portrait{max-width:480px} }

/* ============================================================
   ACT 6 — PROGRAM (sticky horizontal rail)
   ============================================================ */
#program{padding:0}
.rail{position:relative}
.rail-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.rail-head{padding:calc(70px + 2vh) var(--pad) 26px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.rail-head .d2{max-width:16ch}
.rail-progress{flex:1;max-width:280px;height:2px;background:rgba(239,231,219,.12);position:relative;border-radius:2px;min-width:140px}
.rail-progress i{position:absolute;inset:0;background:var(--heat);transform-origin:0 50%;transform:scaleX(0);border-radius:2px}
.rail-track{display:flex;gap:clamp(16px,2vw,28px);padding:10px var(--pad) 40px;will-change:transform;width:max-content}
.phase{width:min(480px,82vw);flex:none;border:1px solid var(--line);border-radius:10px;background:linear-gradient(165deg,rgba(29,23,20,.75),rgba(14,11,9,.9));padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:16px;min-height:min(430px,58svh);position:relative;overflow:hidden}
.phase::after{content:"";position:absolute;inset:auto -20% -55% -20%;height:70%;background:radial-gradient(50% 50% at 50% 100%,rgba(229,23,15,.16),transparent 70%);pointer-events:none}
.phase .ph-num{font-family:var(--display);font-size:clamp(3.4rem,6vw,5.4rem);line-height:.9;color:transparent;-webkit-text-stroke:1.6px rgba(239,231,219,.4)}
.phase.hotcard .ph-num{-webkit-text-stroke-color:var(--ember)}
.phase .ph-wk{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ember-hot)}
.phase h3{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3vw,2.7rem);text-transform:uppercase;line-height:.95}
.phase p{color:var(--ash);font-size:.95rem;max-width:44ch}
.phase p b{color:var(--bone);font-weight:600}
.phase ul{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:14px}
.phase ul li{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);display:flex;gap:10px;align-items:baseline}
.phase ul li::before{content:"▸";color:var(--ember);flex:none}

/* ============================================================
   ACT 6.5 — DELIVERABLES
   ============================================================ */
.kit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.kit{background:var(--carbon);padding:26px 24px 30px;display:flex;flex-direction:column;gap:12px;transition:background .3s}
.kit:hover{background:var(--soot)}
.kit .chk{width:26px;height:26px;border-radius:50%;border:1px solid var(--ember);display:grid;place-items:center;color:var(--ember);font-size:.75rem}
.kit h4{font-weight:600;font-size:.98rem;color:var(--bone)}
.kit p{color:var(--ash-dim);font-size:.83rem;line-height:1.55}
@media (max-width:1050px){ .kit-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kit-grid{grid-template-columns:1fr} }

/* ============================================================
   ACT 7 — PRICING
   ============================================================ */
.price-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;perspective:1400px;max-width:560px;margin:0 auto}
.plan{position:relative;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(29,23,20,.5),rgba(14,11,9,.7));padding:36px 32px 40px;display:flex;flex-direction:column;gap:20px;transition:transform .4s var(--ease-out),border-color .3s,box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.plan:hover{border-color:rgba(255,41,26,.4)}
/* the price card lifts towards you a touch on hover; it no longer tilts after the mouse */
@media (hover:hover) and (prefers-reduced-motion:no-preference){.plan:hover{transform:scale(1.015)}.plan.hot:hover{box-shadow:0 40px 110px -30px rgba(229,23,15,.5)}}
.plan.hot{border-color:rgba(229,23,15,.65);background:linear-gradient(180deg,rgba(40,20,10,.55),rgba(16,10,7,.85));box-shadow:0 30px 90px -30px rgba(229,23,15,.35)}
.plan .flag{position:absolute;top:-13px;left:32px;background:var(--heat);color:#140A04;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding:6px 14px;border-radius:999px}
.plan h3{font-family:var(--display);font-weight:400;font-size:1.9rem;text-transform:uppercase}
.plan .for{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-top:-12px}
.plan .price{display:flex;align-items:baseline;gap:8px}
.plan .price b{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,4vw,3.6rem);color:var(--bone);font-variant-numeric:tabular-nums}
.plan.hot .price b{background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .price span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ash-dim);text-transform:uppercase}
.plan .price s{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);color:var(--ash-dim);text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line-soft);padding-top:20px}
.plan ul li{font-size:.9rem;color:var(--ash);position:relative;padding-left:24px}
.plan ul li::before{content:"+";color:var(--ember);font-weight:800;position:absolute;left:0;top:0}
.plan ul li.off{color:var(--ash-dim);text-decoration:line-through}
.plan ul li.off::before{content:"—";color:var(--ash-dim);text-decoration:none}
.plan ul li b{color:var(--bone);font-weight:600}
.plan .cta{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:12px}
.plan .cta .btn{justify-content:center}
.plan .spots{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-hot);text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.plan .spots::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:980px){ .price-grid{max-width:520px} }
/* visible marker on anything still standing in for real material */
.placeholder-note{margin-top:18px;color:var(--ember-hot);border:1px dashed rgba(255,41,26,.5);border-radius:8px;padding:10px 14px;display:inline-block;background:rgba(229,23,15,.05)}

.plan .stop-note{font-size:.82rem;line-height:1.65;color:var(--ash-dim);text-align:center;max-width:40ch;margin:0 auto}

/* fit check — the "who this isn't for" filter, echoed next to the price */
.fit-check{margin-top:clamp(30px,4vh,48px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,24px)}
.fit-col{border:1px solid var(--line);border-radius:12px;padding:clamp(22px,3vw,30px)}
.fit-col p{color:var(--ash);line-height:1.7;font-size:.95rem;margin-top:12px}
.fit-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase}
.fit-no{border-color:rgba(239,231,219,.12)}
.fit-no .fit-h{color:var(--ash-dim)}
.fit-yes{border-color:rgba(255,41,26,.4);background:rgba(229,23,15,.04)}
.fit-yes .fit-h{color:var(--ember-hot)}
@media (max-width:760px){ .fit-check{grid-template-columns:1fr} }

/* protocol — the free PDF, given a permanent home rather than only an exit pop-up
   (exit intent needs a mouse, so phones never saw it) */
#protocol{padding-top:0}
.protocol-box{border:1px solid rgba(255,41,26,.35);border-radius:14px;padding:clamp(28px,4vw,52px);background:linear-gradient(135deg,rgba(229,23,15,.07),transparent 60%);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center}
.protocol-copy .d3{margin:12px 0 16px;max-width:20ch}
.protocol-copy .d3 i{font-style:normal;color:var(--ember)}
.protocol-copy p{color:var(--ash);line-height:1.75;margin-bottom:12px}
.protocol-form label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);display:block;margin-bottom:12px}
.protocol-form .xrow{display:flex;gap:10px;flex-wrap:wrap}
.protocol-form input{flex:1;min-width:190px;background:rgba(11,9,7,.75);border:1px solid var(--line);border-radius:8px;padding:15px 16px;color:var(--bone);font-size:.95rem}
.protocol-form input:focus{outline:none;border-color:var(--ember)}
.protocol-form .done-msg{display:none;margin-top:12px;color:var(--ember-hot);font-size:.9rem}
.protocol-form .done-msg.on{display:block}
.protocol-form .mono-note{margin-top:12px}
@media (max-width:860px){ .protocol-box{grid-template-columns:1fr} }

/* guarantee */
.guarantee{margin-top:clamp(40px,6vh,70px);border:1px dashed rgba(255,41,26,.45);border-radius:12px;padding:clamp(28px,4vw,48px);display:flex;gap:clamp(24px,4vw,56px);align-items:center;background:rgba(229,23,15,.04)}
.guarantee .seal{width:clamp(110px,12vw,150px)}
.guarantee h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.5rem);text-transform:uppercase;margin-bottom:10px}
.guarantee p{color:var(--ash);max-width:62ch}
.guarantee p b{color:var(--bone);font-weight:600}
@media (max-width:760px){ .guarantee{flex-direction:column;text-align:left;align-items:flex-start} }

/* ============================================================
   ACT 8 — FAQ
   ============================================================ */
#faq .act-inner{max-width:900px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:26px 4px;font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--bone);transition:color .2s}
.faq-q:hover{color:var(--ember-hot)}
.faq-q .ico{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1rem;color:var(--ember);transition:transform .4s var(--ease-out),background .3s}
.faq-item.open .faq-q .ico{transform:rotate(45deg);background:rgba(229,23,15,.12)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{color:var(--ash);padding:0 4px 28px;max-width:64ch}
.faq-a p b{color:var(--bone);font-weight:600}

/* ============================================================
   ACT 9 — APPLY (multi-step)
   ============================================================ */
#apply{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}
#apply .bigword{position:absolute;inset:auto 0 -2vw 0;font-family:var(--display);font-size:clamp(8rem,26vw,26rem);line-height:.78;text-transform:uppercase;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(239,231,219,.08);pointer-events:none;user-select:none;white-space:nowrap}
#apply .act-inner{position:relative;z-index:2;width:100%}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center}
.apply-copy{display:flex;flex-direction:column;gap:24px}
.apply-copy .d2 i{font-style:normal;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent}
.apply-points{display:flex;flex-direction:column;gap:14px}
.apply-points span{display:block;position:relative;padding-left:30px;color:var(--ash);font-size:.95rem}
.apply-points span::before{content:"→";color:var(--ember);position:absolute;left:0;top:0}
.apply-points span b{color:var(--bone);font-weight:600}

.form-shell{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(29,23,20,.8),rgba(13,10,8,.9));backdrop-filter:blur(8px);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}
.form-shell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--heat)}
.form-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.form-top .mono-note{color:var(--ash)}
.steps-dots{display:flex;gap:8px}
.steps-dots i{width:26px;height:3px;background:rgba(239,231,219,.15);border-radius:2px;transition:background .3s}
.steps-dots i.on{background:var(--ember)}
.fstep{display:none;flex-direction:column;gap:20px;animation:stepin .45s var(--ease-out)}
.fstep.on{display:flex}
@keyframes stepin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.fstep h3{font-family:var(--display);font-weight:400;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em}
/* body-type switch on the arc slider */
.sex-switch{position:absolute;top:14px;right:14px;display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(10,7,5,.6);backdrop-filter:blur(6px);z-index:2}
.sex-btn{border:0;background:none;border-radius:999px;padding:7px 15px;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim);cursor:pointer;transition:all .25s}
.sex-btn:hover{color:var(--bone)}
.sex-btn.on{background:var(--heat);color:#140A04;font-weight:700}
@media (max-width:520px){ .sex-switch{top:auto;bottom:calc(100% + 10px);right:0} }

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin:-8px 0 0}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:16px 18px;transition:border-color .25s}
.check:hover{border-color:var(--ember-hot)}
.check input{appearance:none;width:20px;height:20px;flex:none;margin-top:1px;border:1px solid var(--ash-dim);border-radius:5px;cursor:pointer;transition:all .2s}
.check input:checked{background:var(--heat);border-color:transparent}
.check input:checked::after{content:"✓";display:grid;place-items:center;height:100%;color:#140A04;font-size:.8rem;font-weight:800}
.check span{font-size:.9rem;line-height:1.65;color:var(--ash)}
.chip{border:1px solid var(--line);border-radius:999px;padding:13px 22px;font-size:.85rem;font-weight:600;color:var(--ash);transition:all .25s;cursor:pointer}
.chip:hover{border-color:var(--ember-hot);color:var(--bone)}
.chip.sel{background:var(--heat);color:#140A04;border-color:transparent;font-weight:800}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.field input,.field textarea{background:rgba(11,9,7,.7);border:1px solid var(--line);border-radius:8px;padding:15px 16px;color:var(--bone);font-size:.95rem;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember)}
.field textarea{resize:vertical;min-height:84px}
.chip-other{width:100%;background:rgba(11,9,7,.7);border:1px solid var(--ember);border-radius:8px;padding:13px 16px;color:var(--bone);font-size:.95rem;margin-top:10px}
.chip-other:focus{outline:none;border-color:var(--ember-hot)}
.chip-other[hidden]{display:none}
.metric .v.v-text{font-family:var(--display);font-weight:400;letter-spacing:.03em;text-transform:uppercase;color:var(--ember-hot)}
.ferr{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:#FF4A50;min-height:1em}
.fnav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:6px}
.fback{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);transition:color .2s}
.fback:hover{color:var(--bone)}
.fsuccess{display:none;flex-direction:column;gap:18px;text-align:left;animation:stepin .5s var(--ease-out)}
.fsuccess.on{display:flex}
.fsuccess .flame{font-family:var(--display);font-size:3rem;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.fsuccess h3{font-family:var(--display);font-weight:400;font-size:2rem;text-transform:uppercase}
.fsuccess p{color:var(--ash)}
.fsuccess p b{color:var(--bone)}
.fsuccess .btn{align-self:flex-start}
.fsuccess .spam-note{font-size:.86rem;color:var(--ash-dim)}
@media (max-width:980px){ .apply-grid{grid-template-columns:1fr} }

/* ============================================================
   FOOTER
   ============================================================ */
footer{position:relative;z-index:3;border-top:1px solid var(--line-soft);padding:0 0 40px;overflow:hidden}
.foot-marquee{overflow:hidden;padding:clamp(20px,4vh,44px) 0;border-bottom:1px solid var(--line-soft)}
.foot-marquee .seam-track>span{font-size:clamp(3rem,9vw,8rem);color:transparent;-webkit-text-stroke:1.5px rgba(239,231,219,.25)}
.foot-marquee .seam-track>span em{-webkit-text-stroke:0;color:var(--ember);font-size:.5em}
.foot-grid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding:44px var(--pad) 30px;max-width:1280px;margin:0 auto;width:100%}
.foot-grid .col{display:flex;flex-direction:column;gap:12px}
.foot-grid h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:6px}
.foot-grid a{color:var(--ash);font-size:.9rem;transition:color .2s}
.foot-grid a:hover{color:var(--ember-hot)}
.fine{padding:10px var(--pad) 0;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.fine p{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ash-dim);line-height:1.8}

/* sticky mobile CTA */
#mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:105;display:none;transform:translateY(140%);transition:transform .5s var(--ease-out)}
#mobile-cta.show{transform:none}
#mobile-cta .btn{width:100%;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.6),0 8px 40px -12px rgba(229,23,15,.55)}
@media (max-width:900px) and (pointer:coarse){ #mobile-cta{display:block} }
/* The sticky apply bar sized itself to its own text, so the longer Dutch label made it
   wider than the phone and dragged the whole page (and the fixed nav) out with it.
   min-width:0 lets it shrink; the narrow-screen rule keeps the words readable. */
#mobile-cta{min-width:0;max-width:calc(100vw - 24px)}
#mobile-cta .btn{min-width:0;white-space:nowrap;overflow:hidden}
@media (max-width:430px){ #mobile-cta .btn{padding:14px 12px;font-size:.64rem;letter-spacing:.12em} }

/* exit-intent modal */
#exit-modal{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;padding:20px}
#exit-modal.show{display:flex}
#exit-modal .veil{position:absolute;inset:0;background:rgba(5,3,2,.8);backdrop-filter:blur(6px)}
#exit-modal .box{position:relative;max-width:520px;width:100%;border:1px solid rgba(229,23,15,.5);border-radius:14px;background:linear-gradient(180deg,#1D1714,#0C0A08);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:16px;animation:stepin .4s var(--ease-out)}
#exit-modal h3{font-family:var(--display);font-weight:400;font-size:2rem;text-transform:uppercase;line-height:.95}
#exit-modal h3 i{font-style:normal;color:var(--ember)}
#exit-modal p{color:var(--ash);font-size:.93rem}
#exit-modal .xrow{display:flex;gap:10px}
#exit-modal input{flex:1;background:rgba(11,9,7,.7);border:1px solid var(--line);border-radius:999px;padding:13px 20px;color:var(--bone);font-size:.9rem}
#exit-modal input:focus{outline:none;border-color:var(--ember)}
#exit-modal .close{position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ash-dim)}
#exit-modal .close:hover{color:var(--bone)}
#exit-modal .done-msg{display:none;color:var(--ember-hot);font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}

/* ============================================================
   reduced motion + small screens
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .seam-track,.t-row,.seal svg,.scroll-cue::after,.plan .spots::before{animation:none !important}
  [data-reveal]{transition:none;opacity:1;transform:none}
  .hline>span,.hero-h1 .l{transition:none;transform:none}
  #loader{display:none}
  #truth .manifesto .w{opacity:1}
}
@media (max-width:640px){
  .act{padding-left:18px;padding-right:18px}
  .hero-foot{margin-top:26px}
  .seal{display:none}
  .stat .num{font-size:2.2rem}
  #apply{padding-top:90px;padding-bottom:120px}
}
/* reduced-motion fallback: rail becomes a native horizontal scroller */
body.rm .rail{height:auto !important}
body.rm .rail-sticky{position:static;height:auto;overflow:visible}
body.rm .rail-track{overflow-x:auto;transform:none !important;width:auto;max-width:100%}

/* language switch. A visible choice, never an automatic redirect based on where
   somebody happens to be — see business/decisions.md, 2 Sep 2026. */
.lang{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em}
.lang:hover{border-color:var(--ember-hot);color:var(--bone)}

/* ---------- price inside the application form ---------- */
.form-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.form-price s{font-family:var(--display);font-size:1.5rem;color:var(--ash-dim);text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.form-price b{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;background:var(--heat);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.form-price span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.foot-grid .mono-note s{text-decoration-thickness:1px}

/* ---------- consent tickbox ---------- */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:6px;cursor:pointer;font-size:.85rem;line-height:1.55;color:var(--ash)}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin-top:2px;border:1px solid var(--ash);border-radius:4px;background:rgba(11,9,7,.7);display:grid;place-content:center;cursor:pointer;transition:border-color .2s,background .2s}
.consent input::after{content:"";width:10px;height:6px;border:solid #140A04;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.consent input:checked{background:var(--heat);border-color:transparent}
.consent input:checked::after{opacity:1}
.consent input:focus-visible{outline:2px solid var(--ember-hot);outline-offset:2px}
.consent a{color:var(--bone);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.consent a:hover{color:var(--ember-hot)}

/* ---------- reviews: who they are ---------- */
.review-disclose{max-width:62ch;margin-top:18px}

/* ---------- footer: trader identity ---------- */
.fine .trader{color:var(--ash)}
.fine .trader a{color:var(--ash);text-decoration:underline;text-underline-offset:3px}
.fine .trader a:hover{color:var(--ember-hot)}
.addr-gap{color:var(--ember-hot);border:1px dashed rgba(255,41,26,.5);border-radius:4px;padding:0 6px}

/* ---------- legal pages (privacy, terms) ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:40px var(--pad) 80px}
.legal-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--pad);border-bottom:1px solid var(--line-soft)}
.legal-top .logo{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em;color:var(--bone)}
.legal-top .logo b{color:var(--ember)}
.legal-top .logo small{font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;margin-left:8px;color:var(--ash-dim)}
.legal-top nav{display:flex;gap:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.legal-top nav a{color:var(--ash)}
.legal-top nav a:hover{color:var(--ember-hot)}
.legal-page h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,7vw,4rem);line-height:1;margin:18px 0 10px}
.legal-page .updated{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:28px}
.legal-page h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.01em;margin:40px 0 12px;color:var(--bone)}
.legal-page h3{font-size:1rem;font-weight:800;margin:24px 0 8px}
.legal-page p,.legal-page li{color:var(--ash);font-size:.98rem;line-height:1.75}
.legal-page p+p{margin-top:12px}
.legal-page ul{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:6px}
.legal-page strong{color:var(--bone)}
.legal-page a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.legal-page a:hover{color:var(--ember-hot)}
.legal-page table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.9rem}
.legal-page th,.legal-page td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-soft);color:var(--ash)}
.legal-page th{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);font-weight:400}
.legal-page td:first-child{color:var(--bone);font-weight:600;white-space:nowrap}
@media (max-width:560px){.legal-page td:first-child{white-space:normal}}
.legal-foot{max-width:760px;margin:0 auto;padding:24px var(--pad) 40px;border-top:1px solid var(--line-soft)}
.legal-foot p{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ash-dim);line-height:1.8}

/* ---------- withdrawal page ---------- */
.wbox{border:1px solid var(--line);background:linear-gradient(180deg,rgba(29,23,20,.55),rgba(21,17,16,.25));border-radius:6px;padding:28px 26px;margin:28px 0 8px}
.wstep{display:none;flex-direction:column;gap:16px}
.wstep.on{display:flex}
.wstep .field input,.wstep .field textarea{background:rgba(11,9,7,.7);border:1px solid var(--line);border-radius:8px;padding:13px 16px;color:var(--bone);font-family:var(--body);font-size:.95rem;width:100%}
.wstep .field input:focus,.wstep .field textarea:focus{outline:none;border-color:var(--ember)}
.wstep .field textarea{min-height:90px;resize:vertical}
.wstep h2{margin-top:0}
.wstep .flame{font-size:1.6rem;color:var(--ember)}
.wstep table td:first-child{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);font-weight:400;padding-right:18px}
.wnav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.wnav .fback{color:var(--ash);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:none;border:0}
.wnav .fback:hover{color:var(--ember-hot)}
.wstep .btn{align-self:flex-start}

/* ---------- hero: the coach's face ---------- */
.hero-face{display:flex;align-items:center;gap:14px;margin-top:28px}
.hero-face img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,41,26,.55);box-shadow:0 6px 24px -10px rgba(229,23,15,.6)}
.hero-face div{display:flex;flex-direction:column;gap:2px}
.hero-face b{font-size:.92rem;font-weight:600;color:var(--bone)}
.hero-face span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim)}

/* ---------- phone readability and tap targets (4 Oct 2026) ----------
   The phone check found labels as small as 8.6px and footer links 11-23px tall.
   Nothing here changes the design; it only stops text being too small to read
   and links being too small to hit with a thumb. */
@media (max-width:640px){
  .lab-slider .lbls{font-size:.66rem;letter-spacing:.12em}
  .frame .tag,.portrait .tag,.lab-stage .corner{font-size:.66rem}
  .fine p{font-size:.7rem}
  .sex-btn{padding:11px 16px}
  .lang{padding:9px 12px;font-size:.66rem}
  .foot-grid .col a{display:block;padding:9px 0}
  .fine .trader a{display:inline-block;padding:8px 0}
}

/* ---------- folded sections (4 Oct 2026, his yes on the v3-folds mock-up) ----------
   The first sentence of a section stays open; the rest waits behind a + bar,
   so the page is about a fifth shorter on a phone. */
.fold-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;margin-top:28px;padding:20px 22px;border:1px solid var(--line);border-radius:6px;background:rgba(21,17,16,.55);font-weight:600;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--bone);cursor:pointer;transition:border-color .3s,color .2s}
.fold-btn:hover{border-color:var(--ember);color:var(--ember-hot)}
.fold-btn .ico{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1rem;color:var(--ember);transition:transform .4s var(--ease-out),background .3s}
.fold-btn[aria-expanded="true"] .ico{transform:rotate(45deg);background:rgba(229,23,15,.12)}
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.fold.open{grid-template-rows:1fr}
.fold>div{overflow:hidden;min-height:0}
.fold.open>div{padding-top:28px}

/* ---------- back to top ---------- */
#to-top{position:fixed;right:16px;bottom:24px;z-index:106;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(21,17,16,.82);border:1px solid var(--line);color:var(--bone);font-size:1.1rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,border-color .2s}
#to-top.show{opacity:1;transform:none;pointer-events:auto}
#to-top:hover{border-color:var(--ember);color:var(--ember-hot)}
@media (max-width:900px){ #to-top{bottom:86px} }

/* the first line of the "Me" section: who he is, before the story (his request, 18 Oct) */
.coach-copy .coach-intro{font-size:1.16em;line-height:1.5;color:var(--bone);font-weight:500}