/* FIDE PROCESSUI, concept E "the film" (2026-10-24 night), layered on concept D's style.css (D stays the family: black, gold, cream; Sora and Instrument Sans).
   What E adds: page curtains, a title card on the first visit, scenes that settle (picture first, then words), a live chart on canvas, the trailer slot,
   a sound switch (off by default), lit glass read by its edge, a gold hairline that draws, grain. Transform, opacity, filter and clip-path only. */
:root{
  --void:#262219;--void2:#2E2A21;--void3:#36312A;
  --ease-film:cubic-bezier(.16,1,.3,1);--ease-cut:cubic-bezier(.76,0,.24,1);
  --t-scene:1.6s;--t-word:.9s;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--black)}

/* ---------- the arrival curtain (CSS only, so nothing waits on the script) and the leaving curtain ---------- */
html.arrive body::before{content:"";position:fixed;inset:0;z-index:300;background:var(--void);pointer-events:none;animation:c-lift .62s var(--ease-cut) .06s forwards}
html.arrive body::after{content:"";position:fixed;left:50%;top:50%;z-index:301;width:min(48vw,420px);height:1px;background:var(--gold-hi);transform:translate(-50%,-50%);pointer-events:none;animation:c-line-out .5s ease-out forwards}
@keyframes c-lift{to{transform:translateY(-101%)}}
@keyframes c-line-out{to{opacity:0;width:0}}
.curtain{position:fixed;inset:0;z-index:300;background:var(--void);transform:translateY(101%);pointer-events:none;display:grid;place-items:center}
.curtain.go{transform:none;transition:transform .42s var(--ease-cut)}
.curtain .c-line{position:absolute;left:50%;top:50%;height:1px;width:0;background:var(--gold-hi);transform:translate(-50%,-50%)}
.curtain.go .c-line{width:min(48vw,420px);transition:width .36s var(--ease-film) .1s}
.curtain .c-mark{font:500 .8rem var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--paper);opacity:0;transform:translateY(.8rem)}
.curtain.go .c-mark{opacity:1;transform:none;transition:opacity .25s ease .16s,transform .3s var(--ease-film) .16s}

/* ---------- the title card, first visit of a session on the home page only ---------- */
.titlecard{position:fixed;inset:0;z-index:310;pointer-events:none;display:none}
html.first .titlecard{display:block}
.titlecard .tc-top,.titlecard .tc-bot{position:absolute;left:0;right:0;height:50.5%;background:var(--void)}
.titlecard .tc-top{top:0;animation:tc-up .7s var(--ease-cut) .95s forwards}
.titlecard .tc-bot{bottom:0;animation:tc-down .7s var(--ease-cut) .95s forwards}
.titlecard .tc-line{position:absolute;left:50%;top:50%;height:1px;width:0;background:var(--gold-hi);transform:translate(-50%,-50%);box-shadow:0 0 22px 2px rgba(233,201,143,.55);animation:tc-line .55s var(--ease-film) .08s forwards,tc-line-out .5s ease-in .95s forwards}
.titlecard .tc-mark{position:absolute;left:0;right:0;top:calc(50% - 2.6rem);text-align:center;font:500 .82rem var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--paper);opacity:0;animation:tc-mark .45s ease-out .3s forwards,tc-mark-out .25s ease-in .85s forwards}
.titlecard .tc-sub{position:absolute;left:0;right:0;top:calc(50% + 1.4rem);text-align:center;font:400 .62rem var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);opacity:0;animation:tc-mark .45s ease-out .42s forwards,tc-mark-out .25s ease-in .85s forwards}
@keyframes tc-line{to{width:min(70vw,640px)}}
@keyframes tc-line-out{to{width:120vw;opacity:0}}
@keyframes tc-mark{to{opacity:1}}
@keyframes tc-mark-out{to{opacity:0}}
@keyframes tc-up{to{transform:translateY(-101%)}}
@keyframes tc-down{to{transform:translateY(101%)}}
html.first .hero .h-pic img{animation-delay:1.05s}
html.first .hero [data-w]{--base:1.25s}

/* ---------- header: the sound switch and the scroll hairline ---------- */
.top .wrap{gap:1rem}
.top.solid{background:rgba(38,34,25,0.53);border-bottom-color:rgba(208,168,136,.16)}
.top .progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-hi);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.85;pointer-events:none}
.snd{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;min-width:44px;padding:.35rem .9rem;border:1px solid rgba(208,168,136,.4);border-radius:var(--pill);background:rgba(38,34,25,0.29);color:var(--paper2);font:500 .78rem var(--body);cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;flex:0 0 auto}
.snd:hover{border-color:var(--gold-hi);color:var(--paper)}
.snd[aria-pressed="true"]{color:var(--paper);border-color:var(--gold2)}
.snd-ico{display:inline-flex;align-items:center;gap:2px;height:16px}
.snd-ico svg{width:16px;height:16px;display:block}
.snd-ico .wave{display:none}.snd[aria-pressed="true"] .snd-ico .wave{display:inline}.snd[aria-pressed="true"] .snd-ico .x{display:none}
.snd-ico i{display:none;width:2px;height:4px;border-radius:1px;background:currentColor;transition:height .2s ease}
.snd[aria-pressed="true"] .snd-ico i{display:block}
.snd[aria-pressed="true"] .snd-ico i{background:var(--gold-hi);animation:eq 1.1s ease-in-out infinite}
.snd[aria-pressed="true"] .snd-ico i:nth-child(2){animation-delay:-.3s}.snd[aria-pressed="true"] .snd-ico i:nth-child(3){animation-delay:-.6s}.snd[aria-pressed="true"] .snd-ico i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}

/* ---------- grain over every scene ---------- */
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");background-size:220px 220px}

/* ---------- a scene: the picture settles first, then the words, then the action ---------- */
.js [data-w]{opacity:0;transform:translate3d(0,22px,0);filter:blur(10px)}
.js .in [data-w],.js [data-w].in{opacity:1;transform:none;filter:none;transition:opacity var(--t-word) var(--ease-film),transform var(--t-word) var(--ease-film),filter var(--t-word) var(--ease-film);transition-delay:calc(var(--base,.35s) + var(--d,0) * 90ms)}
.js [data-pic] img{transform:scale(1.16);opacity:.25}
.js .in [data-pic] img,.js [data-pic].in img{transform:scale(1);opacity:1;transition:transform 2.2s var(--ease-film),opacity 1.2s ease}
.js [data-shot]{clip-path:inset(0 100% 0 0 round var(--r-s));transform:translate3d(30px,0,0) scale(1.02)}
.js .in [data-shot],.js [data-shot].in{clip-path:inset(0 0 0 0 round var(--r-s));transform:none;transition:clip-path 1.15s var(--ease-cut),transform 1.4s var(--ease-film);transition-delay:calc(var(--base,.2s) + var(--d,0) * 90ms)}
.js [data-draw]{transform:scaleX(0);transform-origin:0 50%}
.js .in [data-draw],.js [data-draw].in{transform:scaleX(1);transition:transform 1.4s var(--ease-film) .2s}

