:root{
    --bg-0:#0d0704;
    --bg-1:#3a2410;
    --bg-2:#1a0f07;
    --cream:#efe7d3;
    --amber:#e5a021;
    --orange:#d9541f;
    --muted:#b9a27c;
    --muted-txt:#c9b596;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:auto}
  body{
    background:var(--bg-2);
    color:var(--cream);
    font-family:"Oswald","Arial Narrow",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---- scroll track: gives us travel to scrub through ---- */
  .track{height:200vh;position:relative}

  /* ---- pinned stage ---- */
  .stage{
    position:sticky;top:0;height:100vh;width:100%;
    overflow:hidden;
    background:radial-gradient(120% 90% at 62% 42%, var(--bg-1) 0%, var(--bg-0) 60%, #000 100%);
  }
  #c{
    position:absolute;inset:0;width:100%;height:100%;display:block;
  }

  /* ---- hero text overlay ---- */
  .hero{
    position:absolute;left:clamp(20px,6vw,110px);top:50%;transform:translateY(-50%);
    max-width:min(46vw,560px);z-index:3;
    will-change:opacity,transform;
  }
  .eyebrow{
    display:inline-block;border:1px solid rgba(229,160,33,.55);
    color:var(--amber);font-weight:700;letter-spacing:.32em;
    font-size:clamp(10px,.85vw,13px);padding:7px 14px;border-radius:3px;margin-bottom:22px;
  }
  h1{
    font-family:"Anton","Impact",sans-serif;font-weight:400;
    color:var(--cream);line-height:.82;letter-spacing:.01em;
    font-size:clamp(64px,11vw,190px);text-transform:uppercase;
  }
  .sub{
    font-family:"Anton","Impact",sans-serif;color:var(--orange);
    font-size:clamp(22px,3.2vw,46px);letter-spacing:.02em;margin-top:10px;text-transform:uppercase;
  }
  .blurb{
    color:var(--muted-txt);font-weight:500;line-height:1.5;
    font-size:clamp(14px,1.15vw,18px);margin-top:22px;max-width:34ch;
  }
  .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .btn{
    font-family:"Oswald";font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    font-size:13px;padding:15px 26px;border-radius:6px;cursor:pointer;border:1px solid transparent;
    background:var(--amber);color:#241405;text-decoration:none;
  }
  .btn.ghost{background:transparent;border-color:rgba(239,231,211,.35);color:var(--cream)}
  .hero .wordmark{width:min(46vw,470px);height:auto;display:block;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45))}
  .loader .mark img{width:300px;max-width:74vw;height:auto;display:block;filter:invert(1)}

  /* ---- end caption (fades in at the end of the spin) ---- */
  .endcap{
    position:absolute;left:0;right:0;bottom:12vh;text-align:center;z-index:3;
    opacity:0;pointer-events:none;will-change:opacity,transform;
  }
  .endcap .k{font-family:"Anton","Impact";font-size:clamp(28px,4vw,60px);color:var(--cream);text-transform:uppercase;letter-spacing:.02em}
  .endcap .s{color:var(--amber);letter-spacing:.3em;font-weight:600;font-size:12px;text-transform:uppercase;margin-top:8px}

  /* ---- scroll hint ---- */
  .hint{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
    color:var(--muted-txt);letter-spacing:.28em;font-size:11px;text-transform:uppercase;font-weight:600;
    display:flex;flex-direction:column;align-items:center;gap:9px;transition:opacity .4s;
  }
  .hint .bar{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);animation:drop 1.8s ease-in-out infinite}
  @keyframes drop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

  /* ---- progress rail ---- */
  .rail{position:absolute;top:0;left:0;height:3px;width:100%;background:rgba(255,255,255,.06);z-index:5}
  .rail .fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--orange))}

  /* ---- theme pill (cosmetic, matches source hero) ---- */
  .pill{position:absolute;top:22px;right:24px;z-index:6;display:flex;background:rgba(20,12,6,.6);border:1px solid rgba(239,231,211,.15);border-radius:999px;overflow:hidden;font-weight:700;font-size:12px;letter-spacing:.12em}
  .pill span{padding:9px 16px;color:var(--muted-txt)}
  .pill span.on{background:var(--cream);color:#241405}

  /* ---- loader ---- */
  .loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-2);transition:opacity .6s;gap:18px}
  .loader.done{opacity:0;pointer-events:none}
  .loader .mark{font-family:"Anton","Impact";font-size:56px;color:var(--cream);letter-spacing:.02em}
  .loader .track2{width:220px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
  .loader .b{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--orange));transition:width .15s}
  .loader .pct{color:var(--muted-txt);letter-spacing:.3em;font-size:11px;font-weight:600}

  /* ---- helmet lineup (colour bands) ---- */
  .lineup{position:relative;z-index:2;background:#0a0503}
  .lineup-head{text-align:center;padding:clamp(64px,9vw,120px) 20px clamp(90px,9vw,150px);background:linear-gradient(var(--bg-2),#0a0503)}
  .lineup-head .s{color:var(--amber);letter-spacing:.34em;font-weight:700;font-size:clamp(11px,1vw,13px);text-transform:uppercase;margin-bottom:14px}
  .lineup-head .k{font-family:"Anton","Impact";font-size:clamp(42px,7vw,96px);color:var(--cream);text-transform:uppercase;line-height:.9}
  .lineup-head p{color:var(--muted-txt);max-width:58ch;margin:18px auto 0;line-height:1.6;font-weight:500;font-size:clamp(14px,1.1vw,17px)}

  .band{position:relative;overflow:hidden;min-height:74vh;display:flex;align-items:center;
        background:var(--band);color:var(--band-txt);padding:clamp(64px,8vh,110px) clamp(40px,7vw,130px)}
  .band .wm{position:absolute;left:-1.5vw;bottom:-3vh;z-index:1;pointer-events:none;
            font-family:"Anton","Impact";text-transform:uppercase;line-height:.78;
            font-size:clamp(110px,23vw,380px);color:var(--band-wm);letter-spacing:-.01em;max-width:120%}
  .band .inner{position:relative;z-index:2;max-width:620px}
  .band .tag{display:inline-block;font-weight:700;letter-spacing:.22em;font-size:clamp(10px,.85vw,12px);
             text-transform:uppercase;border:1px solid currentColor;padding:6px 13px;border-radius:3px;margin-bottom:20px;opacity:.92}
  .band .tag.pop{background:var(--amber);color:#241405;border-color:var(--amber);opacity:1}
  .band h2{font-family:"Anton","Impact";font-weight:400;text-transform:uppercase;line-height:.9;
           font-size:clamp(46px,7vw,108px);letter-spacing:.01em}
  .band .logo{width:clamp(240px,32vw,470px);height:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
  .band.right .logo{margin-left:auto}
  .band.lead .logo{width:clamp(260px,40vw,560px)}
  .band .desc{font-weight:500;line-height:1.5;font-size:clamp(15px,1.2vw,19px);margin-top:16px;max-width:40ch;opacity:.92}
  .band .meta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
  .band .price{font-family:"Anton","Impact";font-size:clamp(22px,2vw,32px);line-height:1}
  .band .price small{font-family:"Oswald";font-weight:600;font-size:11px;letter-spacing:.14em;opacity:.72;display:block;text-transform:uppercase;margin-top:3px}
  .band .shop{display:inline-flex;align-items:center;font-family:"Oswald";font-weight:700;letter-spacing:.14em;
              text-transform:uppercase;font-size:14px;padding:16px 32px;border-radius:8px;text-decoration:none;
              background:var(--amber);color:#1a1206;border:none;box-shadow:0 6px 0 #ab7813;
              transition:transform .1s ease, box-shadow .1s ease, background .18s ease}
  .band .shop::after{content:"→";margin-left:9px;transition:transform .25s ease}
  .band .shop:hover{background:#f4b53f;transform:translateY(-2px);box-shadow:0 8px 0 #ab7813}
  .band .shop:hover::after{transform:translateX(6px)}
  .band .shop:active{transform:translateY(4px);box-shadow:0 2px 0 #ab7813}
  /* helmet shot — side by default, cross-fades to front on hover */
  .band .shot{position:absolute;right:253px;top:50%;transform:translateY(-50%);z-index:1;width:454px;pointer-events:none}
  .band .shot img{width:100%;height:auto;display:block;transition:opacity .55s ease;filter:drop-shadow(0 24px 34px rgba(0,0,0,.42))}
  .band .shot .side{position:relative;z-index:1}
  .band .shot .front{position:absolute;inset:0;z-index:2;opacity:0}
  .band:hover .shot .side{opacity:0}
  .band:hover .shot .front{opacity:1}
  .band .shot canvas.spin{width:100%;height:auto;aspect-ratio:1/1;display:block;pointer-events:auto;cursor:grab;touch-action:pan-y;filter:drop-shadow(0 24px 34px rgba(0,0,0,.42))}
  .band .shot canvas.spin:active{cursor:grabbing}
  .band .shot .spin-hint{position:absolute;left:50%;top:-34px;transform:translateX(-50%);z-index:2;pointer-events:none;
    font-family:"Oswald";font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:16px;color:var(--band-txt);opacity:.6;white-space:nowrap}

  .b-lane  {--band:#8f8676;--band-txt:#231f18;--band-wm:rgba(255,255,255,.16)}
  .b-sv    {--band:#99370b;--band-txt:#f6e8dc;--band-wm:rgba(255,255,255,.10)}
  .b-s     {--band:#46552f;--band-txt:#eef0e2;--band-wm:rgba(255,255,255,.11)}
  .b-gringo{--band:#cf5312;--band-txt:#fbeee2;--band-wm:rgba(255,255,255,.17)}
  .b-tahoe {--band:#9c1f72;--band-txt:#f8e8f1;--band-wm:rgba(255,255,255,.13)}

  /* depth so bands aren't flat blocks of colour */
  .band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(85% 75% at 78% 16%, rgba(255,255,255,.15), transparent 60%),
               radial-gradient(95% 95% at 10% 100%, rgba(0,0,0,.32), transparent 55%)}
  /* big faint index number, editorial feel */
  .band .idx{position:absolute;top:clamp(46px,6vw,84px);right:clamp(24px,4vw,64px);z-index:1;
    font-family:"Anton","Impact";font-size:clamp(40px,6vw,120px);line-height:1;color:var(--band-txt);opacity:.15}
  /* alternate sides so consecutive bands don't read identically */
  .band.right{justify-content:flex-end;text-align:right}
  .band.right .meta{justify-content:flex-end}
  .band.right .desc{margin-left:auto}
  .band.right .wm{left:auto;right:-1.5vw}
  .band.right .idx{right:auto;left:clamp(24px,4vw,64px)}
  .band.right .shot{right:auto;left:253px}
  /* flagship gets more height + a bigger name */
  .band.lead{min-height:74vh}
  .band.lead h2{font-size:clamp(54px,8.5vw,134px)}
  .band.lead .wm{font-size:clamp(120px,26vw,440px)}
  /* real logo used as the big faint background watermark */
  .band .wm-logo{position:absolute;left:-3%;bottom:-4vh;z-index:1;pointer-events:none;
    width:min(112%,1500px);height:auto;opacity:.10}
  .band.right .wm-logo{left:auto;right:-3%}
  /* angled dividers so sections don't butt together flat */
  .lineup .band{--cut:4vw;margin-top:calc(var(--cut) * -1);filter:drop-shadow(0 -5px 0 rgba(255,255,255,.95))}
  .lineup .band:not(.right){clip-path:polygon(0 0,100% var(--cut),100% 100%,0 100%)}
  .lineup .band.right{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}

  @media (max-width:760px){
    .band, .band.lead, .band.right{min-height:auto;padding:52px 22px;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
    .band .wm{font-size:34vw;bottom:auto;top:8px;left:-1vw}
    .band .idx{font-size:64px;top:14px;right:20px}
    .band.right .idx{left:auto;right:20px}
    /* let inner's children join the band's column flow so we can reorder + centre them */
    .band .inner{display:contents}
    .band .tag,.band .logo,.band .desc,.band .meta,.band .shot{position:relative;z-index:2}
    .band .logo,.band.right .logo{margin-left:auto;margin-right:auto}
    .band .desc,.band.right .desc{margin-left:auto;margin-right:auto}
    /* order: tag/logo/desc (0) -> helmet -> price + shop button (bottom), all centred */
    .band .shot{display:block;position:relative;right:auto;left:auto;top:auto;transform:none;
                width:min(74%,300px);margin:24px auto 4px;order:4}
    .band.right .shot{position:relative;left:auto;right:auto;top:auto;transform:none;margin-left:auto;margin-right:auto}
    .band .meta,.band.right .meta{order:5;margin-top:18px;justify-content:center}
    .band .shot .spin-hint{top:-26px;font-size:13px}
  }

  @media (max-width:760px){
    .hero{left:16px;right:16px;max-width:none;top:auto;bottom:13vh;transform:none;
          background:rgba(10,6,3,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
          border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 20px}
    .hero .wordmark{width:min(72vw,320px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
    .eyebrow{margin-bottom:16px}
    .sub{font-size:clamp(20px,6.5vw,32px);margin-top:8px}
    .blurb{color:#ece0c8;font-size:15px;max-width:100%;margin-top:14px}
    .cta-row{margin-top:20px}
    h1{font-size:clamp(56px,20vw,120px)}
  }
  @media (prefers-reduced-motion:reduce){
    .hint .bar{animation:none}
  }
  /* ---- shared site header + footer (matches range/product pages) ---- */
  .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
  header{position:sticky;top:0;z-index:40;background:#111;border-bottom:1px solid rgba(255,255,255,.08)}
  .util{background:#000;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
  .util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
  .util a{color:var(--muted);margin-left:18px;text-decoration:none}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  /* Nav (logo, .nav-main menu, mega, mobile) is styled in style.css — kept here only
     so the homepage doesn't re-declare and override those rules. */
  .nav .icons{display:flex;gap:18px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em}
  .nav .icons a{color:#fff;text-decoration:none} .nav .icons a:hover{color:var(--amber)}
  @media(max-width:600px){ .util .wrap{justify-content:center;height:auto;padding-top:6px;padding-bottom:6px} .util .wrap span:last-child{display:none} }
  footer{background:#0c0906;color:var(--muted);padding:60px 0 40px}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
  footer h4{color:var(--cream);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-bottom:14px}
  footer ul{list-style:none;margin:0;padding:0} footer li{margin:8px 0;font-size:14px}
  footer a{color:var(--muted);text-decoration:none} footer a:hover{color:var(--amber)}
  footer p{color:var(--muted);line-height:1.6}
  footer .logo{height:34px;filter:invert(1);margin-bottom:14px}
  .legal{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:20px;font-size:12px;letter-spacing:.04em}
  @media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }