/* ══ HOME — mapped from the reference, scroll by scroll ══════════════════
   Reference order: gate → hero (name, subline, next-race pill, ticker,
   signature) → message → horizontal rail with captions/quotes/numbers →
   ON/OFF TRACK split → Hall of Fame hover-swap grid with fade extenders →
   store feature with image cluster → partners grid with blobs → socials
   scatter → footer (pages/follow/sign-up, blob, statement, 360 object,
   partner logo row). Every one of those has an LES equivalent below.     */

/* mono label voice — the reference sets every small label in a monospace */
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono b{color:var(--ivory);font-weight:500}

/* ── gate ─────────────────────────────────────────────────────────────── */
#gate{position:fixed;inset:0;z-index:1000;background:#070506;display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s}
#gate.is-done{opacity:0;visibility:hidden}
.gate-in{display:grid;justify-items:center;gap:1.4rem;text-align:center}
.gate-mark{width:80px}.gate-mark path{fill:var(--crimson-live);opacity:0;transform-origin:50% 92%;transform:scale(.35) rotate(-18deg);animation:petal .9s var(--ease) forwards}
.gate-mark path:nth-child(2){animation-delay:.1s}.gate-mark path:nth-child(3){animation-delay:.2s}.gate-mark path:nth-child(4){animation-delay:.3s}.gate-mark path:nth-child(5){animation-delay:.4s}.gate-mark path:nth-child(6){animation-delay:.5s}
@keyframes petal{to{opacity:1;transform:none}}
.gate-count{font-size:clamp(2.4rem,7vw,4.6rem);font-variant-numeric:tabular-nums}
.gate-btn{margin-top:.5rem;padding:1rem 2.4rem;border:1px solid var(--hairline-2);border-radius:999px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .4s,border-color .4s}
.gate-btn.is-ready{opacity:1;transform:none}.gate-btn:hover{background:var(--crimson);border-color:var(--crimson)}

