/* ============================================================================
   TOP NOTCH SPORTS CANADA: design system
   Fable 5 Web Design 2.0.3 (Route B, Fable 5.1). Rebuild of the 2026 catalog
   storefront: the Top Notch palette, Oswald + Inter and the gold gradient
   buttons are kept verbatim. The Canadian + hockey layer (ice neutrals, rink
   lines, faceoff dots, frosted glass) is additive.
   ========================================================================== */
:root{
  /* brand tokens (original storefront, unchanged) */
  --ink:#0A0D10; --ink-2:#12161B; --ink-3:#1A1F26;
  --paper:#F6F5F2; --paper-2:#EFEDE8; --white:#FFFFFF;
  --gold:#B08D4F; --gold-2:#C9A45F; --gold-deep:#8A6B38; --gold-pale:#E4CE9C;
  --txt:#15181C; --txt-soft:#4A5058; --txt-inv:#F2EFE9; --txt-inv-soft:#A9AFB8;
  --line:#E2DFD8; --line-dark:rgba(201,164,95,.22); --line-inv:rgba(255,255,255,.09);
  --grad-gold:linear-gradient(100deg,#8A6B38 0%,#C9A45F 42%,#F1DCA8 55%,#C9A45F 68%,#8A6B38 100%);
  /* Canadian + hockey layer (additive) */
  --frost:#F4F8FB; --frost-2:#E8EFF5; --ice:#DAE6EF; --ice-line:#C6D6E2;
  --steel:#6B7C8C; --steel-deep:#37475A; --rink-red:#C8323E; --rink-blue:#1F4E9C;
  /* semantic */
  --primary:#0A0D10; --cta:#C9A45F;
  --glow-edge:rgba(201,164,95,.55); --glow-soft:rgba(201,164,95,.24); --glow-wide:rgba(201,164,95,.16);
  --font-head:'Oswald',sans-serif; --font-body:'Inter',sans-serif;
  --r-lg:18px; --r-md:12px; --r-sm:8px; --r-pill:100px; --r-board:28px;
  --shadow-soft:0 10px 30px rgba(10,13,16,.08); --shadow-lift:0 18px 44px rgba(10,13,16,.16); --shadow-deep:0 30px 60px rgba(10,13,16,.45);
  --gutter:clamp(20px,4.5vw,64px); --maxw:1280px; --nav-h:88px;
  /* spacing scale (references/spacing-scale.md) */
  --sec:clamp(80px,9vw,120px); --sec-sm:clamp(56px,6.5vw,88px);
  --h-gap:14px; --hero-gap:28px; --img-gap:28px; --cta-gap:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--txt);background:var(--paper);line-height:1.6;font-size:15.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:600;line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(38px,5.4vw,68px);font-weight:700}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(20px,2.2vw,26px)}
h4{font-size:17px;letter-spacing:.04em}
p{margin:0}
ul,ol{list-style:none}
button{font:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold-pale);color:var(--ink);padding:8px 14px;z-index:2000;border-radius:var(--r-sm)} .skip:focus{left:8px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-gold);z-index:1300;pointer-events:none}

/* ---------- section rhythm + grounds ---------- */
.pad{padding-block:var(--sec)} .pad-sm{padding-block:var(--sec-sm)}
.bg-paper{background:var(--paper)} .bg-paper2{background:var(--paper-2)} .bg-white{background:var(--white)}
.bg-frost{background:radial-gradient(900px 400px at 85% -10%,rgba(255,255,255,.9),transparent 60%),var(--frost)}
.bg-ice{background:linear-gradient(180deg,var(--frost) 0%,var(--ice) 100%)}
.on-dark{background:var(--ink);color:var(--txt-inv)}
.on-dark2{background:var(--ink-2);color:var(--txt-inv)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark2 h1,.on-dark2 h2,.on-dark2 h3,.on-dark2 h4{color:var(--white)}
.on-dark p,.on-dark2 p{color:var(--txt-inv-soft)}
.on-dark .lead,.on-dark2 .lead{color:var(--txt-inv)}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold);flex:none}
.eyebrow.center{justify-content:center}
.on-dark .eyebrow,.on-dark2 .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--gold-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:24px 48px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{margin-bottom:0}
.sec-head .right{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cta-gap)}
.sec-head .lead{max-width:56ch}
.sec-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.lead{font-size:clamp(16px,1.25vw,18px);color:var(--txt-soft);line-height:1.6}
.copy p+p{margin-top:14px}
.copy h2,.copy h3{margin-bottom:var(--h-gap)}
.copy .eyebrow+h2,.copy .eyebrow+h3{margin-top:0}
.gtx{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.small{font-size:13px} .muted{color:var(--txt-soft)}
.on-dark .muted,.on-dark2 .muted{color:var(--txt-inv-soft)}
.rink-line{position:relative;height:2px;background:var(--rink-red);margin:0 auto;max-width:var(--maxw);opacity:.85}
.rink-line::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;border:2px solid var(--rink-red);border-radius:50%;transform:translate(-50%,-50%);background:var(--paper)}
.rink-line::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:var(--rink-red);transform:translate(-50%,-50%)}
.on-dark .rink-line::before,.on-dark2 .rink-line::before{background:var(--ink)}
.bg-frost .rink-line::before{background:var(--frost)}
.blue-lines{display:flex;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.blue-lines span{display:block;width:60px;height:3px;background:var(--rink-blue);opacity:.55}

/* ---------- buttons ---------- */
.btn{display:inline-flex;width:fit-content;align-items:center;justify-content:center;gap:10px;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:14.5px;padding:15px 30px;border-radius:6px;text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,background-position .3s;white-space:nowrap;line-height:1.2}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:var(--grad-gold);background-size:200% 100%;color:#161005;box-shadow:0 10px 26px rgba(176,141,79,.35)}
.btn-gold:hover{background-position:90% 0}
.btn-ghost{border-color:rgba(201,164,95,.55);color:var(--gold-2);background:transparent}
.btn-ghost:hover{background:rgba(201,164,95,.1)}
.btn-ghost.on-light{color:var(--gold-deep);border-color:rgba(138,107,56,.5)}
.btn-dark{background:var(--ink);color:var(--txt-inv);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-3)}
.btn .shine{position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){.btn:hover .shine{animation:shine .8s ease}}
@keyframes shine{to{left:130%}}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;font-weight:600;color:var(--gold-deep);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:3px;transition:gap .25s,color .25s}
.link-arrow svg{width:16px;height:16px}
.link-arrow:hover{gap:.9em;color:var(--txt)}
.on-dark .link-arrow,.on-dark2 .link-arrow,.link-arrow.light{color:var(--gold-pale);border-color:var(--gold-2)}
.on-dark .link-arrow:hover,.on-dark2 .link-arrow:hover,.link-arrow.light:hover{color:var(--white)}

