/* ================================================================
   NEW PATH WINGTSUN — "CENTERLINE"
   Palette locked to the school crest: red fist · gold disc · black.
   Design language: Editorial Monochrome / Motion-First, re-registered
   for combat (true black, hard accents, decisive 0.6s motion).
   ================================================================ */

:root{
  --void:#000000;
  --steel-900:#08080a;
  --steel-800:#101013;
  --steel-700:#1a1a1e;
  --line:rgba(255,255,255,.10);

  /* sampled from the crest */
  --gold:#F5B81C;
  --gold-hi:#FFD34E;
  --gold-dim:rgba(245,184,28,.28);
  --blood:#D71920;
  --blood-hi:#F42C33;

  --bone:#f5f2ea;
  --ash:#8d8d95;

  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4,.display{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;line-height:.9;letter-spacing:.005em;
}
h1{font-size:clamp(56px,11.5vw,182px)}
h2{font-size:clamp(36px,6.2vw,88px)}
h3{font-size:clamp(24px,3vw,40px)}
h4{font-size:clamp(17px,1.7vw,23px)}

.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
.lede{font-size:clamp(17px,1.55vw,21px);color:#cecbc4;max-width:62ch}
p{color:#b6b4ae;max-width:66ch}
.hl{color:var(--bone)}
.gold{color:var(--gold)}
.red{color:var(--blood-hi)}
.cjk{font-family:'Noto Serif SC',serif;font-weight:600}

/* ---------- atmosphere ---------- */
.grain{
  position:fixed;inset:-120%;z-index:9998;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(3) infinite;
}
@keyframes grainshift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.48) 100%)}

/* ---------- centerline spine ---------- */
.spine{position:fixed;left:50%;top:0;transform:translateX(-50%);width:1px;height:100vh;z-index:60;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.06) 12%,rgba(255,255,255,.06) 88%,transparent)}
.spine__fill{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--blood-hi));
  box-shadow:0 0 12px rgba(245,184,28,.55)}
.spine__node{position:absolute;left:50%;bottom:0;width:7px;height:7px;margin-left:-3.5px;margin-bottom:-3.5px;
  border:1px solid var(--gold);transform:rotate(45deg);background:var(--void);box-shadow:0 0 10px rgba(245,184,28,.7)}
@media(max-width:900px){.spine{left:12px;transform:none}}

/* ---------- treated photography ----------
   Low-res source stills are pushed to high-contrast duotone on purpose:
   reads as deliberate street grit instead of soft video capture. */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--steel-700),var(--void))}
.ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.28) brightness(.82);
  transition:filter .7s var(--ease),transform 1.1s var(--ease);
}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(215,25,32,.36),transparent 46%,rgba(245,184,28,.24));
  mix-blend-mode:overlay;
}
.ph::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82));
}
.ph:hover img{filter:grayscale(.55) contrast(1.2) brightness(.92);transform:scale(1.045)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);transition:background .45s var(--ease),padding .45s var(--ease),border-color .45s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(8,8,10,.92);backdrop-filter:blur(14px);padding:10px var(--gut);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:46px;height:46px;object-fit:contain;flex:none;transition:width .45s var(--ease),height .45s var(--ease)}
.nav.stuck .brand img{width:38px;height:38px}
.brand__txt{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.08em;line-height:1.05}
.brand__txt small{display:block;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.28em;color:var(--gold);margin-top:4px}
@media(max-width:520px){.brand__txt{display:none}}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a5a3a0;transition:color .3s;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{width:100%}
@media(max-width:1040px){.nav__links{display:none}}

.btn{display:inline-flex;align-items:center;gap:11px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:15px 26px;border:1px solid var(--gold);color:var(--gold);
  background:transparent;position:relative;overflow:hidden;cursor:pointer;transition:color .4s var(--ease),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn:hover{color:var(--void)}
.btn:hover::before{transform:scaleX(1)}
.btn span{position:relative;z-index:2}
.btn--solid{background:var(--gold);color:var(--void);border-color:var(--gold);font-weight:500}
.btn--solid::before{background:#fff}
.btn--red{border-color:var(--blood);color:#ff9296}
.btn--red::before{background:var(--blood)}
.btn--red:hover{color:#fff}

section{position:relative;padding:clamp(90px,12vh,150px) var(--gut)}
.wrap{max-width:1280px;margin:0 auto;position:relative;z-index:5}
.shead{margin-bottom:clamp(40px,6vh,72px)}
.shead .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.shead .eyebrow::before{content:"";width:44px;height:1px;background:var(--gold);opacity:.75}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:130px;padding-bottom:70px;overflow:hidden}
.hero__ph{position:absolute;inset:0;z-index:0;transition:opacity 1.6s var(--ease)}
/* once the fitted video is running, drop the poster to black so the frame
   reads as a clean letterbox instead of photo edges around the video */
.hero.vid .hero__ph{opacity:0}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:62% 32%;
  filter:grayscale(1) contrast(1.35) brightness(.5);transform:scale(1.06);animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.15) translateX(-2%)}}
/* ambient hero video — muted, looping, decorative.
   FITTED, not cropped: the whole 16:9 frame stays visible so the hand work reads.
   Any bars baked into the source land on black page background and disappear.
   --vidzoom nudges the overall size: 1 = whole frame, lower = smaller. */
.hero__video{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease);--vidzoom:1}
.hero__video.on{opacity:1}
.hero__video iframe{position:absolute;top:50%;left:50%;border:0;
  width:min(100vw, 177.78vh);
  height:min(56.25vw, 100vh);
  transform:translate(-50%,-50%) scale(var(--vidzoom));
  filter:grayscale(.25) contrast(1.06) brightness(.86)}
@media(max-width:820px){.hero__video{--vidzoom:1}}

/* Scrim weighted to the left so the headline stays readable while the
   right-hand side — where the technique happens — stays clear. */
.hero__wash{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.66) 26%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.04) 100%),
    radial-gradient(1000px 720px at 78% 30%,rgba(215,25,32,.14),transparent 64%),
    radial-gradient(820px 600px at 12% 84%,rgba(245,184,28,.09),transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.62),transparent 26%,transparent 74%,rgba(0,0,0,.72))}
@media(max-width:900px){
  /* stacked layout puts text over the middle of the frame — even it out */
  .hero__wash{background:
    linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.5) 38%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.86)),
    radial-gradient(700px 520px at 70% 26%,rgba(215,25,32,.13),transparent 66%)}
}
.hero__rake{position:absolute;top:-40%;left:-30%;width:70%;height:190%;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,211,78,.08) 45%,transparent 62%);
  transform:rotate(11deg);animation:rake 11s ease-in-out infinite}
@keyframes rake{0%,100%{transform:rotate(11deg) translateX(-4%);opacity:.5}50%{transform:rotate(11deg) translateX(22%);opacity:1}}
.hero__grid{position:absolute;inset:0;z-index:3;opacity:.22;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 118px,118px 100%;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 18%,transparent 76%)}

/* giant CJK watermark from the crest */
.hero__cjk{position:absolute;right:2%;top:50%;transform:translateY(-50%);z-index:3;
  font-family:'Noto Serif SC',serif;font-weight:600;font-size:clamp(150px,26vw,420px);
  line-height:.86;color:#fff;opacity:.035;writing-mode:vertical-rl;letter-spacing:.04em;user-select:none;pointer-events:none}
@media(max-width:900px){.hero__cjk{opacity:.025;right:0}}

.hero .wrap{max-width:1320px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vh,30px);opacity:0;animation:fadeUp .8s var(--ease) .25s forwards}
.hero__eyebrow::before{content:"";width:56px;height:1px;background:var(--blood-hi)}

/* insurance: the headline now sits over live footage, not a flat scrim */
h1.hero__h1{margin-bottom:clamp(22px,3vh,34px);text-shadow:0 2px 34px rgba(0,0,0,.85),0 1px 6px rgba(0,0,0,.6)}
.hero__sub,.hero__eyebrow{text-shadow:0 1px 16px rgba(0,0,0,.8)}
.ln{display:block;overflow:hidden}
.ln > i{display:block;font-style:normal;transform:translateY(105%);opacity:0}
.ln--2 > i{color:var(--blood-hi);text-shadow:0 0 46px rgba(244,44,51,.4),0 2px 34px rgba(0,0,0,.85),0 1px 6px rgba(0,0,0,.6)}
.hero.go .ln > i{animation:riseIn .95s var(--ease) forwards}
.hero.go .ln--1 > i{animation-delay:.34s}
.hero.go .ln--2 > i{animation-delay:.46s}
.hero.go .ln--3 > i{animation-delay:.58s}
@keyframes riseIn{to{transform:translateY(0);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.strike{position:relative;height:3px;background:var(--blood-hi);width:0;margin:0 0 clamp(26px,3.6vh,38px);box-shadow:0 0 24px rgba(244,44,51,.8)}
.hero.go .strike{animation:slash .6s cubic-bezier(.85,0,.15,1) .96s forwards}
@keyframes slash{to{width:min(440px,62%)}}

.hero__sub{opacity:0;animation:fadeUp .9s var(--ease) 1.18s forwards;margin-bottom:clamp(28px,4vh,42px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:fadeUp .9s var(--ease) 1.34s forwards}

.hero__meta{position:absolute;right:var(--gut);bottom:clamp(28px,5vh,52px);z-index:6;text-align:right;opacity:0;animation:fadeUp 1s var(--ease) 1.6s forwards}
.hero__meta div{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);line-height:2.1}
.hero__meta b{color:var(--gold);font-weight:500}
@media(max-width:900px){.hero__meta{display:none}}

.scrollcue{position:absolute;left:var(--gut);bottom:clamp(28px,5vh,52px);z-index:6;display:flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
  opacity:0;animation:fadeUp 1s var(--ease) 1.7s forwards}
.scrollcue i{display:block;width:44px;height:1px;background:var(--gold);transform-origin:left;animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.25);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ============================ PROOF ============================ */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--steel-900);padding:0}
.proof__grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.proof__cell{padding:clamp(30px,4.5vh,46px) clamp(18px,2.6vw,34px);border-right:1px solid var(--line)}
.proof__cell:last-child{border-right:none}
.proof__n{font-family:'Anton',sans-serif;font-size:clamp(32px,4.1vw,54px);line-height:1;color:var(--bone)}
.proof__n em{font-style:normal;color:var(--gold)}
.proof__l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin-top:11px}
@media(max-width:820px){
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__cell:nth-child(2){border-right:none}
  .proof__cell:nth-child(1),.proof__cell:nth-child(2){border-bottom:1px solid var(--line)}
}

/* ============================ REALITY ============================ */
.reality{background:var(--void)}
.reality__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(48px,7vh,84px)}
@media(max-width:900px){.reality__top{grid-template-columns:1fr}}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:88px 1fr 1.15fr;gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blood-hi);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.row:hover{background:linear-gradient(90deg,rgba(245,184,28,.05),transparent 55%)}
.row:hover::before{transform:scaleY(1)}
.row__n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--gold);padding-top:6px;padding-left:16px}
.row h4{color:var(--bone)}
@media(max-width:820px){.row{grid-template-columns:56px 1fr}.row p{grid-column:2}}