/* a lit panel: an edge of light, the inside dark glass, a sweep of light that crosses it */
.lit{position:relative;border-radius:var(--r);background:linear-gradient(180deg,rgba(28,26,22,.86),rgba(14,13,11,.92));border:1px solid rgba(233,201,143,.28);box-shadow:inset 0 1px 0 rgba(233,201,143,.35),0 40px 90px rgba(0,0,0,.55);overflow:hidden;isolation:isolate}
.lit::before{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:.9}
.lit::after{content:"";position:absolute;inset:-60% -30%;background:linear-gradient(105deg,transparent 45%,rgba(233,201,143,.12) 50%,transparent 55%);transform:translateX(-70%);animation:sweep 9s ease-in-out infinite;pointer-events:none;z-index:3}
@keyframes sweep{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}

/* a screen of the floor shown as a lit object */
.shot{position:relative;display:block;margin:0;border-radius:var(--r-s);overflow:hidden;background:var(--void2);border:1px solid rgba(233,201,143,.4);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 50px 110px rgba(0,0,0,.6)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.shot::after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 46%,rgba(233,201,143,.16) 50%,transparent 54%);transform:translateX(-60%);animation:sweep 10s ease-in-out infinite;pointer-events:none}
.beam{position:absolute;pointer-events:none;z-index:0;width:70vw;height:120%;top:-30%;left:30%;background:radial-gradient(ellipse 40% 60% at 50% 0,rgba(233,201,143,.16),transparent 70%);transform:rotate(-12deg)}

/* ---------- HOME: the hero ---------- */
.hero{background:var(--void);padding:0;min-height:100svh;display:flex;flex-direction:column}
.hero .h-pic{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .h-pic picture,.hero .h-pic img{position:absolute;inset:-6% -2%;width:104%;height:112%;object-fit:cover;object-position:50% 60%}
.js .hero .h-pic img{animation:push 2.6s var(--ease-film) .15s both,drift 26s ease-in-out 2.8s infinite alternate}
@keyframes push{from{transform:scale(1.2);opacity:0;filter:brightness(.4)}to{transform:scale(1.04);opacity:1;filter:none}}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.hero .h-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,25,0.54) 0,rgba(38,34,25,0.45) 38%,rgba(38,34,25,0.14) 70%,rgba(38,34,25,0.26) 100%),linear-gradient(180deg,rgba(38,34,25,0.38) 0,rgba(12,11,9,0) 26%,rgba(12,11,9,0) 64%,var(--void) 100%)}
.hero-grid{flex:1;align-items:center;padding:8.2rem 0 2rem;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;z-index:3}
.hero h1{font-size:clamp(2.5rem,4.15vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:1.4rem}
.hero .lede{font-size:1.18rem;color:var(--paper);max-width:46ch;margin-bottom:2.1rem}
.hero .row .btn{min-width:13rem}
.btn.play{gap:.7rem}
.btn.play::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.hero-tape{margin-top:0;position:relative;z-index:3;border-color:rgba(208,168,136,.14)}

/* the live chart: the floor's own NQ candles replayed, a zone, the entry, the stop, the target */
.live{margin:0;padding:1rem 1rem 1.1rem;transform-origin:50% 100%}
.js .live{opacity:0;transform:perspective(1400px) rotateX(10deg) translate3d(0,48px,0);filter:blur(6px)}
.js .in .live{opacity:1;transform:none;filter:none;transition:opacity 1.2s var(--ease-film),transform 1.6s var(--ease-film),filter 1.2s var(--ease-film);transition-delay:calc(var(--base,.35s) + 420ms)}
.live-bar{display:flex;align-items:center;gap:.6rem;padding:.1rem .2rem .8rem;font:500 .72rem var(--mono);letter-spacing:.12em;color:var(--paper2)}
.live-bar b{color:var(--gold-hi);font-weight:500}
.live-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 4px rgba(233,201,143,.16);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.live canvas{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;background:var(--void)}
.live figcaption{margin:.9rem .2rem 0;font-size:.92rem;line-height:1.5;color:var(--paper2);max-width:none}

/* ---------- HOME: the film (the trailer slot) ---------- */
.film{background:var(--void);position:relative;overflow:hidden;padding:7rem 0 8rem}
.film-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:end;margin-bottom:3rem;position:relative;z-index:1}
.film-head p{margin:0;font-size:1.12rem;color:var(--paper2)}
.reel{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--void2);border:1px solid rgba(233,201,143,.3);box-shadow:0 60px 140px rgba(0,0,0,.7);z-index:1}
.reel video,.reel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel>img{transition:opacity .6s ease}
.reel.playing>img{opacity:0}
.reel::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(38,34,25,0.32));pointer-events:none}
.reel-words{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.4rem);z-index:2;pointer-events:none;font:600 clamp(2rem,6.4vw,6rem)/1 var(--display);letter-spacing:-.04em;color:var(--paper);text-shadow:0 6px 40px rgba(0,0,0,.6)}
.reel-words .reel-play{pointer-events:auto}
.reel-play{width:clamp(64px,7vw,104px);height:clamp(64px,7vw,104px);border-radius:50%;border:1px solid var(--gold-hi);background:rgba(38,34,25,0.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease-film),background .3s ease;flex:0 0 auto;color:var(--gold-hi)}
.reel-play::before{content:"";width:0;height:0;margin-left:6px;border-left:20px solid currentColor;border-top:12px solid transparent;border-bottom:12px solid transparent}
.reel-play:hover{transform:scale(1.08);background:rgba(208,168,136,.25)}
.reel.playing .reel-words{opacity:0;transition:opacity .4s ease}
.reel.nofilm .reel-play{display:none}
.reel.nofilm .reel-words{display:none}
.reel-ctl{position:absolute;right:1rem;bottom:1rem;z-index:3;min-height:44px;min-width:44px;padding:.4rem 1rem;border-radius:var(--pill);border:1px solid rgba(233,201,143,.5);background:rgba(38,34,25,0.34);color:var(--paper);font:500 .8rem var(--body);cursor:pointer;display:none}
.reel.playing .reel-ctl{display:inline-flex;align-items:center}
.js .film .reel{opacity:0;transform:scale(.92);filter:brightness(.4)}
.js .film.in .reel{opacity:1;transform:none;filter:none;transition:opacity 1.2s ease,transform 1.8s var(--ease-film),filter 1.8s ease}

