/* =========================================================================
   Team Macuga — Light Theme (CLEANED)
   ========================================================================= */

/* --------------------------- Design Tokens ----------------------------- */
:root{
  /* Color */
  --bg:#f7fbff; --bg-2:#eef4ff;
  --ink:#0b1220; --muted:#1f2b3b;
  --border:rgba(11,18,32,.10);
  --card:#fff; --shadow:0 12px 28px rgba(0,0,0,.12);

  --brand:#9F1D2D;     /* team red */
  --navy:#3B3C78;      /* team navy */

  /* Nav */
  --nav-bg:#fff; --nav-ink:#3B3C78; --nav-border:#e5e7eb;

  /* Radii / layout */
  --r-s:10px; --r:14px; --r-l:18px;
  --container:1100px;

  /* Other */
  --snow-a:.35;

  /* Fonts */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --------------------------- Base ------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:linear-gradient(180deg,#f9fbff 0%, #f2f6ff 60%, #f9fbff 100%);
  position:relative; /* for watermark layering */
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
section{ padding:56px 0; }
.lead{ font-size:clamp(1.02rem,1.2vw,1.25rem); color:var(--muted); }
.muted{ color:var(--muted); }

/* Typographic accents */
h1,h2,h3,.section-title,
.nav .links a,.brand-logo,.btn,.pill,.tm-name,
.hero-box .tagline strong{ font-family:var(--font-display); }
h1,.section-title{ font-weight:800; }
h2,h3{ font-weight:700; }

/* --------------------------- Utilities -------------------------------- */
.pill{ padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow);
  letter-spacing:.01em;
}
.btn.primary{ border-color:transparent; background:linear-gradient(90deg,var(--brand),var(--navy)); color:#fff; font-weight:700; }
.btn.lg{ padding:14px 18px; border-radius:14px; font-size:1.05rem; font-weight:700; }

/* Headings with gradient underline */
.section-title{ font-size:clamp(1.35rem,2vw,1.75rem); margin:0 0 10px; position:relative; }
.section-title::after{
  content:""; display:block; height:3px; width:80px; margin-top:8px;
  background:linear-gradient(90deg,var(--brand),var(--navy)); border-radius:999px;
}

/* =========================================================================
   NAVBAR
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:1500;
  background:var(--nav-bg); color:var(--nav-ink);
  border-bottom:1px solid var(--nav-border);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.nav-inner{ height:84px; display:flex; align-items:center; gap:16px; }
.brand-logo img{ height:48px; width:auto; display:block; }
.links{ display:flex; align-items:center; gap:25px; margin-left:auto; }
.links a{ color:var(--nav-ink); font-weight:600; font-size:1.05rem; }

/* Mobile menu */
.menu-btn{ display:none; background:transparent; border:1px solid var(--nav-border); padding:8px 12px; border-radius:10px; color:#111827; }
.mobile-drawer{
  position:fixed; left:0; right:0; top:var(--nav-h,84px);
  height:calc(100dvh - var(--nav-h,84px));
  background:#fff; border-top:1px solid var(--nav-border);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:.2s ease; z-index:3000; display:flex; flex-direction:column;
}
.mobile-drawer.open{ transform:none; opacity:1; pointer-events:auto; }
.mobile-drawer a{ padding:14px 20px; border-top:1px solid var(--nav-border); color:#111827; }
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:2500; opacity:0; pointer-events:none; transition:.2s; }
.nav-overlay.show{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

@media (max-width:768px){
  .links{ display:none; }
  .menu-btn{ display:inline-flex; }
}

/* Hide theme-provided headers */
.site-header,.secondary-nav,header[role="banner"]{ display:none !important; }

/* =========================================================================
   HERO — Full-bleed video + overlay
   ========================================================================= */
.full-bleed{ position:relative; left:50%; margin-left:-50vw; width:100vw; overflow:hidden; background:#000; }
.hero-video{ height:clamp(360px,62vh,740px); margin-bottom:8px; position:relative; overflow:hidden; isolation:isolate; background:#000 url('/assets/img/hero/poster.jpg') center/cover no-repeat; }
.hero-video>video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; animation:heroZoom 18s ease-in-out infinite alternate; transform-origin:center; }
@media (prefers-reduced-motion:reduce){ .hero-video>video{ animation:none !important; } }
@keyframes heroZoom{ from{transform:scale(1);} to{transform:scale(1.06);} }
.hero-video::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); mix-blend-mode:multiply; }

.hero-cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0 18px; }
.home .hero-logo{ max-width:420px; width:90%; margin:18px auto 8px; display:block; }

.hero-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:min(4vw,18px); pointer-events:none; }
.hero-overlay::before{ content:""; position:absolute; inset:0; } /* scrim disabled globally */
.hero-content{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; position:relative; display:flex; justify-content:center; }
.hero-box{
  pointer-events:auto; color:#fff; background:rgba(11,18,32,.46);
  border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.hero-box .tagline{ margin:0 0 8px; font-size:clamp(.95rem,1.05vw,1.05rem); line-height:1.35; max-width:760px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-actions .btn{ border-radius:12px; }
.hero-actions .btn.primary{ background:linear-gradient(90deg,var(--brand),var(--navy)); }
.hero-actions .btn.lg{ font-size:1.06rem; padding:12px 16px; }

/* Optional scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:42px; height:42px; border-radius:999px; border:0;
  background:#ffffffcc; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Space after hero */
.hero-video + .container,
.hero-video + section{ margin-top:8px; }

/* Hero rotator (stack + fade, simplified) */
.hero-rotator{ position:relative; margin-top:16px; }
.hero-rotator .rotator{ position:relative; height:clamp(320px,52vh,640px); overflow:hidden; border-radius:14px; }
.hero-rotator .slide{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.hero-rotator .slide.active{ opacity:1; }
.hero-rotator .slide img{ width:100%; height:100%; object-fit:cover; }
.hero-rotator .rotator-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.hero-rotator .rotator-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:#c3c9db; cursor:pointer; }
.hero-rotator .rotator-dots button[aria-current="true"]{ background:var(--brand); }
.tm-arrow{ position:absolute; top:50%; transform:translateY(-50%); border:0; width:38px; height:38px; border-radius:999px; background:#ffffffcc; box-shadow:0 4px 14px rgba(0,0,0,.12); cursor:pointer; display:grid; place-items:center; }
.tm-arrow.prev{ left:8px; } .tm-arrow.next{ right:8px; }
.tm-arrow:disabled{ opacity:.35; cursor:default; }

/* =========================================================================
   CARDS & GRIDS
   ========================================================================= */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; }
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:960px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }

/* =========================================================================
   FAMILY (overview + compact cards)
   ========================================================================= */
.family-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.family-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column;
}
.family-card .media{ width:100%; height:140px; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--border); position:relative; }
.family-card .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.family-card h3{ font-size:.98rem; margin:6px 0 4px; }
.family-card p{ font-size:.88rem; margin:0 0 8px; color:var(--muted); }
.family-card .actions{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; }
.family-card .actions .social{ display:flex; justify-content:flex-end; align-items:center; gap:6px; min-width:0; flex-wrap:nowrap; overflow:hidden; }
.icon-btn{ display:grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); transition:transform .12s ease; }
.icon-btn:hover{ transform:translateY(-1px); }
.icon-btn img{ width:18px; height:18px; object-fit:contain; }

@media (max-width:420px){
  .family-card .actions{ grid-template-columns:1fr; }
  .family-card .actions .social{ justify-content:flex-start; flex-wrap:wrap; overflow:visible; }
}

