/* ============================================================
   RG5 RACING — Concept 01 "Green Light"
   Carbon black · livery orange · stage amber · go green (tree only)
   ============================================================ */

:root{
  --carbon:#0B0B0D;
  --panel:#131316;
  --panel2:#0E0E11;
  --line:#1E1E22;
  --orange:#FF531F;
  --amber:#FFB300;
  --green:#2FD24A;
  --red:#E5261F;
  --paper:#F4F3EF;
  --titanium:#83858E;

  --disp:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --hero:"Archivo","Arial Black",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --shell:1180px;
  --head-h:110px; /* promo bar 46 + nav row 64 */
}

*{margin:0; padding:0; box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px)}
body{background:var(--carbon); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,canvas{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}

.skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--orange); color:var(--carbon); padding:10px 16px; font-weight:700}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--amber); outline-offset:3px}

::selection{background:var(--orange); color:var(--carbon)}

/* ---------- type utilities ---------- */
.eyebrow{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin-bottom:14px}
.h2{font-family:var(--hero); font-stretch:125%; font-weight:900; font-style:italic; text-transform:uppercase; line-height:.95; letter-spacing:-.01em;
  font-size:clamp(30px,4.8vw,58px); margin-bottom:22px; text-wrap:balance}
.outline-o{color:transparent; -webkit-text-stroke:2px var(--orange)}
.lede{color:var(--titanium); max-width:62ch; font-size:17px}
.lede b{color:var(--paper); font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.05em;
  font-size:17px; padding:12px 22px; border-radius:4px; text-decoration:none; border:0; cursor:pointer; white-space:nowrap; transition:transform .12s ease, background .12s ease, color .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--orange); color:var(--carbon)}
.btn-solid:hover{background:#FF6B3D}
.btn-line{background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--orange); color:var(--orange)}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; z-index:100; background:var(--carbon); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform .55s cubic-bezier(.7,0,.3,1)}
.loader.done{transform:translateY(-101%)}
.loader.gone{display:none}
.loader-tree{display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel2)}
.lbulb{width:34px; height:34px; border-radius:50%; background:#1B1B1F; border:1px solid #2A2A30; transition:background .05s, box-shadow .05s}
.lbulb.sm{width:18px; height:18px}
.lbulb.on-st{background:#FFDF6B; box-shadow:0 0 14px rgba(255,223,107,.8)}
.lbulb.on-am{background:var(--amber); box-shadow:0 0 22px rgba(255,179,0,.9)}
.lbulb.on-gr{background:var(--green); box-shadow:0 0 26px rgba(47,210,74,.95)}
.loader-tag{font-family:var(--mono); font-size:11px; letter-spacing:.4em; color:var(--titanium)}

/* ---------- header ---------- */
.site-head{position:fixed; top:0; left:0; right:0; z-index:60; height:var(--head-h);
  background:rgba(11,11,13,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.promo-bar{display:flex; align-items:center; justify-content:center; height:46px; background:var(--orange);
  font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#0B0B0D; text-decoration:none; padding:0 14px; text-align:center; transition:background .15s}
.promo-bar:hover{background:#FF6B3D}
.promo-bar .pm-short{display:none}
.head-in{display:flex; align-items:center; gap:28px; height:64px}
.wordmark{display:flex; align-items:center; gap:11px; font-family:var(--hero); font-stretch:125%; font-weight:900; font-style:italic; font-size:19px; letter-spacing:.01em; text-decoration:none; white-space:nowrap}
.wm-badge{height:38px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.wordmark b{color:var(--orange)}
.wordmark span{font-size:15px; color:var(--titanium); letter-spacing:.12em}
.head-nav{display:flex; gap:24px; margin-left:auto}
.head-nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--titanium); text-decoration:none; padding:6px 0; transition:color .12s; white-space:nowrap}
.head-nav a:hover{color:var(--paper)}
.head-cta{font-size:15px; padding:9px 16px}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:4px; width:42px; height:38px; cursor:pointer; position:relative}
.menu-btn span{position:absolute; left:10px; right:10px; height:2px; background:var(--paper); transition:transform .2s, top .2s}
.menu-btn span:first-child{top:13px}
.menu-btn span:last-child{top:22px}
.menu-open .menu-btn span:first-child{top:17px; transform:rotate(45deg)}
.menu-open .menu-btn span:last-child{top:17px; transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  padding-top:calc(var(--head-h) + 40px)}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%}
.hero-hatch{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,13,.4), rgba(11,11,13,0) 30%, rgba(11,11,13,.65) 82%, var(--carbon)),
    repeating-linear-gradient(115deg, transparent 0 160px, rgba(255,83,31,.045) 160px 162px)}
.hero-in{position:relative; z-index:2; padding-bottom:42px}
.hero-name{position:relative; z-index:4}
.hero-in .kicker{position:relative; z-index:4}
.bike-stage{position:absolute; right:-40px; bottom:226px; width:min(50vw,820px); aspect-ratio:1851/1066; z-index:3; pointer-events:none;
  transition:transform .25s ease-out; will-change:transform}
.hero-bike{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; opacity:0;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.65))}
.hero-bike.active{opacity:1; animation:idle-bob 1.05s ease-in-out 2.6s infinite}
@keyframes idle-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
.hero-bike.launch{animation:bike-launch .65s cubic-bezier(.55,0,.85,.55) forwards}
@keyframes bike-launch{
  from{opacity:1; transform:none; filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) blur(0)}
  to{opacity:0; transform:translateX(112%); filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) blur(7px)}}