/* ---------- HOME: the climb, the three ranks (a held scene on the desktop) ---------- */
.climb{position:relative;background:var(--void);padding:0}
.climb-track{position:relative;height:330vh}
.climb-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.climb-pic{position:absolute;inset:0;z-index:0}
.climb-pic img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:scale(calc(1.18 - var(--cp,0) * .14)) translate3d(0,calc(var(--cp,0) * -2%),0);transform-origin:30% 30%;will-change:transform}
.climb-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,25,0.53) 0,rgba(38,34,25,0.42) 40%,rgba(38,34,25,0.32) 100%),linear-gradient(180deg,var(--void) 0,rgba(12,11,9,0) 18%,rgba(12,11,9,0) 82%,var(--void) 100%)}
.climb-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:center;width:min(1280px,100% - 2rem);margin:0 auto}
.climb h2{font-size:clamp(2rem,3.6vw,3.3rem);margin-bottom:1rem}
.climb .lede{color:var(--paper2);margin-bottom:2.2rem}
.ranks{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative;display:grid;gap:1.6rem}
.ranks::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:rgba(208,168,136,.22)}
.ranks::after{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:var(--gold-hi);box-shadow:0 0 12px rgba(233,201,143,.6);transform-origin:50% 0;transform:scaleY(var(--cp,0))}
.ranks li{position:relative;opacity:.38;transition:opacity .5s ease,transform .6s var(--ease-film);transform:translate3d(0,0,0)}
.ranks li::before{content:"";position:absolute;left:calc(-1.6rem - 5px);top:.45rem;width:11px;height:11px;border-radius:50%;background:var(--void);border:1px solid var(--gold2);transition:background .4s ease,box-shadow .4s ease}
.ranks li.on{opacity:1;transform:translate3d(.4rem,0,0)}
.ranks li.on::before{background:var(--gold-hi);box-shadow:0 0 0 5px rgba(233,201,143,.16)}
.ranks h3{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:600;margin-bottom:.45rem}
.ranks p{margin:0 0 .5rem;color:var(--paper2);font-size:1rem}
.ranks .rooms{font-size:.86rem;color:var(--gold2);margin:0;line-height:1.6}
.climb-shots{position:relative;aspect-ratio:16/10;perspective:1600px}
.climb-shots .shot{position:absolute;inset:0;opacity:0;transform:rotateY(-10deg) rotateX(3deg) scale(1.06) translate3d(40px,0,0);filter:blur(8px);transition:opacity .9s ease,transform 1.2s var(--ease-film),filter .9s ease}
.climb-shots .shot.on{opacity:1;transform:rotateY(-5deg) rotateX(1.5deg);filter:none}

/* ---------- HOME: the mentor and the live sessions ---------- */
.mentor{position:relative;overflow:hidden;isolation:isolate;padding:9rem 0;background:var(--void)}
.mentor .bgpic{position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:0}
.mentor .bgpic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.mentor .bgpic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,25,0.52) 0,rgba(38,34,25,0.34) 50%,rgba(38,34,25,0.43) 100%),linear-gradient(180deg,var(--void) 0,rgba(12,11,9,0) 25%,rgba(12,11,9,0) 75%,var(--void) 100%)}
.mentor-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:center}
.mentor-card{padding:2.4rem 2.4rem 2.2rem}
.mentor-card h2{margin-bottom:1rem}
.mentor-card p{color:var(--paper2)}
.sched{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.1rem}
.sched li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:baseline;padding:.85rem 0;border-top:1px solid rgba(208,168,136,.16);color:var(--paper);font-size:1rem}
.sched li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-hi);transform:translateY(-.1rem)}
.sched li.muted{color:var(--paper2);font-size:.93rem}
.sched li.muted::before{background:var(--gold)}
.mentor .shot{aspect-ratio:16/10;transform:perspective(1600px) rotateY(-5deg) rotateX(1.5deg)}

/* ---------- HOME and ABOUT: the proof at dawn ---------- */
.proof-bg img{filter:none}
.proof-bg::after{background:linear-gradient(180deg,var(--black) 0,rgba(38,34,25,0.09) 25%,rgba(38,34,25,0.14) 75%,var(--black) 100%)}

/* ---------- the apply band at the door ---------- */
.apply-bg img{object-position:50% 50%}
.apply-bg::after{background:linear-gradient(90deg,rgba(38,34,25,0.5) 0,rgba(38,34,25,0.29) 55%,rgba(38,34,25,0.11) 100%),linear-gradient(180deg,var(--black) 0,rgba(12,11,9,0) 25%,rgba(12,11,9,0) 75%,var(--black) 100%)}
.apply h2{font-size:clamp(1.8rem,3.4vw,3rem)}

/* ---------- inner heroes: the same scene grammar ---------- */
.ihero{background:var(--void);min-height:78svh;display:flex;align-items:center}
.ihero-bg img{object-position:50% 50%}
.js .ihero .ihero-bg img{animation:push 2.4s var(--ease-film) .1s both,drift 26s ease-in-out 2.6s infinite alternate}
.ihero-bg::after{background:linear-gradient(90deg,rgba(38,34,25,0.54) 0,rgba(38,34,25,0.45) 40%,rgba(38,34,25,0.11) 100%),linear-gradient(180deg,rgba(38,34,25,0.34) 0,rgba(12,11,9,0) 30%,rgba(12,11,9,0) 65%,var(--black) 100%)}
.ihero h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.03;letter-spacing:-.035em}

/* ---------- FLOOR: stations and rooms ---------- */
.station{position:relative;padding:8rem 0 2rem;background:var(--void);overflow:hidden}
.station+.station{padding-top:5rem}
.station-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;padding-bottom:2rem;margin-bottom:1rem;position:relative}
.station-head h2{font-size:clamp(2.6rem,7vw,6.4rem);letter-spacing:-.045em;line-height:.95}
.station-head h2 small{display:block;font:400 clamp(1rem,1.4vw,1.25rem)/1.3 var(--body);letter-spacing:0;color:var(--gold2);margin-top:.8rem}
.station-head .rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gold-hi),rgba(208,168,136,.12))}
.room2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem;align-items:center;padding:3.5rem 0}
.room2.flip>.shot{order:2}
.room2 .shot{aspect-ratio:16/10}
.room2 .shot.wide{aspect-ratio:1290/362}
.room2 .shot.gauge{aspect-ratio:560/215;max-width:560px}
.room2 h3{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.03em;margin-bottom:.9rem}
.room2 p{color:var(--paper2);font-size:1.08rem;max-width:46ch;margin:0}
.room2 .opens{display:inline-block;margin-top:1rem;font:500 .8rem var(--body);color:var(--gold-hi);border:1px solid rgba(233,201,143,.4);border-radius:var(--pill);padding:.3rem .8rem}