/* ---------- header ---------- */
header.site-header{position:sticky;top:0;z-index:1000;background:rgba(10,13,16,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,164,95,.18);height:var(--nav-h);transition:box-shadow .3s}
header.site-header.scrolled{box-shadow:0 10px 30px rgba(10,13,16,.35)}
.navbar{max-width:1440px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:18px;height:100%}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;margin-right:auto;flex:none;height:100%}
.logo img{width:auto;display:block}
.logo .mono{height:56px}
.logo .wm{height:52px}
nav.main{display:flex;align-items:center;height:100%}
ul.nav{display:flex;align-items:center;gap:0;height:100%}
ul.nav>li{position:relative;height:100%;display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center;gap:.4em;padding:10px 11px;color:var(--txt-inv-soft);text-decoration:none;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:color .15s;position:relative;background:none;border:0;cursor:pointer;border-radius:var(--r-sm)}
.nav-link::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--gold-2);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link:hover,.nav-link.cur,.has-dropdown.open>.nav-link{color:var(--gold-2)}
.nav-link:hover::after,.nav-link.cur::after,.has-dropdown.open>.nav-link::after{transform:scaleX(1)}
.nav-link .chev{width:11px;height:11px;transition:transform .25s}
.has-dropdown.open .chev{transform:rotate(180deg)}
.has-dropdown{position:relative}
.dropdown-panel{position:absolute;top:100%;left:0;background:#0C1014;border:1px solid rgba(201,164,95,.35);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--shadow-deep);padding:16px;display:grid;gap:16px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:60;min-width:320px}
.has-dropdown.open>.dropdown-panel{opacity:1;visibility:visible;transform:none}
.dropdown-panel.mega{grid-template-columns:220px 1fr;min-width:600px}
.dropdown-panel.mega.wide{grid-template-columns:220px 1fr 1fr;min-width:820px}
.dropdown-panel.right{left:auto;right:0}
.dropdown-panel .feat{border-radius:var(--r-sm);overflow:hidden;position:relative;aspect-ratio:3/4;background:var(--ink-2);display:block;text-decoration:none;border:2px solid rgba(255,255,255,.85);outline:1px solid rgba(201,164,95,.5)}
.dropdown-panel .feat img{width:100%;height:100%;object-fit:cover}
.dropdown-panel .feat span{position:absolute;left:12px;right:12px;bottom:12px;color:var(--white);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:15px;line-height:1.15;z-index:1;text-shadow:0 2px 10px rgba(10,13,16,.6)}
.dropdown-panel .feat::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(10,13,16,.72),transparent)}
.dd-col h5{margin:0 8px 8px;font-family:var(--font-body);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);border-bottom:1px solid rgba(201,164,95,.28);padding-bottom:8px;font-weight:800}
.dd-col a{display:flex;align-items:center;min-height:44px;padding:8px 10px;border-radius:var(--r-sm);font-weight:500;font-size:14px;color:var(--txt-inv);white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.dd-col a:hover{background:rgba(201,164,95,.12);color:var(--gold-pale)}
.dd-col a.all{color:var(--gold-2);font-weight:700}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.header-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:6px}
.phone-pill{display:inline-flex;align-items:center;gap:.55em;padding:12px 20px;border-radius:var(--r-pill);background:var(--grad-gold);background-size:200% 100%;color:#161005;font-family:var(--font-head);font-weight:600;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-decoration:none;box-shadow:0 8px 22px rgba(176,141,79,.35);transition:transform .2s,box-shadow .2s,background-position .3s}
.phone-pill:hover{transform:translateY(-1px);background-position:90% 0}
.phone-pill svg{width:17px;height:17px;flex:none}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(201,164,95,.45);background:transparent;align-items:center;justify-content:center;cursor:pointer;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--gold-2);position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--gold-2);transition:.25s}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)} body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none}
@media(max-width:1180px){
  nav.main,.phone-pill .lbl{display:none}
  .burger{display:flex}
  .phone-pill{padding:12px 14px}
  .logo .wm{height:44px} .logo .mono{height:50px}
  .mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;background:#0C1014;border-bottom:1px solid rgba(201,164,95,.3);max-height:calc(100vh - var(--nav-h));overflow:auto;padding:10px var(--gutter) 28px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s;z-index:70;box-shadow:var(--shadow-deep)}
  body.menu-open .mobile-nav{opacity:1;visibility:visible;transform:none}
  .mobile-nav a,.mobile-nav button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:10px 6px;border:0;border-bottom:1px solid var(--line-inv);background:none;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--txt-inv);text-align:left;text-decoration:none;cursor:pointer}
  .mobile-nav .acc-panel{display:none;padding:4px 0 8px 14px}
  .mobile-nav .acc.open .acc-panel{display:block}
  .mobile-nav .acc-panel a{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:500;font-size:15px;min-height:44px;color:var(--txt-inv-soft)}
  .mobile-nav .acc button .chev{width:14px;height:14px;transition:.2s}
  .mobile-nav .acc.open button .chev{transform:rotate(180deg)}
  .mobile-nav .m-phone{margin-top:14px;justify-content:center;border:0}
}
@media(max-width:600px){:root{--nav-h:74px} .logo .mono{height:46px} .logo .wm{display:none}}

/* ---------- HERO (layered parallax, always-on motion) ---------- */
.hero{position:relative;background:radial-gradient(1200px 700px at 78% -10%,#1C1508 0%,transparent 55%),var(--ink);color:var(--txt-inv);min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:hidden}
.hero .plane{will-change:transform}
.plane--back{position:absolute;inset:0;left:28%;z-index:0;overflow:hidden}
.plane--back img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;transform:scale(1.06);transform-origin:60% 50%}
.plane--back::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(10,13,16,.94) 10%,rgba(10,13,16,.55) 26%,rgba(10,13,16,0) 46%),linear-gradient(to top,var(--ink) 0%,rgba(10,13,16,.25) 22%,rgba(10,13,16,0) 40%)}
.hero-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 0%,transparent 42%,rgba(228,206,156,.13) 50%,transparent 58%,transparent 100%);background-size:220% 100%;background-position:0 0;mix-blend-mode:screen}
.snow{position:absolute;inset:-10% 0 0 0;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(2px 2px at 18px 26px,rgba(255,255,255,.9),transparent 60%),radial-gradient(1.6px 1.6px at 140px 90px,rgba(255,255,255,.75),transparent 60%),radial-gradient(2.4px 2.4px at 76px 170px,rgba(228,206,156,.8),transparent 60%),radial-gradient(1.4px 1.4px at 210px 40px,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.8px 1.8px at 250px 200px,rgba(255,255,255,.7),transparent 60%);
  background-size:280px 280px}