.hero-bike.stage-in{animation:bike-stage .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes bike-stage{
  0%{opacity:0; transform:translateX(-52%); filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) blur(5px)}
  100%{opacity:1; transform:none; filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) blur(0)}}
.launch-streaks{position:absolute; inset:6% -8%; opacity:0;
  background:repeating-linear-gradient(90deg, rgba(244,243,239,0) 0 34px, rgba(244,243,239,.28) 34px 35px, rgba(255,83,31,.2) 35px 36px, rgba(244,243,239,0) 36px 82px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.launch-streaks.burst{animation:streak-burst .7s ease-out}
@keyframes streak-burst{0%{opacity:0; transform:translateX(-16%)}22%{opacity:.9}100%{opacity:0; transform:translateX(26%)}}
.bike-chip{position:absolute; right:8px; bottom:-32px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--amber); text-transform:uppercase; white-space:nowrap; transition:opacity .18s, transform .18s}
.bike-chip.flip{opacity:0; transform:translateY(7px)}
.statrow{position:relative; z-index:4}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber)}
.kicker b{color:var(--paper); font-weight:600}
.hero-name{margin:16px 0 12px}
.hn-r,.hn-g{display:block; overflow:hidden}
.hero.type-done .hn-g{overflow:visible}
.hn-i{display:block; font-family:var(--hero); font-stretch:125%; font-style:italic; font-weight:900; text-transform:uppercase;
  transform:translateY(112%)}
.hero.play .hn-r .hn-i{animation:hn-rise .7s cubic-bezier(.16,.84,.26,1) .6s forwards}
.hero.play .hn-g .hn-i{animation:hn-rise .7s cubic-bezier(.16,.84,.26,1) .74s forwards}
@keyframes hn-rise{to{transform:translateY(0)}}
.hn-r .hn-i{font-size:clamp(24px,4vw,58px); letter-spacing:.16em; color:var(--paper); line-height:1.1}
.hn-g .hn-i{position:relative; font-size:clamp(52px,12.6vw,188px); line-height:.94; letter-spacing:-.005em}
.hn-g .hn-i u{display:block; text-decoration:none}
.hn-g .lt{position:relative; z-index:1; color:transparent;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F3EF 62%,#C2C4CA 100%);
  -webkit-background-clip:text; background-clip:text}
.hn-g .lo{position:absolute; left:5px; top:5px; color:var(--orange)}
.hn-g .le{position:absolute; left:-14px; top:0; color:transparent; -webkit-text-stroke:1.5px rgba(131,133,142,.3)}
.hero.type-done .hn-g .le{animation:hn-echo 3.2s ease-in-out infinite}
@keyframes hn-echo{0%,100%{transform:translateX(0); opacity:.4}50%{transform:translateX(-8px); opacity:.75}}

/* flyby sweeps */
.fly{position:absolute; inset:0; z-index:4; pointer-events:none}
.fly i{position:absolute; left:0; right:0; transform:translateX(-108%) skewX(-14deg); filter:blur(.5px)}
.fly .f1{top:6%; height:30%;
  background:repeating-linear-gradient(90deg, transparent 0 52px, rgba(244,243,239,.5) 52px 54px, transparent 54px 128px, rgba(255,83,31,.5) 128px 130px, transparent 130px 208px)}