/* ============================ PROGRAMS ============================ */
.programs{background:var(--steel-900);border-top:1px solid var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.pgrid{grid-template-columns:1fr}}
.card{background:var(--steel-900);padding:clamp(30px,3.6vw,46px);position:relative;overflow:hidden;min-height:300px;
  display:flex;flex-direction:column;transition:background .55s var(--ease)}
.card::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover{background:var(--steel-800)}
.card:hover::after{transform:scaleX(1)}
.card:hover .card__n{color:var(--gold);opacity:.85}
.card__n{position:absolute;top:16px;right:22px;font-family:'Anton',sans-serif;font-size:68px;line-height:1;color:#fff;opacity:.05;transition:color .55s,opacity .55s}
.card__age{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.card h3{margin-bottom:16px;font-size:clamp(22px,2.2vw,30px)}
.card p{font-size:15px;flex:1}
.card__go{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);display:flex;align-items:center;gap:10px;transition:color .4s}
.card:hover .card__go{color:var(--gold)}
.card__go i{display:block;width:22px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.card:hover .card__go i{width:40px}

/* outcomes of the training — deliberately styled lighter than the program cards */
.comes{margin-top:clamp(46px,6vh,74px)}
.comes__hd{margin-bottom:28px}
.comes__hd .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.comes__hd .eyebrow::before{content:"";width:44px;height:1px;background:var(--gold);opacity:.75}
.comes__hd p{font-size:15px}
.comes__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.comes__g{grid-template-columns:1fr}}
.comes__c{border-top:1px solid var(--line);padding-top:24px}
.comes__c h4{font-size:clamp(18px,2vw,24px);margin-bottom:12px;color:var(--bone)}
.comes__c p{font-size:14.5px}

/* ============================ THEORY ============================ */
/* scroll-scrubbed: a tall track with a pinned frame, so the demonstration
   advances as the visitor scrolls rather than firing once and finishing. */
.theory{background:var(--void);padding-top:0;padding-bottom:0}
.theory__track{position:relative;height:420vh}
.theory__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  padding:clamp(70px,9vh,110px) 0;overflow:hidden}
.theory__in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,80px);align-items:center;width:100%}
@media(max-width:1000px){
  .theory__in{grid-template-columns:1fr;gap:26px}
  .theory__track{height:360vh}
}

/* stage copy — one visible at a time, cross-faded by scroll position */
.stages{position:relative;min-height:190px;margin-bottom:26px}
@media(max-width:1000px){.stages{min-height:168px}}
.stage{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.stage.is-on{opacity:1;transform:none;pointer-events:auto}
.stage__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.stage__k::before{content:"";width:30px;height:1px;background:var(--gold)}
.stage p{font-size:clamp(15.5px,1.4vw,18.5px);color:#cecbc4;max-width:52ch}

.scrubhint{display:flex;align-items:center;gap:12px;margin-top:26px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash);transition:opacity .5s var(--ease)}
.scrubhint i{display:block;width:40px;height:1px;background:var(--gold);transform-origin:left;
  animation:cue 2.1s var(--ease) infinite}
.scrubhint.done{opacity:0}

/* progress rail down the diagram's left edge */
.theory__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
.theory__rail i{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--gold-hi),var(--blood-hi));box-shadow:0 0 10px rgba(245,184,28,.5)}
.diagram{border:1px solid var(--line);background:linear-gradient(160deg,var(--steel-800),var(--void));padding:clamp(18px,2.4vw,30px);position:relative}
.diagram figcaption{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-top:16px;text-align:center}
/* dash offsets are driven directly by scroll position in JS */
.dpath{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.dfade{opacity:0;transition:opacity .45s var(--ease)}
.tkey{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.tkey div{display:flex;align-items:center;gap:13px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ash)}
.tkey b{display:block;width:26px;height:2px;flex:none}

/* the race readout under the diagram */
.race{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.race__row{display:grid;grid-template-columns:88px 1fr 62px;align-items:center;gap:14px}
.race__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.race__v{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--bone);text-align:right}
.race__track{height:3px;background:rgba(255,255,255,.09);position:relative;overflow:hidden}
.race__bar{position:absolute;inset:0 auto 0 0;width:0}
.race__bar--arc{background:var(--blood-hi)}
.race__bar--line{background:var(--gold)}

.ratio{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ratio strong{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(38px,5vw,64px);line-height:.9;color:var(--gold);display:block}
.ratio span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);display:block;margin-top:10px;max-width:26ch}
.replay{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--ash);padding:12px 20px;cursor:pointer;
  transition:color .35s,border-color .35s}
.replay:hover{color:var(--gold);border-color:var(--gold)}

.mapbox{margin-top:26px;border:1px solid var(--line);height:260px;position:relative;filter:grayscale(1) contrast(1.1) invert(.92) hue-rotate(180deg);transition:filter .6s var(--ease)}
.mapbox:hover{filter:grayscale(.4) contrast(1.05) invert(.92) hue-rotate(180deg)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ============================ SHIFU ============================ */
.shifu{background:var(--steel-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shifu__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,76px);align-items:center}
@media(max-width:960px){.shifu__in{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;border:1px solid var(--line)}
.portrait .tag{position:absolute;left:0;bottom:0;right:0;padding:22px 24px;z-index:3}
.portrait .tag div{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.portrait .tag strong{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);letter-spacing:.02em;display:block;margin-top:6px}
.quote{border-left:3px solid var(--gold);padding:6px 0 6px 26px;margin:32px 0;font-size:clamp(18px,1.9vw,25px);line-height:1.45;color:var(--bone);font-weight:300}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.creds div{background:var(--steel-900);padding:20px 22px}
.creds b{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;color:var(--gold);display:block;line-height:1}
.creds span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);display:block;margin-top:9px}

/* ============================ GALLERY ============================ */
.gallery{background:var(--void);padding-left:0;padding-right:0}
.gallery .shead{padding:0 var(--gut)}
.gwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:800px){.gwrap{grid-template-columns:1fr 1fr}}
.gitem{aspect-ratio:1/1;position:relative}
.gitem .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ============================ FIRST CLASS ============================ */
.first{background:var(--steel-900);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--steel-900);padding:clamp(26px,3vw,38px)}
.step__n{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.step__n::after{content:"";flex:1;height:1px;background:var(--line)}
.step h4{margin-bottom:12px;font-size:19px}
.step p{font-size:14.5px}

/* ============================ CLOSE ============================ */
.close{position:relative;overflow:hidden;background:var(--void)}
.close__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 620px at 78% 18%,rgba(215,25,32,.26),transparent 64%),
             radial-gradient(760px 540px at 12% 88%,rgba(245,184,28,.16),transparent 66%)}
.close__in{display:grid;grid-template-columns:1.2fr .95fr;gap:clamp(34px,5vw,76px);align-items:start}
@media(max-width:960px){.close__in{grid-template-columns:1fr}}
.info{border-top:1px solid var(--line)}
.info__row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--line)}
.info__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);flex:none}
.info__v{text-align:right;color:var(--bone);font-size:15.5px}
.info__v a:hover{color:var(--gold)}
.bigcall{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,4.4vw,58px);line-height:1;
  color:var(--bone);margin:30px 0 8px;transition:color .4s var(--ease)}
.bigcall:hover{color:var(--gold)}

footer{background:var(--void);padding:44px var(--gut);border-top:1px solid var(--line)}
.foot{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
.foot__l{display:flex;align-items:center;gap:14px}
.foot__l img{width:40px;height:40px;object-fit:contain}
.foot small,.foot a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.foot a:hover{color:var(--gold)}
.foot__soc{display:flex;gap:22px;flex-wrap:wrap}

/* ============================ MARQUEE ============================ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--void);
  padding:0;overflow:hidden;white-space:nowrap;position:relative}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--void),transparent 12%,transparent 88%,var(--void))}
.marquee__in{display:inline-flex;align-items:center;animation:slide 38s linear infinite;will-change:transform}
.marquee span{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);
  padding:22px 30px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);letter-spacing:.02em}
.marquee span.on{color:var(--gold);-webkit-text-stroke:0}
.marquee span.cjk{font-family:'Noto Serif SC',serif;color:var(--blood-hi);-webkit-text-stroke:0;font-size:clamp(22px,2.8vw,38px)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ PRINCIPLES ============================ */
.principles{background:var(--void);position:relative;overflow:hidden}
.principles__cjk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Noto Serif SC',serif;font-weight:600;font-size:clamp(200px,34vw,520px);color:#fff;opacity:.022;
  pointer-events:none;user-select:none;line-height:1}
.pr{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.pr{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pr{grid-template-columns:1fr}}
.pr__c{background:var(--void);padding:clamp(28px,3.2vw,40px);position:relative;overflow:hidden;transition:background .55s var(--ease)}
.pr__c:hover{background:var(--steel-800)}
.pr__c::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.pr__c:hover::before{transform:scaleX(1)}
.pr__n{font-family:'Anton',sans-serif;font-size:52px;line-height:1;color:var(--gold);opacity:.28;margin-bottom:20px}
.pr__c h4{font-size:18px;margin-bottom:12px;line-height:1.15}
.pr__c p{font-size:14px}

/* ============================ SCHEDULE + PRICING ============================ */
.train{background:var(--steel-900);border-top:1px solid var(--line)}
.train__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,72px);align-items:start}
@media(max-width:960px){.train__in{grid-template-columns:1fr}}

.sched{border:1px solid var(--line)}
.sched__hd{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1px;background:var(--line)}
.sched__hd > div{background:var(--steel-800);padding:16px 20px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sched__r{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.sched__r > div{background:var(--steel-900);padding:20px;transition:background .45s var(--ease)}
.sched__r:hover > div{background:var(--steel-800)}
.sched__d{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:21px;color:var(--bone)}
.sched__t{font-family:'JetBrains Mono',monospace;font-size:13px;color:#cecbc4;letter-spacing:.03em}
.sched__t small{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-top:7px}
@media(max-width:620px){
  .sched__hd{display:none}
  .sched__r{grid-template-columns:1fr}
  .sched__r > div{padding:14px 18px}
  .sched__r > div:first-child{background:var(--steel-800)}
}

.tiers{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--steel-900);padding:clamp(26px,3vw,34px);position:relative;overflow:hidden;transition:background .5s var(--ease)}
.tier:hover{background:var(--steel-800)}
.tier::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.tier:hover::after{transform:scaleX(1)}
.tier--intro{background:linear-gradient(150deg,rgba(245,184,28,.10),rgba(215,25,32,.07) 60%,transparent)}
.tier--intro:hover{background:linear-gradient(150deg,rgba(245,184,28,.15),rgba(215,25,32,.10) 60%,transparent)}
.tier--intro::after{transform:scaleX(1)}
.tier--intro .tier__p{color:var(--gold)}
.tier--intro .tier__p em{display:block;margin-left:0;margin-top:14px}
.tier__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tier__p{font-family:'Anton',sans-serif;font-size:clamp(46px,6vw,72px);line-height:.95;color:var(--bone);margin:14px 0 6px}
.tier__p sup{font-size:.42em;vertical-align:super;color:var(--gold);margin-right:2px}
.tier__p em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);margin-left:10px}
.tier p{font-size:14.5px;margin-top:10px}

