/* ==========================================================================
   MAGNA PHYSIQUE V6 — "BOLD" · light + orange · est. 2015
   ========================================================================== */
@font-face { font-family: 'Anton'; src: url('../fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('../fonts/plexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --paper: #FAFAF7;
  --paper-2: #F1F0EA;
  --ink: #101014;
  --ink-soft: #43434C;
  --ink-faint: rgba(16,16,20,0.42);
  --orange: #F7941D;
  --orange-hot: #F7941D;
  --orange-soft: rgba(247,148,29,0.14);
  --silver: #C9CDD4;
  --silver-deep: #9A9AA4;
  --chrome-text: linear-gradient(105deg,#e9e9ee 0%,#ffffff 14%,#96969f 30%,#ffffff 44%,#FF8A2A 52%,#86868f 60%,#f4f4f6 74%,#b9bdc4 88%,#ffffff 100%);
  --display: 'Anton','Arial Narrow',sans-serif;
  --body: 'Inter',-apple-system,sans-serif;
  --mono: 'Plex Mono','SF Mono',monospace;
  --rail-w: 84px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--body);
  overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.no-native-cursor, body.no-native-cursor a, body.no-native-cursor button,
body.no-native-cursor select, body.no-native-cursor input, body.no-native-cursor textarea { cursor: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--orange-hot); color: #fff; }

.eyebrow {
  font-family: var(--mono); font-size: clamp(10px,1vw,12px); font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--orange-hot);
}
.h-display { font-family: var(--display); text-transform: uppercase; line-height: .92; letter-spacing: .004em; }
.accent { color: var(--orange-hot); font-style: normal; }
.chrome { background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- preloader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 2000; background: var(--paper);
  display: grid; place-items: center;
}
#loader .box { text-align: center; }
#loader img { width: 74px; height: 74px; margin: 0 auto 18px; }
#loader .name { font-family: var(--display); font-size: 22px; letter-spacing: .18em; text-transform: uppercase; }
#loader .est { font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--ink-faint); margin-top: 8px; }
#loader .bar { width: 180px; height: 2px; background: rgba(16,16,20,.1); margin: 22px auto 0; overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 100%; background: var(--orange-hot); transform: scaleX(0); transform-origin: left; }

/* ---------- cursor ---------- */
#cursor { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; mix-blend-mode: normal; }
#cursor .core { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); width: 26px; height: 26px; }
#cursor .core img { width: 100%; height: 100%; transition: opacity .2s; }
#cursor .core img.orange { position: absolute; inset: 0; opacity: 0; }
#cursor .tick { position: absolute; left: 0; top: 0; width: 2px; height: 7px; background: var(--ink); transform-origin: center; opacity: .9; }
#cursorRing {
  position: fixed; left: 0; top: 0; z-index: 2990; pointer-events: none;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 1.4px solid rgba(16,16,20,.35); transition: width .28s, height .28s, margin .28s, border-color .28s, opacity .28s;
}
body.cursor-hover #cursorRing { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-color: var(--orange-hot); }
body.cursor-hover #cursor .core img.ink { opacity: 0; }
body.cursor-hover #cursor .core img.orange { opacity: 1; }
body.cursor-down #cursorRing { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
@media (pointer: coarse) { #cursor, #cursorRing { display: none !important; } }

/* ---------- header ---------- */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(18px,3vw,42px);
}
#header .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
#header .brand img { width: 34px; height: 34px; }
#header .brand b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .14em; }
#header .right { display: flex; align-items: center; gap: 18px; }
#header .est { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }
#header.on-dark .brand, #header.on-dark .est { color: #fff; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; text-align: center; border: 0;
  background: var(--orange-hot); color: #fff; padding: 15px 28px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(247,148,29,.32);
}
.btn.small { padding: 11px 20px; font-size: 10px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.4px solid rgba(16,16,20,.28); box-shadow: none; }