.snow.s2{opacity:.38;background-size:420px 420px;filter:blur(.6px)}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,420px);gap:clamp(28px,4vw,72px);align-items:center;width:100%;padding-block:clamp(22px,2.6vw,30px)}
.hero-grid>*{min-width:0}
.hero-copy{max-width:640px}
.hero-copy .wordmark{width:min(140px,40%);height:auto;margin-bottom:12px}
.hero h1{margin-bottom:18px;color:var(--white);text-shadow:0 2px 24px rgba(10,13,16,.5);font-size:clamp(34px,4.1vw,58px)}
.hero h1 .gtx{background-size:200% 100%}
.hero .lead{color:var(--txt-inv);margin-bottom:16px;max-width:56ch;font-size:16px}
.bullets{display:grid;gap:8px;margin:0 0 18px}
.bullets li{display:flex;gap:.8em;align-items:flex-start;font-weight:500;color:var(--txt-inv)}
.bullets li::before{content:"";flex:none;width:13px;height:13px;margin-top:.45em;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 0 3px rgba(10,13,16,.9),0 0 0 4.5px rgba(201,164,95,.7)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(201,164,95,.4);border-radius:var(--r-pill);padding:9px 18px 9px 12px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-pale);font-weight:600;background:rgba(10,13,16,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none}
.badge svg{width:16px;height:16px;flex:none;color:var(--gold-2)}
.plane--mid{position:absolute;z-index:1;left:46%;top:4%;width:34%;max-width:520px;aspect-ratio:1;opacity:.32;pointer-events:none}
.plane--mid svg{width:100%;height:100%;display:block}
.plane--front{position:absolute;z-index:4;right:-12%;bottom:-2%;width:22%;max-width:330px;transform:rotate(-9deg);pointer-events:none;opacity:.96;filter:blur(.25px) drop-shadow(0 30px 40px rgba(10,13,16,.7))}
.plane--front img{width:100%;height:auto}
.hero-feats{position:relative;z-index:5;border-top:1px solid rgba(201,164,95,.22);background:linear-gradient(to top,rgba(10,13,16,.9),rgba(10,13,16,.7));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-feats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:14px;padding-bottom:14px}
.hf{display:flex;gap:12px;align-items:flex-start;min-width:0}
.hf svg{margin-top:2px}
.hf svg{width:26px;height:26px;fill:none;stroke:var(--gold-2);stroke-width:1.6;flex:none}
.hf b{display:block;font-family:var(--font-head);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);font-weight:600}
.hf span{font-size:11.5px;color:var(--txt-inv-soft);line-height:1.35}
@media(prefers-reduced-motion:no-preference){
  .plane--back img{animation:kenburns 28s ease-in-out infinite alternate}
  .hero-sweep{animation:sweep 9s ease-in-out infinite}
  .snow{animation:snow 22s linear infinite} .snow.s2{animation-duration:34s}
  .hero h1 .gtx{animation:shimmer 5.5s linear infinite}
}
@keyframes kenburns{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.15) translate3d(-2.5%,1.5%,0)}}
@keyframes sweep{0%{background-position:0 0}55%{background-position:100% 0}100%{background-position:100% 0}}
@keyframes snow{from{background-position:0 0}to{background-position:-60px 280px}}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
@media(max-width:1180px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;padding-top:calc(46svh + 24px);gap:34px}
  .plane--back{inset:auto;left:0;right:0;top:0;height:50svh;min-height:320px;width:100%}
  .plane--back::after{background:linear-gradient(to top,var(--ink) 0%,rgba(10,13,16,.35) 30%,rgba(10,13,16,0) 55%)}
  .plane--back img{object-position:center 40%}
  .plane--mid,.plane--front{display:none}
  .hero-feats .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero-grid{padding-top:calc(44svh + 10px)}
  .plane--back{height:48svh;min-height:300px}
  .hero-copy .wordmark{width:170px}
  .hero-feats .wrap{grid-template-columns:1fr;gap:12px;padding-top:16px;padding-bottom:16px}
}

/* metric-matched local fallbacks, used ONLY inside the homepage hero: size-adjust measured in Chrome against the real web fonts
   (Oswald 700 caps = 0.782 x Arial Bold, Inter 400 = 1.071 x Arial, Inter 600/700 = 1.012 to 1.021 x Arial Bold), ascent/descent
   from the fonts' own vertical metrics, so the hero's line breaks and heights do not jump when the web fonts arrive (layout shift) */
@font-face{font-family:'TNS Oswald Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:500 800;size-adjust:78.2%;ascent-override:152.6%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:'TNS Inter Fallback';src:local('Arial'),local('ArialMT');font-weight:300 500;size-adjust:107.3%;ascent-override:90.3%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:'TNS Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 900;size-adjust:101.6%;ascent-override:95.3%;descent-override:23.8%;line-gap-override:0%}
/* ---------- HERO, homepage default: the youth player in a real ice hockey arena (2026-09-28) ----------
   The arena photo (HOME / VISITORS scoreboard, centre ice) is placed with container-unit math: the board hangs high above the copy,
   VISITORS clears the form card by 16px and the photo always covers the banner. The H1 starts under the board; the eyebrow and the
   wordmark sit in the top-left corner beside it. Photo landmarks (fractions of the 3840x2160 photo): board x .284-.713 y .133-.322,
   VISITORS label right edge x .6875, score digits bottom y .282, far boards y .735-.78. One effect canvas in front (spray, frost
   frame, snow); main.js drives the intro. Photo heroes a/b keep the .hero rules above. */
.hero--ice{--font-head:'Oswald','TNS Oswald Fallback',sans-serif;--font-body:'Inter','TNS Inter Fallback',sans-serif;font-family:var(--font-body);--hw:1680px;--hg:clamp(28px,3.6vw,64px);--copy-w:clamp(492px,37.5vw,590px);--form-w:clamp(360px,28vw,420px);
  --gpt:clamp(18px,1.9vw,30px);--yb:14px;--feats-h:99px;--content-h:760px;background:var(--ink)}
@media(min-width:1400px){.hero--ice{--content-h:732px}}
/* narrow desktops: the corner beside the board is narrow, so the eyebrow drops its decorative rule and tightens (11px, never smaller) */
@media(min-width:1181px) and (max-width:1399px){.hero--ice .hero-mast .eyebrow{font-size:11px;letter-spacing:.2em} .hero--ice .hero-mast .eyebrow::before{display:none}}
.hero--ice .ice-banner{position:relative;flex:1 0 auto;display:flex;align-items:stretch;container-type:inline-size}
.hero--ice .ice-banner>*{
  --cwid:min(100cqw, var(--hw));
  --cl:calc((100cqw - var(--cwid)) / 2 + var(--hg));
  --fl:calc((100cqw + var(--cwid)) / 2 - var(--hg) - var(--form-w));
  --mid:calc(var(--cwid) - 2 * var(--hg) - var(--copy-w) - var(--form-w));
  --pcx:calc(var(--cl) + var(--copy-w) + var(--mid) / 2);
  --hb:max(calc(100svh - var(--nav-h) - var(--feats-h)), var(--content-h));
  --S:max(calc(100cqw + 16px), calc((100cqw + 24px - var(--fl)) / .3125), calc((var(--hb) + 8px - var(--yb)) / .4877));
  --L:min(-8px, calc(var(--fl) - 16px - .6875 * var(--S)));
  --T:calc(var(--yb) - .0748 * var(--S));
  --bl:calc(var(--L) + .284 * var(--S));
  --bb:calc(var(--yb) + .1063 * var(--S));
  --sb:calc(var(--yb) + .0838 * var(--S))}