.fly .f2{top:34%; height:34%;
  background:repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,83,31,.42) 34px 36px, transparent 36px 96px, rgba(244,243,239,.38) 96px 97px, transparent 97px 150px)}
.fly .f3{top:66%; height:26%;
  background:repeating-linear-gradient(90deg, transparent 0 64px, rgba(244,243,239,.34) 64px 66px, transparent 66px 170px, rgba(255,179,0,.4) 170px 172px, transparent 172px 240px)}
.hero.play .f1{animation:fly-swp .92s cubic-bezier(.62,0,.28,1) .04s forwards}
.hero.play .f2{animation:fly-swp .92s cubic-bezier(.62,0,.28,1) .12s forwards}
.hero.play .f3{animation:fly-swp .92s cubic-bezier(.62,0,.28,1) .2s forwards}
@keyframes fly-swp{to{transform:translateX(108%) skewX(-14deg)}}
.fly .famb{top:18%; height:60%; opacity:.75;
  background:repeating-linear-gradient(90deg, transparent 0 90px, rgba(244,243,239,.34) 90px 91px, transparent 91px 200px, rgba(255,83,31,.3) 200px 202px, transparent 202px 300px)}
.fly .famb.go{animation:fly-swp .85s cubic-bezier(.62,0,.28,1) forwards}

/* entrance sequence */
.hero .seq{opacity:0}
.hero.play .s1{animation:seq-up .55s ease .5s forwards}
.hero.play .s2{animation:seq-up .55s ease .98s forwards}
.hero.play .s3{animation:seq-drop 1.05s cubic-bezier(.22,.8,.24,1) .78s forwards}
.hero.play .s4{animation:seq-up .6s ease 1.18s forwards}
@keyframes seq-up{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
@keyframes seq-drop{from{opacity:0; transform:translateX(-46vw); filter:blur(7px)}to{opacity:1; transform:none; filter:blur(0)}}
.hero .seq.in{opacity:1; animation:none}
.hero-sub{color:var(--titanium); max-width:46ch; font-size:16.5px}
.hero-sub b{color:var(--paper); font-weight:600}

.statrow{display:flex; margin-top:34px; border:1px solid var(--line); background:rgba(14,14,17,.72); backdrop-filter:blur(6px)}
.stat{flex:1; padding:16px 18px 14px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--disp); font-weight:800; font-style:italic; font-size:clamp(26px,3.4vw,38px); line-height:1; font-variant-numeric:tabular-nums}
.stat .n small{font-size:.5em; color:var(--orange); font-family:var(--mono); font-style:normal; margin-left:3px}
.stat .t{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--titanium); text-transform:uppercase; margin-top:7px}

.ticker{position:relative; z-index:2; overflow:hidden; border-top:1px solid var(--line); background:var(--panel2)}
.ticker-in{display:flex; white-space:nowrap; width:max-content; animation:tick 30s linear infinite}
.ticker span{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--titanium); padding:10px 0}
.ticker b{color:var(--amber); font-weight:600}
.ticker em{color:var(--orange); font-style:normal; padding:0 16px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- next round ---------- */
.nextround{border-bottom:1px solid var(--line); background:var(--panel2)}
.next-in{display:flex; align-items:center; gap:44px; padding:38px 24px}
.next-meta{flex:1}
.next-race{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(30px,4.4vw,52px); line-height:1; margin:6px 0 10px}
.next-loc{color:var(--titanium); font-size:14.5px; max-width:52ch; margin-bottom:18px}
.cd{display:flex; gap:12px}
.cd>div{width:86px; border:1px solid var(--line); background:var(--carbon); text-align:center; padding:14px 6px 11px}
.cn{display:block; font-family:var(--mono); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.cl{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--titanium); text-transform:uppercase; margin-top:7px}

/* ---------- sections base ---------- */
.story,.season,.treegame,.schedule,.partners,.contact{padding:110px 0}

/* ---------- story ---------- */
.chapters{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); margin-top:44px}
.chp{padding:22px 20px 60px; border-right:1px solid var(--line); position:relative; min-height:230px; transition:background .18s}
.chp:last-child{border-right:0}
.chp:hover{background:rgba(255,83,31,.05)}
.chp-img{margin:-22px -20px 16px; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--panel2)}
.chp-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.88); transition:filter .35s ease}
.chp-img img.pos-top{object-position:50% 12%}
.chp-img img.pos-30{object-position:50% 32%}
.chp:hover .chp-img img{filter:grayscale(.1) contrast(1.02) brightness(1)}
.chp-noimg{display:grid; place-items:center; background:repeating-linear-gradient(115deg,#0E0E11 0 12px,#111114 12px 24px)}
.chp-noimg span{font-family:var(--mono); font-size:9px; letter-spacing:.28em; color:var(--titanium); text-align:center; text-transform:uppercase; line-height:2}
.chp-n{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--orange)}
.chp h3{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; font-size:23px; line-height:1.02; margin:12px 0 10px}
.chp p{font-size:13px; color:var(--titanium)}
.chp-y{position:absolute; bottom:18px; left:20px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--titanium)}
.chp.now{background:rgba(255,179,0,.06)}
.chp.now h3{color:var(--amber)}