/* ---------- ABOUT: the founder and the method ---------- */
.founder{position:relative;padding:8rem 0;background:var(--void);overflow:hidden}
.founder-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:center;position:relative;z-index:1}
.founder h2{margin-bottom:1.1rem}
.founder p{color:var(--paper2);font-size:1.08rem}
.founder .shot{aspect-ratio:16/10;transform:perspective(1600px) rotateY(-8deg) rotateX(2deg)}
.method{position:relative;padding:8rem 0;overflow:hidden;isolation:isolate;background:var(--void)}
.method .bgpic{position:absolute;inset:0;z-index:0}
.method .bgpic img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.method .bgpic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,34,25,0.54) 0,rgba(38,34,25,0.47) 55%,rgba(38,34,25,0.29) 100%),linear-gradient(180deg,var(--void) 0,rgba(12,11,9,0) 20%,rgba(12,11,9,0) 80%,var(--void) 100%)}
.method .wrap{position:relative;z-index:3}
.method h2{margin-bottom:1rem}
.method .lede{margin-bottom:3rem}
.steps5{list-style:none;margin:0;padding:0 0 0 1.8rem;display:grid;gap:2rem;max-width:44rem;position:relative}
.steps5::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:var(--gold-hi);box-shadow:0 0 12px rgba(233,201,143,.5);transform-origin:50% 0}
.js .steps5::before{transform:scaleY(0);transition:transform 2.4s var(--ease-film) .3s}
.js .method.in .steps5::before{transform:scaleY(1)}
.steps5 li{position:relative;color:var(--paper);font-size:1.08rem;line-height:1.6}
.steps5 li::before{content:"";position:absolute;left:calc(-1.8rem - 5px);top:.5rem;width:11px;height:11px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 5px rgba(233,201,143,.14)}
.steps5 b{display:block;font:600 1.15rem var(--display);letter-spacing:-.02em;color:var(--gold-hi);margin-bottom:.2rem}

/* ---------- LOGIN: the door ---------- */
.door{background:var(--void)}
.dcard{background:rgba(20,18,15,.84)}
.dcard .btn{margin-top:1.4rem}
.dcard .note+.note{margin-top:.9rem}

/* ---------- footer ---------- */
.foot{background:var(--black)}
.foot .credits{font-size:.78rem;color:var(--paper3);margin:.6rem 0 0;max-width:none}
.foot .wordmark{display:block;font:600 clamp(2.4rem,9vw,8.6rem)/.9 var(--display);letter-spacing:-.05em;color:rgba(246,241,230,.07);margin:3rem 0 0;white-space:nowrap;overflow:hidden;user-select:none}

/* ---------- tablets ---------- */
@media (max-width:980px){
  .hero-grid,.film-head,.mentor-grid,.room2,.founder-grid,.climb-grid{grid-template-columns:minmax(0,1fr)}
  .room2.flip>.shot{order:0}
  .hero-grid{padding:7rem 0 2rem;gap:2.2rem}
  .climb-track{height:auto}
  .climb-stage{position:relative;height:auto;padding:6rem 0}
  .climb-pic img{transform:none}
  .ranks li{opacity:1}
  .ranks::after{transform:scaleY(1)}
  .climb-shots{display:none}
  .ranks .shot{display:block!important}
  .mentor .shot,.founder .shot{transform:none}
}
/* the climb's screens ride inside each rank below the desktop width */
.ranks .shot{display:none;aspect-ratio:16/10;margin-top:1rem}

/* ---------- phones: the same scenes in a portrait crop; the words sit on the picture ---------- */
@media (max-width:720px){
  .top{background:rgba(38,34,25,0.53)}
  .top .wrap{min-height:60px;gap:.6rem}
  .snd{padding:.3rem .75rem}
  .snd-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu{min-height:44px}
  .hero{min-height:auto}
  .hero .h-pic picture,.hero .h-pic img{inset:0;width:100%;height:100%;object-position:40% 30%}
  .hero .h-pic::after{background:linear-gradient(180deg,rgba(38,34,25,0.2) 0,rgba(38,34,25,0.09) 22%,rgba(38,34,25,0.47) 48%,rgba(38,34,25,0.55) 70%,var(--void) 100%)}
  .hero-grid{padding:9.5rem 0 1.5rem}
  .hero h1{font-size:clamp(2.3rem,10.5vw,2.9rem)}
  .hero .lede{font-size:1.05rem}
  .live{padding:.7rem .7rem .9rem}
  .live canvas{aspect-ratio:4/3}
  .film{padding:4.5rem 0 5rem}
  .film-head{gap:1rem;margin-bottom:2rem}
  .reel{aspect-ratio:4/5}
  .reel-words{flex-direction:column;gap:1rem;font-size:2.6rem}
  .climb-stage{padding:4.5rem 0}
  .climb-pic img{object-position:50% 50%}
  .climb-pic::after{background:linear-gradient(180deg,rgba(38,34,25,0.32) 0,rgba(38,34,25,0.5) 30%,rgba(38,34,25,0.52) 100%)}
  .ranks{gap:2.6rem}
  .mentor{padding:4.5rem 0}
  .mentor .bgpic{top:0;bottom:auto;height:60%}
  .mentor .bgpic::after{background:linear-gradient(180deg,rgba(38,34,25,0.18) 0,rgba(38,34,25,0.34) 50%,var(--void) 100%)}
  .mentor-grid{padding-top:8rem;gap:2rem}
  .mentor-card{padding:1.5rem 1.2rem}
  .ihero{min-height:88svh;align-items:flex-end;padding:7rem 0 3rem}
  .ihero .ihero-bg{top:0;bottom:0}
  .ihero-bg::after{background:linear-gradient(180deg,rgba(38,34,25,0.14) 0,rgba(38,34,25,0.11) 30%,rgba(38,34,25,0.49) 62%,var(--black) 100%)}
  .ihero h1{font-size:clamp(2.2rem,10vw,2.8rem)}
  .station{padding:5rem 0 1rem}
  .station-head{grid-template-columns:minmax(0,1fr)}
  .room2{gap:1.6rem;padding:2.2rem 0}
  .room2 .shot{margin-right:-1rem;border-right:0;border-radius:var(--r-s) 0 0 var(--r-s)}
  .room2 .shot.gauge{margin-right:0;border-right:1px solid rgba(233,201,143,.4);border-radius:var(--r-s)}
  .founder,.method{padding:4.5rem 0}
  .door{min-height:100svh;align-items:flex-end;padding:7rem 0 2.5rem}
  .foot .wordmark{font-size:clamp(2.4rem,14vw,4rem)}
  .apply-bg::after{background:linear-gradient(180deg,var(--black) 0,rgba(38,34,25,0.32) 30%,rgba(38,34,25,0.47) 100%)}
}