/* ============================ VIDEO ============================ */
.video{background:var(--void);border-top:1px solid var(--line)}
.vframe{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--steel-800);cursor:pointer}
.vframe img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(.62);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.vframe:hover img{filter:grayscale(.4) contrast(1.15) brightness(.78);transform:scale(1.04)}
.vframe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.55))}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:clamp(84px,10vw,124px);height:clamp(84px,10vw,124px);border-radius:50%;
  border:1px solid var(--gold);background:rgba(0,0,0,.42);backdrop-filter:blur(3px);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .45s var(--ease),transform .45s var(--ease),width .4s var(--ease),height .4s var(--ease),left .5s var(--ease),top .5s var(--ease)}
.vframe:hover .vplay{background:var(--gold);transform:translate(-50%,-50%) scale(1.07)}
.vplay::before{content:"";width:0;height:0;margin-left:6px;
  border-left:20px solid var(--gold);border-top:13px solid transparent;border-bottom:13px solid transparent;
  transition:border-left-color .45s,border-width .3s,width .3s,height .3s,margin-left .3s,background .3s}
.vframe:hover .vplay::before{border-left-color:var(--void)}
.vplay span{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  transition:color .3s}

/* playing: the same control shrinks into the corner and becomes STOP */
.vplay.is-playing{left:auto;right:18px;top:18px;transform:none;
  width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);background:rgba(0,0,0,.66)}
.vframe:hover .vplay.is-playing{background:var(--blood-hi);transform:none;border-color:var(--blood-hi)}
.vplay.is-playing::before{margin-left:0;border:0;width:15px;height:15px;background:var(--gold)}
.vframe:hover .vplay.is-playing::before{background:#fff}
.vplay.is-playing span{bottom:-26px;left:auto;right:0;transform:none;font-size:9px}
.vframe:hover .vplay.is-playing span{color:#ff9296}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vmeta{margin-top:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.vmeta__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.vmeta h4{font-size:clamp(19px,2.1vw,27px);margin-bottom:12px;color:var(--bone)}
.vmeta p{font-size:15px}

.vlist{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.vcard{background:var(--steel-900);padding:0;text-align:left;border:0;cursor:pointer;position:relative;
  display:flex;flex-direction:column;transition:background .45s var(--ease)}
.vcard:hover,.vcard:focus-visible{background:var(--steel-800);outline:none}
.vcard__ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--steel-700)}
.vcard__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.6);transition:filter .55s var(--ease),transform .8s var(--ease)}
.vcard:hover .vcard__ph img{filter:grayscale(.35) contrast(1.1) brightness(.8);transform:scale(1.05)}
.vcard__b{padding:18px 20px 22px}
.vcard__k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.vcard__t{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:15px;line-height:1.15;color:#cecbc4;letter-spacing:.02em}
.vcard.on{background:var(--steel-800)}
.vcard.on::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold);z-index:3}
.vcard.on .vcard__t{color:var(--bone)}
.vcard.on .vcard__ph img{filter:grayscale(.25) contrast(1.1) brightness(.85)}

.rv{opacity:0;transform:translateY(30px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}

.mcall{position:fixed;left:0;right:0;bottom:0;z-index:300;display:none;background:var(--gold);color:var(--void);
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:16px;text-align:center}
@media(max-width:820px){.mcall{display:block}footer{padding-bottom:76px}}

@media(prefers-reduced-motion:reduce){
  /* Reduce motion, do not delete it. Killing every animation left the
     site looking like a dead screenshot. Fades and reveals still run at
     a calm speed; what goes is the vestibular trouble - parallax,
     travel, scale, drift and anything that loops forever. */
  *{animation-iteration-count:1!important}
  *{transition-duration:.32s!important}
  .grain,.hero__cjk,.phero__cjk,.marquee__in,.attn__ray,.route__ring,
  .spine__node,.pulse,.kb,.drift{animation:none!important}
  [style*="parallax"],.par{transform:none!important}
  .rv{transform:none}
  .rv{transition:opacity .45s ease!important}
  .ln > i{transform:none;opacity:1}
  .strike{width:min(440px,62%)}
  .dpath{stroke-dashoffset:0}
  .dfade{opacity:1}
}

/* ================================================================
   MULTI-PAGE COMPONENTS
   ================================================================ */

/* --- nav: below 1040 the links become a scrollable strip instead of
   disappearing. On a multi-page site, hiding navigation is not an option. --- */
@media(max-width:1040px){
  .nav{flex-wrap:wrap;row-gap:10px}
  .nav__links{display:flex;order:3;width:100%;gap:22px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:4px;mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap;font-size:10.5px}
  .navcta{padding:11px 16px;font-size:10px}
}
@media(max-width:420px){ .navcta{display:none} }
.nav__links a[aria-current="page"]{color:var(--gold)}
.nav__links a[aria-current="page"]::after{width:100%}

/* --- inner-page hero --- */
.phero{position:relative;overflow:hidden;padding:clamp(140px,20vh,210px) var(--gut) clamp(56px,8vh,90px)}
.phero__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 620px at 78% 24%,rgba(215,25,32,.20),transparent 64%),
    radial-gradient(760px 540px at 10% 88%,rgba(245,184,28,.12),transparent 66%),
    linear-gradient(180deg,#000,#0a0a0c 60%,#000)}
.phero__cjk{position:absolute;right:-2%;top:50%;transform:translateY(-50%);z-index:1;
  font-family:'Noto Serif SC',serif;font-weight:600;font-size:clamp(180px,28vw,440px);
  line-height:.86;color:#fff;opacity:.03;user-select:none;pointer-events:none}
.phero .wrap{z-index:5}
.phero h1{font-size:clamp(44px,8vw,116px);margin:18px 0 24px}
.phero .lede{max-width:60ch}

.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.crumbs a{color:var(--ash);transition:color .3s}
.crumbs a:hover{color:var(--gold)}
.crumbs i{font-style:normal;color:#4a4a50}
.crumbs span{color:var(--gold)}

/* --- prose --- */
.prose{max-width:860px}
.prose > div + div{margin-top:clamp(38px,5vh,60px)}
.h2sm{font-size:clamp(26px,3.4vw,44px);margin-bottom:18px}
.prose p + p{margin-top:16px}
.prose p{max-width:70ch}
.prose a:not(.btn){color:var(--gold);border-bottom:1px solid rgba(245,184,28,.35);transition:border-color .3s}
.prose a:not(.btn):hover{border-bottom-color:var(--gold)}

.callout{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(245,184,28,.07),transparent 70%);
  padding:24px 26px}
.callout__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.callout p{margin:0}

.numlist{list-style:none;counter-reset:n;margin-top:22px}
.numlist li{counter-increment:n;position:relative;padding:20px 0 20px 62px;border-top:1px solid var(--line);
  color:#b6b4ae;max-width:70ch}
.numlist li:last-child{border-bottom:1px solid var(--line)}
.numlist li::before{content:"0" counter(n);position:absolute;left:0;top:20px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--gold)}
.numlist b{color:var(--bone);font-weight:500}

.deftable{margin-top:22px;border-top:1px solid var(--line)}
.deftable__r{display:grid;grid-template-columns:210px 1fr;gap:clamp(14px,2.5vw,34px);
  padding:20px 0;border-bottom:1px solid var(--line);transition:background .45s var(--ease)}
.deftable__r:hover{background:linear-gradient(90deg,rgba(245,184,28,.045),transparent 60%)}
.deftable__r b{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:17px;letter-spacing:.02em;color:var(--gold)}
.deftable__r span{color:#b6b4ae;font-size:15px}
@media(max-width:680px){.deftable__r{grid-template-columns:1fr;gap:8px}}

/* --- split layouts --- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
.split--wide{grid-template-columns:1fr 1.2fr}
@media(max-width:960px){.split,.split--wide{grid-template-columns:1fr}}
.split .portrait{aspect-ratio:4/5;border:1px solid var(--line);position:sticky;top:110px}
@media(max-width:960px){.split .portrait{position:static}}

.statsband{background:var(--steel-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:clamp(50px,7vh,80px);padding-bottom:clamp(50px,7vh,80px)}

/* --- FAQ --- */
.faqs{background:var(--steel-900);border-top:1px solid var(--line)}
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(16px,1.8vw,21px);color:#cecbc4;transition:color .35s}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--bone)}
.faq__i summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .4s var(--ease)}
.faq__i[open] summary{color:var(--gold)}
.faq__i[open] summary::after{transform:rotate(-135deg)}
.faq__i p{padding:0 0 26px;font-size:15.5px;max-width:74ch}

/* --- closing CTA band --- */
.ctaband{position:relative;overflow:hidden;background:var(--void);border-top:1px solid var(--line)}
.ctaband::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 620px at 80% 16%,rgba(215,25,32,.22),transparent 64%),
             radial-gradient(700px 500px at 8% 90%,rgba(245,184,28,.13),transparent 68%)}
.ctaband__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.ctaband__in{grid-template-columns:1fr}}
.ctaband h2{margin:18px 0 20px}
.ctaband__act .bigcall{margin:0 0 20px}
.ctaband__btns{display:flex;gap:13px;flex-wrap:wrap}
.ctaband__meta{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);line-height:2}

/* --- pricing tiers laid out in a row on standalone pages --- */
.tiers--row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(30px,4vh,48px)}
@media(max-width:860px){.tiers--row{grid-template-columns:1fr}}

/* --- footer nav --- */
.foot{align-items:flex-start}
.foot__nav{display:flex;flex-direction:column;gap:9px}
.foot__nav a{color:var(--ash)}
.foot__nav a:hover{color:var(--gold)}
@media(max-width:760px){.foot__nav{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}}

/* --- inline video embed (content pages) --- */
.vembed{margin:clamp(34px,5vh,52px) 0}
.vembed__f{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--steel-800)}
.vembed__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vembed figcaption{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);line-height:2}
.vembed figcaption a{color:var(--gold)}

/* ================================================================
   MOTION SYSTEM — applies to every page
   Timing matches the home page's combat register: decisive, ~0.6-0.8s,
   hard stop. Never the languid 2.9s of the reference dance site.
   ================================================================ */

/* --- directional, auto-staggered reveals --- */
[data-rv]{opacity:0;will-change:opacity,transform;
  transition:opacity .68s var(--ease),transform .68s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms)}
[data-rv="up"]{transform:translateY(34px)}
[data-rv="left"]{transform:translateX(-38px)}
[data-rv="right"]{transform:translateX(38px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv].in{opacity:1;transform:none}

/* --- headings wipe up behind a mask --- */
.hdr-anim{opacity:0;clip-path:inset(0 0 102% 0);transform:translateY(14px);
  transition:opacity .7s var(--ease),clip-path .95s var(--ease),transform .95s var(--ease)}
.hdr-anim.in{opacity:1;clip-path:inset(0 0 -10% 0);transform:none}

/* --- the gold rule beside an eyebrow draws itself --- */
.shead .eyebrow::before,.comes__hd .eyebrow::before{transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) .12s}
.shead.in .eyebrow::before,.comes__hd.in .eyebrow::before,
.in .shead .eyebrow::before,.rv.in .eyebrow::before{transform:scaleX(1)}