/* ---------- HUD rail ---------- */
#rail {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 800;
  display: flex; flex-direction: column; gap: 20px; font-family: var(--mono);
}
#rail .stop { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
#rail .stop i { width: 7px; height: 7px; border-radius: 50%; background: rgba(16,16,20,.2); transition: all .35s; }
#rail .stop span { font-size: 8.5px; letter-spacing: .22em; color: rgba(16,16,20,.34); transition: color .35s; }
#rail .stop.on i { background: var(--orange-hot); box-shadow: 0 0 12px rgba(247,148,29,.6); }
#rail .stop.on span { color: var(--ink); }
#rail.on-dark .stop span { color: rgba(255,255,255,.4); }
#rail.on-dark .stop.on span { color: #fff; }
@media (max-width: 860px) { #rail { display: none; } }

/* ---------- HERO / ARRIVAL ---------- */
#arrival { position: relative; }
#arrival .shot { position: relative; height: 100vh; overflow: hidden; background: #fff; }
#arrival .shot .img {
  position: absolute; inset: -7% -11%; width: 122%; height: 114%;
  background-size: cover; background-position: 58% 42%; will-change: transform; transform-origin: 60% 45%;
}
#arrival .haze { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.28) 100%); }
#arrival .veil { position: absolute; inset: 0; z-index: 3; background: var(--paper); }
.hero-copy { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 0 6vw; }
.hero-copy h1 { font-size: clamp(50px,9.2vw,148px); }
.hero-copy h1 .line { display: block; overflow: hidden; }
.hero-copy h1 .line span { display: inline-block; will-change: transform; }
.hero-copy .sub { margin: 24px auto 0; max-width: 560px; font-size: clamp(13.5px,1.4vw,17px); font-weight: 500; color: var(--ink-soft); }
.hero-copy .cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-copy .eyebrow { margin-bottom: 22px; }
#arrival .cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; color: var(--ink-faint);
}
#arrival .cue i { display: block; width: 1.4px; height: 34px; background: linear-gradient(var(--orange-hot),transparent); margin: 10px auto 0; }
.hero-slam { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; opacity: 0; padding: 0 6vw; }
.hero-slam h2 { font-size: clamp(38px,6.6vw,104px); text-shadow: 0 2px 34px rgba(255,255,255,.9); }

/* ---------- THE DREAM ---------- */
#dream { position: relative; padding: 20vh 6vw 14vh; background: var(--paper); overflow: hidden; }
#dream .float-word {
  position: absolute; font-family: var(--display); text-transform: uppercase; color: transparent;
  -webkit-text-stroke: 1.6px rgba(247,148,29,.20); font-size: clamp(90px,14vw,230px); white-space: nowrap; pointer-events: none;
}
#dream .fill-line {
  max-width: 1150px; margin: 0 auto; text-align: center;
  font-family: var(--display); text-transform: uppercase; line-height: 1.04;
  font-size: clamp(34px,5.6vw,84px);
}
#dream .fill-line .w { display: inline-block; margin: 0 .14em; color: rgba(16,16,20,.14); transition: none; }
#dream .fill-line .w.hot { color: rgba(247,148,29,.2); }
#dream .dream-sub { max-width: 620px; margin: 5vh auto 0; text-align: center; font-size: clamp(14px,1.5vw,17.5px); line-height: 1.7; color: var(--ink-soft); font-weight: 500; }
.markers { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; max-width: 1150px; margin: 9vh auto 0; perspective: 1100px; }
.marker {
  background: linear-gradient(165deg,#fff 0%,#F0F0EC 100%); border: 1px solid rgba(16,16,20,.08);
  border-radius: 22px; padding: 34px 30px 38px; position: relative; overflow: hidden;
  box-shadow: 0 22px 60px rgba(16,16,20,.10); transform-style: preserve-3d; will-change: transform;
}
.marker .sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),rgba(255,255,255,0) 46%); mix-blend-mode: screen; transition: opacity .3s; }
.marker:hover .sheen { opacity: 1; }
.marker .num { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--orange-hot); }
.marker h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px,2.2vw,30px); margin: 14px 0 10px; }
.marker p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 900px) { .markers { grid-template-columns: 1fr; } }