/* ---------- reduced motion: the page complete at rest ---------- */
@media (prefers-reduced-motion:reduce){
  html.arrive body::before,html.arrive body::after,.titlecard,.curtain{display:none!important}
  .js [data-w],.js [data-pic] img,.js [data-shot],.js [data-draw],.js .live,.js .film .reel,.climb-shots .shot{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .climb-shots .shot{opacity:0!important}.climb-shots .shot.on{opacity:1!important}
  .js .hero .h-pic img,.js .ihero .ihero-bg img{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .lit::after,.shot::after,.snd-ico i,.live-bar .dot{animation:none!important}
  .js .steps5::before{transform:none!important}
  .ranks::after{transform:scaleY(1)!important}.ranks li{opacity:1!important;transform:none!important}
  .climb-pic img{transform:none!important}
}

/* ---------- small pieces for the inner pages ---------- */
.dcard h1.dh{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:0 0 .8rem;line-height:1.1}
.ihero.short{min-height:62svh}
.ihero.center .ihero-copy{max-width:46rem}
.reading{background:var(--black)}
.station:first-of-type{padding-top:6rem}
.ihero-bg picture,.bgpic picture,.climb-pic picture,.apply-bg picture,.proof-bg picture,.shot picture{display:block;width:100%;height:100%}
@media (max-width:720px){
  .ihero-bg,.door .ihero-bg{position:absolute;inset:0;top:0;bottom:0;left:0;right:0;height:auto;margin:0;overflow:hidden}
  .ihero-bg img{height:100%;width:100%;object-fit:cover;margin:0;object-position:50% 40%}
  .door .ihero-bg::after{background:linear-gradient(180deg,rgba(38,34,25,0.09) 0,rgba(38,34,25,0.06) 35%,rgba(38,34,25,0.46) 70%,var(--void) 100%)}
  .ihero .wrap,.door .wrap{width:min(1280px,100% - 2rem)}
}
/* floor page, second pass: larger screens, the station's rooms beside its title */
.room2{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:3.5rem;padding:4rem 0}
.room2.flip{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.room2 h3{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.station-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.st-rooms{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;padding-bottom:.6rem}
.st-rooms a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid rgba(208,168,136,.35);border-radius:var(--pill);text-decoration:none;color:var(--paper);font:500 .92rem var(--body);background:rgba(28,26,22,.6);transition:border-color .2s ease,background .2s ease}
.st-rooms a:hover{border-color:var(--gold-hi);background:rgba(208,168,136,.16)}
.room2{scroll-margin-top:90px}
@media (max-width:980px){.room2,.room2.flip{grid-template-columns:minmax(0,1fr)}.station-head{grid-template-columns:minmax(0,1fr)}.st-rooms{justify-content:flex-start}}

/* inspector pass one: the hidden menu backdrop is out of the way; nothing meant to be read under 13 px; measure; full ink for running text */
.scrim{visibility:hidden}.scrim.on{visibility:visible}
.top .brand small{display:none}
.eyebrow,.k,.idx,.cap .n,.ccopy .n,.cmore .n,.dial,.foot h4,.field span,.live-bar,.tape span,.foot .copy,.foot .credits,.trio .k,.fcard .k,.or,blockquote footer{font-size:.8125rem}
.steps span{font-size:.8125rem}
.brand{font-size:.8125rem}
.snd{font-size:.8125rem}
.lines span{font-size:.95rem}
.live figcaption{max-width:62ch}
.foot .risk span{max-width:70ch}
.note{max-width:64ch}
.lede{color:#E6DFD0}
.about .lede{color:#4E4A44}
.about p{color:#4E4A44}
.btn{font-size:.8125rem}
.menu{font-size:.8125rem}
.titlecard .tc-sub{font-size:.8125rem;letter-spacing:.24em}
.foot .brand small{font-size:.8125rem;letter-spacing:.12em}
.curtain .c-mark,.titlecard .tc-mark{font-size:.875rem}
@media (max-width:720px){.titlecard .tc-sub{font-size:.8125rem;letter-spacing:.12em;padding:0 1rem}}
/* frame time pass: the grain is a plain layer (no blend over moving pictures); light sweeps run only on screen */
.grain{mix-blend-mode:normal;opacity:.05}
.lit::after,.shot::after{animation-play-state:paused}
.lit.vis::after,.shot.vis::after{animation-play-state:running}
.hero .h-pic img,.ihero-bg img{will-change:transform}
.js .hero:not(.vis) .h-pic img,.js .ihero:not(.vis) .ihero-bg img,.tape:not(.vis) .tape-run{animation-play-state:paused}
/* the sweeps as narrow bands (a small layer that travels), not double size panes */
.lit::after,.shot::after{inset:0 auto 0 0;width:34%;background:linear-gradient(105deg,transparent 20%,rgba(233,201,143,.13) 50%,transparent 80%);transform:translate3d(-110%,0,0);animation-name:band}
@keyframes band{0%,55%{transform:translate3d(-110%,0,0)}100%{transform:translate3d(320%,0,0)}}
@keyframes push{from{transform:scale(1.2);opacity:0}to{transform:scale(1.04);opacity:1}}
/* motion pass: the drift reads at thumbnail size */
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2.5%,-1.5%,0)}}
.js .hero .h-pic img{animation:push 2.6s var(--ease-film) .15s both,drift 16s ease-in-out 2.8s infinite alternate}
.js .ihero .ihero-bg img{animation:push 2.4s var(--ease-film) .1s both,drift 16s ease-in-out 2.6s infinite alternate}
html.first .hero .h-pic img{animation-delay:1.05s,3.7s}
/* tap targets on the phone */
@media (max-width:720px){
  .foot .cols a{min-height:44px;display:flex;align-items:center;padding:0}
  .foot .cols a.brand{display:grid;align-content:center}
  .top .brand{min-height:44px;display:flex;align-items:center}
  .check{min-height:44px;align-items:center}
  .reel{aspect-ratio:16/9}
  .reel-words{flex-direction:row;font-size:1.5rem;gap:.7rem}
  .reel-play{width:56px;height:56px}
  .reel-play::before{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
}
.reel.preview>img{opacity:0}
.reel.preview .reel-words{opacity:1}
/* reveal pass: the blur only on headings; the rest rises and fades; the whole entrance done in about one second */
.js [data-w]{filter:none}
.js h1[data-w],.js h2[data-w],.js h3[data-w]{filter:blur(8px)}
.js .in [data-w],.js [data-w].in{transition-duration:.75s;transition-delay:calc(var(--base,.2s) + var(--d,0) * 70ms)}
.js .in h1[data-w],.js .in h2[data-w],.js .in h3[data-w]{filter:none}
/* phone pass one */
.js .in [data-shot],.js [data-shot].in{transition-duration:.8s,1s}
.field span{font:600 .95rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--paper)}
@media (max-width:720px){
  .foot .cols{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}
  .foot .cols>div:first-child{grid-column:1/-1}
  .foot .cols a{font-size:.9rem}
}
/* second pass */
.ihero-copy{max-width:52rem}
.ihero h1{font-size:clamp(2.3rem,4.4vw,4.1rem)}
.ranks li{opacity:.5}
.ranks li.on{opacity:1}
.hero .h-pic::after{background:linear-gradient(90deg,rgba(38,34,25,0.52) 0,rgba(38,34,25,0.38) 38%,rgba(38,34,25,0.1) 68%,rgba(38,34,25,0.23) 100%),linear-gradient(180deg,rgba(38,34,25,0.34) 0,rgba(12,11,9,0) 26%,rgba(12,11,9,0) 64%,var(--void) 100%)}
@media (max-width:720px){
  .door{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:9rem 0 2.5rem}
  .door .wrap{justify-items:stretch}
  .hero .h-pic::after{background:linear-gradient(180deg,rgba(38,34,25,0.2) 0,rgba(38,34,25,0.09) 22%,rgba(38,34,25,0.47) 48%,rgba(38,34,25,0.55) 70%,var(--void) 100%)}
}
.ihero .wrap,.door .wrap{z-index:3}
.station-head .st-sub{margin:.8rem 0 0;font:400 clamp(1rem,1.4vw,1.25rem)/1.3 var(--body);color:var(--gold2)}
@media (max-width:720px){.room2 .shot{margin-right:0;border-right:1px solid rgba(233,201,143,.4);border-radius:var(--r-s)}}
/* contrast pass: D's muted tones lifted to read on the charcoal (4.5:1 and up) */
:root{--paper2:#E0D8C8;--paper3:#CEC4B2}
.eyebrow,.k,.foot h4,.idx{color:var(--gold-hi)}
.about .eyebrow{color:var(--gold-deep)}
.foot .risk{font-size:.9rem}.foot .risk span{max-width:58ch}
.ihero h1.small{font-size:clamp(2.2rem,3.8vw,3.6rem)}
.dcard h1.dh{font-size:clamp(1.8rem,2.8vw,2.3rem)}
/* motion pass two: a light crosses each hero picture, so the first screen visibly moves at thumbnail size */
.hero .h-pic::before,.ihero-bg::before,.door .ihero-bg::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0,rgba(233,201,143,.2) 50%,transparent 100%);transform:translate3d(-110%,0,0);animation:lightpass 9s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes lightpass{0%{transform:translate3d(-110%,0,0)}70%,100%{transform:translate3d(300%,0,0)}}
.js .hero:not(.vis) .h-pic::before,.js .ihero:not(.vis) .ihero-bg::before{animation-play-state:paused}
.js .hero .h-pic img{animation:push 2.6s var(--ease-film) .15s both,drift 11s ease-in-out 2.8s infinite alternate}
.js .ihero .ihero-bg img{animation:push 2.4s var(--ease-film) .1s both,drift 11s ease-in-out 2.6s infinite alternate}
html.first .hero .h-pic img{animation-delay:1.05s,3.7s}
@media (prefers-reduced-motion:reduce){.hero .h-pic::before,.ihero-bg::before{display:none}}
.dcard,.proof-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
.dcard{background:rgba(20,18,15,.9)}
.proof-panel{background:rgba(28,26,22,.88)}
.hero .h-pic::before,.ihero-bg::before{width:44%;background:linear-gradient(100deg,transparent 0,rgba(233,201,143,.24) 50%,transparent 100%)}
@media (max-width:980px){.ranks li,.ranks li.on{opacity:1;transform:none}}
/* ---------- 07:50 fix pass (lane WB2, 2026-10-25) ---------- */
/* A: the content ground is charcoal, near black, cream text (D's #4C4A45 read as a grey that failed to load) */
:root{--black:#151310;--black2:#1C1915;--black3:#25221D}
.glass{background:rgba(28,25,21,.78)}
.btn.line{background:rgba(38,34,25,0.26)}
.proof-panel{background:rgba(21,19,16,.86)}
.field input,.field select,.field textarea{background:var(--void);border-color:rgba(208,168,136,.42)}
.fcard,.trio .glass{background:var(--black2);border-color:rgba(208,168,136,.2)}
.panel-in,.foundation .panel-in{background:var(--black2)}
/* B: no light sweep on the hero pictures (it froze as a pale slab with a seam); the slow drift alone moves them */
.hero .h-pic::before,.ihero-bg::before,.door .ihero-bg::before{content:none!important;animation:none!important;display:none!important}
/* C: headings rise and fade, no blur, so a still frame never catches a smear */
.js h1[data-w],.js h2[data-w],.js h3[data-w],.js .in h1[data-w],.js .in h2[data-w],.js .in h3[data-w]{filter:none!important}
.js [data-w]{transform:translate3d(0,16px,0)}
.js .in [data-w],.js [data-w].in{transition-duration:.6s;transform:none}
/* J and K: a solid header bar; the sound switch and the menu are one pill family on every page */
.top.solid,.top.quiet{background:var(--void);border-bottom:1px solid rgba(208,168,136,.16)}
.snd,.snd[aria-pressed="true"],.menu{min-height:44px;padding:.35rem 1rem;border:1px solid rgba(208,168,136,.55);border-radius:var(--pill);background:transparent;color:var(--paper);font:600 .8125rem/1 var(--body);letter-spacing:.06em}
.menu{text-transform:uppercase;letter-spacing:.12em}
.snd:hover,.menu:hover{border-color:var(--gold-hi);background:rgba(208,168,136,.1)}
@media (max-width:720px){
  .top,.top.solid,.top.quiet{background:var(--void)}
  .snd{margin-left:auto;min-width:56px;justify-content:center;padding:.35rem .9rem}
  .menu{margin-left:0}
}
/* the footer: no ghost wordmark; the four words in balanced lines; phone columns start level */
.foot .brand small{text-wrap:balance;max-width:24rem;line-height:1.6}
@media (max-width:720px){.foot h4{white-space:nowrap;letter-spacing:.1em}.foot .cols>div{align-content:start}}
.legal .credits{font-size:.8125rem;color:var(--paper3);margin-top:2.4rem}
/* membership: three cards, one structure, one bottom edge */
.trio{align-items:stretch}
.trio .glass{height:100%}
.trio .k{margin-bottom:.9rem}
/* apply: the step chips sit below the hero seam, in even rows, with the step titles */
.aform{padding-top:2.6rem}
.aform .steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem}
.aform .steps span{flex:0 0 calc(25% - .4rem)}
.aform .steps span{text-align:center;padding:.55rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.aform{padding-top:1.8rem}.aform .steps span{flex-basis:calc(50% - .3rem)}}
.aform .send{justify-items:center;text-align:center}
/* L: the home hero is the same picture on the phone */
@media (max-width:720px){.hero .h-pic picture,.hero .h-pic img{object-position:50% 55%}}
@media (max-width:720px){
  .aform .steps span{letter-spacing:.03em;padding:.55rem .2rem;text-overflow:clip}
  .ihero.center .ihero-bg img{width:122%;max-width:none;margin-left:-17%}
  .apply-bg::after{background:linear-gradient(180deg,var(--black) 0,rgba(38,34,25,0.42) 26%,rgba(38,34,25,0.5) 100%)}
}
@media (max-width:720px){.aform .steps span{flex:1 0 auto;letter-spacing:.08em;padding:.55rem .7rem}}
/* about on the phone: the studio's lit screens sat behind the headline; the picture moves down and the words get a darker ground */
@media (max-width:720px){
  .ihero[aria-label="About us"] .ihero-bg img{object-position:50% 100%}
  .ihero[aria-label="About us"] .ihero-bg::after{background:linear-gradient(180deg,rgba(38,34,25,0.53) 0,rgba(38,34,25,0.5) 55%,rgba(38,34,25,0.32) 80%,var(--black) 100%)}
}
.aform .steps span{flex:1 0 auto;text-overflow:clip;padding:.55rem .8rem}
/* third pass: the screen wipe finishes inside a second so a still frame never catches it half open; the select keeps D's arrow; phone pills one width */
.js .in [data-shot],.js [data-shot].in{transition-duration:.5s,.6s;transition-delay:calc(.08s + var(--d,0) * 50ms)}
.field input,.field textarea{background-color:var(--void)}
.field select{background-color:var(--void);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23D0A888' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right .9rem center}
@media (max-width:720px){.snd,.menu{min-width:84px;justify-content:center}}
/* ---------- 10:00 fix pass (lane WB3, 2026-10-25) ---------- */
/* 1: no straight photo edge inside a band. The band pictures run 18% past their section (parallax), so their own fades fell outside it; the section now fades the picture into its own ground over 170 px top and bottom */
.apply::before,.proof::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--black) 0,rgba(21,19,16,0) 170px,rgba(21,19,16,0) calc(100% - 170px),var(--black) 100%)}
.apply-grid,.proof .wrap{z-index:2}
.apply-bg::after{background:linear-gradient(90deg,rgba(21,19,16,.88) 0,rgba(21,19,16,.55) 55%,rgba(21,19,16,.25) 100%)}
@media (max-width:720px){.apply-bg::after{background:rgba(21,19,16,.78)}}
/* the desk home hero: the left monitor's edges read as a slab behind the words; the shade now carries the copy column and fades out before the chart card */
@media (min-width:721px){.hero .h-pic::after{background:linear-gradient(90deg,rgba(38,34,25,0.56) 0,rgba(38,34,25,0.54) 44%,rgba(38,34,25,0.42) 60%,rgba(38,34,25,0.15) 80%,rgba(38,34,25,0.24) 100%),linear-gradient(180deg,rgba(38,34,25,0.34) 0,rgba(12,11,9,0) 26%,rgba(12,11,9,0) 64%,var(--void) 100%)}}
/* the desk apply door: the photo's own wall edge at the right and the cut at the bottom fade out */
@media (min-width:721px){.ihero.center::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(270deg,var(--void) 0,var(--void) 110px,rgba(38,34,25,0.34) 200px,rgba(12,11,9,0) 420px),linear-gradient(90deg,var(--void) 0,rgba(12,11,9,0) 240px),linear-gradient(0deg,var(--black) 0,rgba(21,19,16,0) 170px)}}
/* 2: phone first screens: the inner heroes size to their words, so the headline and first button sit high in the first screen, picture behind */
@media (max-width:720px){.ihero,.ihero.short,.ihero.far{min-height:0;padding:9.5rem 0 2.6rem}}
/* 3: the Elite price card is lit on all four sides at one weight; the travelling light is a soft brightening along that edge */
.panel.elite{padding:1.5px;background:var(--gold2);box-shadow:0 0 0 1px rgba(233,201,143,.16),0 0 30px rgba(208,168,136,.14)}
.panel.elite::before{background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,238,206,.6) 83%,transparent 96%)}
.panel.elite .panel-in{border-radius:calc(var(--r) - 1.5px)}
/* 4: apply step chips: one width per chip, even centred rows (desk 4 then 3); on the phone one row of seven numbered chips, the step names kept for screen readers */
.aform .steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.aform .steps span{flex:0 0 calc((100% - 1.5rem)/4);display:flex;align-items:center;justify-content:center;gap:.5em;min-height:2.4rem;padding:.5rem .4rem;letter-spacing:.08em;white-space:nowrap;text-overflow:clip;overflow:hidden}
.aform .steps b{font-weight:500}.aform .steps em{font-style:normal}
@media (min-width:1001px){.aform .steps{width:calc(100% + 8rem);margin-left:-4rem;margin-right:-4rem}}
@media (min-width:721px) and (max-width:1000px){.aform .steps span{white-space:normal;text-align:center;min-height:3.4rem;line-height:1.3}}
@media (max-width:720px){
  .aform .steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;width:auto;margin:0 0 1.8rem}
  .aform .steps span{flex:none;position:relative;min-height:44px;padding:0;letter-spacing:.04em}
  .aform .steps em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* 4: the floor's station chips sit on one even row on the desk */