/* --- inner-page hero: staged entrance on load --- */
.phero .crumbs,.phero .eyebrow,.phero h1,.phero .lede{opacity:0;transform:translateY(20px)}
.phero.go .crumbs{animation:fadeUp .7s var(--ease) .10s forwards}
.phero.go .eyebrow{animation:fadeUp .7s var(--ease) .20s forwards}
.phero.go h1{animation:heroCut .9s var(--ease) .30s forwards}
.phero.go .lede{animation:fadeUp .8s var(--ease) .52s forwards}
@keyframes heroCut{
  from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 102% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}
}
/* a red strike wipes under the page title */
.phero h1::after{content:"";display:block;height:3px;width:0;background:var(--blood-hi);
  margin-top:22px;box-shadow:0 0 22px rgba(244,44,51,.75)}
.phero.go h1::after{animation:slashIn .55s cubic-bezier(.85,0,.15,1) .95s forwards}
@keyframes slashIn{to{width:min(300px,46%)}}

/* the big CJK watermark drifts slowly behind the page title */
.phero__cjk{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-50%) translateX(0) scale(1)}
                 to{transform:translateY(-52%) translateX(-3%) scale(1.06)}}

/* --- definition rows sweep a gold edge on entry --- */
.deftable__r{position:relative}
.deftable__r::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);transition-delay:calc(var(--i,0) * 65ms)}
.deftable__r.in::before{transform:scaleX(1)}

/* --- numbered principle list: the counter lights up in sequence --- */
.numlist li::before{color:#4a4a50;transition:color .5s var(--ease),text-shadow .5s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms + 220ms)}
.numlist li.in::before{color:var(--gold);text-shadow:0 0 14px rgba(245,184,28,.55)}

/* --- price tiers: the number counts and the rule sweeps --- */
.tier__p{transition:none}
.tier.in::after{transform:scaleX(1)}
.tier--intro.in::after{transform:scaleX(1)}

/* ================================================================
   SET PIECE — THE NAME DECODE  (what-is-wingtsun.html)
   The page's whole thesis, animated: the innocent reading of the
   characters gives way to the political one.
   ================================================================ */
.decode{position:relative;margin:clamp(38px,6vh,64px) 0;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--steel-800),var(--void));
  padding:clamp(30px,5vw,58px);overflow:hidden}
.decode__cjk{font-family:'Noto Serif SC',serif;font-weight:600;
  font-size:clamp(72px,13vw,170px);line-height:1;color:var(--bone);text-align:center;
  letter-spacing:.08em;transition:color .8s var(--ease),text-shadow .8s var(--ease)}
.decode.lit .decode__cjk{color:var(--gold);text-shadow:0 0 60px rgba(245,184,28,.4)}
.decode__rows{margin-top:clamp(26px,4vh,42px);display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.decode__r{background:var(--steel-900);display:grid;grid-template-columns:96px 1fr 1fr;
  gap:clamp(12px,2.4vw,30px);align-items:center;padding:20px clamp(16px,2.4vw,26px)}
@media(max-width:700px){.decode__r{grid-template-columns:64px 1fr;row-gap:10px}
  .decode__r .decode__new{grid-column:2}}
.decode__ch{font-family:'Noto Serif SC',serif;font-weight:600;font-size:clamp(34px,4.4vw,54px);
  line-height:1;color:var(--gold)}
.decode__old,.decode__new{font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;transition:opacity .6s var(--ease),color .6s var(--ease)}
.decode__old{color:var(--ash);position:relative;display:inline-block}
.decode__old::after{content:"";position:absolute;left:0;top:52%;height:1px;width:0;
  background:var(--blood-hi);transition:width .6s var(--ease)}
.decode.lit .decode__old::after{width:100%}
.decode.lit .decode__old{opacity:.45}
.decode__new{color:var(--gold);opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.decode.lit .decode__new{opacity:1;transform:none}
.decode__r:nth-child(2) .decode__new{transition-delay:.16s}
.decode__r:nth-child(2) .decode__old::after{transition-delay:.16s}
.decode__note{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-align:center;
  opacity:0;transition:opacity .7s var(--ease) .5s}
.decode.lit .decode__note{opacity:1}

/* ================================================================
   SET PIECE — THE HISTORY TIMELINE  (what-is-wingtsun.html)
   Scroll-driven. The gold rail fills as the story advances.
   ================================================================ */
.tl{position:relative;margin:clamp(34px,5vh,56px) 0 0;padding-left:clamp(40px,7vw,86px)}
.tl__rail{position:absolute;left:clamp(10px,2vw,26px);top:6px;bottom:6px;width:1px;
  background:rgba(255,255,255,.10)}
.tl__rail i{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--blood-hi));
  box-shadow:0 0 12px rgba(245,184,28,.5)}
.tl__i{position:relative;padding:0 0 clamp(30px,4.5vh,46px)}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{content:"";position:absolute;left:calc(clamp(40px,7vw,86px) * -1 + clamp(10px,2vw,26px) - 5px);
  top:9px;width:11px;height:11px;border:1px solid var(--gold);background:var(--void);
  transform:rotate(45deg) scale(.5);opacity:.3;
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.tl__i.on::before{opacity:1;transform:rotate(45deg) scale(1);box-shadow:0 0 14px rgba(245,184,28,.8);
  background:var(--gold)}
.tl__y{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(24px,3.2vw,38px);
  line-height:1;color:#4a4a50;letter-spacing:.02em;transition:color .55s var(--ease)}
.tl__i.on .tl__y{color:var(--gold)}
.tl__h{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(16px,1.9vw,21px);color:#8d8d95;margin:10px 0 8px;letter-spacing:.02em;
  transition:color .55s var(--ease)}
.tl__i.on .tl__h{color:var(--bone)}
.tl__i p{font-size:15px;max-width:64ch;opacity:.5;transition:opacity .55s var(--ease)}
.tl__i.on p{opacity:1}

/* ================================================================
   SET PIECE — THE RANGE BAR  (adult-wingtsun.html)
   Shows why trapping range is the one that matters.
   ================================================================ */
.range{margin:clamp(34px,5vh,54px) 0;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--steel-800),var(--void));padding:clamp(24px,3.4vw,42px)}
.range__bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:20px}
.range__seg{position:relative;height:74px;background:var(--steel-700);overflow:hidden;
  display:flex;align-items:flex-end;padding:12px;transition:background .6s var(--ease)}
.range__seg::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.04);
  transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms)}
.range.in .range__seg::before{transform:scaleY(1)}
.range__seg b{position:relative;z-index:2;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);transition:color .6s var(--ease)}
.range__seg--key{background:linear-gradient(180deg,rgba(245,184,28,.16),rgba(215,25,32,.14))}
.range.in .range__seg--key b{color:var(--gold)}
.range__seg--key::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .5s}
.range.in .range__seg--key::after{transform:scaleX(1)}
.range__mark{position:relative;height:30px;margin-top:-8px}
.range__mark i{position:absolute;top:0;left:50%;width:1px;height:18px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease) .9s}
.range.in .range__mark i{transform:scaleY(1)}
.range__mark span{position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .6s var(--ease) 1.05s}
.range.in .range__mark span{opacity:1}
.range__cap{margin-top:26px;font-size:15px}

/* ================================================================
   REDUCED MOTION — everything resolves to its finished state
   ================================================================ */
@media(prefers-reduced-motion:reduce){
  [data-rv],.hdr-anim{transform:none!important;clip-path:none!important;
    transition:opacity .45s ease!important}
  .phero .crumbs,.phero .eyebrow,.phero h1,.phero .lede{opacity:1;transform:none}
  .phero h1::after{width:min(300px,46%)}
  .phero__cjk{animation:none}
  .decode__new{opacity:1;transform:none}
  .decode__note{opacity:1}
  .tl__i::before{opacity:1;transform:rotate(45deg) scale(1)}
  .tl__i p{opacity:1}
  .tl__y{color:var(--gold)}
  .tl__h{color:var(--bone)}
  .range__seg::before{transform:scaleY(1)}
  .shead .eyebrow::before{transform:scaleX(1)}
}

/* ================================================================
   PER-PAGE SET PIECES — each derived from what its page is saying
   ================================================================ */

/* ---------------- YOUTH: the progression ladder ----------------
   A child does not improve on a percentage scale, so there are no
   invented numbers here. Four real behavioural stages light in order. */
.ladder{margin:clamp(34px,5vh,56px) 0;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--steel-800),var(--void));padding:clamp(26px,3.6vw,46px)}
.ladder__rows{display:grid;gap:2px}
.ladder__r{position:relative;display:grid;grid-template-columns:52px 1fr;gap:clamp(14px,2.4vw,26px);
  align-items:center;padding:20px clamp(12px,2vw,20px);background:var(--steel-900);overflow:hidden}
.ladder__r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,rgba(245,184,28,.14),rgba(215,25,32,.05) 55%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease)}
.ladder__r.on::before{transform:scaleX(1)}
.ladder__n{position:relative;z-index:2;font-family:'Anton',sans-serif;font-size:26px;line-height:1;
  color:#3f3f45;transition:color .6s var(--ease),text-shadow .6s var(--ease)}
.ladder__r.on .ladder__n{color:var(--gold);text-shadow:0 0 16px rgba(245,184,28,.5)}
.ladder__t{position:relative;z-index:2}
.ladder__t b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,19px);letter-spacing:.02em;color:#7d7d85;margin-bottom:6px;
  transition:color .6s var(--ease)}
.ladder__r.on .ladder__t b{color:var(--bone)}
.ladder__t span{font-size:14.5px;color:#8d8d95;opacity:.6;transition:opacity .6s var(--ease)}
.ladder__r.on .ladder__t span{opacity:1}
.ladder__bar{margin-top:24px;height:2px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.ladder__bar i{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 60%,var(--blood-hi))}
.ladder__cap{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}

/* ---------------- PRIVATE: the attention split ----------------
   Left: one instructor's attention divided across a group.
   Right: the same attention, undivided. */
.attn{margin:clamp(34px,5vh,56px) 0;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  border:1px solid var(--line);background:var(--line)}
@media(max-width:720px){.attn{grid-template-columns:1fr}}
.attn__c{background:var(--steel-900);padding:clamp(24px,3.2vw,38px)}
.attn__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash);margin-bottom:20px}
.attn__c--key .attn__k{color:var(--gold)}
.attn__stage{position:relative;height:150px}
.attn__stage svg{width:100%;height:100%;overflow:visible}
.attn__ray{stroke:var(--gold);stroke-width:1;opacity:0;
  transition:opacity .6s var(--ease),stroke-width .6s var(--ease)}