/* ---------- season ---------- */
.season{background:var(--panel2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.season-grid{display:grid; grid-template-columns:.9fr 1.4fr; gap:20px; margin-top:44px}
.points-card{border:1px solid var(--line); background:var(--carbon); padding:26px 26px 22px; display:flex; flex-direction:column}
.pc-k{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--amber); text-transform:uppercase}
.pc-pos{font-family:var(--disp); font-weight:800; font-style:italic; font-size:110px; line-height:.9; margin:14px 0 6px; color:var(--orange)}
.pc-gap{color:var(--titanium); font-size:14.5px}
.pc-gap b{color:var(--paper)}
.pc-bar{margin-top:20px; display:grid; gap:8px}
.pc-bar i{display:block; height:10px; background:var(--orange); width:var(--w)}
.pc-bar i.ghost{background:var(--line)}
.pc-note{margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--titanium); text-transform:uppercase}
.res-list{border:1px solid var(--line); background:var(--carbon)}
.res{display:flex; align-items:baseline; gap:18px; padding:17px 22px; border-bottom:1px solid var(--line); font-size:15px}
.res:last-child{border-bottom:0}
.r-d{font-family:var(--mono); font-size:11px; color:var(--titanium); width:58px; flex-shrink:0}
.r-e{font-weight:600}
.r-r{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--titanium); text-align:right}
.res.win .r-r{color:var(--amber); font-weight:600}
.r-r small{color:var(--titanium); font-weight:400; letter-spacing:0}
.career{display:flex; margin-top:20px; border:1px solid var(--line); background:var(--carbon)}
.career>div{flex:1; padding:18px 20px 15px; border-right:1px solid var(--line)}
.career>div:last-child{border-right:0}
.c-n{display:block; font-family:var(--disp); font-weight:800; font-style:italic; font-size:34px; line-height:1}
.c-t{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--titanium); text-transform:uppercase; margin-top:7px}