/* Mini headshot rotator (inside cards) */
.mini-rotator{ position:relative; border-radius:10px; overflow:hidden; height:140px; }
.mini-rotator .tm-track{ position:relative; height:100%; }
.mini-rotator .tm-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.mini-rotator .tm-slide.active{ opacity:1; }
.mini-rotator .tm-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.mini-rotator .tm-dots button{ width:7px; height:7px; border-radius:999px; border:0; background:#c3c9db; pointer-events:auto; cursor:pointer; }
.mini-rotator .tm-dots button.active{ background:var(--brand); }

/* =========================================================================
   BIO BLOCKS
   ========================================================================= */
.bio-block{
  display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start;
  background:linear-gradient(180deg,#ffffff 0%, #f6f9ff 100%);
  border:1px solid var(--border); border-radius:var(--r); padding:18px; margin:18px 0;
}
.bio-block h3{ margin:6px 0 8px; font-size:22px; }
.bio-block p{ color:var(--muted); margin:0 0 10px; }
@media (max-width:900px){ .bio-block{ grid-template-columns:1fr; } }

/* Generic fade carousel */
.carousel{ position:relative; border:1px solid var(--border); border-radius:12px; overflow:hidden; min-height:220px; background:#fff; }
.carousel .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.carousel .slide.active{ opacity:1; }
.carousel .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.carousel .dots button{ width:8px; height:8px; border-radius:999px; border:0; background:#9aa7bd; cursor:pointer; }
.carousel .dots button.active{ background:var(--brand); }

/* =========================================================================
   RESULTS
   ========================================================================= */
.results-lead{ color:var(--muted); margin-top:4px; }
.results-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.result-item{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; display:grid; gap:6px; box-shadow:var(--shadow); }
.result-item h4{ margin:0; font-size:18px; }
.result-meta{ color:var(--muted); font-size:14px; }
.result-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.res th,.res td{ background:#fff; }

/* =========================================================================
   SHOP (grid)
   ========================================================================= */
.shop-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 16px; }
.products{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.product-card{
  grid-column:span 4; background:#fff; border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.product-card .media{ background:#fff; border-bottom:1px solid var(--border); }
.product-card .media img{ width:100%; height:240px; object-fit:cover; }
.product-card .body{ padding:14px; display:grid; gap:6px; }
.product-card .name{ font-weight:700; }
.product-card .price{ color:var(--muted); }
.product-card .actions{ margin-top:4px; }
.product-card.hide{ display:none; }
@media (max-width:900px){ .product-card{ grid-column:span 6; } }
@media (max-width:640px){ .product-card{ grid-column:span 12; } }

/* Quick add */
.quick-add{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.6rem;
  padding:0; background:transparent; border:0;
}
.size-select{ width:100%; min-width:140px; padding:.45rem .6rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
.qty-control{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.qty-btn{ width:34px; height:34px; border:0; border-radius:10px; background:#f6f6f6; font-size:1.15rem; line-height:1; cursor:pointer; }
.qty-val{ width:2ch; text-align:center; font-variant-numeric:tabular-nums; }
.quick-add-btn{ white-space:nowrap; padding:.6rem 1rem; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:520px){
  .quick-add{ grid-template-columns:1fr auto; }
  .quick-add-btn{ grid-column:1/-1; width:100%; }
}

/* =========================================================================
   MERCH / GENERIC CAROUSEL (horizontal)
   ========================================================================= */
.tm-carousel{ --gap:14px; position:relative; overflow:hidden; }
.tm-track{ display:flex; gap:var(--gap); transition:transform .45s ease; will-change:transform; }
.tm-slide{ flex:0 0 100%; display:flex; }
@media (min-width:640px){ .tm-slide{ flex:0 0 calc(50% - var(--gap)/2); } }
@media (min-width:960px){ .tm-slide{ flex:0 0 calc(33.333% - var(--gap)*2/3); } }
.tm-card{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.tm-imgwrap{ position:relative; aspect-ratio:16/9; background:#fff; border:1px solid var(--border); }
.tm-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.tm-meta{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; }
.tm-name{ font-weight:700; }
.tm-price{ color:#64748b; }
.tm-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.tm-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:#c3c9db; cursor:pointer; }
.tm-dots button[aria-current="true"]{ background:var(--brand); }

/* =========================================================================
   SPONSORS
   ========================================================================= */
.sponsors{ padding:28px 0 56px; }
.sponsors .section-title{ margin-bottom:14px; }
.sponsors-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;
}
.sponsor{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; align-items:center; }
.logo-wrap{ height:56px; display:grid; place-items:center; }
.logo-wrap img{ max-height:40px; width:auto; object-fit:contain; }
.s-name{ margin-top:8px; font-size:.70rem; line-height:1.15; font-weight:700; letter-spacing:.01em; text-align:center; }
.s-note{ margin-top:2px; font-size:.60rem; line-height:1.2; color:#6b7280; text-align:center; }

/* =========================================================================
   CONTACT STRIP & FOOTER
   ========================================================================= */
.strip{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid rgba(11,18,32,.06); padding:40px 0; box-shadow:0 6px 14px rgba(0,0,0,.06); }
.strip .row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:flex-start; }
.strip h3{ margin:0 12px 0 0; font-size:18px; }
.strip p{ margin:0; color:var(--muted); }
footer{ padding:40px 0 80px; color:#64748b; text-align:center; border-top:1px solid var(--border); }

/* =========================================================================
   NEWS (highlights + feed)
   ========================================================================= */
.section-head{ margin:24px 0 12px; }
.section-kicker{
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--navy); font-size:.8rem; margin:0 0 4px;
}
.section-heading{ margin:0; font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem); line-height:1.2; }

.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.news-card .news-title{ margin:.35rem 0 0; line-height:1.3; }
.news-card .summary{ margin:.35rem 0 0; color:var(--ink); opacity:.9; }
.news-thumb{
  margin-top:10px; width:100%; aspect-ratio:16/9;
  background-size:cover; background-position:center;
  border-radius:10px; border:1px solid var(--border);
}
.news-highlights .news-thumb{ aspect-ratio:3/2; }
@media (min-width:960px){ .news-highlights .news-thumb{ aspect-ratio:16/9; } }

/* Updates page: spacing + tabs */
#updates-root{ padding-top:clamp(20px,3.5vw,64px); }
#updates-root .section-title{ margin:0 0 8px; }
#updates-root .tabs{ margin:8px 0 10px; display:flex; gap:.5rem; flex-wrap:wrap; }
#updates-root .tab{
  font-weight:700; font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  padding:.52rem 1.05rem; border:1px solid var(--border); border-radius:999px; background:#fff; cursor:pointer;
}
#tab-news{ padding-top:4px; }
#tab-news .section-head{ margin:6px 0 8px; }
#tab-news .section-kicker{ margin:0 0 2px; }
#tab-news .news-highlights{ margin-bottom:6px; display:flow-root; }
#tab-news .news-feed .section-head{ margin-top:4px; }
#tab-news .divider{
  border:0; border-top:3px solid var(--navy); opacity:.30; margin:6px 0;
}

/* =========================================================================
   MINI CART & CART LINK
   ========================================================================= */
.mini-cart{
  position:fixed; top:0; right:-380px; width:340px; height:100%;
  background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,.12);
  display:flex; flex-direction:column; z-index:9999; transition:right .3s ease;
}
.mini-cart.open{ right:0; }
.cart-header{ display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--border); }
.cart-items{ flex:1; overflow:auto; padding:1rem; }
.cart-item{ display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; }
.cart-item img{ width:60px; height:60px; object-fit:cover; border-radius:6px; }
.cart-item-title{ font-size:.95rem; margin-bottom:.25rem; }
.cart-item-qty{ display:flex; gap:.25rem; align-items:center; }
.cart-item-qty button{ border:1px solid var(--border); background:#f7f7f7; padding:.25rem .5rem; cursor:pointer; }
.cart-footer{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:1rem; border-top:1px solid var(--border); }
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:9998; }
.cart-overlay.show{ display:block; }
.cart-link{ position:relative; display:inline-flex; align-items:center; gap:.25rem; padding:.25rem; }
.cart-count{
  position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#e11d48; color:#fff; font-size:.7rem; line-height:16px; text-align:center;
}

/* =========================================================================
   WATERMARK (site-wide logo)
   ========================================================================= */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:image-set(
    url('/assets/img/logo-full-color.svg') type('image/svg+xml'),
    url('/assets/img/logo-full-color@2x.png') type('image/png') 2x,
    url('/assets/img/logo-full-color.png') type('image/png') 1x
  );
  background-repeat:no-repeat; background-position:center center;
  background-size:clamp(520px,68vw,860px);
  opacity:.5; filter:blur(.25px) saturate(1.05) contrast(1.02);
}
.nav,.full-bleed,.container,main,footer{ position:relative; z-index:1; }
@media (max-width:640px){
  body::before{ background-size:clamp(360px,78vw,600px); opacity:.12; filter:blur(.2px); }
}

/* =========================================================================
   SNOW (subtle)
   ========================================================================= */
.snow{
  position:fixed; inset:0; pointer-events:none; z-index:200; opacity:var(--snow-a);
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 50px 80px, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 150px 120px, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(2px 2px at 250px 10px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size:200px 200px, 220px 220px, 180px 180px, 260px 260px;
  animation:snowDown 20s linear infinite;
}
@keyframes snowDown{
  from{ background-position:0 0,0 0,0 0,0 0; }
  to  { background-position:0 1000px,0 800px,0 1200px,0 900px; }
}

/* =========================================================================
   BANDS / SEPARATORS
   ========================================================================= */
.band{ background:linear-gradient(180deg,#eef4ff,#eaf0ff); border-top:1px solid rgba(11,18,32,.06); border-bottom:1px solid rgba(11,18,32,.06); }
.band>.container{ padding-top:28px; padding-bottom:28px; }
.sep{ height:clamp(24px,4vw,56px); }

/* Make the product body take up remaining height, so actions can sit at the bottom */
.product-card{ display:flex; flex-direction:column; }
.product-card .body{ display:flex; flex-direction:column; gap:6px; flex:1; }

/* Pin the button/action row to the bottom of the card */
.product-card .actions{ margin-top:auto; }

/* Optional: make the button full-width inside grid cards */
.product-card .actions .btn{ width:100%; }

/* Tabs – gradient style to match primary buttons */
#updates-root .tab{
  border:1px solid var(--border);
  background:#fff;
  transition:box-shadow .15s ease, transform .05s ease;
}
#updates-root .tab:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }

/* Active tab = gradient pill */
#updates-root .tab.active{
  background:linear-gradient(90deg,var(--brand),var(--navy));
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(20,37,94,.18);
}

/* Home athlete grid sizing reset */
.home .athlete-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

/* Square media area; consistent across cards */
.home .athlete-card .media{
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:#eef3ff;
  border:1px solid var(--border);
}

/* Default: headshots fill the tile */
.home .athlete-card .media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* If an image is a logo, contain it so it doesn’t look huge */
.home .athlete-card .media img.logo,
.home .athlete-card .media.logo img,
.home .athlete-card .media img[alt*="logo" i]{
  object-fit:contain;
  padding:14px;
  background:#fff;
}

/* Card body spacing */
.home .athlete-card{ display:flex; flex-direction:column; }
.home .athlete-card .actions{ margin-top:auto; }

/* Dark navy background theme with white watermark */
body.theme-navy{
  --page-1:#0f1a3a;         /* deep navy */
  --page-2:#0a1330;
  background:linear-gradient(180deg,var(--page-1),var(--page-2));
}

/* Use a white mark for contrast; falls back to inverting colored mark if needed */
body.theme-navy::before{
  background-image: image-set(
    url('/assets/img/logo-mark-white.svg') type('image/svg+xml'),
    url('/assets/img/logo-mark-white.png') type('image/png') 1x
  );
  opacity:.10;
  filter:none;
}
/* If you don’t have a white mark asset yet, comment the block above and use this instead: */
/*
body.theme-navy::before{
  background-image:url('/assets/img/logo-full-color.svg');
  opacity:.10;
  filter:brightness(0) invert(1) contrast(1.1); 
}
*/

/* Keep cards/nav bright on the dark ground */
body.theme-navy .nav,
body.theme-navy .card,
body.theme-navy .family-card,
body.theme-navy .product-card,
body.theme-navy .tm-card,
body.theme-navy .news-card,
body.theme-navy .res-card,
body.theme-navy .hero-box{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* ===== Readability on dark navy ===== */
body.theme-navy{
  /* make default text light on dark pages */
  color: #eaf1ff;
}
body.theme-navy .muted{ color:#c7d0e6; }

/* links readable on dark sections, but keep cards/nav dark-on-white */
body.theme-navy a{ color:#ffffff; }
body.theme-navy .nav a,
body.theme-navy .card a,
body.theme-navy .family-card a,
body.theme-navy .product-card a,
body.theme-navy .tm-card a,
body.theme-navy .news-card a,
body.theme-navy .res-card a,
body.theme-navy .hero-box a{ color: inherit; }

/* section headings on dark (outside cards) get a touch more contrast */
body.theme-navy .section-title{ color:#fff; }

/* ===== Home: athlete grid hard reset ===== */
#family .ath-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

/* square media well with strict sizing */
#family .ath-card .ath-media{
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto !important;          /* stomp any fixed heights */
  border-radius:12px;
  overflow:hidden;
  background:#eef3ff;
  border:1px solid var(--border);
}

/* headshots fill; no stretching */
#family .ath-card .ath-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* social icons stay small */
#family .ath-ico img{ width:18px; height:18px; object-fit:contain; }

/* keep actions at the bottom so heights are even */
#family .ath-card{ display:flex; flex-direction:column; }
#family .ath-actions{ margin-top:auto; }

/* logos inside the athlete media tile */
#family .ath-card .ath-media img.logo,
#family .ath-card .ath-media img[alt*="logo" i]{
  object-fit:contain !important;
  padding:14px;
  background:#fff;
}

/* ===== Readability on dark navy pages ===== */
body.theme-navy{
  color:#eaf1ff;              /* default body text */
}
body.theme-navy .muted{ color:#c7d0e6; }

/* keep white-surface components dark-on-white as-is */
body.theme-navy .nav,
body.theme-navy .card,
body.theme-navy .family-card,
body.theme-navy .product-card,
body.theme-navy .tm-card,
body.theme-navy .news-card,
body.theme-navy .res-card,
body.theme-navy .hero-box {
  color: var(--ink);
}

/* headlines in normal sections on dark bg */
body.theme-navy .section-title,
body.theme-navy h1, 
body.theme-navy h2, 
body.theme-navy h3 { color:#fff; }

/* links readable on dark background (but inherit inside white cards) */
body.theme-navy a{ color:#ffffff; }
body.theme-navy .card a,
body.theme-navy .nav a { color: inherit; }

/* ===== Home: athlete grid hard reset ===== */
.home .ath-grid,
#family .ath-grid,
.home .athlete-grid {                     /* legacy class safety net */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

/* square media well with strict sizing */
.home .ath-card .ath-media,
#family .ath-card .ath-media,
.home .athlete-card .media {              /* legacy */
  width:100%;
  aspect-ratio: 1 / 1;
  height:auto !important;                 /* stomp any fixed heights */
  border-radius:12px;
  overflow:hidden;
  background:#eef3ff;
  border:1px solid var(--border);
}

/* headshots fill the well */
.home .ath-card .ath-media img,
#family .ath-card .ath-media img,
.home .athlete-card .media img {          /* legacy */
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* logos should NOT fill — contain & pad */
.home .ath-card .ath-media img.logo,
#family .ath-card .ath-media img.logo,
.home .ath-card .ath-media img[alt*="logo" i],
#family .ath-card .ath-media img[alt*="logo" i],
.home .athlete-card .media img.logo,      /* legacy */
.home .athlete-card .media img[alt*="logo" i] {
  object-fit:contain !important;
  padding:14px;
  background:#fff;
}

/* keep CTAs aligned across cards */
.home .ath-card, #family .ath-card, .home .athlete-card {
  display:flex; flex-direction:column;
}
.home .ath-card .ath-actions,
#family .ath-card .ath-actions,
.home .athlete-card .actions { margin-top:auto; }

/* small social icons */
#family .ath-ico img, .home .ath-ico img {
  width:18px; height:18px; object-fit:contain;
}

/* === White surfaces must use dark ink on the navy theme === */
body.theme-navy .nav,
body.theme-navy .card,
body.theme-navy .mission-card,
body.theme-navy .about-summary .about-wrap,
body.theme-navy .family-card,
body.theme-navy .bio-block,
body.theme-navy .product-card,
body.theme-navy .tm-card,
body.theme-navy .news-card,
body.theme-navy .res-card,
body.theme-navy .hero-box,
body.theme-navy .strip,
body.theme-navy .sponsors,
body.theme-navy .sponsors-grid .sponsor,
body.theme-navy .band > .container {
  color: var(--ink) !important;
}

/* links inside white surfaces should be dark (unless a button) */
body.theme-navy .card a:not(.btn),
body.theme-navy .strip a:not(.btn),
body.theme-navy .sponsors a:not(.btn),
body.theme-navy .band > .container a:not(.btn) {
  color: var(--ink) !important;
}

/* === Gradient buttons/pills must have white text === */
.btn.primary,
a.btn.primary,
#updates-root .tab.active {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15); /* subtle readability boost */
}

/* ===== Home: Athlete grid hard reset ===== */
.home .ath-grid,
#family .ath-grid {                      /* cover both includes */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* square media well */
.home .ath-card .ath-media,
#family .ath-card .ath-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto !important;
  border-radius: 12px;
  overflow: hidden;
  background: #eef3ff;
  border: 1px solid var(--border);
}

/* headshots fill; logos contain with padding */
.home .ath-card .ath-media img,
#family .ath-card .ath-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.home .ath-card .ath-media img.logo,
#family .ath-card .ath-media img.logo,
.home .ath-card .ath-media img[alt*="logo" i],
#family .ath-card .ath-media img[alt*="logo" i]{
  object-fit: contain !important;
  padding: 14px;
  background: #fff;
}

/* keep "My story" readable on white cards */
.home .ath-card .btn,
#family .ath-card .btn { color: var(--ink) !important; }

/* actions row pinned to bottom; icons inline */
.home .ath-card, #family .ath-card { display: flex; flex-direction: column; }
.home .ath-card .ath-actions, #family .ath-card .ath-actions { 
  margin-top: auto; 
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* icon pills inline and small */
.home .ath-ico, #family .ath-ico{
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.home .ath-ico img, #family .ath-ico img{ width: 18px; height: 18px; object-fit: contain; }

/* Sponsors grid safety net */
.sponsors-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 16px !important;
}

/* Page text on navy */
body.theme-navy { color: #eaf1ff; }
body.theme-navy .muted { color: #c7d0e6; }
body.theme-navy .section-title { color: #fff; }

/* But inside white surfaces, stay dark (already set above) */

/* === Contact strip: readable on navy === */
body.theme-navy .strip{
  background:#fff;              /* your strip stays white */
  color:var(--ink) !important;  /* default text color = dark */
}

/* Headline + copy in the strip */
body.theme-navy .strip h3,
body.theme-navy .strip p,
body.theme-navy .strip span,
body.theme-navy .strip strong{
  color:var(--ink) !important;
}

/* Links in the strip:
   - gradient buttons stay white text
   - any plain links are dark */
body.theme-navy .strip a.btn.primary{ color:#fff !important; }
body.theme-navy .strip a:not(.btn){ color:var(--ink) !important; }

/* Navy theme: set default (for dark background areas) */
body.theme-navy{
  --ink:   #eaf1ff;
  --muted: #c7d0e6;
}

/* But inside white-surface components on navy,
   revert tokens so muted is dark and readable */
body.theme-navy .card,
body.theme-navy .family-card,
body.theme-navy .mission-card,
body.theme-navy .about-summary .about-wrap,
body.theme-navy .product-card,
body.theme-navy .tm-card,
body.theme-navy .news-card,
body.theme-navy .res-card,
body.theme-navy .hero-box,
body.theme-navy .sponsors-grid .sponsor,
body.theme-navy .strip {
  --ink:   #0b1220;
  --muted: #384559; /* a hair lighter than #1f2b3b, great on white */
}

/* ===== Fix: make nav and athlete cards use dark tokens on white surfaces (navy theme) ===== */

/* Reset tokens inside white surfaces that were missing */
body.theme-navy .nav,
body.theme-navy .athlete-card,
body.theme-navy .ath-card {
  --ink:   #0b1220;   /* dark text */
  --muted: #384559;   /* readable secondary */
}

/* Nav links: explicit dark color on the white nav bar */
body.theme-navy .nav a { color: var(--ink) !important; }

/* Athlete grid: ensure links/buttons read as dark on the white cards */
body.theme-navy .athlete-card a,
body.theme-navy .ath-card a { color: var(--ink) !important; }

/* “My story” (non-primary button) should be dark */
body.theme-navy .athlete-card .btn:not(.primary),
body.theme-navy .ath-card .btn:not(.primary) {
  color: var(--ink) !important;
}

/* Keep gradient buttons white text wherever they appear */
body.theme-navy .nav .btn.primary,
body.theme-navy .athlete-card .btn.primary,
body.theme-navy .ath-card .btn.primary {
  color: #fff !important;
}

/* ===== Navy theme: athlete cards use light text on dark tiles ===== */

/* Switch tokens to light inside the athlete grid on navy */
body.theme-navy #family .ath-card,
body.theme-navy .home .athlete-card {     /* legacy include class */
  --ink:   #ffffff;
  --muted: #c7d0e6;
  color: var(--ink);
}

/* Names/titles specifically: make them white */
body.theme-navy #family .ath-card .ath-name,
body.theme-navy .home .athlete-card .name,
body.theme-navy #family .family-card h3,          /* safety for older markup */
body.theme-navy .home .athlete-card h3 {
  color: #fff !important;
}

/* “My story” (non-primary) button should be readable on dark */
body.theme-navy #family .ath-card .btn:not(.primary),
body.theme-navy .home .athlete-card .btn:not(.primary) {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
}

/* Media well borders look better subtle on dark */
body.theme-navy #family .ath-card .ath-media,
body.theme-navy .home .athlete-card .media {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
}

/* Links inside cards inherit the light text */
body.theme-navy #family .ath-card a,
body.theme-navy .home .athlete-card a {
  color: inherit;
}

/* ============================
   TYPOGRAPHY POLISH — SITEWIDE
   (safe, minimal, legible)
   ============================ */

/* Scale + rhythm */
:root{
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --track-tight: -0.01em;
  --track-wide:  .04em;

  --fs-h1: clamp(2.1rem, 1.2rem + 2.6vw, 3.2rem);
  --fs-h2: clamp(1.55rem, 1.1rem + 1.6vw, 2.2rem);
  --fs-h3: clamp(1.15rem, .95rem + .8vw, 1.45rem);
  --fs-eyebrow: .78rem;
}

/* Body copy */
body{
  font-feature-settings: "liga","calt","ss01","ss02";
  line-height: var(--lh-body);
}

/* Headings: slightly tighter, bolder, nicer tracking */
h1,h2,h3,
.section-title{
  letter-spacing: var(--track-tight);
}
h1{ font-size: var(--fs-h1); line-height: 1.1; }
h2,.section-title{ font-size: var(--fs-h2); line-height: 1.16; }
h3{ font-size: var(--fs-h3); line-height: 1.2; }

/* Eyebrow/kicker label (you already use .section-kicker) */
.section-kicker,
.eyebrow{
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  color: var(--navy);
  opacity: .95;
}

/* Links: cleaner underline + color that adapts */
a{
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover{
  text-decoration: underline;
}

/* Emphasis that reads well on both backgrounds */
strong, b{ color: inherit; font-weight: 800; }

/* Muted text just a hair darker for readability */
.muted{ color: var(--muted); opacity: .95; }

/* ============================
   DARK NAVY BACKGROUND SUPPORT
   ============================ */

/* On dark sections (outside cards), use bright tokens */
body.theme-navy{
  --ink-on-dark: #f1f5ff;
  --muted-on-dark: #c9d2e8;
}

/* Section headings + intro lines that sit on the navy bg */
body.theme-navy .story-hero h1,
body.theme-navy .story-hero .sub,
body.theme-navy #timeline > .section-title,
body.theme-navy #timeline .tl-intro,
body.theme-navy #bios > .section-title,
body.theme-navy #bios > .muted {
  color: var(--ink-on-dark) !important;
}
body.theme-navy #timeline .tl-intro,
body.theme-navy #bios > .muted {
  color: var(--muted-on-dark) !important;
}

/* Eyebrow labels on dark: lighten a bit */
body.theme-navy .section-kicker,
body.theme-navy .eyebrow{
  color: #e5ecff;
  opacity: .95;
}

/* “Skip to Bios” — keep readable on navy hero */
.story-hero .btn:not(.primary){
  background: #fff;
  color: #0b1220 !important;
  border: 1px solid rgba(11,18,32,.15);
}
.story-hero .btn:not(.primary):hover{
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

/* ============================
   STORY PAGE — CONTENT CARDS
   (stay dark on white surfaces)
   ============================ */

/* Timeline cards + Bio cards always dark-on-white */
body.theme-navy .tl-card,
body.theme-navy .bio{
  --ink:   #0b1220;
  --muted: #384559;
  color: var(--ink) !important;
}
body.theme-navy .tl-card h3,
body.theme-navy .tl-card p,
body.theme-navy .tl-card li,
body.theme-navy .tl-card a,
body.theme-navy .bio h3,
body.theme-navy .bio p,
body.theme-navy .bio li,
body.theme-navy .bio a{
  color: var(--ink) !important;
}
body.theme-navy .bio .role{ color:#475569 !important; }

/* Timeline date pill: stays dark on white */
body.theme-navy .tl-time{
  color:#334155; background:#fff; border-color: var(--border);
}

/* ============================
   OPTIONAL: SUBTLE ACCENTS
   (Use sparingly for personality)
   ============================ */

/* Gradient underline on section titles (already present);
   add a faint gradient text fill for H1 on the hero only */
.story-hero h1{
  background: linear-gradient(90deg, #fff, #e6ecff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small-caps-ish feel for date/eyebrow on timeline cards */
.tl-card h3{
  font-weight: 800;
  letter-spacing: -0.005em;
}
.tl-card .eyebrow{ color:#3B3C78; }

/* Links inside white cards: darker underline for clarity */
.tl-card a:not(.btn),
.bio a:not(.btn){
  color: var(--navy);
  text-decoration: underline;
}

/* Contact beacon */
.contact-beacon{ 
  background: rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter: saturate(160%) blur(6px);
}
.theme-navy .contact-beacon{
  background: rgba(10,19,48,.75);
  border-bottom-color: rgba(255,255,255,.12);
}
.contact-beacon-inner{
  display:flex; align-items:center; gap:.5rem; padding:.5rem 20px;
}
.contact-eyebrow{
  text-transform:uppercase; font-size:.72rem; letter-spacing:.12em;
  color: var(--navy); opacity:.9; margin-right:.25rem;
}
.theme-navy .contact-eyebrow{ color:#cbd5ff; }
.btn-sm{ padding:.35rem .7rem; border-radius:999px; font-size:.9rem; }
.contact-beacon .btn{ box-shadow:none; }
.theme-navy .contact-beacon .btn:not(.primary){ background:#fff; color:#0b1220; }

/* =========================
   CONTACT STRIP
   ========================= */
.contact-strip .row.tri{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .contact-strip .row.tri{ grid-template-columns:1fr; } }

.contact-strip .col h3{ margin:0 0 6px; }
.contact-strip .col p{ margin:0 0 10px; }
.contact-strip .btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* All buttons in the strip = gradient */
.contact-strip .btn{
  border-color: transparent !important;
  background: linear-gradient(90deg, var(--brand), var(--navy)) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Address should be dark and readable on the white strip */
.contact-strip .addr,
.contact-strip .addr address,
.contact-strip .addr a{
  color: var(--ink) !important;
}
.contact-strip address{ font-style: normal; line-height: 1.4; }

/* =========================
   SPONSORS GRID (footer)
   ========================= */
.sponsors{ padding: clamp(28px, 5vw, 52px) 0; }
.sponsors-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* White tiles, smaller logos, just the picture */
.s-tile{
  position:relative;
  background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow: var(--shadow);
  display:grid; place-items:center;
  aspect-ratio: 16 / 9;          /* consistent tile shape */
  padding: 10px 12px;            /* keeps logo off the edges */
}

/* Dial logo size down a touch */
.s-logo{
  max-height: 100px;              /* was a bit large; tune as needed */
  width: auto; object-fit: contain; display:block;
}
@media (min-width: 960px){ .s-logo{ max-height: 100px; } }

/* Small corner tag for athlete-specific sponsors */
.s-badge{
  position:absolute; right:8px; bottom:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 8px; font-size:.68rem; line-height:1;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--navy));
  color:#fff; border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.s-tile:not(.has-badge) .s-badge{ display:none; }

/* Navy theme: footer stays readable (tiles are white already) */
body.theme-navy .sponsors,
body.theme-navy .sponsors a{ color:#eaf1ff; }
body.theme-navy .sponsors .s-tile{ color: var(--ink); } /* inside tiles */

/* Sponsors header: left-align title + kicker */
.sponsors .section-head{
  text-align: left !important;
  display: flex;               /* handles cases where header is flex/centered */
  flex-direction: column;
  align-items: flex-start;
}

/* just in case something added margins for centering */
.sponsors .section-head .section-kicker,
.sponsors .section-head .section-title{
  margin-left: 0;
}

html {
  scroll-behavior: smooth;
}

/* ===== Sponsors (footer) ===== */
.sponsors-head{ margin-bottom:10px; }
.sponsors-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.sponsor{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:12px;
  box-shadow:var(--shadow);
}

.sponsor-link{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:inherit; text-align:center;
}

/* Wide rectangular logo plate */
.s-logo-box{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 6;                /* wide rectangle */
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  display:grid; place-items:center;
  overflow:hidden;
}

/* Make logos bigger but never distort */
.s-logo-box img{
  max-width:90%;
  max-height:80%;
  width:auto; height:auto;
  object-fit:contain; display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* Optional small corner badge like “Lauren” or “Alli” */
.s-badge{
  position:absolute; right:8px; bottom:8px;
  font-size:.72rem; font-weight:700; line-height:1;
  padding:4px 8px; border-radius:999px;
  background:#0b1220; color:#fff; opacity:.85;
}

/* Name under logo */
.s-name{
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  text-align:center; margin-top:6px; color:var(--ink);
}

/* Hover polish */
.sponsor:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.1); }

/* Navy theme: keep cards bright/dark text (your tokens already handle this),
   but ensure headings left aligned if you prefer that look */
body.theme-navy .sponsors .section-kicker,
body.theme-navy .sponsors .section-heading{ text-align:left; color:#fff; }

/* ===== Sponsors (footer block) ===== */
.sponsors-head{ margin-bottom:10px; text-align:left; }
.site-footer .sponsors-head .section-kicker,
.site-footer .sponsors-head .section-heading{ text-align:left; }

/* Grid: bigger, wider plates */
.sponsors-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
}
.sponsor{
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:12px; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sponsor:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.12); }

.sponsor-link{ display:block; color:inherit; text-decoration:none; }

/* Wide rectangular logo “plate” */
.s-logo-box{
  position:relative; width:100%;
  aspect-ratio:16/6;                /* wide + taller for bigger logos */
  border:1px solid var(--border);
  border-radius:12px; background:#fff;
  display:grid; place-items:center; overflow:hidden;
}
.s-logo-box img{
  max-width:94%; max-height:84%;
  width:auto; height:auto; object-fit:contain; display:block;
  filter:saturate(1.05) contrast(1.02);
}

/* Tiny gradient pill for athlete (only when s.athlete exists) */
.s-badge{
  position:absolute; right:10px; bottom:10px;
  padding:4px 10px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.01em;
  color:#fff; background:linear-gradient(90deg, var(--brand), var(--navy));
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

/* Navy theme: headings stay readable */
body.theme-navy .sponsors .section-kicker,
body.theme-navy .sponsors .section-heading{ color:#fff; }

/* ===== Sponsors (footer block) ===== */
.sponsors { margin-top: 8px; }
.sponsors-head { margin-bottom: 14px; text-align: left; }
/* h2 now uses .section-title so your sitewide gradient underline returns */

/* Grid: bigger, wider logo plates; no outer “card” */
.sponsors-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.sponsor{ /* kill the outer card look */
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.sponsor-link{ display: block; color: inherit; text-decoration: none; }

/* Single white plate (no double border), wider & bigger logos */
.s-logo-box{
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* wider rectangle */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sponsor-link:hover .s-logo-box{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.s-logo-box img{
  max-width: 85%;
  max-height: 60%;                      /* make logos larger, but contained */
  width: auto; height: auto; display: block; object-fit: contain;
  filter: saturate(1.03) contrast(1.02);
}

/* Tiny gradient pill for athlete (less obtrusive, won’t drown the logo) */
.s-badge{
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  color: #fff; background: linear-gradient(90deg, var(--brand), var(--navy));
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  backdrop-filter: saturate(1.2);
}

/* Navy theme readability for headings */
body.theme-navy .sponsors .section-kicker,
body.theme-navy .sponsors .section-title { color: #fff; }

/* ==== SPONSORS: make logos actually fit ==== */

/* grid sizing is a touch wider so logos can breathe */
.s-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}

/* card look stays the same */
.s-card{
  position:relative;
  display:block;
  padding:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* create a fixed “logo well” the image can scale inside */
.s-card .logo-box,
.s-card .s-logo-box {                   /* support either class if you used both */
  aspect-ratio: 16 / 9;                 /* consistent rectangle */
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding: clamp(12px, 2.2vw, 22px);    /* space so tall/wide marks never touch edges */
  overflow:hidden;
}

/* the actual logo — always contain, never crop */
.s-card img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* athlete badge (kept, just nudged above the logo well) */
.s-card .badge,
.s-card .s-badge{
  position:absolute;
  left:16px; top:16px;
  padding:.35rem .75rem;
  font-weight:800;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--navy));
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* small tweak so extremely wide/tall logos don’t look tiny */
@media (min-width:1200px){
  .s-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ===== Sponsors band ===== */
.sponsors-band{ padding:28px 0 56px; }

.s-head{ text-align:left; margin-bottom:10px; }
.s-kicker{
  margin:0 0 4px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  font-size:.8rem; color:#c7d0e6;
}
.s-title{
  margin:0;
  font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem);
  color:#fff;
}

/* Uniform grid */
.s-grid{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

/* Card: everyone gets the same wide rectangle */
.s-card{
  position:relative; display:block;
  background:#fff; border:1px solid var(--border);
  border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  aspect-ratio: 16 / 7;                 /* << keeps Swix same height as others */
  transition:transform .12s ease, box-shadow .12s ease;
}
.s-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.14); }

/* Inner “logo well” with a little inset padding */
.s-logo-wrap{
  position:absolute; inset:12px;
  border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* Fit every logo without cropping */
.s-logo{
  display:block;
  width:auto; height:auto;
  max-width:90%;     /* wide logos clamp by width */
  max-height:80%;    /* tall logos clamp by height */
  object-fit:contain; /* never crop */
}

/* Athlete badge (optional) */
.s-badge{
  position:absolute; left:12px; top:12px; z-index:2;
  padding:.35rem .7rem; border-radius:999px;
  font-weight:800; font-size:.8rem; color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--navy));
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  pointer-events:none;
}

/* Dark theme: headings stay white, cards stay white-on-dark */
body.theme-navy .s-title, body.theme-navy .s-kicker{ color:#fff; }
body.theme-navy .s-card{ background:#fff; }

/* Fix: athlete pill blowing up to full width */
.s-grid .s-card { position: relative; } /* ensure a positioning context */

.s-grid .s-card .s-badge{
  position: absolute !important;
  left: 12px; 
  top: 12px;
  z-index: 3;

  /* keep it small and inline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: auto !important;
  max-width: calc(100% - 24px);
  height: auto;

  /* visual style */
  padding: .35rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--navy));
  box-shadow: 0 8px 20px rgba(0,0,0,.18);

  /* neutralize any inherited borders/backgrounds */
  border: 0 !important;
}

/* make sure the logo layer sits *below* the badge */
.s-grid .s-card .s-logo-wrap{ z-index: 1; }

/* Keep the athlete badge a small pill in the corner */
.s-grid .s-card{ position:relative; }               /* positioning context */

.s-grid .s-card .s-badge{
  position:absolute !important;
  left:12px; top:12px; right:auto; bottom:auto;

  /* never stretch */
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:max-content !important;
  max-width:calc(100% - 24px);
  height:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap;
  pointer-events:none;                               /* keep whole card clickable */
  box-sizing:border-box;

  /* visual style */
  padding:.35rem .7rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--navy));
  color:#fff;
  font-weight:800; font-size:.8rem;
  border:0 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* make sure nothing inside tries to expand it */
.s-grid .s-card .s-badge *{
  width:auto !important;
  display:inline !important;
}

/* neutralize any global .pill rules on the sponsor badge */
.s-grid .s-card .s-badge.pill{
  border:0; background:linear-gradient(90deg,var(--brand),var(--navy));
}

/* Keep highlight cards dark-on-white on any theme */
.news-highlights .news-card,
.news-highlights .news-card a,
.news-highlights .news-card .news-title,
.news-highlights .news-card .summary,
.news-feed      .news-card,
.news-feed      .news-card * {
  color: var(--ink) !important;
}

/* The small kicker/heading above highlights on navy should stay white */
body.theme-navy .news-highlights .section-kicker,
body.theme-navy .news-highlights .section-heading,
body.theme-navy .news-feed .section-kicker,
body.theme-navy .news-feed .section-heading {
  color: #fff !important;
}

/* Contact strip title/subhead spacing */
.strip-title { margin: 0 0 6px; }
.strip-sub   { margin: 0 0 14px; color: var(--muted); }

/* Ensure dark text on the white strip even on the navy theme */
body.theme-navy .strip .strip-title,
body.theme-navy .strip .strip-sub { color: var(--ink); }

/* If autoplay fails, you can style a fallback state */
.hero-video-fallback .hero-video > video { opacity: 1; }

/* Example “Play” button you could show if you add one in your HTML */
.hero-video .fallback-play { display: none; }
.hero-video-fallback .fallback-play {
  display: inline-flex; position: absolute; inset: auto 16px 16px auto;
  padding: .6rem .9rem; border-radius: 12px; border: 0;
  background: #fff; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,.2);
}

/* Mini-cart: force dark, readable text even on navy theme */
.mini-cart{
  color:#0b1220; /* dark ink */
}
body.theme-navy .mini-cart{
  background:#fff;
  color:#0b1220; /* override the light body color */
}

/* Titles, prices, totals */
.mini-cart h2,
.mini-cart .cart-item-title,
.mini-cart .cart-item-price,
.mini-cart .cart-total-label,
.mini-cart .cart-total-price{
  color:#0b1220;
}
.mini-cart .cart-total-price{ font-weight:700; }

/* “Muted” text inside the cart (notes, small labels) */
.mini-cart .muted{ color:#475569 !important; }

/* Qty row: darker text + stronger controls */
.mini-cart .cart-item-qty{ color:#0b1220; }
.mini-cart .cart-item-qty span{ font-weight:600; color:#111827; }

.mini-cart .cart-item-qty button{
  background:#f3f4f6;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:8px;
}
.mini-cart .cart-item-qty button:hover{ background:#e5e7eb; }

/* Optional: make the Checkout button pop a bit more */
.mini-cart [data-checkout].btn{
  background:#fff;
  color:#0b1220;
  border:1px solid #d1d5db;
}
.mini-cart [data-checkout].btn.primary{
  border-color:transparent;
  background:linear-gradient(90deg,var(--brand),var(--navy));
  color:#fff;
}

/* Qty stepper: make the number dark + bolder */
.qty-control{
  background:#fff;                          /* ensure white well */
  border:1px solid #d1d5db;                 /* a touch stronger */
}

.qty-val{
  color: var(--ink, #0b1220) !important;    /* force dark text */
  font-weight: 700;
  letter-spacing: .01em;
}

/* Buttons should read clearly, too */
.qty-btn{
  color:#111827;                            /* dark glyph */
  background:#f3f4f6;
  border:1px solid #d1d5db;
}
.qty-btn:hover{ background:#e5e7eb; }

/* Defensive: if the page is in the navy theme, stay dark inside the stepper */
body.theme-navy .qty-control .qty-val{ color:#0b1220 !important; }

/* Mini-cart header: dark title + gradient underline under the text */
.mini-cart .cart-header{
  position: relative;
  padding: 14px 16px 12px;      /* a little room for the underline */
  border-bottom: 0;             /* remove the old gray rule */
  background: #fff;
}

.mini-cart .cart-header h2{
  margin: 0;
  color: var(--ink, #0b1220);   /* force black/dark */
  font-size: 1.15rem;
  font-weight: 800;
  position: relative;
  padding-bottom: 8px;          /* space for the underline */
}

/* gradient line directly under “Your Cart” */
.mini-cart .cart-header h2::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 90px;                  /* length of the underline */
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--navy));
  border-radius: 999px;
}

/* Close button stays readable */
.mini-cart .cart-header #close-cart{
  background: transparent;
  border: 0;
  color: var(--ink, #0b1220);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* On the navy theme, keep header text dark inside the white drawer */
body.theme-navy .mini-cart .cart-header h2,
body.theme-navy .mini-cart .cart-header #close-cart{
  color: var(--ink, #0b1220) !important;
}

/* Base pill */
.details .badge{
  display:inline-block;
  margin: 0 0 .5rem;
  padding:.28rem .6rem;
  border-radius:999px;
  font-weight:700;
  font-size:.82rem;
  line-height:1;
  border:1px solid var(--border, rgba(11,18,32,.12));
  background:#fff;             /* fallback */
  color: var(--ink, #0b1220);  /* fallback */
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Mapped colors (force if anything else overrides) */
.details .badge.badge-collab{
  background: linear-gradient(90deg, var(--brand,#9F1D2D), var(--navy,#3B3C78)) !important;
  color:#fff !important; border-color:transparent !important;
}
.details .badge.badge-bestseller{
  background: var(--navy,#3B3C78) !important;
  color:#fff !important; border-color:transparent !important;
}
.details .badge.badge-new{
  background: var(--brand,#9F1D2D) !important;
  color:#fff !important; border-color:transparent !important;
}
.details .badge.badge-limited,
.details .badge.badge-limited-edition{
  background:#111827 !important; color:#fff !important; border-color:transparent !important;
}
.details .badge.badge-sale{
  background:#e11d48 !important; color:#fff !important; border-color:transparent !important;
}

/* Make sure the product Add-to-cart stays gradient */
#add-to-cart.btn.primary{
  background: linear-gradient(90deg, var(--brand,#9F1D2D), var(--navy,#3B3C78)) !important;
  color:#fff !important;
  border:0 !important;
  font-weight:700;
  box-shadow: 0 10px 24px rgba(20,37,94,.18);
}

/* Push product page content down from the sticky nav */
.product.container{
  margin-top: clamp(14px, 3.5vw, 40px);
}

/* ----- Mini-cart header: dark text + bigger + gradient underline ----- */
.mini-cart .cart-header{
  position: relative;
  padding: 1rem 1rem 1.1rem;   /* room for underline */
  background: #fff;            /* ensure white surface */
}

.mini-cart .cart-header h2{
  margin: 0;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.6rem) !important;
  font-weight: 800;
  color: var(--ink) !important;   /* force black/ink */
}

.mini-cart .cart-header::after{
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--navy));
  border-radius: 999px;
}

/* ----- Make all text in the drawer dark (but leave gradient buttons alone) ----- */
.mini-cart,
.mini-cart .cart-items,
.mini-cart .cart-footer{
  color: var(--ink) !important;
}

.mini-cart .cart-item-title,
.mini-cart .cart-item-price,
.mini-cart .cart-total-label,
.mini-cart .cart-total-price,
.mini-cart .qty-val{
  color: var(--ink) !important;
}

/* Qty buttons text contrast */
.mini-cart .cart-item-qty button{
  color: var(--ink) !important;
}

/* If your page uses the navy theme, this guarantees the mini-cart stays dark-on-white */
body.theme-navy .mini-cart,
body.theme-navy .mini-cart *:not(.btn.primary){
  color: var(--ink) !important;
}

/* MINI-CART — force dark-on-white and readable controls */
.mini-cart{
  --cart-ink: #0b1220;     /* near-black */
  --cart-muted: #334155;   /* slate */
  --cart-border: #E5E7EB;
  background:#fff;
  color: var(--cart-ink) !important;
}
.mini-cart *{ color: var(--cart-ink) !important; }           /* default text */
.mini-cart .muted,
.mini-cart .cart-total-label{ color: var(--cart-muted) !important; }

/* Header: larger, black, single gradient underline */
.mini-cart .cart-header{
  position: relative;
  padding: 1rem 1rem 1.1rem;
  background:#fff;
  border-bottom: 0 !important;         /* remove any previous line */
}
.mini-cart .cart-header h2{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem) !important;
  color: var(--cart-ink) !important;
}
.mini-cart .cart-header::before,
.mini-cart .cart-header::after{ content:none !important; }    /* kill any old rules */
.mini-cart .cart-header::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:0;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--navy));
}

/* Line items + qty stepper */
.mini-cart .cart-item-title{ font-weight:700; }
.mini-cart .cart-item-price{ color: var(--cart-ink) !important; }

.mini-cart .cart-item-qty button{
  border:1px solid var(--cart-border) !important;
  background:#F6F7FB;
  color: var(--cart-ink) !important;
  border-radius:8px;
}
.mini-cart .qty-val{
  min-width:2ch;
  text-align:center;
  font-variant-numeric: tabular-nums;
  color: var(--cart-ink) !important;
}

/* Footer total */
.mini-cart .cart-total-price{ font-weight:800; color: var(--cart-ink) !important; }

/* Just in case some global style applied opacity */
.mini-cart,
.mini-cart *:not(.btn){ opacity: 1 !important; }

/* --- Mini-cart hard overrides (color + visibility) --- */
#mini-cart,
#mini-cart * {
  color: #0b1220 !important;          /* true near-black */
  opacity: 1 !important;               /* undo any theme dimming */
  filter: none !important;             /* undo grayscale/brightness filters */
  mix-blend-mode: normal !important;   /* prevent weird blending on dark themes */
  text-shadow: none !important;        /* avoid ghosty look on white bg */
}

/* Keep buttons readable on gradient */
#mini-cart .btn.primary,
#mini-cart .btn.primary * {
  color: #ffffff !important;
}

/* Qty stepper readability */
#mini-cart .cart-item-qty button {
  background: #F6F7FB !important;
  border: 1px solid #E5E7EB !important;
  color: #0b1220 !important;
  border-radius: 8px;
}
#mini-cart .qty-val { color: #0b1220 !important; }

/* Item titles, prices, totals */
#mini-cart .cart-item-title,
#mini-cart .cart-item-price,
#mini-cart .cart-total-label,
#mini-cart .cart-total-price {
  color: #0b1220 !important;
}

/* Header line you already liked (keep here so it wins) */
#mini-cart .cart-header {
  position: relative;
  padding: 1rem 1rem 1.1rem;
  background: #fff;
  border-bottom: 0 !important;
}
#mini-cart .cart-header h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem) !important;
  color: #0b1220 !important;
}
#mini-cart .cart-header::before,
#mini-cart .cart-header::after { content: none !important; }
#mini-cart .cart-header::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--navy));
}

/* Make the card stack, with footer pinned to the bottom */
.ath-card{ display:flex; flex-direction:column; }

/* Footer row: Story button (left) + socials (right) */
.ath-foot{
  margin-top:auto;                       /* pushes it to the bottom of the card */
  display:flex; align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Keep the story button from wrapping */
.ath-actions .btn{ white-space:nowrap; }

/* Social icons inline with spacing */
.ath-social{ display:flex; align-items:center; gap:8px; }
.ath-ico img{ width:22px; height:22px; display:block; }

/* Small screens: allow wrap nicely */
@media (max-width:560px){
  .ath-foot{ flex-wrap:wrap; gap:8px; }
  .ath-social{ margin-left:auto; }
}

/* Footer row: keep Story + icons together on the left */
.ath-foot{
  margin-top:auto;                 /* stays pinned to bottom of card */
  display:flex; align-items:center;
  justify-content:flex-start;      /* was space-between */
  gap:10px;                        /* space between button & icons */
  flex-wrap:wrap;                  /* nice wrap on small screens */
}

/* Icons inline, no push to the edge */
.ath-social{ display:flex; align-items:center; gap:8px; margin-left:0; }

/* Icon sizing stays tidy */
.ath-ico img{ width:22px; height:22px; display:block; }

/* Timeline: mobile centering + extra headroom for year labels */
@media (max-width: 700px){
  /* more space before the first year pill */
  #timeline .tl{ padding-top: 36px; }

  /* center the cards; remove the side offsets used on desktop */
  #timeline .tl-item.left  .tl-card,
  #timeline .tl-item.right .tl-card{
    margin-left: auto;
    margin-right: auto;
  }

  /* a little more vertical rhythm between items */
  #timeline .tl-item{ margin: 42px 0; }

  /* keep the vertical line centered */
  #timeline .tl-line{ left: 50%; transform: translateX(-50%); }

  /* nudge the year pill and make it a hair roomier */
  #timeline .tl-time{
    top: -12px;                     /* a bit more space above the card */
    padding: 4px 10px;
    font-size: .85rem;
  }
}

@media (max-width: 700px){
  #timeline .tl-item:first-child{ margin-top: 28px; }
}

/* --- Mobile menu: reliability + stacking --- */
.nav{
  position: sticky; top: 0;
  z-index: 5000; /* above hero/video/watermark/etc */
}

/* The full-screen overlay behind the drawer */
#nav-overlay.nav-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 4990; /* just under the drawer */
}
#nav-overlay.show{ opacity: 1; pointer-events: auto; }

/* Drawer (slides down under the nav bar) */
#mobile-drawer.mobile-drawer{
  position: fixed; left: 0; right: 0;
  top: var(--nav-h,84px); /* adjust if your nav height differs */
  height: calc(100dvh - var(--nav-h,84px));
  background: #fff;
  border-top: 1px solid var(--nav-border, #e5e7eb);
  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 5005;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch; overflow-y: auto;
}
#mobile-drawer.open{ transform: none; opacity: 1; pointer-events: auto; }

/* Lock body scroll when open */
html.nav-open, body.nav-open{
  overflow: hidden; height: 100%; touch-action: none;
}

/* Ensure the toggle button is tap-safe */
.menu-btn{ -webkit-tap-highlight-color: transparent; }

/* Mobile drawer */
.mobile-drawer{
  position: fixed; top:0; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  padding:14px 20px;
  transform: translateY(-12px);
  opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease;
  z-index:12001;  /* above site content */
}
.mobile-drawer.open{ transform:none; opacity:1; pointer-events:auto; }

.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; z-index:12000;  /* just below the drawer */
}
.nav-overlay.show{ display:block; }

.nav { position: relative; z-index: 12002; }
body.nav-open{ overflow:hidden; }

/* Mobile-only timeline tweaks */
@media (max-width: 980px){
  .tl{ padding-top: 28px; }            /* extra headroom for the first date */
  .tl-item{ margin: 28px 0 34px; }     /* more vertical spacing between items */
  .tl-card{ margin-left:auto; margin-right:auto; }  /* center cards */
  .tl-time{
    position: static;                  /* no absolute overlap */
    transform: none;
    display: block;
    text-align: center;
    margin: 10px auto 8px;             /* space above/below the year label */
  }
}

/* Nav stacking so it’s above everything */
.nav { position: sticky; top: 0; z-index: 12020; background: var(--nav-bg, #ffffff); }

/* Desktop links hidden on small screens */
@media (max-width: 900px){
  .nav .links { display: none; }
}

/* Mobile button */
.menu-btn{
  display: none;
  background: #fff; border:1px solid var(--border); border-radius:10px;
  padding:.45rem .65rem; cursor:pointer;
}
.menu-btn .hamb{ display:block; width:20px; height:2px; background:#0b1220; margin:4px 0; border-radius:2px; }
@media (max-width:900px){ .menu-btn{ display:inline-flex; } }

/* Overlay */
.nav-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 12010;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

/* Drawer */
.mobile-drawer{
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: min(84vw, 420px);
  background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 12030;
  display: flex; flex-direction: column;
}
.mobile-drawer.open{ transform: translateX(0); }
.mobile-drawer[hidden]{ display: block; } /* allow transform while 'open' */

.mobile-links{ display:flex; flex-direction:column; gap:12px; padding:18px; }
.mobile-links a{ padding:.65rem .8rem; border-radius:12px; border:1px solid var(--border); background:#fff; }
.mobile-links a.btn{ justify-content:center; }

/* Lock the page when nav is open */
body.nav-open { overflow: hidden; touch-action: none; }



.btn.primary.hero-btn,
.btn.primary.add-to-cart-btn {
  background: linear-gradient(90deg, var(--brand), var(--navy));
  color: #fff;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  text-align: center;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.btn.primary.hero-btn:hover,
.btn.primary.add-to-cart-btn:hover {
  opacity: 0.9;
}