.attn.in .attn__ray{opacity:.30}
.attn.in .attn__ray--solo{opacity:1;stroke-width:2.6}
.attn__dot{fill:#4a4a50;transition:fill .6s var(--ease)}
.attn.in .attn__dot--lit{fill:var(--gold)}
.attn__src{fill:var(--blood-hi)}
.attn__lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;fill:#8d8d95}
.attn__c p{font-size:14.5px;margin-top:18px}
.attn__c--key{background:linear-gradient(160deg,rgba(245,184,28,.07),var(--steel-900) 60%)}

/* ---------------- SCHEDULE: the week strip ----------------
   Makes the thirty-minute family overlap visible instead of stated. */
.week{margin:clamp(30px,4.5vh,50px) 0 clamp(34px,5vh,56px);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--steel-800),var(--void));padding:clamp(22px,3.2vw,38px)}
.week__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.week__d{background:var(--steel-900);padding:14px 8px;text-align:center;min-height:132px;
  position:relative;overflow:hidden;opacity:.35;transition:opacity .6s var(--ease)}
.week.in .week__d{opacity:.3}
.week.in .week__d--on{opacity:1}
.week__d b{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.week__d--on b{color:var(--gold)}
.week__band{height:20px;margin-bottom:3px;position:relative;border-radius:1px;
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.week.in .week__d--on .week__band{transform:scaleY(1)}
.week__d--on:nth-of-type(5) .week__band{transition-delay:.10s}
.week__d--on:nth-of-type(6) .week__band{transition-delay:.20s}
.week__d--on:nth-of-type(7) .week__band{transition-delay:.30s}
.week__band--y{background:linear-gradient(90deg,rgba(245,184,28,.75),rgba(245,184,28,.35))}
.week__band--a{background:linear-gradient(90deg,rgba(215,25,32,.75),rgba(215,25,32,.35))}
.week__band small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;color:#000;font-weight:500}
.week__lap{margin-top:6px;height:3px;background:var(--bone);transform:scaleX(0);transform-origin:center;
  transition:transform .6s var(--ease) .55s}
.week.in .week__d--on .week__lap{transform:scaleX(1)}
.week__key{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.week__key div{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.week__key i{width:20px;height:3px;display:block}
.week__cap{margin-top:18px;font-size:14.5px}
@media(max-width:640px){
  .week__grid{grid-template-columns:repeat(4,1fr)}
  .week__d{min-height:120px}
}

/* ---------------- VISIT: the route draws, the pin drops ---------------- */
.route{margin:clamp(30px,4.5vh,50px) 0;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--steel-800),var(--void));padding:clamp(22px,3.2vw,36px)}
.route svg{width:100%;height:auto;display:block;overflow:visible}
.route__road{stroke:rgba(255,255,255,.13);stroke-width:1.5;fill:none}
.route__lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;fill:#8d8d95}
.route__path{stroke:var(--gold);stroke-width:2.6;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease)}
.route.in .route__path{stroke-dashoffset:0}
.route__pin{opacity:0;transform-box:fill-box;transform-origin:center bottom;
  transform:translateY(-16px) scale(.6);
  transition:opacity .45s var(--ease) 1.25s,transform .5s cubic-bezier(.34,1.56,.64,1) 1.25s}
.route.in .route__pin{opacity:1;transform:none}
.route__ring{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.route.in .route__ring{animation:pinPulse 1.8s var(--ease) 1.6s infinite}
@keyframes pinPulse{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
.route__cap{margin-top:20px;font-size:14.5px}

@media(prefers-reduced-motion:reduce){
  .ladder__r::before{transform:scaleX(1)}
  .ladder__n{color:var(--gold)}
  .ladder__t b{color:var(--bone)}
  .ladder__t span{opacity:1}
  .attn__ray{opacity:.3}
  .attn__ray--solo{opacity:1}
  .week__d{opacity:1}
  .week__band{transform:scaleY(1)}
  .week__lap{transform:scaleX(1)}
  .route__path{stroke-dashoffset:0}
  .route__pin{opacity:1;transform:none}
  .route__ring{animation:none}
}

/* --- range bar: now interactive --- */
.range__seg{border:0;font:inherit;text-align:left;cursor:pointer;width:100%;
  align-items:flex-end;color:inherit}
.range__seg:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.range__seg:hover b{color:var(--bone)}
.range__seg[aria-selected="true"]{background:linear-gradient(180deg,rgba(245,184,28,.18),rgba(215,25,32,.15))}
.range__seg[aria-selected="true"] b{color:var(--gold)}
.range__seg[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;
  width:100%;background:linear-gradient(90deg,var(--gold),var(--blood-hi));transform:scaleX(1)}
.range__seg em{position:absolute;top:12px;left:12px;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:#4a4a50;
  transition:color .5s var(--ease)}
.range__seg[aria-selected="true"] em{color:var(--gold)}

.range__exp{margin-top:22px;border-top:1px solid var(--line);padding-top:24px;position:relative;
  min-height:150px}
.range__panel{position:absolute;inset:24px 0 0;opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.range__panel[data-on="true"]{opacity:1;transform:none;pointer-events:auto;position:relative;inset:auto}
.range__panel h4{font-size:clamp(17px,2vw,22px);margin-bottom:12px;color:var(--bone)}
.range__panel h4 span{color:var(--gold)}
.range__panel p{font-size:15px;margin-bottom:10px}
.range__verdict{display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash)}
.range__verdict i{width:8px;height:8px;transform:rotate(45deg);display:block;background:var(--ash)}
.range__verdict--key{color:var(--gold)}
.range__verdict--key i{background:var(--gold);box-shadow:0 0 10px rgba(245,184,28,.7)}
.range__hint{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:#5c5c63}

/* ----------------------------------------------------------------
   CENTERLINE SECTION — pinned and scroll-driven at every size.
   On narrow or short screens the same pinned scrub runs in a compact
   one-screen layout: heading, the current step, the diagram and the
   race bars. Only visitors who ask for reduced motion get the
   unpinned, stacked version below.
   ---------------------------------------------------------------- */
@media (max-width:1000px), (max-height:700px){
  .theory__track{height:380vh}
  .theory__sticky{height:100vh;height:100svh;padding:76px 0 14px}
  .theory__in{grid-template-columns:1fr;gap:12px;align-content:center}
  .theory__in .shead{margin-bottom:12px}
  .theory__in h2{font-size:clamp(30px,8.5vw,52px)}
  .theory__in h2 br{display:none}
  .theory .stages{min-height:150px;margin-bottom:0}
  .theory .stage__k{margin-bottom:8px}
  .theory .stage p{font-size:15px;line-height:1.5}
  .theory .tkey,.theory .scrubhint,.theory .ratio,.theory .diagram figcaption{display:none}
  .theory .diagram{padding:10px 12px}
  .theory .diagram svg{display:block;max-height:34vh;max-height:34svh;margin:0 auto}
  .theory .race{margin-top:10px;gap:8px}
  .theory .race__row{grid-template-columns:78px 1fr 44px;gap:10px}
}
@media (max-width:1000px) and (max-height:560px){
  .theory .race,.theory .stage__k{display:none}
}
@media (prefers-reduced-motion:reduce){
  .theory .theory__track{height:auto!important}
  .theory .theory__sticky{position:static;height:auto;overflow:visible;
    padding:clamp(70px,10vh,110px) 0}
  .theory .theory__rail,.theory .scrubhint{display:none}
  .theory .stages{min-height:0;display:grid;gap:0;margin-bottom:30px}
  .theory .stage{position:static;opacity:1;transform:none;pointer-events:auto;
    border-top:1px solid var(--line);padding:20px 0}
  .theory .stage:last-child{border-bottom:1px solid var(--line)}
  .theory .stage__k{display:flex;color:var(--gold)}
  .theory .stage p{max-width:none}
  .theory .tkey{display:flex}
  .theory .ratio,.theory .diagram figcaption{display:block}
  .theory .race{display:flex}
}

/* ================================================================
   CERTIFICATION — lineage proof on the About page
   ================================================================ */
.cert{background:var(--void);border-top:1px solid var(--line)}
.cert__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:900px){.cert__in{grid-template-columns:1fr}}

.cert__doc{position:relative;border:1px solid var(--line);background:var(--steel-800);
  padding:clamp(14px,2vw,22px);overflow:hidden}
.cert__doc::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(245,184,28,.10),transparent 45%,rgba(215,25,32,.08))}
.cert__doc img{width:100%;height:auto;display:block;filter:contrast(1.06) brightness(.97)}
.cert__doc figcaption{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);line-height:1.9}
/* the gold rule sweeps across the document as it enters */
.cert__doc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.cert__doc.in::after{transform:scaleX(1)}

.cert__hours{border-top:1px solid var(--line);margin-top:26px}
.cert__h{display:grid;grid-template-columns:92px 1fr;gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cert__n{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(24px,3vw,34px);
  line-height:1;color:var(--gold);letter-spacing:.01em}
.cert__l{font-size:14.5px;color:#b6b4ae}
.cert__total{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:24px 0 0}
.cert__total b{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(40px,6vw,72px);
  line-height:.9;color:var(--bone)}
.cert__total span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.cert__seal{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 18px;
  border:1px solid var(--gold);background:linear-gradient(90deg,rgba(245,184,28,.10),transparent)}
.cert__seal i{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none;
  box-shadow:0 0 12px rgba(245,184,28,.8)}
.cert__seal span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* ================================================================
   FORMS — waiver and enrollment
   ================================================================ */
.formwrap{max-width:820px}
.fsec{border-top:1px solid var(--line);padding-top:26px;margin-top:34px}
.fsec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.fsec__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.fsec__k::before{content:"";width:26px;height:1px;background:var(--gold)}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fgrid--3{grid-template-columns:1fr 1fr 1fr}
.fgrid--1{grid-template-columns:1fr}
@media(max-width:680px){.fgrid,.fgrid--3{grid-template-columns:1fr}}
.fspan{grid-column:1/-1}

.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash)}
.field label .req{color:var(--blood-hi)}
.field input,.field select,.field textarea{
  background:var(--steel-900);border:1px solid var(--line);color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:300;
  padding:13px 15px;width:100%;transition:border-color .3s var(--ease),background .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--steel-800)}
.field input::placeholder,.field textarea::placeholder{color:#5c5c63}
.field textarea{min-height:96px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--blood-hi)}
.field .err{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blood-hi);display:none}
.field .err.on{display:block}

/* who-is-enrolling toggle */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.seg label{position:relative;background:var(--steel-900);padding:20px;cursor:pointer;text-align:center;
  transition:background .4s var(--ease)}
.seg label:hover{background:var(--steel-800)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;color:#7d7d85;transition:color .4s var(--ease)}
.seg span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-top:8px}
.seg input:checked + b{color:var(--gold)}
.seg label:has(input:checked){background:linear-gradient(160deg,rgba(245,184,28,.12),var(--steel-900) 70%)}
.seg label:has(input:checked)::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi))}
.seg input:focus-visible + b{outline:1px solid var(--gold);outline-offset:6px}

/* the legal body copy */
.legal{border:1px solid var(--line);background:var(--steel-900);padding:clamp(20px,3vw,30px);
  max-height:340px;overflow-y:auto;font-size:14.5px;line-height:1.72}