/* ---------- tree game ---------- */
.tree-in{display:grid; grid-template-columns:1.35fr .65fr; gap:50px; align-items:center}
.rt-wrap{margin:26px 0 8px}
.rt-val{font-family:var(--disp); font-weight:800; font-style:italic; font-size:clamp(70px,9vw,120px); line-height:1; font-variant-numeric:tabular-nums}
.rt-val.good{color:var(--green)}
.rt-val.red{color:var(--red)}
.rt-msg{font-family:var(--mono); font-size:12.5px; color:var(--titanium); margin-top:10px; min-height:40px; max-width:52ch}
.rt-best{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--titanium); text-transform:uppercase; margin-top:6px}
.rt-best b{color:var(--amber)}
.tree-actions{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap}
#tree-btn{min-width:190px; font-size:21px; padding:15px 26px}
#tree-btn.armed{background:var(--green)}
.tree-rig{display:flex; justify-content:center}
.tree{display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 22px; border:1px solid var(--line); border-radius:10px; background:var(--panel2);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.bulb{width:52px; height:52px; border-radius:50%; background:#1B1B1F; border:1px solid #2A2A30; transition:background .05s, box-shadow .05s}
.bulb.sm{width:26px; height:26px}
.bulb.on-st{background:#FFDF6B; box-shadow:0 0 16px rgba(255,223,107,.8)}
.bulb.on-am{background:var(--amber); box-shadow:0 0 26px rgba(255,179,0,.9)}
.bulb.on-gr{background:var(--green); box-shadow:0 0 30px rgba(47,210,74,.95)}
.bulb.on-rd{background:var(--red); box-shadow:0 0 30px rgba(229,38,31,.95)}

/* ---------- schedule ---------- */
.schedule{background:var(--panel2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sched-list{border:1px solid var(--line); background:var(--carbon); margin-top:44px}
.sched-row{display:flex; align-items:center; gap:22px; padding:19px 24px; border-bottom:1px solid var(--line); transition:background .15s}
.sched-row:last-child{border-bottom:0}
.sched-row:hover{background:rgba(255,83,31,.04)}
.sd{font-family:var(--mono); font-size:11.5px; color:var(--amber); width:120px; flex-shrink:0; letter-spacing:.06em}
.se{font-family:var(--disp); font-weight:700; font-style:italic; text-transform:uppercase; font-size:21px; letter-spacing:.02em}
.st{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--titanium); text-align:right}
.sched-row.cd-round .se{color:var(--amber)}
.sched-badge{font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; border:1px solid var(--amber); color:var(--amber); padding:3px 7px 2px; border-radius:2px; margin-left:12px; vertical-align:middle}
.sched-note{margin-top:16px; font-family:var(--mono); font-size:11px; color:var(--titanium); letter-spacing:.06em}

/* ---------- partners ---------- */
.sponsor-wall{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); margin-top:44px}
.sp{padding:34px 10px; border-right:1px solid var(--line); text-align:center; font-family:var(--disp); font-weight:800; font-style:italic; font-size:21px; letter-spacing:.06em; color:var(--titanium); transition:color .15s, background .15s;
  display:flex; align-items:center; justify-content:center; min-height:100px}
.sp img{height:30px; width:auto; max-width:82%; object-fit:contain; filter:grayscale(1) opacity(.62); transition:filter .15s, opacity .15s}
.sp img.tall{height:52px}
.sp:hover img{filter:none; opacity:1}
.sp:last-child{border-right:0}
.sp:hover{color:var(--paper); background:rgba(255,83,31,.05)}
/* ---------- merch ---------- */
.merch{padding:110px 0; background:var(--panel2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.merch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px}
.m-card{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); background:var(--carbon);
  transition:border-color .15s, transform .15s}
.m-card:hover{border-color:var(--orange); transform:translateY(-3px)}
.m-img{display:block; aspect-ratio:4/5; overflow:hidden; border-bottom:1px solid var(--line)}
.m-img img{width:100%; height:100%; object-fit:cover; display:block}
.m-row{display:flex; align-items:baseline; gap:10px; padding:14px 16px}
.m-name{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; font-size:18px; letter-spacing:.02em}
.m-price{margin-left:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--orange); white-space:nowrap; font-variant-numeric:tabular-nums}
.merch-foot{margin-top:26px; display:flex; justify-content:center}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.c-card{display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); background:var(--panel2); padding:24px 24px 20px; text-decoration:none; transition:border-color .15s, transform .15s}
.c-card:hover{border-color:var(--orange); transform:translateY(-3px)}
.cc-k{font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--amber); text-transform:uppercase}
.cc-t{font-size:14.5px; color:var(--titanium)}
.cc-a{font-family:var(--disp); font-weight:800; font-style:italic; text-transform:uppercase; font-size:19px; margin-top:6px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--panel2)}
.foot-in{display:flex; align-items:center; gap:26px; padding:30px 24px; flex-wrap:wrap}
.foot-nav{display:flex; gap:20px}
.foot-nav a{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--titanium); text-decoration:none}
.foot-nav a:hover{color:var(--paper)}
.foot-legal{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--titanium); letter-spacing:.06em}
.foot-legal a{color:var(--titanium); text-decoration:underline; text-underline-offset:3px}
.foot-legal a:hover{color:var(--paper)}

