:root{
  --black:#0a0a0b; --panel:#121214; --panel2:#17171a;
  --gold:#c9a24b; --gold-hi:#ecd28a; --gold-deep:#8a6d2f;
  --silver:#e8e8ec; --muted:#a7a7ae; --line:#2a2a2e;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(900px 480px at 8% 0%, rgba(201,162,75,.08), transparent 55%),
    repeating-linear-gradient(0deg, #0c0c0d 0 2px, #0a0a0b 2px 4px);
  color:var(--silver);
  font-family:"Helvetica Neue", Arial, sans-serif;
  line-height:1.55;
}
a{color:var(--gold-hi); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* header */
header{position:sticky; top:0; z-index:10; background:rgba(10,10,11,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:18px; padding:12px 0}
.nav img.mark{width:52px; height:52px}
.nav .brand{font-weight:700; letter-spacing:.14em; font-size:15px; color:var(--silver)}
.nav .brand b{color:var(--gold)}
.nav nav{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav nav a{color:var(--silver); font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.nav nav a.active{color:var(--gold-hi)}
.btn{display:inline-block; background:linear-gradient(180deg,#1d1d23,#0a0a0d); color:var(--gold-hi); font-weight:700; padding:11px 22px; border-radius:6px; letter-spacing:.04em; border:1px solid var(--gold-deep)}
.btn:hover{text-decoration:none; border-color:var(--gold-hi); filter:brightness(1.15)}
.btn.ghost{background:transparent; color:var(--gold-hi); border:1px solid var(--gold-deep)}
.btn.small{padding:8px 16px; font-size:14px}

/* hero */
.hero{padding:84px 0 64px; text-align:center}
.hero img.coin{width:300px; height:300px; filter:drop-shadow(0 18px 44px rgba(0,0,0,.65))}
.hero h1{font-size:54px; letter-spacing:.1em; margin-top:26px; background:linear-gradient(180deg,#f6e3a1, var(--gold) 60%, var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .tag{font-size:20px; color:var(--silver); margin-top:10px}
.hero .sub{color:var(--muted); margin-top:8px}
.hero .cta{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .phone{margin-top:22px; font-size:26px; letter-spacing:.14em; color:var(--silver); font-weight:700}
.hero .phone span{color:var(--gold-hi)}

/* sections */
section{padding:56px 0}
h2{font-size:30px; letter-spacing:.06em; color:var(--gold-hi); margin-bottom:14px}
.lede{color:var(--muted); max-width:760px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
.card{background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--line); border-top:3px solid var(--gold-deep); border-radius:10px; padding:24px}
.card h3{color:var(--silver); font-size:18px; margin-bottom:8px; letter-spacing:.03em}
.card p{color:var(--muted); font-size:15px}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--gold-deep), transparent)}

/* showcase */
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
.slot{background:linear-gradient(180deg, #141416, #0e0e10); border:1px dashed #3a3a40; border-radius:10px; padding:34px 22px; text-align:center}
.slot img{width:74px; height:74px; opacity:.85}
.slot h3{margin-top:14px; font-size:16px; letter-spacing:.1em; color:var(--silver); text-transform:uppercase}
.slot p{color:var(--muted); font-size:14px; margin-top:6px}

/* about */
.about{display:grid; grid-template-columns:1fr 380px; gap:42px; align-items:start}
.about img.photo{width:100%; border-radius:12px; border:1px solid var(--gold-deep); box-shadow:0 18px 44px rgba(0,0,0,.55)}
.about .sig{margin-top:22px; color:var(--gold-hi); font-size:18px}
.about p{color:#cfcfd4; margin-bottom:16px; font-size:17px}
.about p.dim{color:var(--muted); font-size:15px}

/* contact */
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:26px}
.big-line{font-size:22px; color:var(--silver)}
.socials{list-style:none; margin-top:8px}
.socials li{padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted)}
.socials li b{color:var(--silver); font-weight:600}

/* footer */
footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 0 44px; background:#080809}
.foot{display:flex; gap:26px; flex-wrap:wrap; align-items:center}
.foot img{width:44px; height:44px}
.foot .fnav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.foot .fnav a{color:var(--muted); font-size:14px}
.legal{color:#6d6d74; font-size:13px; margin-top:18px}
@media (max-width:900px){
  .grid,.slots{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .nav nav{gap:16px}
}

/* product cards (The Collection) */
.pcard{background:linear-gradient(180deg, var(--panel2), var(--panel)); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.pcard .ph{aspect-ratio:4/3; background:#0d0d0f; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line)}
.pcard .ph img.coin{width:92px; height:92px; opacity:.8}
.pcard .body{padding:18px 20px 20px}
.pcard h3{font-size:16px; color:var(--silver); margin-bottom:4px}
.pcard .meta{color:var(--muted); font-size:13px; margin-bottom:14px}
.pcard .pending{color:#77777f; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.cat-head{margin-top:44px; display:flex; align-items:baseline; gap:16px}
.cat-head h3{font-size:21px; color:var(--silver); letter-spacing:.05em}
.cat-head .rule{flex:1; height:1px; background:linear-gradient(90deg, var(--gold-deep), transparent)}
/* videos */
.vids{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px}
.vid{aspect-ratio:16/9; border:1px solid var(--gold-deep); border-radius:10px; overflow:hidden; background:#000}
.vid iframe{width:100%; height:100%; border:0; display:block}
@media (max-width:900px){ .vids{grid-template-columns:1fr} }

/* Call bar — 1-877-YOUNGGZ prominent at the very top of every page (Hank, Nov 13) */
header{position:sticky;top:0;z-index:60;background:rgba(5,5,7,.96)}
.callbar{background:#000;border-bottom:1px solid #26262b;text-align:center;padding:9px 10px 11px}
.cb-label{display:block;font-size:10px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:1px}
.cb-num{font-size:clamp(21px,3.6vw,32px);font-weight:800;letter-spacing:.13em;text-decoration:none;line-height:1.1;
  background:linear-gradient(180deg,#fbfbfc 0%,#d7dae1 45%,#a7acb7 75%,#c9ccd4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cb-num:hover{filter:brightness(1.12)}

/* Call banner v2 — number is the hero of the header (Hank, Nov 13: must be unmissable on every page) */
.callbar{padding:13px 10px 15px;background:linear-gradient(180deg,#0b0b0d,#000);border-bottom:2px solid var(--gold)}
.cb-row{display:flex;align-items:center;justify-content:center;gap:16px}
.cb-ico{font-size:clamp(26px,4.2vw,40px);color:var(--gold-hi);line-height:1}
.cb-stack{display:flex;flex-direction:column;align-items:flex-start}
.cb-label{font-size:11px;margin-bottom:0}
.cb-num{font-size:clamp(30px,5.4vw,48px)}
.callbtn{border:1.5px solid var(--gold);color:var(--gold-hi);border-radius:999px;padding:9px 18px;font-weight:800;letter-spacing:.07em;text-decoration:none;white-space:nowrap;font-size:15px}
.callbtn:hover{background:rgba(201,162,39,.14)}
@media(max-width:860px){.callbtn{padding:8px 13px;font-size:14px}}

/* Mobile header: keep logo, call pill and shop button; tuck the text links away */
@media(max-width:860px){
  header nav a:not(.callbtn):not(.btn){display:none}
  .brand{font-size:14px;letter-spacing:.14em}
}

/* Brightening pass — arena light, ice, and champagne (Hank, Nov 13) */
body{color:#ccd1db}
.hero-band{height:min(54vh,540px);overflow:hidden;position:relative}
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.hero-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0) 34%,rgba(0,0,0,.08) 62%,rgba(5,5,7,.96) 100%)}
.hero .coin{margin-top:-86px;position:relative;z-index:2}
.pillars .pillar,.pcard{background:#191920;border-color:#2f2f39}
.iceband{background:linear-gradient(180deg,#f6f4ef 0%,#eceae3 58%,#e2dfd5 100%);color:#141419;margin-top:64px;padding:54px 0 58px}
.iceband .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.iceband .strip img{width:100%;height:210px;object-fit:cover;border-radius:10px;display:block;box-shadow:0 14px 34px rgba(10,10,20,.28)}
.ice-h{color:#141419 !important;-webkit-text-fill-color:#141419;background:none;font-size:clamp(24px,3.4vw,38px)}
.ice-p{color:#3d3d46;max-width:760px}
.btn.dark{background:#141419;color:#f3d98b;border:1px solid #141419}
.btn.goldline{background:transparent;color:#141419;border:1.5px solid #8a6d1f}
.page-band{height:300px;overflow:hidden;position:relative}
.page-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.page-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(5,5,7,.88) 100%)}
.credits{max-width:1120px;margin:0 auto;padding:0 20px 14px;font-size:11px;color:#6d7280}
@media(max-width:860px){.iceband .strip{grid-template-columns:1fr}.iceband .strip img{height:180px}.hero .coin{margin-top:-56px}}

/* Polish: hero photo flush under header; brand lockup on one line */
.hero{padding-top:0}
.brand{font-size:15px;letter-spacing:.15em;white-space:nowrap}
header .wrap.nav{gap:14px}

/* The Collection — real product cards */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:18px 0 8px}
.cat-head{font-size:21px;color:var(--gold-hi);letter-spacing:.06em;margin:38px 0 4px;border-bottom:1px solid #2c2c34;padding-bottom:8px}
.pcard{background:#141419;border:1px solid #2a2a33;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.pcard-img{display:block;background:#0a0a0d}
.pcard-img img{width:100%;height:300px;object-fit:contain;display:block;padding:10px}
.pcard-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-b h3{font-size:15px;line-height:1.35;margin:0;color:#f0ead8}
.pcard-meta{font-size:12px;color:#9aa0ad;letter-spacing:.08em;text-transform:uppercase;margin:0}
.pcard-price{font-size:17px;font-weight:800;color:var(--gold-hi);margin:2px 0 8px}
.pcard-b .btn{margin-top:auto;align-self:flex-start}
.store-cta{text-align:center;color:#9aa0ad;margin-top:36px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}.pcard-img img{height:340px}}

/* Homepage hockey photo band */
.photoband{position:relative;padding:0;overflow:hidden}
.photoband img{width:100%;height:440px;object-fit:cover;display:block}
.photoband::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,8,.82),rgba(5,5,8,0) 55%)}
.photoband-cap{position:absolute;left:5%;bottom:34px;z-index:2;font-size:clamp(26px,4vw,44px);font-weight:800;color:#fff;letter-spacing:.01em}
.photoband-cap span{color:var(--gold-hi)}
@media(max-width:640px){.photoband img{height:300px}}

/* De-corporate pass: ticker, kickers, punchier headings, coin blend */
.ticker{background:#0a0a0d;border-top:1px solid #2c2c34;border-bottom:1px solid #2c2c34;overflow:hidden;padding:13px 0}
.ticker-track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:tick 30s linear infinite}
.ticker-track span{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:#e8e2d2}
.ticker-track i{color:var(--gold-hi);font-style:normal}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kicker{color:var(--gold-hi);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:12px;margin:0 0 6px}
.lede-sm{color:#b9bec9;max-width:640px;margin:0 0 8px}
main h2, section h2{text-transform:uppercase;letter-spacing:.045em}
.hero img.coin{-webkit-mask-image:radial-gradient(circle,#000 62%,transparent 72%);mask-image:radial-gradient(circle,#000 62%,transparent 72%)}

/* TEMPORARY (until the produced welcome video exists): channel panel, no embeds */
.tvpanel{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#101014;border:1px solid #2a2a33;border-radius:14px;overflow:hidden;margin-top:16px}
.tvpanel-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.tvpanel-b{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center}
.tvpanel-h{font-size:clamp(22px,3vw,30px);margin:4px 0 10px;color:#f0ead8}
.tvpanel-b p{color:#b9bec9;margin:0 0 14px}
.tvpanel-cta{margin-top:6px}
@media(max-width:860px){.tvpanel{grid-template-columns:1fr}.tvpanel-img img{min-height:200px}}

/* Watch facades (temporary display until produced video exists) */
.vids{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.vid{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid #2a2a33;background:#000}
.vid img{width:100%;height:300px;object-fit:cover;display:block;opacity:.92}
.vid .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:74px;height:74px;border-radius:50%;background:rgba(10,10,12,.72);border:2px solid var(--gold-hi);color:var(--gold-hi);font-size:26px;display:flex;align-items:center;justify-content:center;padding-left:5px}
.vid .vidlabel{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);color:#f0ead8;font-weight:800;letter-spacing:.03em}
.vid:hover .playbtn{background:var(--gold-hi);color:#111}
@media(max-width:860px){.vids{grid-template-columns:1fr}.vid img{height:230px}}
/* Live scores strip + hockey wire (data fetched in the browser; sections stay hidden if a feed fails) */
.scoreband{background:#0a0a0d;border-bottom:1px solid #2c2c34;padding:12px 0}
.sb-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sb-label{color:var(--gold-hi);font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:12px;white-space:nowrap}
.sb-games{display:flex;gap:26px;flex-wrap:wrap;flex:1}
.sb-game{color:#cfd3dc;font-size:14px;white-space:nowrap}
.sb-game b{color:#fff}
.sb-game em{color:#9aa0ad;font-style:normal;font-size:12px;margin-left:5px}
.sb-src{color:#6d7280;font-size:11px;white-space:nowrap}
.wire{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.wire-item{display:block;background:#101014;border:1px solid #2a2a33;border-radius:12px;padding:16px;color:#e8e2d2}
.wire-item:hover{border-color:var(--gold-hi)}
.wire-date{display:block;color:var(--gold-hi);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}
.wire-h{font-weight:700;line-height:1.35}
@media(max-width:860px){.wire{grid-template-columns:1fr}}

/* Channel link tiles — brand art only; nothing presented as video content */
.brandtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:300px;background:radial-gradient(120% 140% at 50% 0%,#1a1a20 0%,#0a0a0d 70%);text-decoration:none}
.brandtile .bt-coin{width:104px;height:104px;object-fit:contain}
.brandtile .bt-h{color:#f0ead8;font-weight:800;font-size:20px;letter-spacing:.02em}
.brandtile .bt-s{color:var(--gold-hi);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.brandtile:hover{border-color:var(--gold-hi)}
@media(max-width:860px){.brandtile{min-height:230px}}
.brandtile .bt-coin{-webkit-mask-image:radial-gradient(circle,#000 62%,transparent 72%);mask-image:radial-gradient(circle,#000 62%,transparent 72%)}
.about-h{color:var(--gold-hi);font-size:21px;margin:22px 0 8px;letter-spacing:.01em}
.about-h:first-child{margin-top:0}

.nav .btn{white-space:nowrap}

.pcard-b h3 a{color:inherit;text-decoration:none}
.pcard:hover{border-color:var(--gold-deep)}

/* Phone header fix (mobile audit, Nov 13): at 390px the logo + wordmark +
   call pill + shop button overflowed the screen and the shop button was
   cut off entirely. On phones the header keeps logo, wordmark and the
   call pill; the shop button lives in the hero and page bodies. */
@media(max-width:640px){
  header nav a.btn{display:none}
  .top{padding:10px 14px;gap:10px}
  .brand{gap:9px}
  .callbtn{white-space:nowrap}
}
@media(max-width:640px){
  .brand b{display:none}
  .brand{font-size:13px}
  .callbtn{padding:7px 11px;font-size:13px}
}

/* Hero v3 (Nov 13, Hank): NHL photo SLIDESHOW (3 licensed NHL shots crossfading with a slow
   zoom) as the full-bleed background; the Young Gunz lockup (coin + name + tag + CTAs) is
   overlaid and sized to fit ENTIRELY above the fold under the sticky header. No scrolling
   to see the brand. Entrance animation assembles the lockup once on load. */
.hero2{position:relative;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;height:calc(100vh - 78px);height:calc(100svh - 78px);min-height:540px;max-height:880px}
.hero2 .hero-slides{position:absolute;inset:0}
.hero2 .hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:0;animation:heroCycle 21s linear infinite both}
.hero2 .hero-slides img:nth-child(2){animation-delay:7s}
.hero2 .hero-slides img:nth-child(3){animation-delay:14s}
@keyframes heroCycle{0%{opacity:0;transform:scale(1)}4%{opacity:1}33%{opacity:1}38%{opacity:0;transform:scale(1.055)}100%{opacity:0;transform:scale(1.055)}}
.hero2 .hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.07) 0%,rgba(5,5,7,0) 34%,rgba(5,5,7,0) 68%,rgba(5,5,7,.26) 100%)}
.hero2 .hero-in{position:relative;z-index:2;width:100%;padding:26px 20px 24px;display:flex;flex-direction:column;align-items:center;isolation:isolate}
.hero2 .hero-in::before{content:"";position:absolute;inset:-6% -8%;z-index:-1;background:radial-gradient(ellipse at center,rgba(5,5,7,.34) 0%,rgba(5,5,7,0) 68%)}
.hero2 h1{font-size:clamp(38px,5vw,58px);margin-top:0;filter:drop-shadow(0 2px 16px rgba(0,0,0,.85)) drop-shadow(0 1px 3px rgba(0,0,0,.9));animation:riseIn .7s .1s ease-out both}
.hero2 .tag{font-size:18px;margin-top:6px;color:#fff;animation:riseIn .7s .25s ease-out both;text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.8)}
.hero2 .sub{color:#fff;font-size:15px;margin-top:6px;max-width:620px;animation:riseIn .7s .4s ease-out both;text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.85)}
.hero2 .cta{margin-top:18px;animation:riseIn .7s .55s ease-out both}
.hero2 .btn.ghost{background:rgba(5,5,7,.45)}
/* Hero CTAs (Hank, Nov 13): all hero buttons share the call pill's translucent look — photo shows through, gold border and text. */
.hero2 .btn,.hero2 .btn.ghost{background:rgba(10,10,14,.42);border:1px solid var(--gold-deep);color:var(--gold-hi);backdrop-filter:blur(4px)}
.hero2 .callbtn{background:rgba(10,10,14,.42);backdrop-filter:blur(4px)}
.hero2 .btn:hover,.hero2 .btn.ghost:hover{background:rgba(10,10,14,.48);border-color:var(--gold-hi)}
.hero2 .phone{font-size:20px;margin-top:14px;animation:riseIn .7s .7s ease-out both;text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.8)}
@media(max-width:640px){.hero2{height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:500px}.hero2 img.coin{width:118px;height:118px}.hero2 .hero-in{padding:20px 16px}.hero2 .sub{display:none}}
@media (prefers-reduced-motion: reduce){.hero2 .hero-slides img{animation:none;opacity:0}.hero2 .hero-slides img:first-child{opacity:1}.hero2 h1,.hero2 .tag,.hero2 .sub,.hero2 .cta,.hero2 .phone{animation:none}}

/* Header width (Hank, Nov 13): the header is no longer confined to the centred 1180px
   content column. Brand (medallion + wordmark) pins to the LEFT edge, nav pins right,
   so the top bar stops feeling centred and cluttered. Content columns below unchanged. */
header .wrap.nav{max-width:none;margin:0;padding-left:30px;padding-right:30px}
@media(max-width:640px){header .wrap.nav{padding-left:14px;padding-right:14px}}

/* Header zones (Hank, Nov 13): brand far LEFT, page links CENTRED, call + shop far RIGHT.
   Below 1150px the zones flow (links sit between brand and actions) to avoid collisions;
   the phone rules keep the call pill and drop the shop button, as before. */
header .wrap.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hdr-brand{display:flex;align-items:center;gap:12px;justify-self:start}
header .wrap.nav nav{margin-left:0;justify-self:center}
.hdr-actions{display:flex;align-items:center;gap:14px;justify-self:end}
@media(max-width:1150px){header .wrap.nav{display:flex}header .wrap.nav nav{margin-left:auto}.hdr-actions{margin-left:auto}}
@media(max-width:860px){.nav nav{display:none}}
@media(max-width:640px){.hdr-actions .btn{display:none}}

/* Hero text colour pass (Hank, Nov 13): the all-gold gradient headline clashed with the
   photos (yellow boards, red jerseys, white ice) and its contrast changed letter by
   letter. New system mirrors the header wordmark: words in warm ivory white, gold kept
   as the accent only (SPORTS, divider, number, button borders). Solid colours hold
   their contrast over every slide. */
.hero2 h1{background:none;-webkit-background-clip:initial;background-clip:initial;color:#FFFDF7;-webkit-text-fill-color:#FFFDF7}
.hero2 h1 span{color:#E9BE4F;-webkit-text-fill-color:#E9BE4F}
.hero2 h1::after{content:"";display:block;width:104px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:14px auto 2px}
.hero2 .tag{color:#fff}
.hero2 .sub{color:rgba(255,255,255,.93)}
.hero2 .btn,.hero2 .btn.ghost,.hero2 .callbtn{color:#FFF3D6}
.hero2 .phone{color:#fff}
.hero2 .phone span{color:#FFD968}

/* ============ HERO v9 — layout correction (Hank brief, Nov 13) ============
   Left-aligned content over a permanent dark gradient that is near-opaque behind
   the text and fades out to the right. Photos rotate behind; the content never
   moves. Two CTAs only. Contrast comes from the gradient, not text shadows. */
.hero2{justify-content:flex-start}
.hero2 .hero-shade{background:linear-gradient(90deg,rgba(6,6,9,.97) 0%,rgba(6,6,9,.94) 32%,rgba(6,6,9,.74) 52%,rgba(6,6,9,.30) 74%,rgba(6,6,9,0) 90%),linear-gradient(180deg,rgba(6,6,9,0) 58%,rgba(6,6,9,.38) 100%)}
.hero2 .hero-in{max-width:none;margin:0;padding:0 30px;align-items:flex-start;text-align:left}
.hero2 .hero-in::before{display:none}
.hero2 h1{font-size:clamp(40px,4.6vw,62px);line-height:1.04;max-width:640px;filter:none;animation:none}
.hero2 h1::after{margin:16px 0 0}
.hero2 .tag{font-size:19px;font-weight:600;line-height:1.55;color:#fff;max-width:500px;margin-top:16px;text-shadow:none;animation:none}
.hero2 .cta{margin-top:28px;justify-content:flex-start;animation:none}
.hero2 .btn.gold{background:linear-gradient(180deg,#eec95e,#c9a227);color:#0a0a0d;border-color:#e9be4f;font-weight:800;backdrop-filter:none}
.hero2 .btn.gold:hover{filter:brightness(1.07)}
.hero2 .btn.ghost{background:rgba(10,10,14,.28);color:#FFFDF7;border:1px solid rgba(233,190,79,.6);backdrop-filter:blur(3px)}
.hero2 .hero-slides img.s1{object-position:67% 34%}
.hero2 .hero-slides img.s2{object-position:61% 42%}
.hero2 .hero-slides img.s3{object-position:71% 26%}
@media(max-width:640px){
  .hero2 .hero-shade{background:linear-gradient(90deg,rgba(6,6,9,.96) 0%,rgba(6,6,9,.93) 55%,rgba(6,6,9,.88) 100%)}
  .hero2 .hero-in{padding:0 20px}
  .hero2 h1{font-size:35px;max-width:340px}
  .hero2 h1::after{margin-top:12px}
  .hero2 .tag{font-size:17px;max-width:330px}
  .hero2 .cta{flex-direction:column;align-items:stretch;width:100%;max-width:320px;gap:12px}
  .hero2 .cta .btn{text-align:center}
  .hero2 .hero-slides img.s1{object-position:60% 30%}
  .hero2 .hero-slides img.s2{object-position:56% 38%}
  .hero2 .hero-slides img.s3{object-position:62% 20%}
}

/* Hero copy swap: short mobile statement replaces the desktop one on phones. */
.hero2 .tag .tag-m{display:none}

/* ============ HERO v10 — mobile refinement (Hank brief, Nov 13) ============
   Mobile only. Desktop hero (v9) untouched. The hero is sized by its content
   instead of the full viewport; a vertical gradient keeps the text zone dark
   and lets the photograph open up below it. */
@media(max-width:640px){
  .hero2{height:auto;min-height:0;max-height:none}
  .hero2 .hero-in{padding:46px 20px 44px}
  .hero2 .hero-shade{background:linear-gradient(180deg,rgba(6,6,9,.93) 0%,rgba(6,6,9,.91) 52%,rgba(6,6,9,.58) 80%,rgba(6,6,9,.30) 100%)}
  .hero2 h1{font-size:34px;letter-spacing:.02em;line-height:1.08;max-width:300px}
  .hero2 h1::after{margin-top:14px}
  .hero2 .tag{font-size:17px;font-weight:500;line-height:1.6;max-width:330px;margin-top:14px}
  .hero2 .tag .tag-d{display:none}
  .hero2 .tag .tag-m{display:inline}
  .hero2 .cta{flex-direction:column;align-items:stretch;width:100%;max-width:none;gap:10px;margin-top:24px}
  .hero2 .cta .btn{text-align:center;padding:13px 22px}
  .hero2 .hero-slides img.s1{object-position:58% 30%}
  .hero2 .hero-slides img.s2{object-position:55% 36%}
  .hero2 .hero-slides img.s3{object-position:60% 18%}
  header .wrap.nav{gap:10px}
  .hdr-brand{gap:9px}
  header .callbtn{padding:8px 13px}
}
@media(max-width:380px){
  .nav .brand{font-size:13px;letter-spacing:.08em}
  .nav img.mark{width:36px;height:36px}
  header .callbtn{padding:7px 11px;font-size:12.5px}
  .hero2 h1{font-size:31px}
}

/* ============ v11 — final mobile refinements (Hank, Nov 13) ============
   Mobile only: the ice section loses its 64px top margin (the dark void under
   the ticker) and its tall top padding (the white void); the hero photo lifts
   slightly; copy and buttons get ~10px more air each. Desktop untouched. */
@media(max-width:640px){
  .iceband{margin-top:0;padding:30px 0 38px}
  .iceband .strip{margin-bottom:22px}
  .hero2 .hero-slides img{filter:brightness(1.08)}
  .hero2 .hero-shade{background:linear-gradient(180deg,rgba(6,6,9,.93) 0%,rgba(6,6,9,.91) 52%,rgba(6,6,9,.52) 80%,rgba(6,6,9,.24) 100%)}
  .hero2 .tag{margin-top:24px}
  .hero2 .cta{margin-top:34px}
}