@media (min-width:981px){.station-head{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
/* 1, every inner hero: its picture runs past the section too, so the section fades it into the next band's ground over 180 px */
.ihero{--next:var(--black)}.ihero.far{--next:var(--black2)}.ihero[aria-label="About us"]{--next:var(--void)}
.ihero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;z-index:2;pointer-events:none;background:linear-gradient(0deg,var(--next) 0,rgba(12,11,9,0) 100%)}
@media (min-width:721px){.ihero.center::after{height:auto}}
/* resolution (WB3, after the reviewer): the apply door's side fades land on the form band's ground, not a darker black; the light beam fades in below its band's top; the Elite card's travelling light is fainter so the four sides read as one weight */
@media (min-width:721px){.ihero.center::after{background:linear-gradient(270deg,var(--black) 0,var(--black) 110px,rgba(21,19,16,.6) 200px,rgba(21,19,16,0) 420px),linear-gradient(90deg,var(--black) 0,rgba(21,19,16,0) 240px),linear-gradient(0deg,var(--black) 0,rgba(21,19,16,0) 170px)}}
.beam{-webkit-mask-image:linear-gradient(180deg,transparent 22%,#000 46%);mask-image:linear-gradient(180deg,transparent 22%,#000 46%)}
.panel.elite::before{background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,238,206,.28) 84%,transparent 96%)}
.panel.elite{box-shadow:0 0 0 1px rgba(233,201,143,.14),0 0 26px rgba(208,168,136,.12)}

/* ---------- the trading floor page, the grid frame (his 19:10 order, reference tradepath.ai read 19:12): hairline cells, mono tags, one gold word, the rooms as whole screens in a lit frame, a rail that follows the scroll ---------- */
.fl{--fl-line:rgba(208,168,136,.22);--fl-cell:#2A2620;--fl-cell2:#302B24;display:grid;grid-template-columns:220px minmax(0,1fr);width:min(1400px,100% - 2rem);margin:0 auto;border-left:1px solid var(--fl-line);border-right:1px solid var(--fl-line)}
.fl-rail{border-right:1px solid var(--fl-line)}
.fl-index{list-style:none;margin:0;padding:0;position:sticky;top:90px;display:flex;flex-direction:column}
.fl-index li{border-bottom:1px solid var(--fl-line)}
.fl-index a{display:flex;gap:.8rem;align-items:baseline;padding:1.1rem 1.2rem;color:var(--paper3);text-decoration:none;font:500 .95rem var(--body);transition:color .25s ease,background .25s ease}
.fl-index a:hover{color:var(--paper)}
.fl-index a.on{color:var(--paper);background:var(--fl-cell2);box-shadow:inset 3px 0 0 var(--gold-hi)}
.fl-n{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.fl-cell{border-bottom:1px solid var(--fl-line);position:relative;overflow:hidden;background:var(--fl-cell)}
.fl-main{min-width:0}
.fl-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem}
.fl-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border:1px solid var(--fl-line);font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper2);background:rgba(0,0,0,.25)}
.fl-tag.on{color:var(--gold-hi);border-color:rgba(233,201,143,.6);box-shadow:inset 3px 0 0 var(--gold-hi)}
.fl-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 18% 0%,rgba(233,201,143,.28),transparent 70%),radial-gradient(40% 40% at 100% 100%,rgba(233,201,143,.14),transparent 70%)}
.fl-frame{margin:0;position:relative;border:1px solid rgba(233,201,143,.4);background:#000;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.fl-frame img{display:block;width:100%;height:auto}
/* hero */
.fl-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;padding:0;min-height:calc(100svh - 90px)}
.fl-hero-copy{padding:clamp(3rem,6vw,5.5rem) clamp(1.6rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--fl-line)}
.fl-hero h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;letter-spacing:-.04em;margin-bottom:1.3rem}
.fl-hero h1 em{font-style:normal;color:var(--gold-hi)}
.fl-hero .lede{color:var(--paper2);font-size:1.12rem;max-width:40ch;margin-bottom:2rem}
.fl-count{margin:2.2rem 0 0;font:500 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper3)}
.fl-hero-pic{position:relative;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4.5rem) clamp(2rem,4vw,4rem);display:flex;align-items:center;overflow:hidden}
.fl-hero-pic .fl-frame.big{width:118%;max-width:none;transform:perspective(1800px) rotateY(-7deg) rotateX(2deg);transform-origin:0 50%}
/* pull */
.fl-pull{padding:clamp(3rem,6vw,5rem) clamp(1.6rem,3vw,3rem);background:var(--fl-cell2);background-image:radial-gradient(rgba(233,201,143,.16) 1px,transparent 1px);background-size:14px 14px}
.fl-pull p{margin:0 auto;max-width:28ch;text-align:center;font:300 clamp(1.5rem,2.6vw,2.3rem)/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
/* station head */
.fl-sthead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem;align-items:end;padding:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,3rem) 1.8rem;background:var(--fl-cell2)}
.fl-sthead h2{font-size:clamp(2.6rem,6vw,5.2rem);letter-spacing:-.045em;line-height:.95}
.fl-sthead h2 small{display:block;font:400 clamp(.95rem,1.3vw,1.15rem)/1.3 var(--body);letter-spacing:0;color:var(--gold2);margin-top:.7rem}
.fl-stcount{margin:0;font:500 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper3)}
/* the stage: rooms stacked on the left, the sticky screen on the right */
.fl-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:calc(100svh - 90px)}
.fl-rooms{list-style:none;margin:0;padding:0;border-right:1px solid var(--fl-line);display:flex;flex-direction:column}
.fl-room{padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,3rem);min-height:46vh;flex:1;display:flex;flex-direction:column;justify-content:center;transition:background .35s ease,box-shadow .35s ease}
.fl-room.on{background:var(--fl-cell2);box-shadow:inset 3px 0 0 var(--gold-hi)}
.fl-room h3{font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.03em;margin:.6rem 0 .8rem;color:var(--paper3);transition:color .35s ease}
.fl-room.on h3{color:var(--paper)}
.fl-room p{margin:0;color:var(--paper2);font-size:1.04rem;max-width:44ch}
.fl-room .opens{display:inline-block;margin-top:1rem;font:500 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(233,201,143,.4);padding:.3rem .7rem}
.fl-room .fl-inline{display:none}
.fl-screen{position:sticky;top:90px;height:calc(100svh - 90px);display:flex;align-items:center;justify-content:center;padding:clamp(1.6rem,3vw,3rem);border-bottom:0}
.fl-screen .fl-frame{width:100%;aspect-ratio:16/10;transform:perspective(1800px) rotateY(-5deg) rotateX(1.5deg)}
.fl-screen .fl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease-film),transform 1.1s var(--ease-film)}
.fl-screen .fl-frame img.on{opacity:1;transform:none}
.fl-which{position:absolute;right:clamp(1.6rem,3vw,3rem);bottom:clamp(1rem,2vw,1.6rem);color:var(--paper3)}
.fl-station:last-of-type .fl-rooms{border-bottom:0}
/* close */
.fl-close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;padding:clamp(3rem,6vw,5rem) clamp(1.6rem,3vw,3rem);background:var(--fl-cell2)}
.fl-close h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.035em;margin-top:.6rem}
/* reveal: the page's own data-w handles the words; the screens settle once */
@media (max-width:980px){
  .fl{grid-template-columns:minmax(0,1fr);width:100%;border-left:0;border-right:0}
  .fl-rail{border-right:0;border-bottom:1px solid var(--fl-line)}
  .fl-index{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .fl-index li{border-bottom:0;border-right:1px solid var(--fl-line);flex:0 0 auto}
  .fl-index a{padding:.9rem 1rem;font-size:.86rem}
  .fl-index a.on{box-shadow:inset 0 -3px 0 var(--gold-hi)}
  .fl-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .fl-hero-copy{border-right:0;border-bottom:1px solid var(--fl-line);padding:2.6rem 1.2rem}
  .fl-hero-pic{padding:1.4rem 1.2rem 2rem}
  .fl-hero-pic .fl-frame.big{width:100%;transform:none}
  .fl-sthead{grid-template-columns:minmax(0,1fr);gap:.6rem;padding:2.4rem 1.2rem 1.4rem}
  .fl-stage{grid-template-columns:minmax(0,1fr)}
  .fl-rooms{border-right:0}
  .fl-room{min-height:0;padding:1.8rem 1.2rem;box-shadow:none}
  .fl-room.on{background:var(--fl-cell)}
  .fl-room h3{color:var(--paper)}
  .fl-room .fl-inline{display:block;margin-top:1.3rem}
  .fl-screen{display:none}
  .fl-close{grid-template-columns:minmax(0,1fr);padding:2.6rem 1.2rem}
  .fl-pull{padding:2.6rem 1.2rem}
}