.legal h4{font-size:15px;margin:20px 0 8px;color:var(--gold)}
.legal h4:first-child{margin-top:0}
.legal p{color:#b6b4ae;margin-bottom:10px;max-width:none}
.legal strong{color:var(--bone);font-weight:500}
.legal::-webkit-scrollbar{width:8px}
.legal::-webkit-scrollbar-track{background:var(--void)}
.legal::-webkit-scrollbar-thumb{background:var(--steel-600);border:2px solid var(--void)}

.check{display:flex;gap:14px;align-items:flex-start;padding:14px 0;cursor:pointer}
.check input{appearance:none;width:20px;height:20px;flex:none;margin-top:2px;cursor:pointer;
  border:1px solid var(--line);background:var(--steel-900);position:relative;
  transition:border-color .3s,background .3s}
.check input:checked{border-color:var(--gold);background:var(--gold)}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check input:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.check input[aria-invalid="true"]{border-color:var(--blood-hi)}
.check span{font-size:14.5px;color:#b6b4ae;line-height:1.6}
.check span b{color:var(--bone);font-weight:500}

/* signature pad */
.sig{border:1px solid var(--line);background:var(--steel-900);position:relative;overflow:hidden}
.sig canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.sig__base{position:absolute;left:24px;right:24px;bottom:44px;height:1px;background:var(--line);pointer-events:none}
.sig__hint{position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#5c5c63;transition:opacity .3s}
.sig.drawn .sig__hint{opacity:0}
.sig__clear{position:absolute;top:10px;right:10px;background:transparent;border:1px solid var(--line);
  color:var(--ash);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 13px;cursor:pointer;transition:color .3s,border-color .3s}
.sig__clear:hover{color:var(--blood-hi);border-color:var(--blood-hi)}

.fsubmit{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fsubmit .btn{font-size:12px;padding:18px 34px}
.fnote{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);line-height:1.9}

.fmsg{margin-top:24px;padding:20px 22px;border:1px solid var(--line);display:none}
.fmsg.on{display:block}
.fmsg--ok{border-color:var(--gold);background:linear-gradient(90deg,rgba(245,184,28,.10),transparent)}
.fmsg--bad{border-color:var(--blood-hi);background:linear-gradient(90deg,rgba(215,25,32,.12),transparent)}
.fmsg h4{margin-bottom:8px}
.fmsg--ok h4{color:var(--gold)}
.fmsg--bad h4{color:#ff9296}
.fmsg p{font-size:14.5px;margin:0}

.hidefield{display:none !important}

/* ================================================================
   IMAGE BAND — paired photos inside a content page
   ================================================================ */
.band{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);margin:clamp(30px,4.5vh,50px) 0}
@media(max-width:700px){.band{grid-template-columns:1fr}}
.band .ph{aspect-ratio:3/2}
.band .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 20px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* ================================================================
   PHOTO STACK — two images offset along a ~30-degree diagonal,
   each tilted a few degrees, framed and lifted off the page.
   ================================================================ */
.stack{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:start;
  margin:clamp(40px,7vh,86px) 0 clamp(56px,9vh,110px);perspective:1400px}

.stack__c{position:relative;grid-row:1;overflow:hidden;
  border:1px solid rgba(245,184,28,.42);
  background:var(--steel-800);
  box-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 16px 34px rgba(0,0,0,.55),
    0 42px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.6);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease), border-color .6s var(--ease);
  will-change:transform}

/* upper-left card */
.stack__c--a{grid-column:1/8;z-index:1;transform:rotate(-5.5deg) translateY(0)}
/* lower-right card, pushed down to make the diagonal read at roughly 30 degrees */
.stack__c--b{grid-column:6/13;z-index:2;margin-top:36%;transform:rotate(4.5deg)}

.stack__c img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  filter:grayscale(.72) contrast(1.18) brightness(.86);
  transition:filter .8s var(--ease),transform 1.2s var(--ease)}
/* the brand wash, same language as the rest of the photography */
.stack__c::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(150deg,rgba(215,25,32,.30),transparent 48%,rgba(245,184,28,.20))
             ,linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78));
  transition:opacity .7s var(--ease)}

.stack__c:hover{border-color:var(--gold);
  box-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 22px 46px rgba(0,0,0,.6),
    0 56px 110px rgba(0,0,0,.5),
    0 0 0 1px rgba(245,184,28,.25),
    0 0 60px rgba(245,184,28,.14)}
.stack__c--a:hover{transform:rotate(-2deg) translateY(-10px) scale(1.02);z-index:3}
.stack__c--b:hover{transform:rotate(1.5deg) translateY(-10px) scale(1.02);z-index:3}
.stack__c:hover img{filter:grayscale(.25) contrast(1.1) brightness(.98);transform:scale(1.05)}
.stack__c:hover::after{opacity:.55}

.stack__cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px 22px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* a thin gold rule running the diagonal, tying the two together */
.stack__rule{position:absolute;left:34%;top:12%;width:34%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(245,184,28,.5),transparent);
  transform:rotate(30deg);transform-origin:center;pointer-events:none}

/* entrance: they swing in from their own side and settle */
.stack__c{opacity:0}
.stack.in .stack__c--a{animation:stackA 1.05s var(--ease) .05s forwards}
.stack.in .stack__c--b{animation:stackB 1.05s var(--ease) .22s forwards}
@keyframes stackA{
  from{opacity:0;transform:rotate(-14deg) translate(-38px,34px) scale(.94)}
  to{opacity:1;transform:rotate(-5.5deg) translateY(0)}}
@keyframes stackB{
  from{opacity:0;transform:rotate(13deg) translate(38px,46px) scale(.94)}
  to{opacity:1;transform:rotate(4.5deg)}}

@media(max-width:760px){
  .stack{margin:clamp(30px,5vh,54px) 0 clamp(40px,7vh,72px)}
  .stack__c--a{grid-column:1/11;transform:rotate(-3.5deg)}
  .stack__c--b{grid-column:3/13;margin-top:16%;transform:rotate(3deg)}
  .stack__rule{display:none}
  @keyframes stackA{from{opacity:0;transform:rotate(-9deg) translate(-18px,22px) scale(.96)}
                    to{opacity:1;transform:rotate(-3.5deg)}}
  @keyframes stackB{from{opacity:0;transform:rotate(8deg) translate(18px,26px) scale(.96)}
                    to{opacity:1;transform:rotate(3deg)}}
}

@media(prefers-reduced-motion:reduce){
  .stack__c{opacity:1;animation:none!important}
  .stack__c--a{transform:rotate(-5.5deg)}
  .stack__c--b{transform:rotate(4.5deg)}
}

/* ================================================================
   TESTIMONIALS — real Google reviews, quoted verbatim
   ================================================================ */
.revs{background:var(--steel-900);border-top:1px solid var(--line)}
.revs__feat{border:1px solid var(--line);background:linear-gradient(150deg,rgba(245,184,28,.07),var(--void) 60%);
  padding:clamp(30px,5vw,62px);position:relative;overflow:hidden;margin-bottom:2px}
.revs__feat::before{content:"\201C";position:absolute;right:2%;top:-6%;font-family:'Anton',sans-serif;
  font-size:clamp(180px,26vw,340px);line-height:1;color:var(--gold);opacity:.06;pointer-events:none}
.revs__feat blockquote{font-size:clamp(19px,2.5vw,32px);line-height:1.42;color:var(--bone);
  font-weight:300;max-width:26ch;position:relative;z-index:2}
@media(max-width:820px){.revs__feat blockquote{max-width:none}}

.stars{display:flex;gap:5px;margin-bottom:22px}
.stars i{width:14px;height:14px;flex:none;background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

.revs__by{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.revs__by b{color:var(--gold);font-weight:500}
.revs__by span{color:var(--ash)}
.revs__by i{width:4px;height:4px;background:var(--ash);transform:rotate(45deg);display:block}

.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
@media(max-width:980px){.revgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.revgrid{grid-template-columns:1fr}}
.rev{background:var(--steel-900);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:background .5s var(--ease)}
.rev::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.rev:hover{background:var(--steel-800)}
.rev:hover::after{transform:scaleX(1)}
.rev p{font-size:15px;line-height:1.62;color:#cecbc4;flex:1;max-width:none}
.rev__by{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);line-height:1.9}
.rev__by b{display:block;color:var(--gold);font-weight:500}
.revs__src{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.revs__src a{color:var(--gold)}

/* a single pulled quote for use inside a content page */
.pullrev{border:1px solid var(--line);background:linear-gradient(150deg,rgba(245,184,28,.06),var(--void) 65%);
  padding:clamp(24px,3.4vw,40px);margin:clamp(30px,4.5vh,50px) 0;position:relative}
.pullrev blockquote{font-size:clamp(16.5px,1.9vw,21px);line-height:1.5;color:var(--bone);font-weight:300;max-width:none}
.pullrev .revs__by{margin-top:20px}

/* ================================================================
   FORCE DIAGRAM — meeting force vs redirecting it
   ================================================================ */
.force{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);margin:clamp(32px,5vh,54px) 0}
@media(max-width:720px){.force{grid-template-columns:1fr}}
.force__p{background:var(--steel-900);padding:clamp(22px,3vw,34px)}
.force__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash);margin-bottom:16px}
.force__p--key .force__k{color:var(--gold)}
.force__p--key{background:linear-gradient(160deg,rgba(245,184,28,.08),var(--steel-900) 65%)}
.force svg{width:100%;height:auto;display:block;overflow:visible}
.force__p p{font-size:14.5px;margin-top:16px}

.fpath{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.force.in .fpath--in{animation:fdraw .85s var(--ease) .2s forwards}
.force.in .fpath--out{animation:fdraw .8s var(--ease) 1.0s forwards}
@keyframes fdraw{to{stroke-dashoffset:0}}
.fburst{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.force.in .fburst{animation:fpop .5s var(--ease) 1.0s forwards}
@keyframes fpop{60%{opacity:1;transform:scale(1.15)}100%{opacity:.9;transform:scale(1)}}
.fwall{opacity:.85}
.flabel{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;fill:#8d8d95;opacity:0}
.force.in .flabel{animation:fadeUp .6s var(--ease) 1.45s forwards}

@media(prefers-reduced-motion:reduce){
  .fpath{stroke-dashoffset:0}
  .fburst{opacity:.9;transform:none}
  .flabel{opacity:1}
}

/* ================================================================
   PHERO WITH PHOTO — image sits beside the copy, not behind it, so
   it stays clearly legible instead of washing out under a scrim.
   ================================================================ */
.phero--photo .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);
  align-items:center}
@media(max-width:900px){.phero--photo .wrap{grid-template-columns:1fr}}
.phero__shot{position:relative;overflow:hidden;border:1px solid rgba(245,184,28,.45);
  box-shadow:0 2px 6px rgba(0,0,0,.55),0 18px 40px rgba(0,0,0,.55),0 44px 90px rgba(0,0,0,.45);
  opacity:0;transform:translateY(26px) scale(.97)}
.phero.go .phero__shot{animation:shotIn 1s var(--ease) .45s forwards}
@keyframes shotIn{to{opacity:1;transform:none}}
.phero__shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
  filter:grayscale(.28) contrast(1.1) brightness(.92);
  transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.phero__shot:hover img{filter:grayscale(0) contrast(1.05) brightness(1);transform:scale(1.04)}
.phero__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(215,25,32,.16),transparent 55%,rgba(245,184,28,.12))}
.phero__shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
@media(prefers-reduced-motion:reduce){.phero__shot{opacity:1;transform:none}}