.hero--ice .hero-grid{position:relative;z-index:3;max-width:var(--hw);padding-inline:var(--hg);grid-template-columns:var(--copy-w) minmax(0,1fr) var(--form-w);gap:0;padding-block:var(--gpt);align-items:start}
.hero--ice .hero-copy{grid-column:1;max-width:none;position:relative}
.hero--ice .hero-form{grid-column:3;position:relative}
.hero--ice h1{font-size:clamp(34px,3.2vw,54px);margin-bottom:14px}
/* desktop: the H1 starts under the board, the mast (eyebrow + wordmark) fits the corner left of it; same content, same order */
@media(min-width:1181px){
  .hero--ice .hero-mast{min-height:calc(var(--bb) + 18px - var(--gpt));max-width:max(170px, calc(var(--bl) - var(--cl) - 26px))}
  .hero--ice .hero-form{align-self:center}
  .hero--ice .eyebrow{letter-spacing:.24em;margin-bottom:8px;line-height:1.5}
  .hero--ice .hero-copy .wordmark{width:122px;margin-bottom:8px}
  .hero--ice .lead{font-size:15.5px;line-height:1.55;margin-bottom:12px}
  .hero--ice .hero-mast .eyebrow{text-wrap:balance}
  .hero--ice .bullets{gap:5px;margin-bottom:16px} .hero--ice .bullets li{font-size:15px;line-height:1.45}
  .hero--ice .hero-ctas{margin-bottom:14px}
  .hero--ice .btn-ghost{background:rgba(10,13,16,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .hero--ice .badge{letter-spacing:.08em;padding:8px 16px 8px 11px;background:rgba(10,13,16,.66)}
  .hero--ice .lead-form{padding:18px 22px 16px}
  .hero--ice .lead-form h3{font-size:clamp(18px,1.45vw,21px);margin-bottom:10px}
  .hero--ice .lead-form label{margin-bottom:4px}
  .hero--ice .lead-form .row{margin-bottom:8px}
  .hero--ice .lead-form input[type=text],.hero--ice .lead-form input[type=tel],.hero--ice .lead-form input[type=email]{padding:9px 12px}
  .hero--ice .lead-form .hint{margin:2px 0 6px}
  .hero--ice .capsules,.hero--ice .roster{gap:6px}
  .hero--ice .roster{margin-bottom:8px}
  .hero--ice .picked{margin-bottom:2px}
  .hero--ice .lead-form label.consent{margin-bottom:4px;line-height:1.3}
  .hero--ice .lead-form .btn{margin-top:4px}
  .hero--ice .trust{margin-top:6px}
}
.hero--ice .ice-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#06080B}
/* the arena photo: never a dark overlay on it; a slow pointer parallax against the player (desktop) */
.hero--ice .ice-bg img{position:absolute;left:var(--L);top:var(--T);width:var(--S);max-width:none;height:auto;min-height:calc(100% + 8px - var(--T));object-fit:cover;object-position:50% 0;
  translate:calc(var(--px,0) * -4px) calc(var(--py,0) * -3px);transition:translate .7s cubic-bezier(.2,.7,.2,1)}
/* the only scrim: the spotlight falls off toward the left rink edge, where the lower copy (bullets, CTAs, badge) sits on the white
   boards and ice; the stands behind the H1 are already dark. Contrast is measured in qc/hero-ice/contrast.mjs */
.hero--ice .ice-vignette{position:absolute;inset:0;background:radial-gradient(calc(var(--copy-w) + 330px) 58% at calc(var(--cl) - 30px) 100%,rgba(8,11,15,.74) 0%,rgba(8,11,15,.64) 38%,rgba(8,11,15,.32) 68%,rgba(8,11,15,0) 100%),
  radial-gradient(calc(var(--bl) - var(--cl) + 60px) calc(var(--bb) - 10px) at calc(var(--cl) + 90px) calc(var(--gpt) + 40px),rgba(8,11,15,.72) 0%,rgba(8,11,15,.5) 50%,rgba(8,11,15,0) 100%)}
/* the player: under the board (his helmet may overlap the board's bottom housing, never the HOME or VISITORS digits), skates on the
   ice at the banner bottom, or at the bottom of the FIRST screen when the banner is taller than it */
.hero--ice .ice-player{--pb:max(1.2%, calc(100% - 100svh + var(--nav-h) + 12px));position:absolute;bottom:var(--pb);left:var(--pcx);height:min(calc(100% - var(--sb) - 4px - var(--pb)), calc(var(--mid) * 1.84));aspect-ratio:1360/2048;transform:translateX(-47%)}
.ice-par,.ice-breathe{position:absolute;inset:0}
/* speed lines rush out of the vanishing point at centre ice (main.js sets --vpx/--vpy from the photo), masked to the rink middle */
.ice-speed{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .28s ease;
  -webkit-mask-image:radial-gradient(ellipse 22% 62% at var(--vpx,50%) var(--vpy,72%),#000 22%,transparent 80%);mask-image:radial-gradient(ellipse 22% 62% at var(--vpx,50%) var(--vpy,72%),#000 22%,transparent 80%)}
.ice-speed i{position:absolute;left:var(--vpx,50%);top:var(--vpy,72%);width:var(--vps,1400px);aspect-ratio:1;translate:-50% -50%;background:url(img/top-notch-sports-ice-speed-lines-canada.svg) center/contain no-repeat;opacity:0}
.ice-speed i:nth-child(2){rotate:37deg} .ice-speed i:nth-child(3){rotate:-58deg}
.hero--ice.ice-rush .ice-speed{opacity:1}
.ice-par{z-index:2;translate:calc(var(--px,0) * 2.5px) calc(var(--py,0) * 2px);transition:translate .7s cubic-bezier(.2,.7,.2,1)}
.ice-breathe{transform-origin:50% 100%}
.ice-pose{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;transform-origin:50% 100%}
.ice-pose-a{left:7.8%;top:1%;opacity:0;will-change:transform,opacity,filter}
.ice-pose-b{opacity:1;will-change:transform,opacity}
/* contact shadow under pose B's blades, so he stands ON the ice */
.ice-shadow{position:absolute;left:-2%;top:91.5%;width:66%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(6,10,16,.55),rgba(6,10,16,.22) 60%,rgba(6,10,16,0));transform-origin:50% 50%}
.hero--ice .ice-fx{position:absolute;left:0;top:0;width:100%;height:calc(100% + 20px);z-index:6;pointer-events:none;display:block}
.hero--ice.ice-shake .hero-grid,.hero--ice.ice-shake .ice-scene,.hero--ice.ice-shake .ice-fx{translate:var(--shx,0) var(--shy,0)}
/* intro start state: set by the inline head script only when motion is allowed, cleared by main.js when the intro settles */
html.ice-pre .ice-pose-b,html.ice-pre .ice-shadow{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hero--ice.ice-rush .ice-speed i{animation:iceRush .8s cubic-bezier(.55,0,.8,.45) infinite}
  .hero--ice.ice-rush .ice-speed i:nth-child(2){animation-delay:.27s} .hero--ice.ice-rush .ice-speed i:nth-child(3){animation-delay:.54s}
  .hero--ice.ice-idle .ice-breathe{animation:iceBreath 4.2s ease-in-out infinite alternate}
}
@keyframes iceRush{0%{transform:scale(.3);opacity:0}28%{opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes iceBreath{from{transform:scale(1)}to{transform:scale(1.008)}}
/* tablet + phone: the arena becomes a band on top (the mobile banner): the portrait crop on phones, the landscape photo on tablets;
   the board sits at the top of the band, the player below it with his helmet over the clock at most; copy and form follow on ink */
@media(max-width:1180px){
  .hero--ice{--band-h:clamp(360px,58svh,600px)}
  .hero--ice .ice-banner{display:block}
  .hero--ice .hero-grid{grid-template-columns:minmax(0,1fr);max-width:var(--maxw);padding-inline:var(--gutter);padding-top:calc(var(--band-h) + 18px);gap:34px}
  .hero--ice .hero-copy,.hero--ice .hero-form{grid-column:1}
  .hero--ice .ice-scene{inset:0 0 auto 0;height:var(--band-h)}
  .hero--ice .ice-bg img{left:0;top:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 0;translate:none}
  .hero--ice .ice-vignette{display:none}
  .hero--ice .ice-player{left:50%;top:19.5%;bottom:2.5%;height:auto;transform:translateX(-52%)}
  .hero--ice .ice-fx{height:calc(var(--band-h) + 20px)}
}
@media(min-width:601px) and (max-width:1180px){.hero--ice .ice-bg img{object-position:43% 0} .hero--ice .ice-player{top:20.5%}}
@media(prefers-reduced-motion:reduce){.ice-pose-a,.ice-speed{display:none}}

/* ---------- LEAD FORM (glass card; resets its own colours against the CARD) ---------- */
.lead-form{position:relative;background:rgba(12,16,20,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--txt-inv);border-radius:24px;padding:clamp(20px,2.2vw,28px);box-shadow:0 0 0 1px var(--glow-edge),0 0 24px var(--glow-soft),0 0 64px var(--glow-wide),0 24px 48px rgba(10,13,16,.45)}
.lead-form h3{font-size:clamp(19px,1.7vw,22px);margin-bottom:4px;color:var(--white)}
.lead-form .sub{font-size:13px;color:var(--txt-inv-soft);margin-bottom:14px}
.lead-form label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:5px}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.lead-form .row>*{min-width:0}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form input[type=email],.lead-form textarea{width:100%;min-width:0;padding:11px 13px;border:1px solid rgba(255,255,255,.26);border-radius:10px;background:rgba(255,255,255,.07);font:inherit;font-size:14px;color:var(--white);transition:border-color .2s,box-shadow .2s}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:rgba(242,239,233,.5)}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(201,164,95,.25)}
.lead-form input.bad{border-color:var(--rink-red)}
.lead-form .hint{font-size:12px;color:var(--txt-inv-soft);margin:4px 0 8px}
.capsules{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 4px}
.capsule{padding:6px 11px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:var(--white);font-weight:600;font-size:12px;cursor:pointer;position:relative;overflow:hidden;transition:.2s;user-select:none;line-height:1.3}
.capsule:hover{border-color:var(--gold-2)}
.capsule.on{background:var(--grad-gold);border-color:transparent;color:#161005;transform:scale(1.04);box-shadow:0 6px 16px rgba(201,164,95,.4)}
.capsule .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);pointer-events:none}
.capsules.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.picked{font-size:11.5px;color:var(--gold-pale);min-height:1em;margin-bottom:6px}
.roster{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.roster .capsule{font-size:12.5px;padding:7px 12px}
.lead-form textarea{resize:vertical;min-height:72px;margin-bottom:12px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.lead-form label.consent,.consent{display:flex;gap:9px;align-items:flex-start;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt-inv-soft);line-height:1.35;margin-bottom:6px;cursor:pointer}
.consent input{margin-top:2px;accent-color:var(--gold-2);flex:none;width:14px;height:14px}
.consent a,.fine a{color:var(--gold-pale)}
.fine{display:block;font-size:10.5px;color:var(--txt-inv-soft);line-height:1.4;margin:2px 0 6px}
.lead-form .btn{width:100%;margin-top:6px;white-space:normal;text-align:center}
.lead-form .btn-cta{background:var(--grad-gold);background-size:200% 100%;color:#161005;box-shadow:0 10px 26px rgba(176,141,79,.4)}
.trust{font-size:11.5px;color:var(--txt-inv-soft);text-align:center;margin-top:10px}
.form-ok{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;background:rgba(201,164,95,.12);border:1px solid rgba(201,164,95,.4);color:var(--gold-pale);font-size:14px;line-height:1.5}
.form-ok.show{display:block}
.form-ok.err{background:rgba(200,50,62,.12);border-color:rgba(200,50,62,.5);color:#F5D0D3}
.form-ok a{color:var(--white)}
@media(prefers-reduced-motion:no-preference){.lead-form{animation:breathe 4.5s ease-in-out infinite}}
@keyframes breathe{50%{box-shadow:0 0 0 1px var(--glow-edge),0 0 32px var(--glow-soft),0 0 88px var(--glow-wide),0 24px 48px rgba(10,13,16,.45)}}

/* ---------- frames + media ---------- */
.frame{border-radius:14px;overflow:hidden;border:3px solid var(--white);outline:1px solid rgba(201,164,95,.5);box-shadow:var(--shadow-lift);aspect-ratio:4/3;background:var(--paper-2);position:relative}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.tall{aspect-ratio:3/4} .frame.wide{aspect-ratio:16/10} .frame.square{aspect-ratio:1/1}
.frame.contain{background:var(--white)} .frame.contain img{object-fit:contain;padding:8px}
.frame.gold{border-color:transparent;background:var(--grad-gold);padding:3px} .frame.gold img{border-radius:11px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.split>*{min-width:0}
.split.rev>.media{order:-1}
.split .media{position:relative}
.split .media .tag{position:absolute;left:-12px;bottom:22px;background:var(--ink);color:var(--txt-inv);border:1px solid rgba(201,164,95,.4);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--shadow-lift);max-width:280px;z-index:2}
.split .media .tag b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--gold-pale)}
.split .media .tag span{font-size:12.5px;color:var(--txt-inv-soft)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.two-col>*{min-width:0}
@media(max-width:900px){.split,.two-col{grid-template-columns:1fr} .split.rev>.media{order:0} .split .media .tag{left:12px}}

/* ---------- proof band: two-row marquee of REAL orders ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#111 7%,#111 93%,transparent);mask-image:linear-gradient(90deg,transparent,#111 7%,#111 93%,transparent);padding-block:6px}
.mq-track{display:flex;gap:16px;width:max-content}
.mq-tile{width:clamp(200px,20vw,260px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative;flex:none;border:3px solid var(--white);outline:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--paper-2);text-decoration:none;display:block}
.mq-tile img{width:100%;height:100%;object-fit:cover}
.mq-tile span{position:absolute;left:10px;bottom:10px;background:rgba(10,13,16,.85);color:var(--gold-pale);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);z-index:1}
.marquee+.marquee{margin-top:16px}
@media(prefers-reduced-motion:no-preference){.mq-track{animation:mq 52s linear infinite} .marquee.rev .mq-track{animation-direction:reverse} .marquee:hover .mq-track{animation-play-state:paused}}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- draggable carousel + sport cards ---------- */
.carousel{position:relative}
.carousel-track{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;padding:6px 2px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel-track a,.carousel-track img{-webkit-user-drag:none;user-drag:none}
.carousel-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.carousel-nav svg{width:18px;height:18px}
.carousel-nav:hover{border-color:var(--gold);color:var(--gold-deep)}
.carousel-nav:disabled{opacity:.25;cursor:default}
.on-dark .carousel-nav,.on-dark2 .carousel-nav{background:var(--ink-2);border-color:rgba(201,164,95,.3);color:var(--gold-2)}
.dc-navs{display:flex;gap:10px}
.scard{scroll-snap-align:start;flex:0 0 auto;width:clamp(230px,23vw,280px);text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .2s,box-shadow .2s;position:relative;display:flex;flex-direction:column;color:var(--txt)}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.scard .media{background:radial-gradient(240px 160px at 50% 100%,var(--ice),var(--frost) 70%);height:250px;display:grid;place-items:center;padding:14px;position:relative;overflow:hidden}
.scard .media img{max-height:100%;width:auto;max-width:100%;object-fit:contain;transition:transform .5s}
.scard.photo .media{padding:0} .scard.photo .media img{width:100%;height:100%;object-fit:cover;max-height:none}
.scard:hover .media img{transform:scale(1.04)}
.scard .tag{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--gold-pale);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);z-index:1}
.scard .body{padding:14px 18px 18px;border-top:1px solid var(--line);background:var(--paper);flex:1;display:flex;flex-direction:column;gap:4px}
.scard h3{font-size:17px;letter-spacing:.06em}
.scard .body p{font-size:12.5px;color:var(--txt-soft);line-height:1.45}
.scard .go{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--gold-2);display:grid;place-items:center;opacity:0;transition:.2s;z-index:1}
.scard .go svg{width:15px;height:15px}
.scard:hover .go{opacity:1}
@media(max-width:600px){.scard{width:76vw} .scard .media{height:220px}}

/* ---------- craft band (dark) + counters + mouse glow ---------- */
.craft{position:relative;overflow:hidden}
.glow-band{position:relative;overflow:hidden}
.glow-band .glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,95,.18),transparent 62%);transform:translate(-50%,-50%);pointer-events:none;left:70%;top:30%;z-index:0;transition:left .18s ease-out,top .18s ease-out}
.glow-band>.wrap{position:relative;z-index:1}
.spec-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.spec-tile{border-radius:var(--r-lg);overflow:hidden;position:relative;border:1px solid rgba(201,164,95,.25);aspect-ratio:1/1;max-width:394px;background:var(--ink-2)}
.spec-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec-tile .st-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,13,16,.9) 55%);padding:38px 18px 14px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--gold-pale)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,4vw,56px)}
.stat{background:var(--ink-2);border:1px solid rgba(201,164,95,.16);border-radius:var(--r-md);padding:22px}
.stat b{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(34px,3.6vw,48px);line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.stat span{font-size:13.5px;color:var(--txt-inv-soft)}
@media(max-width:1000px){.spec-tiles,.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.spec-tiles{grid-template-columns:1fr 1fr;gap:12px} .stats{grid-template-columns:1fr 1fr;gap:12px} .stat{padding:16px}}

/* ---------- compare slider (same design, your colours) ---------- */
.compare{position:relative;aspect-ratio:3/4;max-width:460px;border-radius:14px;overflow:hidden;border:3px solid var(--white);outline:1px solid rgba(201,164,95,.5);box-shadow:var(--shadow-lift);background:var(--white);--pos:50%;user-select:none;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare img.after{clip-path:inset(0 0 0 var(--pos))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold-2);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(10,13,16,.3)}
.compare .handle::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:var(--grad-gold);transform:translate(-50%,-50%);box-shadow:var(--shadow-lift);border:3px solid var(--white)}
.compare .handle::before{content:"\2194";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;color:#161005;font-weight:800;font-size:18px;font-family:var(--font-body)}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.compare .lab{position:absolute;top:12px;background:rgba(10,13,16,.85);color:var(--gold-pale);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);pointer-events:none}
.compare .lab.l{left:12px} .compare .lab.r{right:12px}

/* ---------- card stack (4-step process) ---------- */
.pill{border:1px solid rgba(201,164,95,.4);color:var(--gold-pale);border-radius:var(--r-pill);padding:6px 14px;font-size:12px;font-weight:600;letter-spacing:.06em}
/* ---------- how custom works: 4 static steps (2026-09-28: the sticky card stack is gone; reveals only) ---------- */
.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);margin-top:clamp(8px,1.4vw,18px)}
.how-step{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--ice-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.how-step::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-gold);z-index:2}
.how-media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.how-media img{width:100%;height:100%;object-fit:cover}
.how-step:nth-child(3) .how-media img{object-position:56% 62%}
.how-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.how-num{font-family:var(--font-head);font-weight:700;font-size:2.6rem;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.how-step h3{font-size:clamp(19px,1.5vw,22px);color:var(--txt)}
.how-step p{color:var(--txt-soft);font-size:15px;line-height:1.55}
.how-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.how-step .pill{border-color:rgba(138,107,56,.38);color:var(--gold-deep);background:rgba(201,164,95,.08);padding:5px 11px;font-size:11.5px}
@media(max-width:1100px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.how-steps{grid-template-columns:minmax(0,1fr);gap:14px} .how-body{padding:18px 18px 20px}}

/* ---------- areas strip (coast to coast) ---------- */
.coast{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ctile{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;display:block;text-decoration:none;box-shadow:var(--shadow-soft);isolation:isolate;border:2px solid var(--white);outline:1px solid var(--line)}
.ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ctile:hover img{transform:scale(1.06)}
.ctile::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(10,13,16,.82),transparent)}
.ctile .tb{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:flex;flex-direction:column;gap:2px}
.ctile h4,.ctile .t{color:var(--white);font-family:var(--font-head);font-size:17px;letter-spacing:.06em;margin:0;line-height:1.1}
.ctile h4 a{color:var(--white);text-decoration:none}
.ctile .prov{color:var(--gold-pale);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.coast{grid-template-columns:repeat(3,1fr)} .tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.coast{grid-template-columns:repeat(2,1fr);gap:10px} .tiles{grid-template-columns:repeat(2,1fr);gap:10px} .ctile h4,.ctile .t{font-size:14px}}