/* ---------- THE CREED ---------- */
#creed { position: relative; background: var(--ink); }
#creed .pinwrap { height: 100vh; display: grid; place-items: center; overflow: hidden; position: relative; }
#creed .word { position: absolute; text-align: center; opacity: 0; will-change: transform; font-size: clamp(86px,17vw,290px); line-height: .85; font-family: var(--display); text-transform: uppercase; padding: 0 5vw; }
#creed .word small { display: block; font-family: var(--body); font-weight: 500; text-transform: none; font-size: clamp(13px,1.4vw,17px); color: var(--ink-soft); margin-top: 3.2vh; max-width: 640px; margin-left: auto; margin-right: auto; }
#creed .word { background: linear-gradient(180deg, #FFFFFF 0%, #83838C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#creed .word small { -webkit-text-fill-color: rgba(255,255,255,0.72); color: rgba(255,255,255,0.72); }
#creed .word .pre { display: block; font-size: clamp(16px,2.4vw,36px); letter-spacing: .5em; text-indent: .5em; line-height: 1; margin-bottom: 1.6vh; -webkit-text-fill-color: var(--orange-hot); color: var(--orange-hot); }
#creed #cw3 .period { color: var(--orange-hot); -webkit-text-fill-color: var(--orange-hot); }
#creed .creed-eyebrow { position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); }

/* ---------- THE METHOD ---------- */
#method { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
#method .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; will-change: transform; filter: saturate(1.05); }
#method .shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(16,16,20,.86) 0%,rgba(16,16,20,.55) 50%,rgba(16,16,20,.9) 100%); }
#method .pinwrap { position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: center; z-index: 2; overflow: hidden; }
#method h2 { font-size: clamp(30px,4.8vw,66px); padding: 0 6vw; margin-bottom: 2.4vh; }
#method .lede { padding: 0 6vw; max-width: 640px; color: rgba(255,255,255,.68); font-size: 14.5px; line-height: 1.65; margin-bottom: 5vh; font-weight: 500; }
#method .track { display: flex; gap: 24px; padding: 0 6vw; will-change: transform; }
.m-card {
  flex: 0 0 auto; width: min(360px,76vw); border-radius: 20px; padding: 30px 28px 34px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); transform-style: preserve-3d; will-change: transform; position: relative; overflow: hidden;
}
.m-card .num { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--orange); }
.m-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 26px; margin: 14px 0 10px; letter-spacing: .02em; }
.m-card p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.66); }
.m-card .icon { width: 44px; height: 44px; stroke: var(--orange); margin-bottom: 4px; }