/* ---------- merch popup ---------- */
.merch-pop{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px}
.mp-backdrop{position:absolute; inset:0; background:rgba(7,7,8,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.mp-panel{position:relative; display:grid; grid-template-columns:0.9fr 1.1fr; max-width:640px; width:100%;
  background:var(--carbon); border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 3px rgba(255,83,31,.25);
  animation:mp-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes mp-in{from{opacity:0; transform:translateY(26px) scale(.97)}to{opacity:1; transform:none}}
.mp-x{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; background:rgba(11,11,13,.7); border:1px solid var(--line);
  border-radius:4px; color:var(--paper); font-size:14px; cursor:pointer; transition:border-color .15s, color .15s}
.mp-x:hover{border-color:var(--orange); color:var(--orange)}
.mp-img{display:block; overflow:hidden; border-right:1px solid var(--line)}
.mp-img img{width:100%; height:100%; object-fit:cover; display:block}
.mp-body{padding:28px 26px 26px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.mp-title{font-family:var(--hero); font-stretch:125%; font-weight:900; font-style:italic; text-transform:uppercase; font-size:30px; line-height:1}
.mp-copy{color:var(--titanium); font-size:14.5px}
.mp-code{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
  background:none; border:1px dashed rgba(255,83,31,.55); border-radius:4px; padding:9px 13px; cursor:pointer; text-align:left; transition:background .15s}
.mp-code b{color:var(--orange)}
.mp-code:hover{background:rgba(255,83,31,.08)}
.mp-btn{margin-top:4px}
body.pop-open{overflow:hidden}
@media (max-width:600px){
  .mp-panel{grid-template-columns:1fr; max-width:420px}
  .mp-img{border-right:0; border-bottom:1px solid var(--line); max-height:190px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .loader{display:none}
  .ticker-in{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.c-card:hover{transform:none}
  .bike-stage{animation:none; transition:none}
  .hero-bike.launch,.hero-bike.stage-in,.launch-streaks.burst{animation:none}
  .hero .seq,.hn-i{opacity:1; transform:none; animation:none!important}
  .fly{display:none}
  .hn-g .le,.hero-bike.active{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .bike-stage{right:-26px; bottom:240px; width:50vw}
  .merch-grid{grid-template-columns:repeat(2,1fr)}
  .chapters{grid-template-columns:repeat(3,1fr)}
  .chp.now{grid-column:span 2}
  .chp:nth-child(3){border-right:0}
  .chp{border-bottom:1px solid var(--line)}
  .sponsor-wall{grid-template-columns:repeat(2,1fr)}
  .sp{border-bottom:1px solid var(--line)}
  .sp:nth-child(2n){border-right:0}
  .sp:last-child{grid-column:1 / -1; border-right:0; border-bottom:0}
  .season-grid{grid-template-columns:1fr}
  .tree-in{grid-template-columns:1fr; gap:36px}
  .tree-rig{justify-content:flex-start}
}
@media (max-width:760px){
  .hn-g .hn-i .le{display:none}
  .hero-name{margin:12px 0 8px}
  .hero-in .kicker{font-size:10.5px; letter-spacing:.24em}
  .hero-sub{font-size:15px; max-width:40ch}
  .lede{font-size:15px}
  .promo-bar{font-size:10px; letter-spacing:.12em}
  .promo-bar .pm-long{display:none}
  .promo-bar .pm-short{display:inline}
  .head-nav{position:fixed; inset:var(--head-h) 0 auto 0; background:var(--carbon); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:10px 24px 18px; display:none}
  .head-nav a{padding:13px 0; font-size:13px; border-bottom:1px solid var(--line)}
  .head-nav a:last-child{border-bottom:0}
  .menu-open .head-nav{display:flex}
  .menu-btn{display:block}
  .head-cta{display:none}
  .bike-stage{position:relative; right:auto; bottom:auto; width:100%; max-width:520px; margin:2px 0 30px auto; animation:none; aspect-ratio:1283/843}
  .statrow{flex-wrap:wrap}
  .stat{flex:1 1 50%; border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .next-in{flex-direction:column; align-items:flex-start; gap:26px}
  .cd>div{width:72px}
  .chapters{grid-template-columns:1fr}
  .chp{border-right:0}
  .chp.now{grid-column:auto}
  .career{flex-wrap:wrap}
  .career>div{flex:1 1 50%; border-bottom:1px solid var(--line)}
  .contact-grid{grid-template-columns:1fr}
  .merch-grid{grid-template-columns:1fr 1fr; gap:10px}
  .m-name{font-size:14px}
  .m-price{font-size:10px}
  .sched-row{flex-wrap:wrap; gap:8px 18px}
  .st{margin-left:0; text-align:left; flex-basis:100%}
  .res{flex-wrap:wrap; gap:4px 14px}
  .r-r{margin-left:0; flex-basis:100%; text-align:left}
  .foot-legal{margin-left:0}
}