/* ---------- lists ---------- */
.checks{display:grid;gap:10px;margin-top:18px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.checks svg{width:20px;height:20px;flex:none;color:var(--gold-deep);margin-top:2px}
.on-dark .checks svg,.on-dark2 .checks svg{color:var(--gold-2)}
.feature-list{display:grid;gap:10px;margin-top:12px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--txt-soft)}
.feature-list li::before{content:"";flex:none;width:11px;height:11px;margin-top:.5em;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px rgba(201,164,95,.6)}
.feature-list li span{flex:1} .feature-list li b{color:var(--txt);font-weight:700}
.on-dark .feature-list li,.on-dark2 .feature-list li{color:var(--txt-inv-soft)} .on-dark .feature-list li b,.on-dark2 .feature-list li b{color:var(--white)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 32px;margin-top:26px}
.feat-grid h4{margin-bottom:6px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.step{background:var(--white);color:var(--txt);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;position:relative;box-shadow:var(--shadow-soft)}
.step .n{font-family:var(--font-head);font-weight:700;font-size:44px;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:8px}
.step h3{font-size:17px;letter-spacing:.08em;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--txt-soft)}
.on-dark .step,.on-dark2 .step{background:var(--ink-2);color:var(--txt-inv);border-color:rgba(201,164,95,.16)} .on-dark .step p,.on-dark2 .step p{color:var(--txt-inv-soft)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fact{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-soft)}
.fact svg{width:28px;height:28px;flex:none;stroke:var(--gold-deep);fill:none;stroke-width:1.6}
.fact b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:14px;margin-bottom:4px}
.fact span{font-size:13px;color:var(--txt-soft)}
@media(max-width:1000px){.facts{grid-template-columns:1fr 1fr}} @media(max-width:560px){.facts{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq-item.open{box-shadow:var(--shadow-soft);border-color:rgba(201,164,95,.55)}
.faq-q{margin:0;cursor:pointer;padding:18px 56px 18px 22px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;font-size:16px;font-weight:600;line-height:1.3;position:relative;min-height:56px;display:flex;align-items:center;color:var(--txt)}
.faq-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-body);font-size:20px;color:var(--gold-deep);transition:transform .3s,background .3s,color .3s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg);background:var(--gold-2);border-color:var(--gold-2);color:#161005}
.faq-q:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.faq-a>div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a p{padding:0 22px 20px;font-size:14.5px;color:var(--txt-soft)}
.faq-a p+p{padding-top:0;margin-top:-10px}
.on-dark .faq-item,.on-dark2 .faq-item{background:var(--ink-2);border-color:rgba(201,164,95,.18)} .on-dark .faq-q,.on-dark2 .faq-q{color:var(--white)} .on-dark .faq-a p,.on-dark2 .faq-a p{color:var(--txt-inv-soft)} .on-dark .faq-q::after{border-color:rgba(201,164,95,.35);color:var(--gold-2)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq-grid .sticky{position:sticky;top:calc(var(--nav-h) + 24px)}
.faq-grid>*{min-width:0}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr} .faq-grid .sticky{position:static}}
.faq-sec{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:start;padding-block:var(--sec-sm);border-bottom:1px solid var(--line)}
.faq-sec>*{min-width:0}
.faq-sec .frame{aspect-ratio:4/5;position:sticky;top:calc(var(--nav-h) + 80px)}
.faq-sec.general{grid-template-columns:1fr}
@media(max-width:900px){.faq-sec{grid-template-columns:1fr} .faq-sec .frame{aspect-ratio:16/10;position:static}}
.jumpnav{position:sticky;top:var(--nav-h);z-index:800;background:rgba(246,245,242,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 0}
.jumpnav .wrap{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none}
.jumpnav .wrap::-webkit-scrollbar{display:none}
.jumpnav a{border:1px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:8px 18px;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--txt);transition:.15s;flex:none}
.jumpnav a.active,.jumpnav a:hover{background:var(--ink);color:var(--gold-pale);border-color:var(--ink)}