/* ---------- THE PEOPLE ---------- */
#people { position: relative; background: var(--paper); padding: 18vh 0 0; overflow: hidden; }
#people .rollcall { padding: 0 6vw; }
#people .rollcall .line { display: block; overflow: hidden; font-size: clamp(46px,8.6vw,138px); font-family: var(--display); text-transform: uppercase; line-height: .95; }
#people .rollcall .line span { display: inline-block; will-change: transform; }
#people .rollcall .ghost span { color: transparent; -webkit-text-stroke: 2px rgba(16,16,20,.32); }
#people .rollcall .punch span { color: var(--orange-hot); }
#people .kicker { padding: 0 6vw; margin-top: 3.4vh; max-width: 520px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); font-weight: 500; }
#people .feature { position: relative; margin: 8vh 6vw 0; }
#people .frame { position: relative; border-radius: 26px; overflow: hidden; box-shadow: 0 42px 110px rgba(16,16,20,.2); }
#people .frame .img { width: 100%; height: min(84vh,760px); background-size: cover; background-position: center 30%; will-change: transform; }
#people .frame .tag { position: absolute; left: 26px; bottom: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; color: #fff; background: rgba(16,16,20,.62); backdrop-filter: blur(8px); padding: 10px 16px; border-radius: 999px; }
#roster { position: relative; background: var(--paper-2); margin-top: 12vh; overflow: hidden; }
#roster .pinwrap { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
#roster h2 { font-size: clamp(30px,4.6vw,62px); padding: 0 6vw; margin-bottom: 4.5vh; }
#roster .track { display: flex; gap: 24px; padding: 0 6vw; will-change: transform; }
.r-card { flex: 0 0 auto; width: min(400px,78vw); border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(16,16,20,.09); box-shadow: 0 24px 60px rgba(16,16,20,.12); transform-style: preserve-3d; will-change: transform; }
.r-card .ph { height: 340px; overflow: hidden; position: relative; }
.r-card .ph .img { position: absolute; inset: 0; background-size: cover; will-change: transform; }
.r-card .meta { padding: 22px 24px 28px; }
.r-card .meta .num { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--orange-hot); }
.r-card .meta h3 { font-family: var(--display); text-transform: uppercase; font-size: 25px; margin: 10px 0 8px; }
.r-card .meta p { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }

/* ---------- THE PROOF ---------- */
#proof { position: relative; background: var(--paper); padding: 16vh 6vw; }
#proof .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; max-width: 1180px; margin: 0 auto 12vh; text-align: center; }
#proof .stat b { font-family: var(--display); font-weight: 400; font-size: clamp(40px,5.6vw,84px); display: block; line-height: 1; }
#proof .stat b span { font: inherit; color: inherit; letter-spacing: inherit; display: inline; margin: 0; }
#proof .stat b i { font-style: normal; color: var(--orange-hot); }
#proof .stat > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--ink-faint); display: block; margin-top: 12px; text-transform: uppercase; }
#proof h2 { text-align: center; font-size: clamp(30px,4.6vw,62px); margin-bottom: 7vh; }
.deck { position: relative; max-width: 860px; margin: 0 auto; height: 340px; }
.quote-card {
  position: absolute; inset: 0; background: #fff; border: 1px solid rgba(16,16,20,.09); border-radius: 24px;
  padding: 44px 48px; box-shadow: 0 30px 70px rgba(16,16,20,.13); display: flex; flex-direction: column; justify-content: space-between;
  will-change: transform; transform-origin: center 120%;
}
.quote-card p { font-size: clamp(15px,1.7vw,19.5px); line-height: 1.6; font-weight: 500; color: var(--ink); }
.quote-card .who { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--orange-hot); text-transform: uppercase; }
.quote-card .mark { font-family: var(--display); font-size: 60px; line-height: 1; color: var(--orange-soft); position: absolute; top: 18px; right: 30px; }
@media (max-width: 900px) { #proof .stats { grid-template-columns: repeat(2,1fr); } .deck { height: 460px; } .quote-card { padding: 32px 26px; } }

/* ---------- THE SYSTEM (what you get) ---------- */
#system { position: relative; background: #fff; padding: 16vh 6vw; overflow: hidden; }
#system .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,5vw,80px); max-width: 1240px; margin: 0 auto; align-items: center; }
#system .phone-wrap { display: grid; place-items: center; perspective: 1200px; }
.phone {
  width: min(300px,70vw); aspect-ratio: 9/19; border-radius: 44px; position: relative;
  background: linear-gradient(160deg,#17171d,#2a2a33); padding: 12px; will-change: transform;
  box-shadow: 0 50px 110px rgba(16,16,20,.35), inset 0 0 0 2px rgba(255,255,255,.08);
}
.phone .screen { position: absolute; inset: 12px; border-radius: 34px; overflow: hidden; background: #FAFAF7; }
.phone .screen .app-shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone .notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 88px; height: 22px; border-radius: 999px; background: #101014; z-index: 3; }
.phone .app-head { position: absolute; top: 0; left: 0; right: 0; height: 34%; display: grid; place-items: center; }
.phone .app-head .logo { text-align: center; color: #fff; }
.phone .app-head .logo img { width: 44px; height: 44px; margin: 0 auto 8px; filter: brightness(0) invert(1); }
.phone .app-head .logo b { font-family: var(--display); font-weight: 400; letter-spacing: .12em; font-size: 19px; display: block; }
.phone .app-head .logo span { font-family: var(--mono); font-size: 8px; letter-spacing: .3em; opacity: .85; }
.phone .rows { position: absolute; top: 37%; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 10px; }
.phone .row { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(16,16,20,.07); display: flex; align-items: center; gap: 10px; }
.phone .row i { width: 26px; height: 26px; border-radius: 8px; background: var(--orange-soft); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--orange-hot); font-style: normal; }
.phone .row div { flex: 1; }
.phone .row b { display: block; font-size: 10.5px; font-weight: 600; }
.phone .row span { font-size: 8.5px; color: var(--ink-faint); }
.phone .row .bar { height: 4px; border-radius: 99px; background: var(--paper-2); margin-top: 5px; overflow: hidden; }
.phone .row .bar i { display: block; height: 100%; width: 70%; border-radius: 0; background: var(--orange-hot); }
.phone .shots-note { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 7.5px; letter-spacing: .2em; color: var(--ink-faint); }
#system .copy .eyebrow { margin-bottom: 16px; }
#system h2 { font-size: clamp(30px,4.4vw,58px); margin-bottom: 2.6vh; }
#system .lede { color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 520px; font-weight: 500; margin-bottom: 4.5vh; }
.gets { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.gets li { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(16,16,20,.08); overflow: hidden; }
.gets .check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-soft); display: grid; place-items: center; margin-top: 2px; }
.gets .check svg { width: 13px; height: 13px; fill: none; stroke: var(--orange-hot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gets b { display: block; font-size: 15px; font-weight: 600; }
.gets span { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 980px) { #system .grid { grid-template-columns: 1fr; } }

/* ---------- THE COURSE ---------- */
#course { position: relative; background: var(--paper-2); padding: 16vh 6vw; }
#course .head { text-align: center; max-width: 860px; margin: 0 auto 7vh; }
#course h2 { font-size: clamp(30px,4.6vw,62px); margin: 14px 0 2.4vh; }
#course .lede { color: var(--ink-soft); font-size: 15px; line-height: 1.65; font-weight: 500; }
#course .vip-stats { display: flex; gap: 26px; justify-content: center; align-items: center; margin-top: 3.4vh; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; color: var(--ink-soft); }
#course .vip-stats b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--ink); margin-right: 8px; vertical-align: -4px; }
#course .vip-stats i { width: 1px; height: 26px; background: rgba(16,16,20,.16); }
.mods { max-width: 1080px; margin: 0 auto; }
.mod { border-bottom: 1px solid rgba(16,16,20,.1); overflow: hidden; }
.mod-head { display: flex; align-items: center; gap: 22px; padding: 22px 6px; }
.mod-head .n { font-family: var(--display); font-size: clamp(26px,3vw,40px); background: linear-gradient(180deg, #2E2E36 0%, #A6AAB1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 64px; }
.mod-head h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(18px,2.2vw,28px); letter-spacing: .02em; flex: 1; }
.mod-head .c { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--ink-faint); }
.mod .lessons { display: none; padding: 2px 6px 22px 86px; flex-wrap: wrap; gap: 8px; }
.mods.open .mod .lessons { display: flex; }
.lesson { font-size: 12px; font-weight: 500; color: var(--ink-soft); background: #fff; border: 1px solid rgba(16,16,20,.09); padding: 8px 14px; border-radius: 999px; }
.lesson .vl { font-family: var(--mono); font-size: 9px; color: var(--orange-hot); margin-right: 7px; }
#courseToggle { display: block; margin: 5vh auto 0; }
@media (max-width: 720px) { .mod .lessons { padding-left: 6px; } }

/* ---------- THE COACH ---------- */
#coach { position: relative; background: var(--ink); color: #fff; padding: 16vh 6vw; overflow: hidden; }
#coach .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px,5vw,80px); max-width: 1240px; margin: 0 auto; align-items: center; }
#coach .portrait { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
#coach .portrait .img { width: 100%; height: min(78vh,700px); background-size: cover; background-position: center 20%; will-change: transform; }
#coach .portrait .tag { position: absolute; left: 22px; bottom: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: #fff; background: rgba(16,16,20,.6); backdrop-filter: blur(8px); padding: 9px 15px; border-radius: 999px; }
#coach h2 { font-size: clamp(32px,4.6vw,62px); margin: 14px 0 3vh; }
#coach .story p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.7; margin-bottom: 2.4vh; max-width: 560px; overflow: hidden; }
#coach .story p b { color: #fff; }
#coach .sig { width: 200px; margin: 3vh 0 3.4vh; }
#coach .badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--orange); border: 1px solid rgba(247,148,29,.4); padding: 10px 16px; border-radius: 999px; margin-bottom: 3.4vh; }
@media (max-width: 980px) { #coach .grid { grid-template-columns: 1fr; } }

/* ---------- THE TABLE / FORM ---------- */
#invite { position: relative; overflow: hidden; }
#invite .bg { position: absolute; inset: -6%; background-size: cover; background-position: center 60%; will-change: transform; }
#invite .shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(250,250,247,.92) 0%,rgba(250,250,247,.55) 30%,rgba(250,250,247,.25) 100%); }
#invite .inner { position: relative; z-index: 2; padding: 16vh 6vw 14vh; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: start; }
#invite .pitch .eyebrow { margin-bottom: 16px; }
#invite h2 { font-size: clamp(34px,5vw,72px); margin-bottom: 2.6vh; }
#invite .pitch p { max-width: 460px; color: var(--ink-soft); font-size: 15px; line-height: 1.68; font-weight: 500; }
#invite .coach-chip { display: flex; align-items: center; gap: 14px; margin-top: 4vh; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border: 1px solid rgba(16,16,20,.09); border-radius: 18px; padding: 14px 18px; max-width: 380px; box-shadow: 0 18px 46px rgba(16,16,20,.12); }
#invite .coach-chip .face { width: 54px; height: 54px; border-radius: 14px; background-size: cover; background-position: center 22%; flex: 0 0 auto; }
#invite .coach-chip b { display: block; font-size: 13px; font-weight: 600; }
#invite .coach-chip span { font-size: 11.5px; color: var(--ink-soft); }
.form-card {
  position: relative; background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border: 1px solid rgba(16,16,20,.08); border-radius: 26px; padding: 38px 36px 40px;
  box-shadow: 0 44px 110px rgba(16,16,20,.22); overflow: hidden;
}
.form-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 26px; margin-bottom: 6px; }
.form-card .fnote { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 26px; }
.field { position: relative; margin-bottom: 16px; overflow: hidden; }
.field input, .field select {
  width: 100%; font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1.4px solid rgba(16,16,20,.12); border-radius: 14px; padding: 15px 16px; outline: none;
  transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input:focus, .field select:focus { border-color: var(--orange-hot); box-shadow: 0 0 0 4px rgba(247,148,29,.12); }
.field input.err, .field select.err { border-color: #E23636; }
.sched-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--ink-faint); text-transform: uppercase; margin: 20px 0 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; padding: 10px 14px; border-radius: 999px;
  border: 1.4px solid rgba(16,16,20,.14); background: #fff; color: var(--ink); user-select: none;
  transition: all .2s;
}
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#submitBtn { width: 100%; margin-top: 26px; }
.form-foot { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 14px; }
#success {
  position: absolute; inset: 0; z-index: 5; background: var(--ink); color: #fff; border-radius: 26px;
  display: grid; place-items: center; text-align: center; padding: 40px; clip-path: circle(0% at 50% 90%);
  visibility: hidden;
}
#success .ok { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--orange); display: grid; place-items: center; margin: 0 auto 22px; }
#success .ok svg { width: 30px; height: 30px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#success h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 34px; margin-bottom: 10px; }
#success p { font-size: 13.5px; color: rgba(255,255,255,.7); max-width: 300px; margin: 0 auto; line-height: 1.6; }
@media (max-width: 980px) { #invite .inner { grid-template-columns: 1fr; } }

/* ---------- FASTER intake gate ---------- */
.field label {
  display: block; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.field textarea {
  width: 100%; font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1.4px solid rgba(16,16,20,.12); border-radius: 14px; padding: 14px 16px; outline: none;
  resize: vertical; min-height: 5.4em; transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none;
}
.field textarea::placeholder { color: var(--ink-faint); }
.field textarea:focus { border-color: var(--orange-hot); box-shadow: 0 0 0 4px rgba(247,148,29,.12); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #E23636; }
.field-error { display: none; margin-top: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: #E23636; }
.field.invalid .field-error { display: block; }

.intake-overlay {
  position: fixed; inset: 0; z-index: 2500; display: none; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 7vh 5vw 8vh; background: rgba(16,16,20,.66); backdrop-filter: blur(10px);
}
.intake-overlay.active { display: flex; }
.intake-inner {
  width: min(640px,100%); background: var(--paper); border: 1px solid rgba(16,16,20,.08); border-radius: 26px;
  padding: clamp(28px,3.4vw,44px); box-shadow: 0 44px 110px rgba(16,16,20,.32);
}
.intake-head { text-align: center; margin-bottom: 28px; }
.intake-head h3 { font-size: clamp(24px,3.2vw,32px); margin-top: 8px; }
.intake-sub { margin-top: 11px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.intake-section-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-hot);
  margin: 28px 0 16px; padding-top: 20px; border-top: 1px solid rgba(16,16,20,.08);
}
.intake-section-label span {
  display: block; margin-top: 5px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; font-family: var(--body);
}
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.hours-field { margin-bottom: 0; }
.hours-field input { text-align: center; }
.hours-total { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.hours-total.ok span { color: var(--orange-hot); font-weight: 600; }
.hours-total.bad span { color: #E23636; font-weight: 600; }
.hours-field-wrap .field-error { text-align: center; }
#intakeSubmitBtn { width: 100%; margin-top: 26px; }
@media (max-width: 560px) { .hours-grid { grid-template-columns: 1fr 1fr; gap: 12px 14px; } }

/* ---------- FOOTER ---------- */
#footer { background: var(--ink); color: #fff; padding: 12vh 0 6vh; overflow: hidden; }
#footer .marquee { overflow: hidden; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
#footer .marquee .inner { display: flex; white-space: nowrap; will-change: transform; }
#footer .marquee span { font-family: var(--display); text-transform: uppercase; font-size: 28px; letter-spacing: .06em; padding-right: 44px; }
#footer .marquee b { color: var(--orange); font-weight: 400; }
#footer .mid { display: flex; align-items: center; justify-content: center; padding: 8vh 6vw 5vh; }
#footer .mid img { width: min(420px,72vw); }
#footer .base { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 6vw; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: rgba(255,255,255,.5); text-transform: uppercase; }
#footer .base a { color: #fff; text-decoration: none; }
#footer .base .tag { color: var(--orange); }

/* ---------- mobile CTA ---------- */
#mobileCta {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 950; display: none;
}
#mobileCta .btn { width: 100%; display: block; }
@media (max-width: 860px) {
  #mobileCta { display: block; }
  #header .right .btn { display: none; }
  .hero-copy h1 { font-size: clamp(44px,13vw,90px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #loader { display: none; }
  #header { transform: none; }
  #arrival .veil { display: none; }
}