/* ── hero ─────────────────────────────────────────────────────────────── */
.h-hero{position:relative;height:100svh;isolation:isolate;overflow:hidden}
.h-hero .hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.h-hero .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,9,10,.4),rgba(11,9,10,.05) 45%,rgba(11,9,10,.92))}
.h-hero .top{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);top:6.2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.h-hero .name{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(6.5rem,14vh,9rem)}
.h-hero .name h1{font-size:clamp(4rem,15.5vw,15rem);line-height:.8;letter-spacing:-.012em}
.h-hero .name h1 .lift:nth-child(2)>*{padding-left:clamp(2rem,12vw,14rem)}
.h-hero .sub{margin-top:1.2rem;display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.h-hero .sub h2{font-family:var(--font-mono);font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.next{display:inline-flex;align-items:center;gap:.7rem;padding:.55rem .55rem .55rem 1rem;border:1px solid var(--hairline-2);border-radius:999px;backdrop-filter:blur(8px);background:rgba(11,9,10,.35)}
.next .mono{color:var(--ivory)}
.next .go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--crimson-live);transition:transform .4s var(--ease)}
.next:hover .go{transform:rotate(45deg)}
.next .go i{width:8px;height:8px;border-top:1.5px solid var(--ivory);border-right:1.5px solid var(--ivory);transform:rotate(45deg)}
.sig{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(6.5rem,14vh,9rem);width:clamp(60px,7vw,96px);opacity:.9}
.sig path{fill:var(--crimson-live)}
.h-hero .ticker{position:absolute;z-index:2;left:0;right:0;bottom:0}
.ticker--ghost{background:transparent;border-block:1px solid var(--hairline)}
.ticker--ghost .ticker-track span{font-family:var(--font-mono);color:var(--muted)}
.scroll-hint{position:absolute;z-index:2;left:50%;bottom:3.4rem;translate:-50% 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.4rem}
.scroll-hint i{width:1px;height:26px;background:linear-gradient(var(--crimson-live),transparent);animation:hint 1.8s var(--ease-io) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── message ──────────────────────────────────────────────────────────── */
.message{padding:clamp(6rem,14vh,11rem) var(--gutter);display:grid;gap:2rem}
@media(min-width:900px){.message{grid-template-columns:1fr 3fr}}
.message .mono{padding-top:.5rem}
.message p{font-size:clamp(1.6rem,3.4vw,3.2rem);line-height:1.18;font-weight:400;max-width:24ch;color:var(--muted)}
.message p b{color:var(--ivory);font-weight:600}

/* ── the rail ─────────────────────────────────────────────────────────── */
.rail{position:relative}
.rail-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.rail-track{display:flex;align-items:center;gap:clamp(1.4rem,3vw,3.2rem);padding-inline:var(--gutter);will-change:transform}
.rf{flex:none;display:grid;gap:.6rem}
.rf .mono{order:-1}
.rf img{border-radius:6px;object-fit:cover;filter:contrast(1.04)}
.rf--l{width:clamp(300px,40vw,620px)}.rf--l img{width:100%;aspect-ratio:3/2}
.rf--p{width:clamp(200px,24vw,360px)}.rf--p img{width:100%;aspect-ratio:4/5}
.rf--s{width:clamp(220px,28vw,420px)}.rf--s img{width:100%;aspect-ratio:1}
.rq{flex:none;width:clamp(280px,34vw,540px);padding-inline:clamp(.5rem,2vw,2rem);display:grid;gap:1.2rem}
.rq p{font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.2;font-weight:500}
.rq svg{width:56px}.rq svg path{fill:var(--crimson-live)}
.rn{flex:none;display:grid;gap:.4rem;padding-inline:1rem}
.rn b{font-size:clamp(4rem,11vw,10rem);line-height:.85;letter-spacing:-.012em;color:var(--crimson-live)}
.rn .mono{max-width:14ch}
.ri{flex:none;width:clamp(70px,8vw,110px)}
.ri path{fill:none;stroke:var(--ivory);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rail-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:2.2rem;height:1px;background:var(--hairline)}
.rail-bar span{display:block;height:100%;width:0;background:var(--crimson-live)}
.rail-label{position:absolute;left:var(--gutter);top:6rem;z-index:2}
.rail-num{position:absolute;right:var(--gutter);top:6rem;z-index:2;font-variant-numeric:tabular-nums}

/* ── ON / OFF split ───────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr;position:relative;isolation:isolate}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split-side{position:relative;min-height:72svh;padding:clamp(3rem,7vh,5rem) var(--gutter);display:grid;align-content:end;gap:1rem;overflow:hidden;border-top:1px solid var(--hairline)}
.split-side+.split-side{border-left:1px solid var(--hairline)}
.split-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.35;filter:grayscale(.5) contrast(1.1);transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.6s var(--ease),filter .7s var(--ease)}
.split-side:hover img{opacity:.75;transform:scale(1);filter:grayscale(0) contrast(1.05)}
.split-side::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,9,10,.2),rgba(11,9,10,.85))}
.split-side h2{font-size:clamp(4rem,11vw,10.5rem);line-height:.8;letter-spacing:-.012em}
.split-side h2 span{display:block}.split-side h2 span+span{color:var(--crimson-live)}
.split-side p{max-width:34ch;color:var(--muted)}
.split-side p b{color:var(--ivory)}
.split-side .path{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted)}
.split-side:hover .path{color:var(--rose)}

/* ── Hall of Fame → departments ───────────────────────────────────────── */
.hof-head{display:grid;gap:1.5rem;padding:clamp(5rem,12vh,9rem) var(--gutter) 3rem}
@media(min-width:900px){.hof-head{grid-template-columns:1.2fr 1fr;align-items:end}}
.hof-head h2{font-size:clamp(3rem,9vw,8.5rem);line-height:.82;letter-spacing:-.012em}
.hof-head h2 span{display:block}.hof-head h2 span+span{padding-left:clamp(1rem,8vw,9rem)}
.hof-head p{max-width:40ch;color:var(--muted)}
.hof{display:grid;gap:clamp(1.2rem,2.4vw,2.4rem);padding:0 var(--gutter) clamp(5rem,12vh,9rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.hof{grid-template-columns:repeat(3,1fr)}}
.hf{position:relative;display:block;padding-bottom:1.6rem}
.hf .pic{display:block;position:relative;aspect-ratio:1/1.05;border-radius:8px;overflow:hidden;background:var(--surface)}
.hf .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.hf .pic .hover{opacity:0;transform:scale(1.06)}
.hf:hover .pic .hover{opacity:1;transform:none}
.hf .pic .base{filter:grayscale(.55) brightness(.62) contrast(1.1)}
.hf .icon{display:block;position:absolute;left:1rem;top:1rem;width:40px;z-index:2}
.hf .icon path{fill:none;stroke:var(--ivory);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the fade extenders — a coloured bleed under each card, grey at rest, crimson on hover */
.hf .ext{position:absolute;left:8%;right:8%;bottom:-.2rem;height:5rem;z-index:-1;border-radius:50%;filter:blur(24px);background:rgba(244,240,235,.08);transition:background .6s var(--ease),transform .6s var(--ease)}
.hf:hover .ext{background:rgba(181,31,50,.55);transform:translateY(.6rem)}
.hf .cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.hf .cap h3{font-size:clamp(1.3rem,2.4vw,2rem);line-height:1}
.hf .cap .mono{white-space:nowrap}
.hof-foot{padding:0 var(--gutter) clamp(5rem,12vh,9rem);display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hof-foot p{color:var(--muted);max-width:36ch}

/* ── feature (store block → Knowledge Directory) ──────────────────────── */
.feature{position:relative;display:grid;gap:3rem;padding:clamp(6rem,14vh,11rem) var(--gutter);overflow:hidden;isolation:isolate}
@media(min-width:960px){.feature{grid-template-columns:1fr 1.1fr;align-items:center}}
.feature h2{font-size:clamp(2.8rem,7vw,6.5rem);line-height:.86;letter-spacing:-.012em;max-width:9ch}
.feature p{max-width:36ch;color:var(--muted);margin:1.3rem 0 2rem}
.cluster{position:relative;height:clamp(360px,44vw,620px)}
.cluster img{position:absolute;border-radius:8px;box-shadow:0 30px 60px rgba(0,0,0,.45);object-fit:cover;transition:transform .9s var(--ease)}
.cluster img:nth-child(1){left:0;top:8%;width:52%;aspect-ratio:16/10;transform:rotate(-4deg)}
.cluster img:nth-child(2){right:0;top:0;width:44%;aspect-ratio:16/10;transform:rotate(3deg)}
.cluster img:nth-child(3){left:22%;bottom:0;width:46%;aspect-ratio:16/10;transform:rotate(1.5deg)}
.cluster img:nth-child(4){right:6%;bottom:12%;width:36%;aspect-ratio:16/10;transform:rotate(-2deg)}
.cluster:hover img{transform:rotate(0) scale(1.02)}

/* ── partners & campaigns → grid with blobs ───────────────────────────── */
.partners{position:relative;padding:clamp(6rem,14vh,11rem) var(--gutter);isolation:isolate;overflow:hidden}
.partners h2{font-size:clamp(3rem,9vw,8.5rem);line-height:.82;letter-spacing:-.012em}
.partners h2 span{display:block}.partners h2 span+span{padding-left:clamp(1rem,6vw,6rem);color:var(--crimson-live)}
.partners .intro{display:grid;gap:1.5rem;margin:2rem 0 3.5rem}
@media(min-width:900px){.partners .intro{grid-template-columns:1fr 1fr;align-items:end}}
.partners .intro p{max-width:40ch;color:var(--muted)}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border-radius:10px;overflow:hidden}
@media(min-width:760px){.logo-grid{grid-template-columns:repeat(7,1fr)}}
.logo-grid div{background:var(--ink);aspect-ratio:1.5;display:grid;place-items:center;padding:1.2rem;transition:background .5s var(--ease)}
.logo-grid div:hover{background:var(--surface)}
.logo-grid img{max-height:40px;width:auto;opacity:.6;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.logo-grid div:hover img{opacity:1;transform:scale(1.06)}
.blobs{position:absolute;inset:-10% -10% auto auto;width:52vw;max-width:760px;z-index:-1;opacity:.55;filter:blur(2px)}
.blobs path{fill:var(--crimson)}
.blobs path:nth-child(2){fill:var(--crimson-live);opacity:.7}

/* ── socials scatter ──────────────────────────────────────────────────── */
.socials{padding:clamp(6rem,14vh,11rem) var(--gutter);position:relative}
.socials h2{font-size:clamp(3rem,9vw,8.5rem);line-height:.82;letter-spacing:-.012em;margin-bottom:3rem}
.socials h2 span{display:block}.socials h2 span+span{padding-left:clamp(2rem,14vw,18rem)}
.scatter{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,2vw,1.6rem);align-items:start}
.scatter figure{border-radius:6px;overflow:hidden;background:var(--surface);will-change:transform}
.scatter img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:contrast(1.04);transition:transform 1.2s var(--ease)}
.scatter figure:hover img{transform:scale(1.05)}
.scatter figure:nth-child(1){grid-column:1/3;margin-top:8%}
.scatter figure:nth-child(2){grid-column:3/4;margin-top:24%}
.scatter figure:nth-child(3){grid-column:4/6;margin-top:0}
.scatter figure:nth-child(4){grid-column:6/7;margin-top:30%}
.scatter figure:nth-child(5){grid-column:2/3;margin-top:6%}
.scatter figure:nth-child(6){grid-column:3/5;margin-top:-10%}
.scatter figure:nth-child(7){grid-column:5/7;margin-top:12%}
@media(max-width:760px){.scatter{grid-template-columns:repeat(2,1fr)}.scatter figure{grid-column:auto!important;margin-top:0!important}}
.follow{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.follow .mono{margin-right:auto}
.follow a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--hairline-2);padding-block:.2rem}
.follow a:hover{color:var(--rose);border-color:var(--rose)}

/* ── footer (reference layout) ────────────────────────────────────────── */
.ft{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--hairline)}
.ft-top{display:grid;gap:2.5rem;padding:clamp(3rem,7vh,5rem) var(--gutter)}
@media(min-width:900px){.ft-top{grid-template-columns:1fr 1fr 1fr 1.4fr}}
.ft-top h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.ft-top a{display:block;font-size:1.05rem;padding-block:.2rem}
.ft-top a:hover{color:var(--rose)}
.ft-top .signup{display:grid;gap:.8rem}
.ft-top .signup p{color:var(--muted);font-size:.9375rem}
.ft-statement{position:relative;padding:clamp(4rem,12vh,9rem) var(--gutter) clamp(2rem,6vh,4rem);display:grid;gap:2rem}
@media(min-width:900px){.ft-statement{grid-template-columns:1.6fr 1fr;align-items:center}}
.ft-statement h2{font-size:clamp(3.4rem,12vw,12rem);line-height:.82;letter-spacing:-.012em}
.ft-statement .obj{width:clamp(180px,22vw,340px);justify-self:end;animation:spin 48s linear infinite}
.ft-statement .obj path{fill:var(--crimson-live)}
.ft-blob{position:absolute;left:-10%;bottom:-20%;width:50vw;z-index:-1;opacity:.35;filter:blur(3px)}
.ft-blob path{fill:var(--crimson)}
.ft-logos{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;padding:1.8rem var(--gutter);border-top:1px solid var(--hairline)}
.ft-logos img{height:26px;width:auto;opacity:.5}
.ft-base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding:1.2rem var(--gutter);border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ft-base a:hover{color:var(--rose)}

@media(prefers-reduced-motion:reduce){.rail-sticky{position:static;height:auto}.rail-track{overflow-x:auto;transform:none!important}#gate{display:none}}