/* ---------- page hero (interior) ---------- */
.page-hero{background:radial-gradient(900px 500px at 80% -20%,#1C1508 0%,transparent 55%),var(--ink);color:var(--txt-inv);padding:clamp(36px,5vw,64px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.page-hero h1{color:var(--white);margin-bottom:var(--h-gap)}
.page-hero .sub{color:var(--txt-inv);font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:500;font-size:clamp(16px,1.4vw,19px);line-height:1.5;max-width:60ch}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:8px}
.page-hero-grid>*{min-width:0}
.page-hero .banner{border-radius:14px;overflow:hidden;border:3px solid var(--white);outline:1px solid rgba(201,164,95,.5);box-shadow:var(--shadow-deep);aspect-ratio:4/3;background:var(--ink-2)}
.page-hero .banner.full{aspect-ratio:21/9;margin-top:clamp(24px,3vw,40px)}
.page-hero .banner img{width:100%;height:100%;object-fit:cover}
.page-hero .banner.contain img{object-fit:contain;background:var(--white)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:18px}
.crumbs li+li::before{content:"\203A";margin-right:6px;color:var(--txt-inv-soft)}
.crumbs a{color:inherit;text-decoration:none} .crumbs li[aria-current]{color:var(--txt-inv-soft)}
@media(max-width:900px){.page-hero-grid{grid-template-columns:1fr} .page-hero .banner{aspect-ratio:16/10}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:var(--txt-inv);padding-block:var(--sec)}
.cta-band>img{position:absolute;inset:0;left:38%;width:62%;height:100%;object-fit:cover;object-position:center}
.cta-band .wash{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 34%,rgba(10,13,16,.72) 48%,rgba(10,13,16,0) 68%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .inner{max-width:560px}
.cta-band h2{color:var(--white);margin-bottom:var(--h-gap)}
.cta-band .lead{color:var(--txt-inv);margin-bottom:var(--cta-gap)}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media(max-width:800px){.cta-band>img{left:0;width:100%;opacity:.5} .cta-band .wash{background:linear-gradient(90deg,rgba(10,13,16,.9),rgba(10,13,16,.7))}}

/* ---------- mesh link modules (H4 anchors) ---------- */
.mesh{border-top:1px solid var(--line);background:var(--paper-2)}
.mesh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.mesh-col h3{font-family:var(--font-body);font-weight:800;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.mesh-col h4{margin:0;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.3;text-transform:none;letter-spacing:0}
.mesh-col h4 a{display:block;padding:6px 0;color:var(--txt-soft);text-decoration:none;transition:color .2s,padding-left .2s}
.mesh-col h4 a:hover{color:var(--ink);padding-left:6px} .mesh-col h4 a.cur{color:var(--gold-deep);font-weight:700}
.mesh-col .dd-cols{gap:0 16px}
@media(max-width:900px){.mesh-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.mesh-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--txt-inv-soft);padding:clamp(48px,6vw,80px) 0 0;border-top:2px solid rgba(201,164,95,.3)}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.foot-grid h4{color:var(--gold-2);font-size:13px;letter-spacing:.16em;margin-bottom:14px}
.foot-grid a{display:block;color:var(--txt-inv-soft);text-decoration:none;font-size:13.5px;padding:4px 0;transition:color .15s}
.foot-grid a:hover{color:var(--gold-pale)}
.foot-brand img{width:110px;margin-bottom:16px}
.foot-brand p{font-size:13px;max-width:280px;margin-bottom:14px}
.foot-brand .phone-pill,.foot-grid a.phone-pill{display:inline-flex;padding:11px 18px;margin-top:4px;font-size:14px;color:#161005}
.credit{position:absolute;left:8px;bottom:8px;z-index:2;font-size:10px;line-height:1.3;color:var(--white);background:rgba(10,13,16,.72);padding:3px 8px;border-radius:var(--r-pill);max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit a{color:var(--gold-pale)}
.foot-brand .mail{display:inline-block;margin-top:10px;color:var(--gold-pale)}
.foot-base{border-top:1px solid var(--line-inv);margin-top:44px;padding:20px 0;font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-base a{color:var(--gold-pale);text-decoration:none}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr}} @media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px} .foot-brand{grid-column:1/-1}}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px;grid-auto-flow:dense}
.gallery-grid a{display:block;border-radius:14px;overflow:hidden;border:3px solid var(--white);outline:1px solid var(--line);box-shadow:var(--shadow-soft);position:relative}
.gallery-grid a.tall{grid-row:span 2}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .gallery-grid a:hover img{transform:scale(1.05)}
.gallery-grid .gal-tag{position:absolute;left:10px;bottom:10px;background:rgba(10,13,16,.85);color:var(--gold-pale);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px} .gallery-grid a.tall{grid-row:auto}}
.lightbox{position:fixed;inset:0;background:rgba(10,13,16,.94);display:none;align-items:center;justify-content:center;z-index:1400}
.lightbox.on{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:var(--shadow-deep)}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:var(--white);width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer;display:grid;place-items:center}
.lightbox .lb-close{top:18px;right:18px} .lightbox .lb-prev{left:18px;top:50%;transform:translateY(-50%)} .lightbox .lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* ---------- maps (lazy) ---------- */
.map{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line);aspect-ratio:16/9;background:var(--frost-2)}
.map iframe{width:100%;height:100%;border:0;display:block;position:absolute;inset:0}
.map .map-load{z-index:1}
.map .map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--frost-2);color:var(--txt-soft);cursor:pointer;border:0;font:inherit;font-weight:600}
.map .map-load svg{width:36px;height:36px;color:var(--gold-deep)}
.map.loaded .map-load{display:none}