/* ================================================================
   NAV DROPDOWN — desktop only. Below 1040px the group flattens back
   into the scrolling strip, because an absolutely positioned menu
   would be clipped by that strip's own overflow context.
   ================================================================ */
.nav__group{position:relative;display:flex;align-items:center}
.nav__toggle{background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#a5a3a0;transition:color .3s;position:relative}
.nav__toggle::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease)}
.nav__group:hover .nav__toggle,.nav__group.open .nav__toggle{color:var(--bone)}
.nav__group:hover .nav__toggle::after,.nav__group.open .nav__toggle::after{width:100%}
.nav__toggle i{display:block;width:6px;height:6px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease)}
.nav__group.open .nav__toggle i{transform:rotate(-135deg) translateY(-2px)}
.nav__toggle[aria-current="true"]{color:var(--gold)}

.nav__menu{position:absolute;top:calc(100% + 18px);left:-22px;min-width:290px;z-index:220;
  background:rgba(8,8,10,.97);backdrop-filter:blur(16px);border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nav__group.open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi))}
.nav__menu a{display:block;padding:15px 22px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),padding-left .3s var(--ease)}
.nav__menu a:last-child{border-bottom:0}
.nav__menu a:hover,.nav__menu a:focus-visible{background:var(--steel-800);padding-left:28px;outline:none}
.nav__menu b{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#cecbc4;font-weight:500;transition:color .3s}
.nav__menu a:hover b,.nav__menu a:focus-visible b,.nav__menu a[aria-current="page"] b{color:var(--gold)}
.nav__menu small{display:block;font-family:'Inter',sans-serif;font-size:12px;color:var(--ash);
  margin-top:5px;letter-spacing:0;text-transform:none}
.nav__menu a::after{display:none}

.nav__mobonly{display:none}
@media(max-width:1040px){
  .nav__group{display:none}
  .nav__mobonly{display:inline-block}
}

/* ================================================================
   GLOSSARY
   ================================================================ */
.gloss{border-top:1px solid var(--line)}
.gloss__i{display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,3vw,36px);
  padding:clamp(24px,3.4vh,36px) 0;border-bottom:1px solid var(--line);align-items:start}
@media(max-width:680px){.gloss__i{grid-template-columns:1fr;gap:10px}}
.gloss__zh{font-family:'Anton',sans-serif;font-weight:400;text-transform:none;letter-spacing:.02em;
  font-size:clamp(20px,2.2vw,26px);color:var(--gold);line-height:1.15}
.gloss__zh small{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);margin-top:8px}
.gloss__d h4{font-size:clamp(15px,1.7vw,18px);margin-bottom:8px;color:var(--bone)}
.gloss__d p{font-size:14.5px;margin:0}

/* ================================================================
   POLICY TABLE
   ================================================================ */
.polrow{display:grid;grid-template-columns:230px 1fr;gap:clamp(16px,3vw,36px);
  padding:clamp(22px,3vh,32px) 0;border-bottom:1px solid var(--line)}
@media(max-width:680px){.polrow{grid-template-columns:1fr;gap:8px}}
.polrow:first-child{border-top:1px solid var(--line)}
.polrow__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.polrow__v p{font-size:15px;margin:0}
.polrow__v p+p{margin-top:10px}

/* ================================================================
   EVIDENCE CARDS — real-world application, no invented detail
   ================================================================ */
.evid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);
  margin:clamp(30px,4.5vh,50px) 0}
@media(max-width:760px){.evid{grid-template-columns:1fr}}
.evid__c{background:var(--steel-900);padding:clamp(24px,3.2vw,36px);position:relative;overflow:hidden}
.evid__c::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--blood-hi));transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)}
.evid__c.in::after{transform:scaleX(1)}
.evid__k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.evid__c p{font-size:15px;line-height:1.6}

/* ================================================================
   RANK / SHIRT PROGRESSION
   ================================================================ */
.rank{margin:clamp(30px,4.5vh,50px) 0;border-top:1px solid var(--line)}
.rank__r{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.6vw,28px);align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.rank__sw{width:38px;height:38px;border:1px solid var(--line);position:relative}
.rank__sw i{position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:var(--gold);opacity:0}
.rank__r--r1 .rank__sw i,.rank__r--r3 .rank__sw i,.rank__r--r4 .rank__sw i,.rank__r--r5 .rank__sw i{opacity:1}
.rank__r--w1 .rank__sw{background:var(--bone)}
.rank__r--w2 .rank__sw{background:var(--bone)}
.rank__r--w3 .rank__sw{background:var(--bone)}
.rank__r--w4 .rank__sw{background:var(--bone)}
.rank__r--b1 .rank__sw,.rank__r--b2 .rank__sw,.rank__r--b3 .rank__sw,.rank__r--b4 .rank__sw{background:#2f5fa8}
.rank__t{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash)}
.rank__t b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;color:var(--bone);margin-top:4px}


/* ================================================================
   LEGIBILITY PASS
   The mono labels sat at 9.5-12px with very wide tracking, which is
   hard work for anyone with reduced vision. Everything small has been
   raised substantially and given weight. Tracking is pulled in a
   little at the larger sizes so the words still read as words.
   ================================================================ */

/* --- navigation --- */
.nav__links a,.nav__toggle{font-size:17px;letter-spacing:.08em;font-weight:600;color:#c8c6c1}
.nav__links a:hover,.nav__group:hover .nav__toggle,.nav__group.open .nav__toggle{color:var(--bone)}
.nav__links{gap:26px}
.nav__menu{min-width:360px}
.nav__menu a{padding:19px 26px}
.nav__menu b{font-size:16.5px;letter-spacing:.06em;font-weight:600;color:#d8d5cf}
.nav__menu small{font-size:14.5px;margin-top:7px;color:#9a9aa2}
.brand__txt{font-size:19px}
.brand__txt small{font-size:11px;letter-spacing:.18em;font-weight:600}
.navcta{font-size:15px;letter-spacing:.08em;font-weight:600;padding:16px 26px}
@media(max-width:1040px){
  .nav__links a{font-size:15px;letter-spacing:.07em}
  .navcta{font-size:13px;padding:13px 18px}
}

/* --- footer: the worst offender --- */
.foot small,.foot a{font-size:15px;letter-spacing:.05em;font-weight:600}
.foot__nav a{font-size:16px;letter-spacing:.04em;font-weight:600;color:#c8c6c1;padding:3px 0}
.foot__nav a:hover{color:var(--gold)}
.foot__nav{gap:12px}
.foot__soc a{font-size:15px}

/* --- section labels and eyebrows --- */
.eyebrow{font-size:15px;letter-spacing:.16em;font-weight:600}
.crumbs{font-size:14px;letter-spacing:.06em;font-weight:600}
.crumbs a,.crumbs span{font-weight:600}

/* --- every small mono label across the site --- */
.fsec__k,.polrow__k,.callout__k,.evid__k,.force__k,.stage__k,.card__age,.tier__k,
.rev__by,.revs__by,.revs__src,.gloss__zh small,.step__n,.rank__t,.week__key div,
.race__k,.race__v,.tkey div,.info__k,.ctaband__meta,.vcard__k,.vmeta__k,
.diagram figcaption,.vembed figcaption,.stack__cap,.cap,.ladder__cap,
.scrubhint,.sig__hint,.fnote,.mcall,.proof__l,.creds span,.portrait .tag div,
.range__seg b,.range__verdict,.range__hint,.rank__t,.gitem .cap{
  font-size:14px;letter-spacing:.09em;font-weight:600}

.rev__by b,.revs__by b,.creds span,.portrait .tag div{font-size:14.5px}
.tier__p em{font-size:14px;letter-spacing:.09em;font-weight:600}
.card__go,.vcard__t{font-size:14px;letter-spacing:.08em;font-weight:600}

/* --- body copy --- */
p,.rev p,.gloss__d p,.polrow__v p,.step p,.card p,.tier p,.evid__c p,
.force__p p,.range__cap,.week__cap,.route__cap,.ladder__t span,.faq__i p{font-size:17px}
.deftable__r span{font-size:17px}
.lede{font-size:clamp(19px,1.7vw,23px)}
.legal{font-size:16.5px;line-height:1.75}
.legal p{font-size:16.5px}

/* --- forms --- */
.field label{font-size:14px;letter-spacing:.09em;font-weight:600}
.field input,.field select,.field textarea{font-size:17px;padding:15px 16px}
.check span{font-size:16.5px}
.seg b{font-size:21px}
.seg span{font-size:13.5px;font-weight:600;letter-spacing:.08em}
.err{font-size:13px;letter-spacing:.06em;font-weight:600}

/* --- buttons --- */
.btn{font-size:14.5px;letter-spacing:.1em;font-weight:600;padding:17px 30px}
.replay,.sig__clear{font-size:13.5px;letter-spacing:.09em;font-weight:600}

/* --- headings that had gone small --- */
.gloss__d h4,.rank__t b{font-size:19px}
.faq__i summary{font-size:clamp(18px,1.9vw,23px)}
.mcall{font-size:clamp(11px,3.5vw,15px);padding:18px 10px calc(18px + env(safe-area-inset-bottom));letter-spacing:.04em;white-space:nowrap}

/* keep the giant display type unaffected */
h1,h2,h3,.display,.tier__p,.proof__n,.bigcall,.ratio strong,.tl__y,.decode__cjk{letter-spacing:.005em}

/* ================================================================
   HERO TEXT COLUMN
   The headline block was spanning most of the width and sitting on
   top of the video, hiding the technique being demonstrated. The copy
   is now held in a narrow column hard against the left edge, and the
   video is nudged right so the action clears the text entirely.
   ================================================================ */
.hero .wrap{max-width:1440px;width:100%;display:grid;grid-template-columns:minmax(0,520px) 1fr;
  align-items:center;gap:0;margin-right:auto;margin-left:0}
.hero .wrap > *{grid-column:1}

/* smaller display size so long words do not run under the footage */
h1.hero__h1{font-size:clamp(44px,5.6vw,86px)}
.hero__sub{max-width:46ch;font-size:clamp(16px,1.25vw,18.5px)}
.hero__cta{max-width:520px}
.strike{max-width:300px}
@keyframes slash{to{width:min(300px,86%)}}

/* push the footage into the right-hand half, clear of the copy */
.hero__video iframe{left:64%}
.hero__ph img{object-position:72% 32%}

/* the scrim only needs to protect the left column now */
.hero__wash{background:
  linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 22%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.06) 62%,transparent 100%),
  radial-gradient(900px 640px at 76% 34%,rgba(215,25,32,.13),transparent 64%),
  linear-gradient(180deg,rgba(0,0,0,.55),transparent 24%,transparent 76%,rgba(0,0,0,.7))}

@media(max-width:1100px){
  .hero .wrap{grid-template-columns:minmax(0,460px) 1fr}
  .hero__video iframe{left:70%}
}
@media(max-width:900px){
  /* stacked: the copy sits over the frame again, so restore an even scrim */
  .hero .wrap{grid-template-columns:1fr}
  .hero__video iframe{left:50%}
  .hero__ph img{object-position:62% 32%}
  .hero__sub{max-width:none}
  .hero__wash{background:
    linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.55) 38%,rgba(0,0,0,.7) 78%,rgba(0,0,0,.88)),
    radial-gradient(700px 520px at 70% 26%,rgba(215,25,32,.13),transparent 66%)}
}

