/* FANBRUSH USA — Game Day / World Cup sports brand */
:root{
  --ink:#05070d;
  --navy:#070b1a;
  --navy-2:#0d1633;
  --panel:#121a33;
  --line:rgba(255,255,255,.12);
  --cream:#f4f1ea;
  --white:#fff;
  --muted:#a9b3c7;
  --red:#e10600;
  --blue:#0057ff;
  --electric:#00e5a8;
  --gold:#ffd200;
  --orange:#ff5a1f;
  --beta:#ffb400;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:16px;
  --max:1180px;
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --display:"Bebas Neue",Oswald,Impact,"Arial Narrow",sans-serif;
  --condensed:Oswald,Impact,"Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--cream);background:var(--navy);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--electric);text-decoration:none}
a:hover{color:#fff}
.container{width:min(100% - 2rem,var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;z-index:99}

/* Beta banner */
.beta-banner{background:linear-gradient(90deg,#2a1600,#5a3400);color:#ffd89a;border-bottom:1px solid rgba(255,180,0,.35);font-size:.88rem}
.beta-banner .container{padding:.55rem 0;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.beta-banner strong{color:var(--beta)}
.beta-banner a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}
.beta-badge{display:inline-flex;align-items:center;margin-left:.45rem;padding:.18rem .55rem;border-radius:999px;background:var(--beta);color:#1a1000;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(7,11,26,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem 0;flex-wrap:nowrap}
.logo{display:inline-flex;align-items:center;gap:.2rem}
.logo img{height:34px;width:auto;filter:brightness(0) invert(1)}
.nav{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.nav a{font-family:var(--condensed);font-weight:600;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active{color:var(--electric)}
.menu-toggle{display:none;background:none;border:0;font-size:1.6rem;color:#fff;cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem 1.4rem;border-radius:999px;border:0;font-weight:800;cursor:pointer;font-size:.95rem;line-height:1;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;font-family:var(--condensed);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(225,6,0,.35)}
.btn-primary:hover{background:#ff1d14;color:#fff}
.btn-navy{background:var(--blue);color:#fff;box-shadow:0 10px 30px rgba(0,87,255,.35)}
.btn-navy:hover{background:#2f78ff;color:#fff}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff}
.btn-outline:hover{background:#fff;color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--gold);color:var(--ink)}

/* Hero video */
.hero-video{position:relative;min-height:min(84vh,760px);display:grid;align-items:end;overflow:hidden;background:#000}
.hero-video video,.hero-video .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,7,13,.35) 0%,rgba(5,7,13,.25) 35%,rgba(5,7,13,.78) 72%,rgba(5,7,13,.96) 100%),
  linear-gradient(90deg,rgba(5,7,13,.75) 0%,rgba(5,7,13,.2) 55%,rgba(225,6,0,.18) 100%)}
.hero-content{position:relative;z-index:2;padding:4.2rem 0 2.6rem}
.hero-content .eyebrow{color:var(--electric);font-family:var(--condensed);letter-spacing:.18em;font-weight:700;text-transform:uppercase;font-size:.85rem;margin:0 0 .85rem}
.hero-content h1{font-family:var(--display);font-size:clamp(3.1rem,8.5vw,6.2rem);line-height:.9;margin:0 0 1rem;letter-spacing:.02em;text-transform:uppercase;max-width:11ch;text-shadow:0 8px 40px rgba(0,0,0,.45)}
.hero-content .lead{font-size:clamp(1.05rem,2vw,1.25rem);max-width:34rem;color:rgba(255,255,255,.9);margin:0 0 1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.1rem}
.hero-note{font-size:.92rem;color:rgba(255,255,255,.72);max-width:36rem}
.badge-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.4rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--condensed);color:#fff}

/* Marquee */
.marquee{background:var(--red);color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);transform:skewY(-1.2deg);transform-origin:left center;margin: -.4rem 0 0;position:relative;z-index:3}
.marquee-track{display:flex;gap:2.5rem;width:max-content;padding:.85rem 0;animation:marquee 28s linear infinite;font-family:var(--display);font-size:clamp(1.2rem,2.5vw,1.7rem);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:2.5rem}
.marquee-track span::after{content:"•";opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
section{padding:4.2rem 0;position:relative}
.section-dark{background:var(--navy)}
.section-panel{background:linear-gradient(180deg,#0b1228,#101a36)}
.section-cream{background:var(--cream);color:var(--ink)}
.section-cream .lead,.section-cream .meta,.section-cream p{color:#405066}
.section-cream h2,.section-cream h3,.section-cream a{color:var(--ink)}
.section-cream .btn-outline{border-color:var(--ink);color:var(--ink)}
.section-cream .btn-outline:hover{background:var(--ink);color:#fff}
.section-red{background:linear-gradient(135deg,#b00000,#e10600 45%,#ff4d2e);color:#fff}
.section-blue{background:linear-gradient(135deg,#0033aa,#0057ff 50%,#2f78ff);color:#fff}
.angled{clip-path:polygon(0 2.5rem,100% 0,100% calc(100% - 2.5rem),0 100%);padding-top:5.5rem;padding-bottom:5.5rem;margin-top:-1.5rem}
.angled-top{clip-path:polygon(0 0,100% 2.2rem,100% 100%,0 100%);padding-top:5rem}
.eyebrow{display:inline-block;font-family:var(--condensed);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--electric);margin-bottom:.55rem}
.section-cream .eyebrow{color:var(--red)}
.section-red .eyebrow,.section-blue .eyebrow{color:rgba(255,255,255,.85)}
h1,h2,h3{font-family:var(--display);letter-spacing:.03em;text-transform:uppercase;line-height:.95}
h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 .85rem}
h3{font-size:1.35rem;margin:0 0 .45rem}
.lead{font-size:1.08rem;color:var(--muted);max-width:40rem}
.section-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:end;margin-bottom:1.5rem}

/* Range tiles */
.range-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1.5rem}
.range-tile{position:relative;min-height:280px;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--shadow);transform:translateZ(0);transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.1);color:#fff}
.range-tile:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 24px 60px rgba(0,0,0,.45);color:#fff}
.range-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.range-tile .rt-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.88) 100%),linear-gradient(90deg,rgba(225,6,0,.25),transparent 55%)}
.range-tile.ncaa .rt-shade{background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.9) 100%),linear-gradient(135deg,rgba(0,87,255,.45),rgba(225,6,0,.25))}
.range-tile .rt-body{position:relative;z-index:2;padding:1.2rem}
.range-tile .rt-body h3{margin:0 0 .35rem;font-size:1.55rem}
.range-tile .rt-body p{margin:0 0 .7rem;font-size:.9rem;color:rgba(255,255,255,.82)}
.range-tile .rt-cta{font-family:var(--condensed);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--electric);font-size:.85rem}

/* Features / steps */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.6rem}
.feature{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;text-align:left;position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--red),var(--blue))}
.feature img{height:36px;width:auto;margin:0 0 .85rem;filter:brightness(0) invert(1)}
.feature h3{font-size:1.25rem}
.feature p{margin:0;font-size:.92rem;color:var(--muted)}
.steps{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center}
.step-list{display:grid;gap:1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.step .num{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-size:1.6rem;background:linear-gradient(135deg,var(--red),#ff5a1f);color:#fff}
.step h3{margin:0 0 .25rem;font-size:1.35rem}
.step p{margin:0;color:var(--muted)}
.steps-visual{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/10;background:#000}
.steps-visual img{width:100%;height:100%;object-fit:cover}
.steps-visual .tag{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);padding:.45rem .7rem;border-radius:999px;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.2rem}
.product-card{background:linear-gradient(180deg,#151f3d,#0d1430);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;position:relative}
.product-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--red),#fff,var(--blue))}
.product-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.product-card .thumb{aspect-ratio:1;background:radial-gradient(circle at 50% 40%,#243056,#0b1022 70%);display:grid;place-items:center;padding:1rem}
.product-card .thumb img{max-height:200px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.product-card .body{padding:1rem 1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.product-card h3{font-family:var(--condensed);font-size:1.05rem;letter-spacing:.03em;margin:0}
.product-card h3 a{color:#fff}
.product-card .meta{font-size:.84rem;color:var(--muted)}
.product-card .price{font-family:var(--display);font-size:1.7rem;color:var(--gold);letter-spacing:.03em}
.product-card .body .btn{margin-top:auto}
.section-cream .product-card{background:#fff;border-color:#e5e8ef;color:var(--ink)}
.section-cream .product-card h3 a,.section-cream .product-card .price{color:var(--ink)}
.section-cream .product-card .meta{color:#66748a}
.section-cream .product-card .thumb{background:radial-gradient(circle at 50% 40%,#f3f6fb,#e7ebf5 75%)}

/* Host / retailer / coming */
.host-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.coming{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1.4rem;background:rgba(255,255,255,.04)}
.section-cream .coming{background:#fff;border-color:#d9deea}
.retailer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
.retailer{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;text-align:left}
.retailer strong{display:block;margin-bottom:.35rem;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:#fff}
.section-cream .retailer{background:#fff;border-color:#d9deea}
.section-cream .retailer strong{color:var(--ink)}
.retailer span{font-size:.9rem;color:var(--muted)}

/* NCAA band base moved to homepage panel rules below */

/* Page hero */
.page-hero{background:
  radial-gradient(circle at 15% 20%,rgba(225,6,0,.25),transparent 35%),
  radial-gradient(circle at 85% 10%,rgba(0,87,255,.28),transparent 30%),
  linear-gradient(180deg,#101936,#070b1a);padding:3rem 0 2.2rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-4rem;top:-3rem;width:18rem;height:18rem;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);transform:rotate(25deg)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 .55rem}
.breadcrumb{font-size:.88rem;color:var(--muted);margin-bottom:.75rem;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.06em}
.breadcrumb a{color:var(--muted)}

/* PDP */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.pdp-media{background:radial-gradient(circle at 50% 40%,#243056,#0b1022 70%);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:grid;place-items:center;min-height:420px}
.pdp-media img{max-height:420px}
.price-lg{font-family:var(--display);font-size:3rem;color:var(--gold);margin:.35rem 0 1rem}
.list-check{padding-left:1.1rem;margin:1rem 0}
.list-check li{margin:.45rem 0}
.form-note{font-size:.88rem;color:var(--muted);margin-top:.75rem}
.tbc{background:rgba(255,180,0,.18);color:var(--beta);padding:.1rem .35rem;border-radius:4px;font-weight:800;font-size:.8rem}

/* Forms */
form.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.section-cream form.card{background:#fff;border-color:#d9deea}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.35rem;font-family:var(--condensed);text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;padding:.8rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:12px;font:inherit;background:rgba(0,0,0,.25);color:#fff}
.section-cream input,.section-cream select,.section-cream textarea{background:#fff;border-color:#cfd5e0;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(0,229,168,.45);border-color:var(--electric)}
textarea{min-height:130px;resize:vertical}

/* Swatches */
.swatch-art{width:100%;height:180px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12)}
.swatch-art span{flex:1;display:block;width:100%}
.swatches{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0}
.swatch{width:42px;height:42px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d0d5dd;position:relative}
.swatch span{position:absolute;left:50%;bottom:-1.4rem;transform:translateX(-50%);font-size:.65rem;white-space:nowrap;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:14px;filter:saturate(1.05)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.split img{border-radius:var(--radius);width:100%;object-fit:cover;max-height:440px;box-shadow:var(--shadow)}
.section-label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1.5rem 0 .75rem;font-family:var(--condensed)}

/* Footer */
.site-footer{background:#03050c;color:#b7c0d3;padding:3.4rem 0 1.5rem;margin-top:0;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.site-footer a{color:#d7deea}
.site-footer a:hover{color:#fff}
.site-footer h4{color:#fff;margin:0 0 .8rem;font-family:var(--condensed);font-size:1rem;text-transform:uppercase;letter-spacing:.06em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.4rem 0}
.footer-brand img{height:32px;filter:brightness(0) invert(1);margin-bottom:.8rem}
.footer-meta{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#8791a8;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

@media (max-width:1100px){
  .range-grid{grid-template-columns:repeat(3,1fr)}
  .product-grid,.features,.retailer-grid,.gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .steps,.split,.pdp,.footer-grid{grid-template-columns:1fr}
  .hero-content{padding:4.2rem 0 2.8rem}
}
@media (max-width:720px){
  .menu-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:.5rem 0 0}
  .nav.open{display:flex}
  .range-grid,.product-grid,.features,.retailer-grid,.gallery,.form-grid{grid-template-columns:1fr}
  .hero-video{min-height:78vh}
  .hero-content h1{max-width:100%}
  .marquee{transform:none}
  .angled,.angled-top{clip-path:none;padding-top:3.5rem;padding-bottom:3.5rem;margin-top:0}
}

@media (max-width:720px){.header-inner .menu-toggle{margin-left:auto;order:2}.logo{order:1}.nav{order:3}}

.hero-image .hero-poster{display:block!important;object-position:center top}
.hero-image .hero-overlay{background:linear-gradient(to top,rgba(5,15,40,.92) 0%,rgba(5,15,40,.35) 32%,transparent 55%)}
.hero-image .hero-content h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-image .hero-content .eyebrow,.hero-image .hero-content .lead{display:none}
.hero-image .hero-content{padding-bottom:2rem}

.hero-image{min-height:0!important;display:block;background:#0a1430}
.hero-image .hero-poster{position:relative!important;inset:auto;height:auto!important;width:100%;aspect-ratio:2073/758;object-fit:cover;object-position:center}
.hero-image .hero-overlay{display:none}
.hero-image .hero-content{padding:1.4rem 0 1.6rem}


/* Compact nav CTA — keep red, match link scale */
.nav a.btn.btn-primary{
  padding:.28rem .7rem !important;
  font-size:.88rem !important;
  font-weight:700;
  letter-spacing:.03em;
  box-shadow:none !important;
  border-radius:6px;
  line-height:1.15;
  min-height:0;
}
.nav a.btn.btn-primary:hover{transform:none;box-shadow:0 3px 10px rgba(225,6,0,.35) !important}


/* Full-bleed homepage banners */
.band-image{padding:0;background:#05070d}
.band-image .band-photo{
  display:block;width:100%;height:auto;
}
.band-image img{width:100%;height:auto;display:block}
.band-caption{
  padding:1.1rem 0 1.6rem;
  display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;justify-content:space-between;
}
.band-caption p{margin:0;color:var(--muted);max-width:40rem}
.band-caption .btn{flex-shrink:0}

/* Shared content panel chrome (non-hero, non-ticker) */
.panel-frame{
  margin:0;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  background:#0a1020;
}
main > section{
  padding:3.4rem 0;
}
main > section.hero-video,
main > section.hero-image{
  padding:0;
}

/* Story: AU Our Story layout — full-width collage, centered copy below */
.story-collage{
  padding:3.4rem 0 1.4rem;
  background:var(--navy);
}
.story-collage + .section-dark{
  padding-top:1.4rem;
}
.story-collage-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.75rem;
}
.story-collage .collage-frame{
  margin:0;
  width:100%;
  max-width:none;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  background:#0a1020;
}
.story-collage .collage-frame img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:2222/756;
  object-fit:cover;
}
.story-collage-copy{
  text-align:center;
  max-width:40rem;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.story-collage-copy .eyebrow{
  color:var(--electric);
  margin-bottom:.55rem;
}
.story-collage-copy h2{
  margin:0 0 .85rem;
  max-width:none;
  white-space:normal;
}
.story-collage-copy p{
  color:var(--muted);
  max-width:36rem;
  margin:0 auto .35rem;
}
.story-collage-cta{
  margin:.85rem 0 0 !important;
}
.story-collage-copy .btn{margin-top:0}


/* Spain congrats — full 16:9 image at content width; text is in the artwork (no HTML overlay) */
main > section.spain-band,
.spain-band{
  padding:0 !important;
  background:var(--navy);
}
.spain-band .spain-panel{
  position:relative;
  display:block;
  margin:0;
  width:100%;
  background:#0a1020;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.spain-band .spain-panel picture,
.spain-band .spain-panel img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center center;
}
.spain-band .band-caption{display:none !important}

/* College colors — contained rounded tinted panel, LEFT-aligned copy */
.ncaa-band{
  position:relative;
  overflow:visible;
  padding:3.4rem 0 !important;
  background:var(--navy);
}
.ncaa-band--overlay{background:var(--navy) !important}
.ncaa-panel{
  position:relative;
  overflow:hidden;
  min-height:320px;
  display:flex;
  align-items:center;
  border-radius:var(--radius);
}
.ncaa-band-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.ncaa-band-bg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
  filter:saturate(1.05);
  transform:scale(1.02);
  transform-origin:center center;
}
.ncaa-band-bg::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,
    rgba(8,14,48,.94) 0%,
    rgba(12,24,110,.90) 26%,
    rgba(70,16,50,.62) 48%,
    rgba(120,10,30,.28) 68%,
    rgba(0,0,0,.06) 100%);
  pointer-events:none;
}
.ncaa-band--overlay .ncaa-copy{
  position:relative;z-index:2;
  width:100%;
  max-width:520px;
  margin:0;
  padding:3rem 1.25rem 3rem 1.25rem;
  text-align:left;
  align-self:stretch;
}
.ncaa-band--overlay .ncaa-copy h2{
  font-size:clamp(2.4rem,6vw,4.4rem);
  max-width:11ch;
  margin:0 0 1rem;
  color:#fff;
  text-align:left;
}
.ncaa-band--overlay .ncaa-copy .lead{
  color:rgba(255,255,255,.92);
  max-width:34rem;
  text-align:left;
}
.ncaa-band--overlay .ncaa-copy .eyebrow{text-align:left}
.ncaa-band--overlay .hero-actions{
  margin-top:1.25rem;
  justify-content:flex-start;
}
.ncaa-band .ncaa-banner{display:none}

/* Partners logo strip — same container width */
.partners-band{
  background:#F3F0E5;
  color:#111;
  padding:3.4rem 0;
}
.partners-heading{
  text-align:center;
  color:#111 !important;
  font-family:var(--font) !important;
  font-weight:600 !important;
  font-size:clamp(1.25rem,2.4vw,1.75rem) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.25 !important;
  margin:0 0 1.6rem !important;
}
.partners-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:1.4rem 1.1rem;
  align-items:center;
  justify-items:center;
}
.partners-grid li{
  margin:0;padding:0;
  width:100%;
  height:72px;
  display:flex;align-items:center;justify-content:center;
}
.partners-grid img{
  display:block;
  width:auto;height:auto;
  max-width:min(100%,122px);
  max-height:64px;
  object-fit:contain;
  filter:none;
}

/* Hide unused beta banner if leftover markup appears */
.beta-banner{display:none !important}

/* Keep cream "Get it near the stadium" aligned; soften extreme angle so edges match */
.section-cream.angled{
  clip-path:none;
  margin-top:0;
  padding:3.4rem 0;
}

@media (max-width:1100px){
  .partners-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem}
}
@media (max-width:900px){
  .story-collage-copy h2{font-size:clamp(2rem,8vw,3.2rem)}
  .ncaa-band--overlay .ncaa-copy{
    max-width:100%;
    padding:2.4rem 1.25rem;
  }
  .spain-band .spain-panel img{width:100%}
}
@media (max-width:720px){
  main > section{padding:2.6rem 0}
  .partners-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .75rem}
  .partners-grid li{height:58px}
  .partners-grid img{max-width:min(100%,96px);max-height:48px}
  .story-collage{padding:2.6rem 0 1rem}
  .story-collage + .section-dark{padding-top:1rem}
  .story-collage-inner{gap:1.25rem}
  .ncaa-band{padding:2.6rem 0 !important}
  .ncaa-band--overlay .ncaa-copy{padding:2rem 1rem}
  .spain-band{padding:0}
  .section-cream.angled{padding:2.6rem 0}
}


/* ============================================================
   PHONE / MOBILE polish (max-width 768px)
   Desktop rules above are unchanged. Keep thin ticker + small
   Shop World Cup Nations button from prior phone tweaks.
   ============================================================ */
@media (max-width:768px){
  :root{
    --m-gutter:16px;
    --m-section:2.25rem; /* ~36px between sections */
  }

  .container{
    width:min(100% - 2rem, var(--max));
    margin-inline:auto;
  }

  /* Header */
  .site-header{position:sticky;top:0;z-index:40}
  .header-inner{
    padding:.7rem 0;
    gap:.5rem;
    flex-wrap:nowrap;
  }
  .logo{
    display:inline-flex;align-items:center;gap:.35rem;
    max-width:calc(100% - 52px); /* leave room for menu */
    min-width:0;
  }
  .logo img{
    height:auto !important;
    width:140px !important;
    max-width:140px !important;
    flex-shrink:0;
  }
  .beta-badge{
    font-size:.55rem;padding:.12rem .4rem;
    flex-shrink:0;
  }
  .menu-toggle{
    width:40px;height:40px;
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.35rem;
  }
  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:.55rem 0 .35rem;
  }
  .nav.open{display:flex}
  .nav a{
    padding:.7rem .35rem;
    font-size:.92rem;
  }
  .nav a.btn.btn-primary{
    margin-top:.35rem;
    width:100%;
    justify-content:center;
    padding:.7rem 1rem !important;
    font-size:.85rem !important;
    min-height:44px;
  }

  /* Type scale */
  body{font-size:15.5px;line-height:1.55}
  h1, .page-hero h1{
    font-size:clamp(1.8rem, 7.4vw, 2.15rem) !important; /* ~29-34px */
    line-height:1.05 !important;
    margin:0 0 .65rem !important;
    max-width:100% !important;
  }
  h2{
    font-size:clamp(1.7rem, 6.8vw, 2.05rem) !important; /* ~27-33px */
    line-height:1.12 !important;
    margin:0 0 .7rem !important;
  }
  h3{font-size:1.1rem !important;margin:0 0 .35rem}
  .lead{font-size:.98rem !important;line-height:1.5;margin:0 0 1rem}
  .eyebrow, .section-label, .breadcrumb{
    font-size:.72rem !important;
    letter-spacing:.1em;
    margin-bottom:.45rem !important;
  }
  p{font-size:.97rem}

  /* Buttons — compact sitewide on phone (~34px) */
  .btn{
    padding:8px 16px !important;
    font-size:12px !important;
    min-height:34px !important;
    height:auto !important;
    line-height:1.2 !important;
    letter-spacing:.03em;
    box-shadow:none !important;
  }
  .btn:hover{box-shadow:none !important}
  .btn-primary{
    box-shadow:0 2px 8px rgba(225,6,0,.18) !important; /* soft, not the big glow */
  }
  .btn-primary:hover{
    box-shadow:0 3px 10px rgba(225,6,0,.22) !important;
  }
  .btn-navy{box-shadow:0 2px 8px rgba(0,87,255,.18) !important}
  .btn-navy:hover{box-shadow:0 3px 10px rgba(0,87,255,.22) !important}
  .spain-band .band-caption .btn{
    padding:6px 12px !important;
    font-size:11px !important;
    min-height:32px !important;
    letter-spacing:.03em;
  }
  /* Product card CTAs stay compact */
  .product-card .body .btn{
    min-height:34px !important;
    padding:8px 12px !important;
    font-size:11px !important;
  }
  /* Nav mobile Retail button */
  .nav a.btn.btn-primary{
    min-height:34px !important;
    padding:8px 16px !important;
    font-size:12px !important;
  }

  /* Thin ticker (keep prior phone tweak) */
  .marquee{transform:none;margin:0}
  .marquee-track{
    padding:.38rem 0 !important;
    font-size:clamp(.82rem,3.1vw,1rem) !important;
    gap:1.35rem !important;
  }
  .marquee-track span{gap:1.35rem}

  /* Section rhythm */
  main > section,
  .story-collage,
  .ncaa-band,
  .partners-band,
  .section-cream.angled,
  .section-cream,
  .section-dark{
    padding-top:var(--m-section) !important;
    padding-bottom:var(--m-section) !important;
  }
  main > section.hero-video,
  main > section.hero-image,
  main > section.spain-band,
  .spain-band,
  .hero-image,
  .hero-video{
    padding:0 !important;
  }
  .story-collage{padding-bottom:1.1rem !important}
  .story-collage + .section-dark{padding-top:1.1rem !important}
  .angled, .angled-top{
    clip-path:none !important;
    margin-top:0 !important;
    padding-top:var(--m-section) !important;
    padding-bottom:var(--m-section) !important;
  }

  /* Hero */
  .hero-image .hero-content{padding:.85rem 0 1rem !important}
  .hero-poster, .hero-image img.hero-poster{
    max-height:none;
    width:100%;
    height:auto;
    object-fit:cover;
  }

  /* Story */
  .story-collage-inner{gap:1.05rem}
  .story-collage-copy{max-width:100%;padding:0 .1rem}
  .story-collage-copy h2{font-size:clamp(1.7rem,6.8vw,2.05rem) !important}
  .story-collage-copy p{font-size:.95rem;margin:0 auto .4rem}
  .story-collage-cta{margin:.75rem 0 0 !important}

  /* Features / why — compact 2-up, icon only (hide baked-in label) */
  .features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.65rem !important;
    margin-top:.9rem;
  }
  .feature{
    padding:.875rem !important; /* ~14px */
    border-radius:12px;
  }
  .feature img{
    height:36px !important;
    width:36px !important;
    max-width:36px !important;
    object-fit:cover !important;
    object-position:left center !important;
    margin:0 0 .35rem !important;
  }
  .feature h3{font-size:.94rem !important; /* ~15px */ margin:0 0 .25rem !important; line-height:1.15}
  .feature p{font-size:.81rem !important; /* ~13px */ line-height:1.35; margin:0}

  /* NCAA / College Colors — compact card, side-by-side CTAs */
  .ncaa-band--overlay .ncaa-copy{
    max-width:100% !important;
    padding:1rem .9rem !important;
  }
  .ncaa-band--overlay .ncaa-copy .eyebrow{
    font-size:.65rem !important;
    margin-bottom:.3rem !important;
  }
  .ncaa-band--overlay .ncaa-copy h2{
    font-size:1.25rem !important; /* ~20px */
    max-width:100% !important;
    margin:0 0 .4rem !important;
    line-height:1.15 !important;
  }
  .ncaa-band--overlay .ncaa-copy .lead{
    font-size:.81rem !important; /* ~13px */
    line-height:1.35 !important;
    max-width:100%;
    margin:0 0 .55rem !important;
    /* trim long paragraph visually on phone */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .ncaa-panel{min-height:0 !important}
  .ncaa-band--overlay .hero-actions{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:flex-start;
    gap:.45rem;
    margin-top:.55rem;
  }
  .ncaa-band--overlay .hero-actions .btn{
    width:auto !important;
    flex:1 1 0;
    min-height:34px !important;
    height:34px !important;
    padding:.35rem .55rem !important;
    font-size:.75rem !important; /* 12px */
    line-height:1 !important;
  }

  /* Spain */
  .spain-band .band-caption{
    flex-direction:column;
    align-items:flex-start;
    gap:.7rem;
    padding:.9rem 0 0;
  }


  /* Retailers / cream */
  /* Where to buy — compact 2-up retailers */
  .section-cream.angled h2,
  .section-cream h2{
    font-size:1.25rem !important; /* ~20px */
  }
  .section-cream.angled .lead,
  .section-cream .lead{
    font-size:.81rem !important; /* ~13px */
    margin:0 0 .75rem !important;
  }
  .section-cream.angled .eyebrow,
  .section-cream .eyebrow{
    font-size:.65rem !important;
    margin-bottom:.3rem !important;
  }
  .retailer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:.55rem !important;
    margin-top:.85rem !important;
  }
  .retailer{
    padding:.75rem !important; /* 12px */
  }
  .retailer strong{font-size:.875rem !important; /* 14px */ margin-bottom:.2rem !important}
  .retailer span{font-size:.75rem !important; /* 12px */ line-height:1.3}
  .section-cream.angled > .container > p:last-child,
  .section-cream > .container > p:last-child{
    margin-top:.85rem !important;
  }

  /* Partners — 4-col, smaller logos */
  .partners-band{
    padding-top:1.5rem !important;
    padding-bottom:1.5rem !important;
  }
  .partners-heading{
    font-size:1.0625rem !important; /* ~17px */
    margin:0 0 .85rem !important;
    line-height:1.25 !important;
  }
  .partners-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:.65rem .4rem !important;
  }
  .partners-grid li{height:40px}
  .partners-grid img{
    max-width:min(100%,72px) !important;
    max-height:32px !important;
  }

  /* Product grids: 2 columns on phone */
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.75rem !important;
  }
  .product-card .thumb{padding:0 !important}
  .product-card .body{padding:.75rem .7rem .9rem;gap:.25rem}
  .product-card h3{font-size:.88rem !important;line-height:1.2}
  .product-card .meta{font-size:.72rem}
  .product-card .price{font-size:1.25rem !important}
  .product-card .body .btn{
    width:100%;
    min-height:34px !important;
    padding:8px 12px !important;
    font-size:11px !important;
  }

  /* Page hero (inner pages) */
  .page-hero{padding:2.1rem 0 1.5rem !important}
  .page-hero .lead{font-size:.95rem !important}
  .host-pills{gap:.4rem;margin:.75rem 0 0}
  .host-pills .btn, .host-pills a{
    padding:.45rem .7rem !important;
    font-size:.7rem !important;
    min-height:36px;
  }

  /* Range tiles / other grids */
  .range-grid,
  .gallery,
  .form-grid{
    grid-template-columns:1fr !important;
    gap:.75rem !important;
  }

  /* PDP */
  .pdp-grid{grid-template-columns:1fr !important;gap:1.25rem}
  .pdp-media{
    min-height:0 !important;
    padding:1rem !important;
  }
  .pdp-media img{max-height:320px;width:auto;margin:0 auto}
  .price-lg{font-size:2.1rem !important;margin:.25rem 0 .85rem}

  /* Footer */
  .site-footer{padding:2.4rem 0 1.25rem !important}
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:1.35rem 1rem !important;
  }
  .footer-brand{grid-column:1 / -1}
  .footer-brand p{font-size:.9rem}
  .site-footer h4{font-size:.88rem;margin:0 0 .55rem}
  .site-footer li{margin:.3rem 0;font-size:.9rem}
  .footer-meta{
    flex-direction:column;
    gap:.55rem;
    margin-top:1.4rem;
    padding-top:.85rem;
    font-size:.78rem;
  }

  /* Forms */
  form.card{padding:1.15rem}
  input,select,textarea{padding:.7rem .8rem;font-size:16px} /* avoid iOS zoom */


  /* Story collage: keep fan photos dominant; lighten the copy under them */
  .story-collage .story-copy,
  .story-collage .story-text,
  .story-collage .story-collage-inner > :not(.story-photos):not(.story-grid):not(.collage){
    /* fallbacks below */
  }
  .story-collage .eyebrow{font-size:.62rem !important}
  .story-collage h2{
    font-size:clamp(1.35rem, 5.6vw, 1.55rem) !important; /* ~22-25px, still present but not competing with photos */
    margin:.35rem 0 .5rem !important;
  }
  .story-collage p,
  .story-collage .lead{
    font-size:.84rem !important;
    line-height:1.4 !important;
  }
  .story-collage .btn{
    min-height:34px !important;
    height:34px !important;
    padding:8px 16px !important;
    font-size:12px !important;
  }
  .story-collage-inner{gap:.75rem !important; padding-bottom:1rem !important}

  /* ============================================================
     Secondary scale: everything AFTER hero + story collage
     should feel light next to those two large images.
     ============================================================ */
  /* Why FANBRUSH section heading */
  .story-collage + .section-dark .eyebrow,
  .section-dark .eyebrow{font-size:.62rem !important}
  .story-collage + .section-dark h2,
  main > .section-dark > .container > h2{
    font-size:1.15rem !important; /* ~18px */
    margin:0 0 .55rem !important;
  }

  /* Feature cards already compact; tighten further */
  .features{gap:.55rem !important; margin-top:.7rem !important}
  .feature{padding:.7rem !important}
  .feature img{height:28px !important;width:28px !important;max-width:28px !important;margin:0 0 .25rem !important}
  .feature h3{font-size:.84rem !important}
  .feature p{font-size:.72rem !important;line-height:1.3}

  /* NCAA already compact; keep photo visible, lighter type */
  .ncaa-band{padding-top:1.35rem !important;padding-bottom:1.35rem !important}
  .ncaa-band--overlay .ncaa-copy{padding:.85rem .8rem !important}
  .ncaa-band--overlay .ncaa-copy h2{font-size:1.1rem !important}
  .ncaa-band--overlay .ncaa-copy .lead{font-size:.75rem !important; -webkit-line-clamp:2}

  /* Spain band */

  /* Spain phone: full 16:9 image, no overlay writing */
  main > section.spain-band,
  .spain-band{
    padding:0 !important;
  }
  .spain-band .spain-panel{
    border-radius:var(--radius);
    overflow:hidden;
  }
  .spain-band .spain-panel picture,
  .spain-band .spain-panel img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
  }
  .spain-band .band-caption,
  .spain-band .band-caption p,
  .spain-band .band-caption .btn{
    display:none !important;
  }


  /* Where to buy already compact; tighten section */
  .section-cream.angled,
  .section-cream{
    padding-top:1.35rem !important;
    padding-bottom:1.35rem !important;
  }
  .section-cream h2{font-size:1.1rem !important}
  .section-cream .lead{font-size:.75rem !important}
  .retailer{padding:.65rem !important}
  .retailer strong{font-size:.8rem !important}
  .retailer span{font-size:.7rem !important}


  /* Partners: keep 4 tidy columns on phone after logo removals */
  .partners-band{padding-top:1.25rem !important;padding-bottom:1.25rem !important}
  .partners-heading{font-size:1rem !important; margin:0 0 .7rem !important}
  .partners-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0.65rem 0.4rem !important;
  }
  .partners-grid li{
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .partners-grid img{max-height:32px !important; width:auto !important; max-width:100% !important}

  /* Page heroes (inner pages) lighter than home collage */
  .page-hero{padding:1.5rem 0 1.15rem !important}
  .page-hero h1{font-size:1.45rem !important}
  .page-hero .lead{font-size:.85rem !important}

  /* Product cards lighter meta */
  .product-card h3{font-size:.8rem !important}
  .product-card .meta{font-size:.68rem !important}
  .product-card .price{font-size:1.1rem !important}
  .section-label{font-size:.65rem !important; margin:1rem 0 .55rem !important}

  /* Footer lighter */
  .site-footer{padding:1.75rem 0 1.1rem !important}
  .footer-brand img{height:24px !important; width:auto !important}
  .footer-brand p{font-size:.8rem !important}
  .site-footer h4{font-size:.78rem !important}
  .site-footer li{font-size:.8rem !important}
  .footer-meta{font-size:.7rem !important; margin-top:1rem !important}
}

/* Narrow phones */
@media (max-width:420px){
  h1, .page-hero h1{font-size:1.75rem !important}
  h2{font-size:1.6rem !important}
  .ncaa-band--overlay .ncaa-copy h2{font-size:1.2rem !important}
  .product-card h3{font-size:.82rem !important}
  .product-card .price{font-size:1.15rem !important}
  .product-card .body .btn{font-size:11px !important;padding:7px 10px !important}
  .partners-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .footer-grid{grid-template-columns:1fr !important}
  .footer-brand{grid-column:auto}
}

/* Very narrow */
@media (max-width:360px){
  .product-grid{gap:.55rem !important}
  .btn{padding:7px 14px !important;min-height:34px !important}
  .story-collage-copy h2{font-size:1.45rem !important}
  .feature{padding:.7rem !important}
  .ncaa-band--overlay .hero-actions .btn{font-size:.68rem !important;padding:.3rem .4rem !important}
}



/* FIFA shop product thumbs — consistent square cards */
.product-card .thumb{
  aspect-ratio:1/1;
  width:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:0 !important;
  background:#fff;
}
.product-card .thumb img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center;
  display:block;
  filter:none !important;
}
.product-card .thumb.swatch-thumb{display:none}

@media (max-width:768px){

  
}

@media (max-width:1100px) and (min-width:769px){
  
}

@media (max-width:768px){

  
}










/* Home Shop — logo-only range tiles */
.home-shop{
  padding:2.4rem 0 2.2rem;
  background:var(--navy);
}
.home-shop .eyebrow{margin-bottom:.4rem}
.home-shop h2{margin:0 0 .4rem}
.home-shop-lead{
  margin:0 0 1.1rem;
  max-width:34rem;
  color:var(--muted);
  font-size:.95rem;
}
.home-shop-grid--logos{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0.85rem;
}
.home-shop-tile--logo{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg,#151f3d,#0d1430);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s, box-shadow .18s;
  min-width:0;
}
.home-shop-tile--logo:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  color:#fff;
}
.home-shop-mark{
  aspect-ratio:1 / 1;
  background:#fbf8f4;
  display:grid;
  place-items:center;
  padding:1.1rem;
}
.home-shop-mark img{
  width:72%;
  height:72%;
  max-width:140px;
  max-height:140px;
  object-fit:contain;
  display:block;
}
.home-shop-tile--logo .home-shop-body{
  padding:0.7rem 0.75rem 0.85rem;
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.home-shop-tile--logo .home-shop-body h3{
  margin:0;
  font-family:var(--condensed);
  font-size:0.95rem;
  letter-spacing:.03em;
  line-height:1.15;
}
.home-shop-tile--logo .home-shop-label{
  margin:0;
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
}

@media (max-width:1100px) and (min-width:769px){
  .home-shop-grid--logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:768px){
  .home-shop{padding-top:1.35rem !important;padding-bottom:1.35rem !important}
  .home-shop h2{font-size:1.15rem !important; margin:0 0 .35rem !important}
  .home-shop-lead{font-size:.78rem !important; margin:0 0 .75rem !important}
  .home-shop .eyebrow{font-size:.62rem !important}
  .home-shop-grid--logos{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0.55rem !important;
  }
  .home-shop-mark{padding:0.85rem !important}
  .home-shop-mark img{width:70% !important; height:70% !important; max-width:96px !important; max-height:96px !important}
  .home-shop-tile--logo .home-shop-body{padding:0.55rem 0.55rem 0.65rem !important}
  .home-shop-tile--logo .home-shop-body h3{font-size:.84rem !important}
  .home-shop-tile--logo .home-shop-label{font-size:.62rem !important}
}



/* Smooth scroll to Shop */
html{scroll-behavior:smooth}
#shop{scroll-margin-top:5.5rem}

/* Header Shop button */
.btn-shop-mobile{display:none}
.nav a.btn.btn-shop{
  padding:.32rem .85rem !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
  min-height:34px !important;
  line-height:1.1 !important;
  border-radius:999px !important;
  box-shadow:0 2px 8px rgba(225,6,0,.22) !important;
}
.nav a.btn.btn-shop:hover{
  box-shadow:0 3px 10px rgba(225,6,0,.3) !important;
  transform:none;
}

@media (max-width:768px){
  /* Phone: Shop sits in header bar next to hamburger; hide duplicate in nav drawer */
  .nav a.btn.btn-shop{display:none !important}
  .btn-shop-mobile{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    order:2;
    margin-left:auto;
    margin-right:.2rem;
    padding:4px 9px !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.05em !important;
    text-transform:uppercase;
    min-height:26px !important;
    height:26px !important;
    line-height:1 !important;
    border-radius:999px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.12) !important;
    flex-shrink:0;
    white-space:nowrap;
  }
  .btn-shop-mobile:hover{
    box-shadow:0 1px 5px rgba(225,6,0,.18) !important;
  }
  .menu-toggle{
    order:3;
    margin-left:0 !important;
  }
  .logo{
    order:1;
    max-width:calc(100% - 132px) !important; /* shop + menu */
  }
  .logo img{
    width:min(128px, 34vw) !important;
    max-width:min(128px, 34vw) !important;
  }
}



/* v30 header: single clean desktop row */
@media (min-width:769px){
  .header-inner{
    flex-wrap:nowrap !important;
    align-items:center;
    gap:.65rem;
  }
  .logo{flex-shrink:0}
  .logo img{height:30px !important; width:auto !important}
  .beta-badge{font-size:.58rem; padding:.14rem .45rem; margin-left:.35rem}
  .nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:flex-end;
    gap:.15rem .45rem;
    margin-left:auto;
    min-width:0;
  }
  .nav a{
    white-space:nowrap;
    padding:.35rem .28rem;
    font-size:.78rem;
    letter-spacing:.02em;
  }
  .nav a.btn.btn-shop{
    margin-left:.35rem;
    padding:.28rem .75rem !important;
    font-size:.72rem !important;
    min-height:30px !important;
    height:30px !important;
    border-radius:999px !important;
    box-shadow:0 2px 7px rgba(225,6,0,.2) !important;
  }
  .btn-shop-mobile{display:none !important}
}



/* v31: shorter primary nav */
@media (min-width:769px){
  .nav a{font-size:.84rem; padding:.4rem .45rem}
  .nav a.btn.btn-shop{margin-left:.5rem}
}



/* ===== v32: taller header, spread nav ===== */
@media (min-width:769px){
  .header-inner{
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:1.25rem !important;
    padding:1.15rem 0 !important; /* taller bar ~76-84px with logo */
    min-height:76px;
  }
  .logo{flex-shrink:0}
  .logo img{
    height:42px !important;
    width:auto !important;
    max-width:none !important;
  }
  .logo .beta-badge{
    font-size:.62rem;
    padding:.16rem .5rem;
    margin-left:.4rem;
  }
  .nav{
    display:flex !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-evenly !important; /* spread across space right of logo */
    gap:0.5rem 1.25rem !important;
    margin-left:0.5rem !important;
    min-width:0;
  }
  .nav a{
    white-space:nowrap;
    padding:.45rem .35rem !important;
    font-size:15px !important;
    letter-spacing:.03em;
  }
  .nav a.btn.btn-shop{
    margin-left:0 !important;
    padding:.35rem .9rem !important;
    font-size:.78rem !important;
    min-height:34px !important;
    height:34px !important;
    border-radius:999px !important;
    box-shadow:0 2px 8px rgba(225,6,0,.2) !important;
    flex-shrink:0;
  }
  .btn-shop-mobile{display:none !important}
}

@media (max-width:768px){
  .header-inner{
    padding:.95rem 0 !important;
    min-height:62px;
    align-items:center;
  }
  .logo img{
    width:min(148px, 38vw) !important;
    max-width:min(148px, 38vw) !important;
    height:auto !important;
  }
  .menu-toggle{
    width:40px;height:40px;
  }
  /* keep Shop small on phone */
  .btn-shop-mobile{
    padding:4px 9px !important;
    font-size:11px !important;
    min-height:26px !important;
    height:26px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.12) !important;
  }
}



/* ===== v33: more nav items, still one row from 1024 up ===== */
@media (min-width:1025px){
  .header-inner{
    min-height:76px;
    padding:1.05rem 0 !important;
    gap:1rem !important;
  }
  .logo img{height:40px !important; width:auto !important}
  .nav{
    display:flex !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
    justify-content:space-evenly !important;
    align-items:center !important;
    gap:0.25rem 0.55rem !important;
    margin-left:0.35rem !important;
  }
  .nav a{
    white-space:nowrap !important;
    font-size:13.5px !important;
    padding:.4rem .2rem !important;
    letter-spacing:.02em;
  }
  .nav a.btn.btn-shop{
    padding:.32rem .8rem !important;
    font-size:.72rem !important;
    min-height:32px !important;
    height:32px !important;
    flex-shrink:0;
  }
}

/* Between 769 and 1024: denser so it never wraps */
@media (min-width:769px) and (max-width:1024px){
  .header-inner{
    min-height:72px;
    padding:.9rem 0 !important;
    gap:.55rem !important;
  }
  .logo img{height:34px !important; width:auto !important}
  .logo .beta-badge{font-size:.52rem; padding:.1rem .35rem}
  .nav{
    display:flex !important;
    flex:1 1 auto !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:0.15rem 0.25rem !important;
    margin-left:0.2rem !important;
  }
  .nav a{
    white-space:nowrap !important;
    font-size:11.5px !important;
    padding:.3rem .12rem !important;
    letter-spacing:.01em;
  }
  .nav a.btn.btn-shop{
    padding:.28rem .65rem !important;
    font-size:.68rem !important;
    min-height:28px !important;
    height:28px !important;
  }
}

@media (min-width:1280px){
  .nav a{font-size:14.5px !important; padding:.42rem .28rem !important}
  .nav{gap:0.35rem 0.7rem !important}
}



/* ===== v34: partners 2x8 desktop, 4x4 phone, normalized logo sizes ===== */
.partners-band{
  background:#F3F0E5;
  color:#111;
}
.partners-heading{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
  max-width:100% !important;
}
.partners-grid{
  list-style:none;
  margin:1.1rem auto 0 !important;
  padding:0;
  display:grid !important;
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  gap:1.35rem 1rem !important;
  align-items:center !important;
  justify-items:center !important;
  width:100% !important;
  max-width:100% !important;
}
.partners-grid li{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:56px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.partners-grid img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:88px !important;
  max-height:40px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:1100px) and (min-width:769px){
  .partners-grid{
    grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
    gap:1.1rem .7rem !important;
  }
  .partners-grid li{height:52px !important}
  .partners-grid img{max-width:78px !important; max-height:36px !important}
}

@media (max-width:768px){
  .partners-heading{
    text-align:center !important;
    font-size:1.05rem !important;
    margin:0 auto .85rem !important;
  }
  .partners-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:0.85rem 0.55rem !important;
    margin-top:.85rem !important;
  }
  .partners-grid li{
    height:44px !important;
  }
  .partners-grid img{
    max-width:68px !important;
    max-height:30px !important;
  }
}



/* ===== v35: header Shop=BETA size + even gaps; compact phone Why + Shop ===== */

/* Desktop Shop pill matches BETA height */
@media (min-width:769px){
  .logo .beta-badge{
    display:inline-flex;
    align-items:center;
    height:20px;
    padding:0 .55rem !important;
    font-size:.62rem !important;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1;
    border-radius:999px;
  }
  .nav a.btn.btn-shop{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.14) !important;
  }
  .nav a.btn.btn-shop:hover{
    box-shadow:0 1px 5px rgba(225,6,0,.2) !important;
  }
}

@media (max-width:768px){
  /* Evenly space: logo group | shop | menu across width */
  .header-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0.55rem !important;
    padding:.85rem 0 !important;
  }
  .logo{
    order:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:.35rem !important;
    margin:0 !important;
    max-width:none !important;
    flex:0 1 auto !important;
    min-width:0;
  }
  .logo img{
    width:auto !important;
    max-width:120px !important;
    height:22px !important;
  }
  .logo .beta-badge{
    margin-left:0 !important;
    height:18px !important;
    padding:0 .5rem !important;
    font-size:.55rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    flex-shrink:0;
  }
  .btn-shop-mobile{
    order:2 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    height:18px !important;
    min-height:18px !important;
    padding:0 .5rem !important;
    font-size:.55rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 3px rgba(225,6,0,.12) !important;
    flex:0 0 auto !important;
  }
  .btn-shop-mobile:hover{
    box-shadow:0 1px 4px rgba(225,6,0,.18) !important;
  }
  .menu-toggle{
    order:3 !important;
    margin:0 !important;
    width:32px !important;
    height:32px !important;
    flex:0 0 auto !important;
    font-size:1.2rem !important;
  }
  .nav a.btn.btn-shop{display:none !important}
}

/* Phone compact Why FANBRUSH + Shop tiles */
@media (max-width:480px){
  /* Why / features */
  .story-collage + .section-dark,
  main > .section-dark:has(.features){
    padding-top:1rem !important;
    padding-bottom:1rem !important;
  }
  .section-dark:has(.features) .eyebrow{font-size:.58rem !important; margin-bottom:.3rem !important}
  .section-dark:has(.features) h2{
    font-size:1.05rem !important;
    margin:0 0 .45rem !important;
    line-height:1.15 !important;
  }
  .features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.4rem !important;
    margin-top:.45rem !important;
  }
  .feature{
    padding:.55rem .5rem !important;
    border-radius:10px !important;
  }
  .feature img{
    height:24px !important;
    width:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 0 .2rem !important;
    display:block !important;
  }
  .feature h3{
    font-size:13px !important;
    margin:0 0 .15rem !important;
    line-height:1.15 !important;
  }
  .feature p{
    font-size:12px !important;
    line-height:1.25 !important;
    margin:0 !important;
  }

  /* Shop tiles: 3 per row, compact */
  .home-shop{
    padding-top:1rem !important;
    padding-bottom:1rem !important;
  }
  .home-shop h2{font-size:1.05rem !important; margin:0 0 .3rem !important}
  .home-shop-lead{font-size:.72rem !important; margin:0 0 .55rem !important}
  .home-shop .eyebrow{font-size:.58rem !important}
  .home-shop-grid--logos{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.4rem !important;
  }
  .home-shop-mark{
    aspect-ratio:auto !important;
    height:86px !important;
    padding:.45rem !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
  }
  .home-shop-mark img{
    width:55% !important;
    height:55% !important;
    max-width:52px !important;
    max-height:52px !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  /* FIFA logo is tall: ensure full mark visible */
  .home-shop-tile--logo[href="/fifa.html"] .home-shop-mark img,
  .home-shop-tile--logo[href="/fifa.html"] .home-shop-mark{
    overflow:visible !important;
  }
  .home-shop-tile--logo[href="/fifa.html"] .home-shop-mark img{
    width:48% !important;
    height:auto !important;
    max-height:70% !important;
  }
  .home-shop-tile--logo .home-shop-body{
    padding:.35rem .3rem .4rem !important;
    gap:0 !important;
  }
  .home-shop-tile--logo .home-shop-body h3{
    font-size:11px !important;
    line-height:1.15 !important;
  }
  .home-shop-tile--logo .home-shop-label{
    font-size:9px !important;
    line-height:1.2 !important;
  }
}



/* ===== v36: centered BETA; phone-tight Why / Where-to-Buy / global compact ===== */

/* Header: BETA absolutely centered (desktop + phone) */
.header-inner{
  position:relative !important;
}
.header-inner > .beta-badge{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  z-index:5;
  pointer-events:none;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:20px !important;
  padding:0 .55rem !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  border-radius:999px !important;
}

/* Desktop: logo left, nav right; SHOP = BETA size; avoid BETA/nav overlap */
@media (min-width:769px){
  .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.75rem !important;
  }
  .logo{flex:0 0 auto !important; z-index:2}
  .logo img{height:34px !important; width:auto !important}
  .nav{
    display:flex !important;
    flex:1 1 auto !important;
    justify-content:flex-end !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:0.2rem 0.55rem !important;
    margin-left:auto !important;
    z-index:2;
  }
  .nav a.btn.btn-shop{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.14) !important;
  }
  .btn-shop-mobile{display:none !important}
}

/* Mid desktop: tighten nav so centered BETA clears links */
@media (min-width:769px) and (max-width:1279px){
  .nav{gap:0.12rem 0.35rem !important}
  .nav a:not(.btn){
    font-size:12px !important;
    letter-spacing:.05em !important;
  }
  .logo img{height:30px !important}
  .header-inner > .beta-badge{
    height:18px !important;
    padding:0 .48rem !important;
    font-size:.55rem !important;
  }
  .nav a.btn.btn-shop{
    height:18px !important;
    min-height:18px !important;
    padding:0 .48rem !important;
    font-size:.55rem !important;
  }
}

@media (min-width:1024px) and (max-width:1180px){
  .nav{gap:0.08rem 0.22rem !important}
  .nav a:not(.btn){font-size:11px !important; letter-spacing:.04em !important}
}

/* Phone header: logo left | BETA center | SHOP + menu right */
@media (max-width:768px){
  .header-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:.4rem !important;
    padding:.7rem 0 !important;
    min-height:48px;
  }
  .logo{
    order:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    flex:0 1 auto !important;
    min-width:0;
    z-index:2;
    max-width:42%;
  }
  .logo img{
    width:auto !important;
    max-width:110px !important;
    height:20px !important;
  }
  .header-inner > .beta-badge{
    height:18px !important;
    padding:0 .5rem !important;
    font-size:.55rem !important;
  }
  .header-right-actions,
  .btn-shop-mobile{
    order:3 !important;
  }
  .btn-shop-mobile{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 0 0 auto !important;
    height:18px !important;
    min-height:18px !important;
    padding:0 .5rem !important;
    font-size:.55rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 3px rgba(225,6,0,.12) !important;
    flex:0 0 auto !important;
    z-index:2;
  }
  .menu-toggle{
    order:4 !important;
    margin:0 !important;
    width:30px !important;
    height:30px !important;
    flex:0 0 auto !important;
    font-size:1.1rem !important;
    z-index:2;
  }
  .nav a.btn.btn-shop{display:none !important}
}

/* Narrow phones: shrink logo so BETA never overlaps SHOP/menu */
@media (max-width:430px){
  .logo{max-width:38%}
  .logo img{max-width:96px !important; height:18px !important}
  .header-inner{gap:.3rem !important; padding:.65rem 0 !important}
  .btn-shop-mobile{padding:0 .42rem !important}
}

@media (max-width:360px){
  .logo img{max-width:84px !important; height:16px !important}
  .header-inner > .beta-badge{
    height:16px !important;
    padding:0 .4rem !important;
    font-size:.5rem !important;
  }
  .btn-shop-mobile{
    height:16px !important;
    min-height:16px !important;
    font-size:.5rem !important;
    padding:0 .38rem !important;
  }
  .menu-toggle{width:28px !important; height:28px !important}
}

/* ========== PHONE GLOBAL COMPACT (<=480px) ========== */
@media (max-width:480px){
  /* Why FANBRUSH — ~40% of v35 height; icons inline with title */
  .story-collage + .section-dark,
  main > .section-dark:has(.features),
  .section-dark:has(.features){
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .section-dark:has(.features) .eyebrow{
    font-size:9px !important;
    margin-bottom:.2rem !important;
  }
  .section-dark:has(.features) h2{
    font-size:16px !important;
    margin:0 0 .4rem !important;
    line-height:1.15 !important;
  }
  .features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:.35rem !important;
  }
  .feature{
    padding:10px !important;
    border-radius:8px !important;
  }
  .feature img{
    display:inline-block !important;
    vertical-align:middle !important;
    height:18px !important;
    width:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 6px 0 0 !important;
    float:left;
  }
  .feature h3{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    font-size:11px !important;
    margin:0 0 .2rem !important;
    line-height:1.2 !important;
  }
  /* icon as flex child via float clear fallback: put img before h3 text via grid on feature */
  .feature{
    display:grid !important;
    grid-template-columns:18px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:6px !important;
    row-gap:2px !important;
    align-items:start !important;
  }
  .feature img{
    grid-column:1 !important;
    grid-row:1 !important;
    float:none !important;
    margin:0 !important;
  }
  .feature h3{
    grid-column:2 !important;
    grid-row:1 !important;
    display:block !important;
    margin:0 !important;
  }
  .feature p{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    font-size:10px !important;
    line-height:1.3 !important;
    margin:0 !important;
  }

  /* Where to Buy */
  .section-cream.angled,
  .section-cream:has(.retailer-grid),
  .section-cream:has(.retailers),
  section.section-cream{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .section-cream .eyebrow{font-size:9px !important; margin-bottom:.2rem !important}
  .section-cream h2{font-size:16px !important; margin:0 0 .3rem !important; line-height:1.15 !important}
  .section-cream .lead,
  .section-cream > .container > p,
  .section-cream .container > p.lead{
    font-size:11px !important;
    line-height:1.35 !important;
    margin:0 0 .5rem !important;
  }
  .retailer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .retailer{
    padding:8px !important;
    border-radius:8px !important;
  }
  .retailer strong{font-size:11px !important; line-height:1.2 !important}
  .retailer span{font-size:9px !important; line-height:1.25 !important}
  .section-cream .btn,
  .section-cream a.btn{
    font-size:11px !important;
    padding:6px 12px !important;
    min-height:28px !important;
    height:auto !important;
    border-radius:999px !important;
  }

  /* Home shop already compact in v35; keep tight */
  .home-shop{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .home-shop .eyebrow{font-size:9px !important}
  .home-shop h2{font-size:16px !important; margin:0 0 .25rem !important}
  .home-shop-lead{font-size:11px !important; margin:0 0 .45rem !important}

  /* Partners */
  .partners-band{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
  .partners-heading{font-size:14px !important; margin:0 0 .5rem !important}
  .partners-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0.45rem 0.3rem !important;
  }
  .partners-grid li{height:32px !important}
  .partners-grid img{max-height:26px !important}

  /* NCAA / College band */
  .ncaa-band{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
  .ncaa-band--overlay .ncaa-copy{
    padding:.7rem .65rem !important;
  }
  .ncaa-band--overlay .ncaa-copy .eyebrow{font-size:9px !important}
  .ncaa-band--overlay .ncaa-copy h2{
    font-size:15px !important;
    margin:0 0 .3rem !important;
  }
  .ncaa-band--overlay .ncaa-copy .lead{
    font-size:11px !important;
    line-height:1.3 !important;
  }
  .ncaa-band .btn{
    font-size:11px !important;
    padding:6px 12px !important;
    min-height:28px !important;
  }

  /* Spain: keep image, tighten surrounding space */
  .spain-band{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  /* Story collage */
  .story-collage{
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  .story-collage-copy h2{font-size:1.35rem !important}
  .story-collage-copy p{font-size:12px !important; line-height:1.35 !important}
  .story-collage-cta .btn,
  .story-collage .btn{
    font-size:11px !important;
    padding:6px 12px !important;
    min-height:28px !important;
  }

  /* Hero */
  .hero-image .hero-content h1{font-size:1.55rem !important}
  .hero-image .hero-content p{font-size:12px !important}
  .hero-image .btn{
    font-size:11px !important;
    padding:6px 12px !important;
    min-height:28px !important;
  }

  /* Page heroes (inner pages) */
  .page-hero{
    padding:1.1rem 0 .85rem !important;
  }
  .page-hero h1{font-size:1.25rem !important}
  .page-hero .lead{font-size:12px !important; line-height:1.35 !important}
  .page-hero .eyebrow{font-size:9px !important}

  /* Generic sections */
  .section-dark,
  .section-cream,
  .angled{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .section-dark h2,
  .section-cream h2,
  .angled h2{
    font-size:16px !important;
  }
  .section-dark .eyebrow,
  .section-cream .eyebrow,
  .angled .eyebrow{
    font-size:9px !important;
  }
  .section-dark .lead,
  .section-cream .lead{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  /* Product / range grids */
  .product-grid,
  .range-grid{
    gap:8px !important;
  }
  .product-card,
  .range-card{
    padding:8px !important;
  }
  .product-card h3,
  .range-card h3{font-size:12px !important}
  .product-card p,
  .range-card p{font-size:10px !important; line-height:1.3 !important}

  /* Footer */
  footer,
  .site-footer,
  .footer{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
  footer h3,
  .footer h3,
  .site-footer h3{font-size:12px !important}
  footer p,
  footer a,
  .footer p,
  .footer a,
  .site-footer p,
  .site-footer a{font-size:11px !important}
  .footer-meta{font-size:10px !important; margin-top:1rem !important; padding-top:.75rem !important}

  /* Forms */
  .form-grid{gap:8px !important}
  input, textarea, select{
    font-size:14px !important; /* keep 16px-ish for iOS zoom avoid — use 16 */
    font-size:16px !important;
    padding:8px 10px !important;
  }
  label{font-size:11px !important}

  /* Blog cards */
  .blog-grid{gap:8px !important}
  .blog-card h3{font-size:13px !important}
  .blog-card p{font-size:11px !important}
}



/* ===== v36b: stronger phone compact Why + Where-to-Buy + desktop mid-fix ===== */

@media (min-width:1280px){
  .header-inner > .beta-badge{
    height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
  }
  .nav a.btn.btn-shop{
    height:20px !important;
    min-height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
  }
}

@media (max-width:480px){
  /* Why — much tighter */
  .section-dark:has(.features){
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  .section-dark:has(.features) .container{padding-left:16px; padding-right:16px}
  .section-dark:has(.features) .eyebrow{
    font-size:9px !important;
    margin:0 0 2px !important;
    letter-spacing:.08em !important;
  }
  .section-dark:has(.features) h2{
    font-size:16px !important;
    margin:0 0 8px !important;
    line-height:1.1 !important;
  }
  .features{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:0 !important;
  }
  .feature{
    display:block !important;
    padding:8px 10px !important;
    border-radius:8px !important;
    grid-template-columns:unset !important;
    grid-template-rows:unset !important;
  }
  .feature h3{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    font-size:11px !important;
    margin:0 0 2px !important;
    line-height:1.15 !important;
  }
  .feature h3 img,
  .feature img{
    height:18px !important;
    width:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    object-fit:contain !important;
    margin:0 !important;
    float:none !important;
    display:inline-block !important;
    flex:0 0 18px !important;
  }
  .feature p{
    font-size:10px !important;
    line-height:1.3 !important;
    margin:0 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  /* Where to Buy — much tighter */
  .section-cream.angled,
  .section-cream:has(.retailer-grid){
    padding-top:16px !important;
    padding-bottom:16px !important;
  }
  .section-cream.angled .eyebrow,
  .section-cream:has(.retailer-grid) .eyebrow{
    font-size:9px !important;
    margin:0 0 2px !important;
  }
  .section-cream.angled h2,
  .section-cream:has(.retailer-grid) h2{
    font-size:16px !important;
    margin:0 0 4px !important;
    line-height:1.1 !important;
  }
  .section-cream.angled .lead,
  .section-cream:has(.retailer-grid) .lead,
  .section-cream.angled > .container > p{
    font-size:11px !important;
    line-height:1.3 !important;
    margin:0 0 8px !important;
  }
  .retailer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:0 0 10px !important;
  }
  .retailer{
    padding:8px !important;
    border-radius:8px !important;
    min-height:0 !important;
  }
  .retailer strong{
    font-size:11px !important;
    line-height:1.15 !important;
    display:block !important;
  }
  .retailer span{
    font-size:9px !important;
    line-height:1.2 !important;
    display:block !important;
    margin-top:2px !important;
  }
  .section-cream.angled .btn,
  .section-cream:has(.retailer-grid) .btn,
  .section-cream.angled a.btn{
    display:inline-flex !important;
    align-items:center !important;
    font-size:11px !important;
    font-weight:700 !important;
    padding:5px 12px !important;
    min-height:26px !important;
    height:26px !important;
    line-height:1 !important;
    border-radius:999px !important;
    margin-top:0 !important;
  }

  /* Global phone: keep images leading, text small */
  .hero-image .hero-content{padding:.65rem 0 .75rem !important}
  .hero-image .hero-content h1{font-size:1.4rem !important; line-height:1.05 !important; margin:0 0 .35rem !important}
  .hero-image .hero-content p{font-size:11px !important; line-height:1.3 !important; margin:0 0 .5rem !important}
  .hero-image .btn, .hero-cta .btn{
    font-size:11px !important; padding:5px 12px !important; min-height:26px !important; height:26px !important;
  }

  .story-collage{padding-top:12px !important; padding-bottom:12px !important}
  .story-collage-inner{gap:.65rem !important}
  .story-collage-copy h2{font-size:1.2rem !important; margin:0 0 .3rem !important}
  .story-collage-copy p{font-size:11px !important; line-height:1.3 !important; margin:0 0 .35rem !important}
  .story-collage .btn{font-size:11px !important; padding:5px 12px !important; min-height:26px !important; height:26px !important}

  .home-shop{padding-top:16px !important; padding-bottom:16px !important}
  .home-shop .eyebrow{font-size:9px !important}
  .home-shop h2{font-size:16px !important}
  .home-shop-lead{font-size:11px !important; margin:0 0 .4rem !important}
  .home-shop-grid--logos{gap:6px !important}
  .home-shop-mark{height:72px !important; padding:.35rem !important}
  .home-shop-mark img{width:50% !important; height:50% !important; max-width:44px !important; max-height:44px !important}
  .home-shop-tile--logo .home-shop-body{padding:.28rem .25rem .32rem !important}
  .home-shop-tile--logo .home-shop-body h3{font-size:10px !important}
  .home-shop-tile--logo .home-shop-label{font-size:8px !important}

  .partners-band{padding-top:14px !important; padding-bottom:14px !important}
  .partners-heading{font-size:13px !important; margin:0 0 .4rem !important}
  .partners-grid li{height:28px !important}
  .partners-grid img{max-height:22px !important}

  .ncaa-band{padding-top:14px !important; padding-bottom:14px !important}
  .ncaa-band--overlay .ncaa-copy{padding:.55rem .55rem !important}
  .ncaa-band--overlay .ncaa-copy .eyebrow{font-size:9px !important}
  .ncaa-band--overlay .ncaa-copy h2{font-size:14px !important}
  .ncaa-band--overlay .ncaa-copy .lead{font-size:10px !important; line-height:1.3 !important}
  .ncaa-band .btn{font-size:11px !important; padding:5px 12px !important; min-height:26px !important; height:26px !important}

  .spain-band{padding-top:8px !important; padding-bottom:8px !important}

  .page-hero{padding:.85rem 0 .65rem !important}
  .page-hero h1{font-size:1.15rem !important}
  .page-hero .lead{font-size:11px !important}
  .page-hero .eyebrow{font-size:9px !important}

  .product-card{padding:6px !important}
  .product-card h3{font-size:11px !important}
  .product-card p{font-size:10px !important}

  footer.site-footer, .site-footer, footer{
    padding-top:14px !important; padding-bottom:14px !important;
  }
  .footer-grid{gap:10px !important}
  footer h3, .site-footer h3{font-size:11px !important; margin:0 0 .3rem !important}
  footer a, footer p, .site-footer a, .site-footer p{font-size:10px !important; line-height:1.35 !important}
  .footer-meta{font-size:9px !important; margin-top:.75rem !important; padding-top:.5rem !important}
}



/* ===== v36c: header grid so centered BETA never overlaps nav/SHOP ===== */

.header-inner{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:.5rem !important;
}
.header-inner > .logo{
  grid-column:1 !important;
  justify-self:start !important;
  z-index:2;
}
.header-inner > .beta-badge{
  grid-column:2 !important;
  justify-self:center !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  z-index:5;
  pointer-events:none;
}
.header-inner > .nav{
  grid-column:3 !important;
  justify-self:end !important;
  width:auto !important;
  max-width:100% !important;
  z-index:2;
}
.header-inner > .btn-shop-mobile,
.header-inner > .menu-toggle{
  z-index:2;
}

@media (min-width:769px){
  .header-inner{
    grid-template-columns:1fr auto 1fr !important;
  }
  .header-inner > .btn-shop-mobile,
  .header-inner > .menu-toggle{display:none !important}
  .header-inner > .nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0.2rem 0.55rem !important;
    margin:0 !important;
  }
  /* Keep SHOP at end of nav (far right) so it never fights BETA */
  /* v37: shop first again — no order:99 */
}

@media (min-width:769px) and (max-width:1279px){
  .nav{gap:0.1rem 0.28rem !important}
  .nav a:not(.btn){font-size:11.5px !important; letter-spacing:.04em !important}
}

@media (min-width:1024px) and (max-width:1180px){
  .nav{gap:0.06rem 0.18rem !important}
  .nav a:not(.btn){font-size:10.5px !important; letter-spacing:.03em !important}
}

@media (max-width:768px){
  /* logo | beta | (shop + menu) */
  .header-inner{
    grid-template-columns:1fr auto auto !important;
    grid-template-areas:"logo shop menu" !important;
    gap:.35rem !important;
  }
  .header-inner > .logo{grid-area:logo !important; max-width:100%; justify-self:start !important}
  .header-inner > .beta-badge{
    /* absolute center of full header bar */
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    grid-column:unset !important;
  }
  .header-inner > .btn-shop-mobile{
    grid-area:shop !important;
    display:inline-flex !important;
    margin:0 !important;
    justify-self:end !important;
  }
  .header-inner > .menu-toggle{
    grid-area:menu !important;
    display:flex !important;
    margin:0 !important;
    justify-self:end !important;
  }
  .header-inner > .nav{display:none !important}
}



/* ===== v36d: equal flex wings so BETA is true center and nav cannot cross ===== */

.header-inner{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  position:relative !important;
  gap:.5rem !important;
}
.header-inner > .logo{
  flex:1 1 0 !important;
  display:inline-flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  min-width:0 !important;
  z-index:2;
  grid-column:unset !important;
  grid-area:unset !important;
}
.header-inner > .beta-badge{
  flex:0 0 auto !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  z-index:5;
  pointer-events:none;
  grid-column:unset !important;
}
.header-inner > .nav{
  flex:1 1 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  z-index:2;
  grid-column:unset !important;
  grid-area:unset !important;
  overflow:visible !important;
}

@media (min-width:769px){
  .header-inner > .btn-shop-mobile,
  .header-inner > .menu-toggle{display:none !important}
  .header-inner > .nav{
    gap:0.15rem 0.4rem !important;
  }
  .nav a:not(.btn){
    white-space:nowrap !important;
    flex:0 1 auto !important;
  }
  .nav a.btn.btn-shop{
    flex:0 0 auto !important;
    order:0 !important;
  }
}

/* When space is tight, shrink link size so they stay in the right wing */
@media (min-width:769px) and (max-width:1400px){
  .header-inner > .nav{gap:0.08rem 0.28rem !important}
  .nav a:not(.btn){
    font-size:11.5px !important;
    letter-spacing:.04em !important;
  }
}

@media (min-width:769px) and (max-width:1200px){
  .header-inner > .nav{gap:0.05rem 0.18rem !important}
  .nav a:not(.btn){
    font-size:10.5px !important;
    letter-spacing:.03em !important;
  }
  .logo img{height:28px !important}
  .header-inner > .beta-badge{
    height:18px !important;
    padding:0 .45rem !important;
    font-size:.55rem !important;
  }
  .nav a.btn.btn-shop{
    height:18px !important;
    min-height:18px !important;
    padding:0 .45rem !important;
    font-size:.55rem !important;
  }
}

@media (min-width:769px) and (max-width:1100px){
  .header-inner > .nav{gap:0.04rem 0.12rem !important}
  .nav a:not(.btn){
    font-size:9.5px !important;
    letter-spacing:.02em !important;
  }
}

@media (max-width:768px){
  .header-inner{
    display:flex !important;
    gap:.35rem !important;
  }
  .header-inner > .logo{
    flex:1 1 auto !important;
    max-width:42% !important;
  }
  .header-inner > .beta-badge{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    flex:unset !important;
  }
  .header-inner > .btn-shop-mobile{
    display:inline-flex !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .header-inner > .menu-toggle{
    display:flex !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .header-inner > .nav{display:none !important}
}



/* ===== v36e: desktop nav always fits in right wing (container ~1180) ===== */
@media (min-width:769px){
  .header-inner > .nav{
    gap:0.08rem 0.32rem !important;
  }
  .nav a:not(.btn){
    font-size:12px !important;
    letter-spacing:.05em !important;
  }
}
@media (min-width:769px) and (max-width:1500px){
  .header-inner > .nav{gap:0.06rem 0.22rem !important}
  .nav a:not(.btn){
    font-size:11px !important;
    letter-spacing:.04em !important;
  }
}
@media (min-width:769px) and (max-width:1200px){
  .header-inner > .nav{gap:0.04rem 0.14rem !important}
  .nav a:not(.btn){
    font-size:10px !important;
    letter-spacing:.03em !important;
  }
}



/* ===== v37: restore desktop nav order — Shop FIRST (as v33/v35) ===== */
@media (min-width:769px){
  .nav a.btn.btn-shop{
    order:0 !important;
  }
  /* Keep BETA clear of first nav item (Shop) across 1024-1600 */
  .header-inner > .nav{
    gap:0.06rem 0.22rem !important;
  }
  .nav a:not(.btn){
    font-size:11px !important;
    letter-spacing:.04em !important;
  }
}
@media (min-width:769px) and (max-width:1280px){
  .header-inner > .nav{gap:0.04rem 0.14rem !important}
  .nav a:not(.btn){
    font-size:10px !important;
    letter-spacing:.03em !important;
  }
}
@media (min-width:769px) and (max-width:1100px){
  .header-inner > .nav{gap:0.03rem 0.1rem !important}
  .nav a:not(.btn){
    font-size:9.5px !important;
    letter-spacing:.02em !important;
  }
}



/* ===== v38: desktop toolbar — logo + BETA + links evenly spaced across full width ===== */
/* Phone (<=768) untouched. */

@media (min-width:769px){
  /* One row: logo, BETA, Shop, … Contact — equal gaps, nothing bunched */
  .header-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
    width:100% !important;
    position:relative !important;
  }

  /* Logo: content-sized, always visible on the left */
  .header-inner > .logo{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    max-width:none !important;
    width:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:2;
    grid-column:unset !important;
    grid-area:unset !important;
  }
  .header-inner > .logo img{
    display:block !important;
    height:32px !important;
    width:auto !important;
    max-width:none !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:brightness(0) invert(1) !important;
  }

  /* BETA: normal flex item after logo (not absolute / not centered alone) */
  .header-inner > .beta-badge{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    margin:0 !important;
    pointer-events:none;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    border-radius:999px !important;
    z-index:2;
    grid-column:unset !important;
  }

  /* Flatten nav so its children join the same space-between row */
  .header-inner > .nav{
    display:contents !important;
  }

  .header-inner > .btn-shop-mobile,
  .header-inner > .menu-toggle{
    display:none !important;
  }

  /* Every nav link is a peer of logo + BETA */
  .nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin:0 !important;
    font-size:clamp(13px, 1.05vw, 15px) !important;
    letter-spacing:.06em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
  }

  .nav a.btn.btn-shop{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    order:0 !important;
    height:20px !important;
    min-height:20px !important;
    padding:0 .55rem !important;
    font-size:.62rem !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.14) !important;
  }
}

/* Tighter at 1024-band so nothing wraps */
@media (min-width:769px) and (max-width:1100px){
  .header-inner > .logo img{height:26px !important}
  .header-inner > .beta-badge{
    height:18px !important;
    padding:0 .45rem !important;
    font-size:.55rem !important;
  }
  .nav a{
    font-size:clamp(12px, 1.15vw, 13px) !important;
    letter-spacing:.04em !important;
  }
  .nav a.btn.btn-shop{
    height:18px !important;
    min-height:18px !important;
    padding:0 .45rem !important;
    font-size:.55rem !important;
  }
}

@media (min-width:1024px) and (max-width:1280px){
  .nav a{
    font-size:clamp(13px, 1.1vw, 14px) !important;
    letter-spacing:.05em !important;
  }
}



/* ===== v38b: win font-size specificity; keep single row ===== */
@media (min-width:769px){
  .nav a:not(.btn){
    font-size:clamp(13px, 1.05vw, 15px) !important;
    letter-spacing:.06em !important;
    line-height:1.1 !important;
    padding:0 !important;
  }
  .header-inner,
  .header-inner > .logo,
  .header-inner > .beta-badge,
  .nav a{
    align-self:center !important;
  }
}
@media (min-width:769px) and (max-width:1100px){
  .nav a:not(.btn){
    font-size:13px !important;
    letter-spacing:.04em !important;
  }
  .header-inner > .logo img{height:24px !important}
}
@media (min-width:1024px) and (max-width:1280px){
  .nav a:not(.btn){
    font-size:clamp(13px, 1.05vw, 14px) !important;
  }
}
@media (min-width:1281px){
  .nav a:not(.btn){
    font-size:clamp(14px, 0.95vw, 15px) !important;
  }
}



/* ===== v39: desktop header inset + larger BETA/Shop pills ===== */
@media (min-width:769px){
  /* Match page content inset: container already uses 100%-2rem; do NOT force width:100% */
  .header-inner.container,
  .container.header-inner,
  header .header-inner{
    width:min(100% - 4rem, var(--max, 1200px)) !important; /* ~32px each side at full bleed */
    max-width:var(--max, 1200px) !important;
    margin-inline:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  /* At wide viewports keep equal side margins like content (~32-48px) */
  .header-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
  }

  .header-inner > .logo{
    flex:0 0 auto !important;
  }
  .header-inner > .logo img{
    height:32px !important;
    width:auto !important;
    max-width:none !important;
    display:block !important;
    filter:brightness(0) invert(1) !important;
  }

  /* Larger matching pills (~22-24px / 12px type) */
  .header-inner > .beta-badge{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    margin:0 !important;
    height:24px !important;
    min-height:24px !important;
    padding:0 .7rem !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .header-inner > .nav{display:contents !important}
  .header-inner > .btn-shop-mobile,
  .header-inner > .menu-toggle{display:none !important}

  .nav a.btn.btn-shop{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:24px !important;
    min-height:24px !important;
    padding:0 .7rem !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    border-radius:999px !important;
    box-shadow:0 1px 4px rgba(225,6,0,.14) !important;
  }

  .nav a:not(.btn){
    font-size:clamp(13px, 1.05vw, 15px) !important;
    letter-spacing:.06em !important;
    white-space:nowrap !important;
  }
}

@media (min-width:769px) and (max-width:1100px){
  .header-inner.container,
  .container.header-inner,
  header .header-inner{
    width:min(100% - 3rem, var(--max, 1200px)) !important; /* ~24px each side on tighter desktop */
  }
  .header-inner > .logo img{height:28px !important}
  .header-inner > .beta-badge,
  .nav a.btn.btn-shop{
    height:22px !important;
    min-height:22px !important;
    padding:0 .6rem !important;
    font-size:11px !important;
  }
  .nav a:not(.btn){font-size:13px !important; letter-spacing:.04em !important}
}

@media (min-width:1440px){
  .header-inner.container,
  .container.header-inner,
  header .header-inner{
    width:min(100% - 6rem, var(--max, 1200px)) !important; /* ~48px each side on wide screens */
  }
}



/* ===== v40: phone even vertical rhythm + slightly smaller Shop tiles ===== */
/* Desktop unchanged. */

@media (max-width:480px){
  /* ---- Story collage: even gaps ---- */
  .story-collage{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .story-collage-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:0 !important;
    padding-bottom:0 !important;
  }
  .story-collage .collage-frame{
    margin:0 !important;
  }
  .story-collage-copy{
    margin:0 !important;
    padding:20px 0 20px !important; /* 20px below collage + 20px above next section */
    max-width:100% !important;
    text-align:center !important;
  }
  .story-collage-copy .eyebrow{
    font-size:9px !important;
    margin:0 0 8px !important;
    letter-spacing:.08em !important;
  }
  .story-collage-copy h2{
    font-size:18px !important;
    line-height:1.15 !important;
    margin:0 0 8px !important;
  }
  .story-collage-copy > p:not(.eyebrow):not(.story-collage-cta){
    font-size:12px !important;
    line-height:1.35 !important;
    margin:0 0 8px !important;
    max-width:34rem !important;
  }
  .story-collage-cta{
    margin:0 !important;
    padding:0 !important;
  }
  .story-collage-copy .btn,
  .story-collage-cta .btn,
  .story-collage .btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:11px !important;
    font-weight:700 !important;
    padding:5px 12px !important;
    min-height:26px !important;
    height:26px !important;
    line-height:1 !important;
    border-radius:999px !important;
    margin:0 !important;
  }

  /* Why follows story: no extra top pad (story copy already has 20px bottom) */
  .story-collage + .section-dark,
  .story-collage + .section-dark:has(.features){
    padding-top:0 !important;
    padding-bottom:20px !important;
  }
  .story-collage + .section-dark > .container{
    padding-top:0 !important;
  }

  /* ---- Even rhythm between homepage sections (~20px pad) ---- */
  main > .section-dark,
  main > .section-cream,
  main > .ncaa-band,
  main > .partners-band,
  main > .spain-band,
  main > .home-shop{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  /* story handled above; why after story has pad-top 0 */
  main > .story-collage{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  main > .story-collage + .section-dark{
    padding-top:0 !important;
  }
  /* image-led bands: keep image full, light vertical breathing */
  main > .spain-band{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
  main > .hero-video,
  main > .hero-image{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* Shared small type rhythm for section intros */
  main > section .eyebrow{
    font-size:9px !important;
    margin:0 0 6px !important;
  }
  main > section h2{
    font-size:16px !important;
    margin:0 0 8px !important;
    line-height:1.15 !important;
  }
  .story-collage-copy h2{
    font-size:18px !important; /* story heading per brief */
  }
  main > section .lead,
  main > section > .container > p:not(.eyebrow){
    font-size:12px !important;
    line-height:1.35 !important;
  }
  main > section .btn:not(.btn-shop):not(.btn-shop-mobile){
    font-size:11px !important;
    padding:5px 12px !important;
    min-height:26px !important;
    height:26px !important;
  }

  /* ---- Shop tiles ~10-15% smaller (keep 3-col, logos fully visible) ---- */
  .home-shop{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .home-shop-grid--logos{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .home-shop-mark{
    aspect-ratio:auto !important;
    height:72px !important;          /* was ~86 → ~16% shorter */
    padding:.35rem !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
  }
  .home-shop-mark img{
    width:48% !important;            /* was ~55% */
    height:48% !important;
    max-width:44px !important;
    max-height:44px !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  /* FIFA tall logo: keep fully visible */
  .home-shop-tile--logo[href="/fifa.html"] .home-shop-mark{
    overflow:visible !important;
  }
  .home-shop-tile--logo[href="/fifa.html"] .home-shop-mark img{
    width:42% !important;
    height:auto !important;
    max-height:68% !important;
  }
  .home-shop-tile--logo .home-shop-body{
    padding:.28rem .25rem .32rem !important;
  }
  .home-shop-tile--logo .home-shop-body h3{
    font-size:10px !important;
    line-height:1.15 !important;
  }
  .home-shop-tile--logo .home-shop-label{
    font-size:8px !important;
    line-height:1.2 !important;
  }
}



/* ===== v40b: exact 20px story→why gap; fix cream/spain pads ===== */
@media (max-width:480px){
  .story-collage-copy{
    padding:20px 0 20px !important;
  }
  /* neutralize leftover bottom space under CTA */
  .story-collage-cta{margin:0 !important; padding:0 !important; line-height:1 !important}
  .story-collage-inner{padding-bottom:0 !important; margin-bottom:0 !important}
  .story-collage{margin-bottom:0 !important}

  .story-collage + .section-dark,
  .story-collage + .section-dark:has(.features),
  main > .story-collage + .section-dark{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .story-collage + .section-dark > .container{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .story-collage + .section-dark .eyebrow{
    margin-top:0 !important;
  }

  /* cream / spain join the 20px rhythm */
  main > .section-cream,
  main > .section-cream.angled{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  main > .spain-band{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}



/* ===== v40c: kill CTA margin; tune copy bottom so btn→why ≈ 20px ===== */
@media (max-width:480px){
  .story-collage-copy{
    padding:20px 0 13px !important;
  }
  .story-collage-copy p.story-collage-cta,
  .story-collage-cta{
    margin:0 !important;
    margin-bottom:0 !important;
    padding:0 !important;
  }
  .story-collage-copy p{
    margin-bottom:8px !important;
  }
  .story-collage-copy p.story-collage-cta{
    margin-bottom:0 !important;
  }
}