/* ---------- contact + NAP ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
.contact-grid>*{min-width:0}
.nap{display:grid;gap:16px;margin-top:20px}
.nap-item{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow-soft)}
.nap-item svg{width:22px;height:22px;flex:none;color:var(--gold-deep);margin-top:2px}
.nap-item b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin-bottom:2px}
.nap-item a{color:var(--txt);text-decoration:none;font-weight:600} .nap-item a:hover{color:var(--gold-deep)}
.nap-item span{font-size:13.5px;color:var(--txt-soft)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;text-decoration:none;color:var(--txt);transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)} .post-card .pc-img img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .pc-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:800}
.post-card h4{font-size:18px;letter-spacing:.03em;line-height:1.2}
.post-card p{font-size:13.5px;color:var(--txt-soft)}
.post-card .pc-meta{margin-top:auto;font-size:12px;color:var(--txt-soft)}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,64px);align-items:start}
.post-layout>*{min-width:0}
.post-side{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:22px}
.byline{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--txt-soft);margin-bottom:22px;align-items:center}
.byline a{color:var(--gold-deep);text-decoration:none;font-weight:600}
.byline img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--ink);padding:4px}
.post-body{font-size:16.5px;line-height:1.7;max-width:72ch}
.post-body h2{font-size:clamp(24px,2.8vw,34px);margin:40px 0 14px}
.post-body h3{font-size:20px;margin:30px 0 10px}
.post-body p{margin:0 0 16px} .post-body ul,.post-body ol{margin:0 0 18px 22px;list-style:disc} .post-body ol{list-style:decimal} .post-body li{margin-bottom:6px}
.post-body a{color:var(--gold-deep)}
.post-body img{border-radius:14px;border:3px solid var(--white);outline:1px solid rgba(201,164,95,.5);box-shadow:var(--shadow-soft);margin:var(--img-gap) 0;aspect-ratio:16/9;object-fit:cover;width:100%}
.post-body strong{font-weight:700}
.post-body img.contain{object-fit:contain;background:var(--white)}
.table-scroll{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.post-body table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
.post-body th,.post-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left} .post-body th{background:var(--paper-2);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
.tldr{background:var(--ink);color:var(--txt-inv);border-radius:var(--r-lg);padding:22px 26px;margin-bottom:26px;border:1px solid rgba(201,164,95,.35)}
.tldr b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;color:var(--gold-2);margin-bottom:8px;font-size:13px}
.tldr p{color:var(--txt-inv);margin:0}
.answer{font-weight:700;font-size:17.5px;border-left:4px solid var(--gold-2);padding-left:16px;margin-bottom:22px}
.author-bio{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-soft);font-size:14px;color:var(--txt-soft)}
.author-bio img{width:64px;height:64px;border-radius:50%;background:var(--ink);padding:8px;margin-bottom:12px}
.author-bio b{color:var(--txt)} .author-bio a{color:var(--gold-deep)}
.author-bio .tag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:800;margin-bottom:8px}
.more-posts{display:grid;gap:12px}
.more-posts h4{font-size:15px;letter-spacing:.03em} .more-posts a{text-decoration:none;color:var(--txt)} .more-posts a:hover{color:var(--gold-deep)}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-soft)}
.side-card h3{font-size:16px;margin-bottom:10px}
.sources{font-size:13.5px;color:var(--txt-soft);margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.sources h3{font-size:16px;margin-bottom:10px} .sources li{margin-bottom:6px} .sources a{color:var(--gold-deep)}
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;align-items:center;font-size:13px;color:var(--txt-soft)}
.share a{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;text-decoration:none;color:var(--txt);font-weight:600;font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.chips a{border:1px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:8px 18px;font-size:13px;font-weight:600;text-decoration:none;color:var(--txt)}
.chips a.sel,.chips a:hover{background:var(--ink);color:var(--gold-pale);border-color:var(--ink)}
@media(max-width:1000px){.post-layout{grid-template-columns:1fr} .post-side{position:static}}

/* ---------- hub grids + tables in copy ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.hub-grid .scard{width:auto}
.hub-grid .scard .body h4{font-size:17px;letter-spacing:.06em} .hub-grid .scard .body h4 a{text-decoration:none;color:inherit}
.copy .table-scroll{overflow-x:auto;margin:18px 0 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.copy table{border-collapse:collapse;width:100%;font-size:14px;min-width:360px}
.copy caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--txt-soft);padding:10px 12px;font-weight:600}
.copy th,.copy td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;color:var(--txt)} .copy th{background:var(--paper-2);font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
.on-dark2 .copy .table-scroll{background:var(--ink-3);border-color:rgba(201,164,95,.2)} .on-dark2 .copy th{background:var(--ink);color:var(--gold-pale)} .on-dark2 .copy td{color:var(--txt-inv);border-color:var(--line-inv)} .on-dark2 .copy caption{color:var(--txt-inv-soft)}
.copy .lead+p{margin-top:14px}

/* ---------- legal / prose pages ---------- */
.prose{max-width:76ch;font-size:15.5px;line-height:1.7}
.prose h2{font-size:clamp(22px,2.4vw,30px);margin:36px 0 12px} .prose h3{font-size:19px;margin:24px 0 8px}
.prose p{margin-bottom:14px} .prose ul{margin:0 0 16px 22px;list-style:disc} .prose li{margin-bottom:6px} .prose a{color:var(--gold-deep)}
.draft-note{background:#FFF4D6;border:1px solid #E8CF8A;color:#5C4300;border-radius:var(--r-md);padding:14px 18px;font-size:14px;font-weight:600;margin-bottom:26px}

/* ---------- reveals + motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible,.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s} .reveal.d2{transition-delay:.2s} .reveal.d3{transition-delay:.3s} .reveal.d4{transition-delay:.4s}
.words .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 45ms)}
.words.in .w,.words.visible .w{opacity:1;transform:none}
.words .w.ac{transition-delay:calc(var(--i) * 45ms + 120ms)}
.rise{opacity:0;transform:translateY(18px)}
@media(prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .rise.d1{animation-delay:.25s} .rise.d2{animation-delay:.4s} .rise.d3{animation-delay:.55s} .rise.d4{animation-delay:.7s} .rise.d5{animation-delay:.85s}
}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.rise,.words .w{opacity:1;transform:none}
  .hero .plane{transform:none!important;filter:none!important}
  .plane--mid,.plane--front,.snow,.hero-sweep{display:none}
  .mq-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- small screens ---------- */
@media(max-width:600px){
  :root{--sec:56px;--sec-sm:44px;--h-gap:10px;--hero-gap:24px;--img-gap:18px;--cta-gap:16px}
  body{font-size:15px}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .btn,.phone-pill{white-space:normal;text-align:center;line-height:1.3}
  .hero-ctas .btn{width:100%}
  .lead-form .row{grid-template-columns:1fr}
  .frame,.frame.wide,.frame.tall{aspect-ratio:4/3}
  .cta-band .inner{max-width:none}
}