/* ================================================================
   HERO VIDEO FULL BLEED
   Fitting the whole 16:9 frame inside the hero left dead space at the
   edges, which read as cheap. The footage now COVERS the hero: it is
   sized to the larger of the two axes and centre-cropped, so the frame
   is filled edge to edge at every viewport. The copy sits in its own
   left column with a scrim, so nothing important is obscured.
   ================================================================ */
.hero__video{--vidzoom:1}
.hero__video iframe{
  top:50%;left:50%;
  width:max(100vw, 177.78vh);
  height:max(56.25vw, 100vh);
  transform:translate(-50%,-50%) scale(var(--vidzoom));
  filter:grayscale(.22) contrast(1.06) brightness(.9)}

/* the poster underneath covers too, so there is never a bare edge
   in the moment before the player starts */
.hero__ph img{width:100%;height:100%;object-fit:cover}

@media(max-width:900px){
  /* portrait screens crop hard on the sides; pull back a touch so the
     technique still reads */
  .hero__video{--vidzoom:1}
  .hero__video iframe{width:max(100vw, 177.78vh);height:max(56.25vw, 100vh)}
}

/* ================================================================
   HERO GUTTER + OVERFLOW
   Pinning the wrap left removed the page gutter, so the headline was
   touching the browser edge. The hero now carries its own horizontal
   padding, and the oversized cover video is clipped so it cannot
   create sideways scroll.
   ================================================================ */
.hero{padding-left:var(--gut);padding-right:var(--gut)}
.hero,.hero__video{overflow:hidden}
body{overflow-x:hidden}

/* the poster scales for its slow drift, so it must be clipped or it
   widens the page and creates sideways scroll */
.hero__ph{overflow:hidden}

/* ================================================================
   GRAIN WITHOUT THE OVERSIZED BOX
   The grain layer was inset:-120%, i.e. roughly 3100px wide, purely so
   a transform could jitter it without exposing an edge. Fixed or not,
   that inflated the document width and produced sideways scroll. It now
   sits exactly on the viewport and jitters its background-position
   instead, which looks identical and costs nothing.
   ================================================================ */
.grain{inset:0;animation:grainshift 700ms steps(3) infinite}
@keyframes grainshift{
  0%{background-position:0 0}
  33%{background-position:-7px 5px}
  66%{background-position:6px -7px}
  100%{background-position:0 0}
}
html,body{overflow-x:clip}

/* ================================================================
   HEADING SCALE UP
   Display type raised across the board. The hero column widens a
   little to match so the larger words still sit on their own lines.
   ================================================================ */
h1{font-size:clamp(64px,13vw,200px)}
h2{font-size:clamp(44px,7.4vw,108px)}
h3{font-size:clamp(28px,3.6vw,48px)}
h4{font-size:clamp(19px,2vw,26px)}
.h2sm{font-size:clamp(31px,4.2vw,54px)}

/* inner-page hero */
.phero h1{font-size:clamp(52px,9.4vw,136px)}

/* home hero: bigger, with a slightly wider column to hold it */
.hero .wrap{grid-template-columns:minmax(0,580px) 1fr}
h1.hero__h1{font-size:clamp(52px,6.8vw,104px)}
.hero__cta{max-width:580px}
@media(max-width:1100px){
  .hero .wrap{grid-template-columns:minmax(0,500px) 1fr}
}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
}

/* ================================================================
   MISSING IMAGE FALLBACK
   Photography is still being gathered. Rather than show a broken
   image icon, any image that fails to load is hidden and its holder
   renders as a deliberate crest-marked panel. Dropping the real file
   into /assets restores the photo with no code change.
   ================================================================ */
img.img-missing{opacity:0 !important}
.has-missing-img{position:relative;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 12px,transparent 12px 24px),
  linear-gradient(160deg,#131316,#0b0b0d 60%,#0f0f12);
  border:1px solid rgba(255,255,255,.075)}
.has-missing-img::after{
  content:"";position:absolute;inset:0;
  background:url("logo.png") center/clamp(46px,16%,110px) no-repeat;
  opacity:.11;filter:grayscale(1) brightness(1.7)}
.has-missing-img::before{
  content:attr(data-ph);position:absolute;left:0;right:0;bottom:14px;
  text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.3);z-index:2}
.pullrev{max-width:900px;margin:0 auto;padding:38px 0 8px;text-align:center}
.pullrev blockquote{font-size:clamp(19px,2.1vw,26px);line-height:1.5;color:var(--bone);
  margin:16px 0 18px;font-weight:300}
.pullrev .stars{justify-content:center}
.pullrev .revs__by{justify-content:center}

/* ================================================================
   PORTRAIT KEEPS ITS COLOUR
   The site desaturates photography site-wide, which looked right when
   every image was black and white. The instructor portrait is the one
   picture where colour carries meaning: the yellow school shirt is the
   uniform, and greyscale threw it away. Held back to a light grade so
   it still belongs to the palette without losing the yellow.
   ================================================================ */
.portrait img,.ph.portrait img,img[src*="shifu-portrait"]{
  filter:saturate(1.06) contrast(1.1) brightness(.94) !important}
.portrait:hover img,.ph.portrait:hover img{
  filter:saturate(1.12) contrast(1.12) brightness(1) !important}

/* ================================================================
   GALLERY GRID
   Four real photographs from class. Two wide, two square, so the
   block reads as a contact sheet rather than a uniform grid.
   ================================================================ */
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:34px}
.gitem{position:relative;margin:0;overflow:hidden;background:var(--steel-900);
  border:1px solid rgba(255,255,255,.06)}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.06) brightness(.92);
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease}
.gitem:hover img{transform:scale(1.045);filter:saturate(1.1) contrast(1.1) brightness(1)}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-family:var(--mono);font-size:13px;letter-spacing:.09em;font-weight:600;
  text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.gitem:hover figcaption,.gitem:focus-within figcaption{opacity:1;transform:none}
.gitem--wide{grid-column:span 2}
@media(max-width:720px){
  .ggrid{grid-template-columns:1fr}
  .gitem--wide{grid-column:span 1}
  .gitem figcaption{opacity:1;transform:none;font-size:12px}
}
img{height:auto}

/* ---- phone comfort: tap targets of at least 44px, and form fields that do not trigger zoom ---- */
@media (max-width:1040px){
  .nav__links a,.nav__links .nav__mobonly{display:inline-flex;align-items:center;min-height:44px}
  .card__go{min-height:44px}
  .bigcall{display:flex;align-items:center;min-height:44px}
  .sig__clear{min-height:44px}
  .foot__nav a,.foot__soc a{display:flex;align-items:center;min-height:44px}
}
@media (max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select,textarea{font-size:16px}
}
@media (max-width:1040px){
  .crumbs a,.fnote a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  b>a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .nav__links a:first-child{min-width:44px}
}

/* ---- leaner home page: video joins the photos, principles read as part of the science ---- */
.gallery + .video{border-top:0;padding-top:0}
.video h3{font-size:clamp(26px,3vw,40px);margin-top:6px}
.principles{padding:clamp(52px,7vh,84px) 0}
.principles__cjk{display:none}
.principles .shead{margin-bottom:clamp(22px,3vh,34px)}
.principles .shead h2{font-size:clamp(34px,5vw,64px)}
@media (max-width:820px){
  .revgrid,.pr{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .revgrid::-webkit-scrollbar,.pr::-webkit-scrollbar{display:none}
  .revgrid>.rev,.pr>.pr__c{flex:0 0 84%;scroll-snap-align:start}
  .steps{grid-template-columns:1fr 1fr}
}

/* ---- phones: schedule as day + two times side by side, tighter section spacing ---- */
@media (max-width:820px){
  .sched__r{grid-template-columns:1fr 1fr}
  .sched__r > div:first-child{grid-column:1 / -1}
  .sched__r > div{padding:12px 16px}
  .sched__t{font-size:12.5px}
  .reality,.programs,.train,.first,.shifu,.revs,.gallery,.close{padding-top:64px;padding-bottom:64px}
  .video{padding-bottom:64px}
}

/* ---- inner pages: facts first, a jump strip on long pages, tighter on phones ---- */
.quickfacts{background:var(--steel-900);border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px 24px;margin-bottom:38px}
.quickfacts .h2sm{margin-top:0}
.toc{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:14px var(--gut);border-bottom:1px solid var(--line);background:var(--void)}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cecbc4;white-space:nowrap}
.toc a:hover{color:var(--gold);border-color:var(--gold)}
@media (min-width:1000px){.toc{flex-wrap:wrap;overflow:visible}}
@media (max-width:820px){
  .phero{padding-top:150px;padding-bottom:36px}
  .phero h1{font-size:clamp(44px,12.5vw,72px)}
  .faqs,.ctaband{padding-top:56px;padding-bottom:56px}
  .quickfacts{padding:18px 18px}
}

/* click-to-load embeds */
.embed-gate{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:20px;text-align:center;background:#0a0a0a;color:#e8e8e8;border:1px solid var(--line)}
.mapbox:has(.embed-gate){filter:none}
.embed-gate__t{font-family:'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(16px,2.2vw,22px);margin:0}
.embed-gate__b{min-height:48px;padding:0 26px;background:var(--gold);color:#000;border:0;font:600 13px 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.embed-gate__b:hover{background:var(--gold-hi)}
.embed-gate__n{margin:0;font-size:12.5px;color:#aaa}
.embed-gate__l{color:var(--gold);font-size:13.5px;min-height:44px;display:inline-flex;align-items:center}

/* self-hosted hero loop (replaces the YouTube iframe) */
.hero__video video{position:absolute;top:50%;left:64%;border:0;width:min(100vw,177.78vh);height:min(56.25vw,100vh);object-fit:cover;transform:translate(-50%,-50%) scale(var(--vidzoom));filter:grayscale(.25) contrast(1.06) brightness(.86)}
@media(max-width:1100px){.hero__video video{left:70%}}

/* consent banner, matched to the site */
.cookie{background:#0d0d0d;color:#f0f0f0;border:1px solid var(--gold-dim);border-radius:0;box-shadow:0 18px 50px rgba(0,0,0,.7)}
.cookie a{color:var(--gold)}
.cookie__btns button{border-radius:0;border:1px solid var(--gold);background:transparent;color:var(--gold);font:600 12.5px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.cookie__btns button[data-cookie="accept"]{background:var(--gold);color:#000}
.legal-links{color:#cfcfcf}