/* =========================================================
   MUDDIES CRICKET CLUB — homepage styles
   Tokens, layout, components. Mobile-first.
   ========================================================= */

:root{
  /* Brand tokens (from crest) */
  --forest: #133219;
  --forest-deep: #0A1A0D;
  --muddies-green: #299442;
  --crab: #E01E24;
  --crab-dark: #B81016;
  --cream: #F1F2F1;
  --cream-warm: #EAE7DE;
  --gold: #ffce4d;            /* aliases the gold already used in chyron/gallery links — not a new colour */
  --ink: #0A1A0D;
  --muted: #6B7A6E;

  /* Type */
  --f-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --f-serif: "Fraunces", "DM Serif Display", Georgia, serif;

  /* Scale */
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-card: 14px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--forest-deep);   /* dark root so the iOS safe-area never falls back to white (cream sections set their own bg) */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Page loading screen (Lottie) — full-screen dark overlay, fades out on load */
#page-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--forest-deep);
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
#page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#page-loader-anim{ width:min(200px, 46vw); height:min(200px, 46vw); }
#page-loader-anim svg{ display:block; width:100%; height:100%; }
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- utility ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--f-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--crab);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--crab)}
.eyebrow.on-dark{color:#ff7a7f}
.eyebrow.on-dark::before{background:#ff7a7f}
.section-head{margin-bottom: clamp(36px, 5vw, 64px)}
.section-head h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size: clamp(38px, 6vw, 76px);
  line-height:.95;
  letter-spacing:-.01em;
  margin:.35em 0 0;
  text-wrap:balance;
}
.section{padding: clamp(72px, 10vw, 140px) 0;position:relative}
.section.dark{background:var(--forest);color:var(--cream)}
.section.dark h2{color:var(--cream)}
.section.cream{background:var(--cream)}
.section.cream-warm{background:var(--cream-warm)}

/* Noise overlay for dark surfaces */
.noise{position:relative;isolation:isolate}
.noise::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.35;mix-blend-mode:overlay;
}
.noise > *{position:relative;z-index:2}

/* Angled section break — subtle */
.angle-top{clip-path:polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%)}
.angle-bottom{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%)}
.angle-both{clip-path:polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--crab);--fg:#fff;--bd:var(--crab);
  display:inline-flex;align-items:center;gap:.7em;
  padding: 16px 24px;
  font-family:var(--f-display);
  font-weight:700;
  font-size: 15px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:var(--bg);color:var(--fg);
  border:2px solid var(--bd);
  border-radius:0;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{transform:translateY(-1px);background:var(--crab-dark);border-color:var(--crab-dark)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--cream);--bd:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.btn--cream{--bg:var(--cream);--fg:var(--forest);--bd:var(--cream)}
.btn--cream:hover{background:#fff;border-color:#fff}
.btn--green{--bg:var(--muddies-green);--fg:#fff;--bd:var(--muddies-green)}
.btn--green:hover{background:#20803a;border-color:#20803a}
.btn--lg{padding:20px 32px;font-size:16px}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;
  color:var(--crab);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover{border-color:var(--crab);gap:.8em}
.link-arrow.on-dark{color:var(--cream)}
.link-arrow.on-dark:hover{border-color:var(--cream)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 18px 0;
}
.site-header .row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream)}
.brand img{height:42px;width:auto}
.brand-word{
  font-family:var(--f-display);font-weight:800;
  font-size:22px;letter-spacing:.12em;text-transform:uppercase;
}
.nav{display:none;gap:28px;align-items:center}
.nav a{
  font-family:var(--f-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;color:var(--cream);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.nav a:hover{border-color:var(--muddies-green)}
.header-cta{display:none}
.site-header .btn{padding:12px 20px;font-size:13px}

/* solid state when scrolled */
.site-header.solid{
  background:var(--forest);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  padding:12px 0;
}

/* mobile menu button */
.menu-btn{
  display:inline-flex;flex-direction:column;gap:5px;
  padding:10px;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.2);
}
.menu-btn span{width:22px;height:2px;background:var(--cream);display:block}
.mobile-nav{
  position:fixed;inset:0;background:var(--forest);z-index:49;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(-100%);transition:transform .4s var(--ease);
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:28px;color:var(--cream);
}
.mobile-nav .btn{margin-top:12px}

@media (min-width: 1024px){
  .nav{display:flex}
  .header-cta{display:inline-flex}
  .menu-btn{display:none}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 92vh;
  color:var(--cream);
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--forest-deep);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img, .hero-media video{
  width:100%;height:100%;object-fit:cover;
  /* green duotone-ish treatment */
  filter: saturate(1.05) contrast(1.05) brightness(.82);
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(10,26,13,0) 0%, rgba(10,26,13,.35) 55%, rgba(10,26,13,.9) 100%),
    linear-gradient(200deg, rgba(19,50,25,0) 10%, rgba(10,26,13,.85) 80%);
}
.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.5;
}
.hero-watermark{
  position:absolute;right:-6%;top:10%;width:70%;max-width:760px;
  opacity:.08;z-index:1;pointer-events:none;
  filter: drop-shadow(0 0 40px rgba(0,0,0,.4));
}
.hero-badge{
  position:absolute;top: calc(14vh + 20px);left:var(--gutter);z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.22em;
  font-size:12px;color:var(--cream);
  padding:8px 14px;
  border:1px solid rgba(241,242,241,.35);
  background:rgba(10,26,13,.35);
  backdrop-filter: blur(6px);
}
.hero-badge .dot{width:6px;height:6px;background:var(--crab);border-radius:50%;box-shadow:0 0 0 4px rgba(224,30,36,.18)}

.hero-inner{
  position:relative;z-index:3;
  padding-inline: var(--gutter);
  padding-top: clamp(110px, 14vh, 160px);
  padding-bottom: clamp(72px, 10vw, 140px);
  width:100%;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.26em;font-size:12px;
  color:var(--cream);opacity:.72;
  margin-bottom:24px;
}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--crab)}
.hero h1{
  font-family:var(--f-display);font-weight:800;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height:.95;letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 36px;
  color:var(--cream);
  max-width: min(100%, 920px);
}
.hero h1 > span.accent{white-space:nowrap}
.hero h1 .accent{color:var(--crab);display:inline-block}
.hero-sub{
  font-size: clamp(17px, 1.6vw, 22px);
  max-width: 620px;
  color:rgba(241,242,241,.82);
  margin:0 0 40px;
  line-height:1.5;
}
.hero-sub strong{
  display:block;
  font-family:var(--f-display);
  font-weight:600;
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing:.005em;
  color:var(--cream);
  margin-bottom:8px;
  position:relative;
  padding-left:18px;
}
.hero-sub strong::before{
  content:"";position:absolute;left:0;top:.55em;
  width:10px;height:2px;background:var(--crab);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

.scroll-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:3;color:var(--cream);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.24em;font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.75;
}
.scroll-hint svg{animation: bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--cream);
  border-top:1px solid rgba(10,26,13,.08);
  border-bottom:1px solid rgba(10,26,13,.08);
  overflow:hidden;
  padding:18px 0;
}
.marquee-track{
  display:flex;gap:0;
  animation: slide 40s linear infinite;
  width:max-content;
}
.marquee-track span{
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--forest);font-size:20px;
  padding:0 28px;
  display:inline-flex;align-items:center;gap:28px;white-space:nowrap;
}
.marquee-track .sep{color:var(--crab);font-size:14px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   WELCOME / MAGAZINE SPREAD
   ========================================================= */
.welcome-sec{position:relative;overflow:hidden}
.welcome-sec .welcome-paper{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1200px 400px at 50% 100%, rgba(13,59,36,.08), transparent 70%),
    radial-gradient(600px 300px at 0% 0%, rgba(205,46,50,.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.09  0 0 0 0 0.05  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
  opacity:.9;
}

.welcome-grid{
  position:relative;
  display:grid;gap: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 72px);
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width: 960px){
  .welcome-grid{grid-template-columns: 1fr 1.05fr}
}

/* ---- Left column ---- */
.welcome-left{position:relative}
.issue-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:11px;letter-spacing:.28em;color:var(--forest);
  border:1px solid rgba(13,59,36,.25);
  padding:7px 12px;border-radius:999px;margin-bottom:22px;
  background:rgba(255,255,255,.5);
  white-space:nowrap;width:fit-content;
}
.welcome-left .eyebrow{display:block;margin-top:0}
.issue-mark .im-dot{color:var(--crab);transform:translateY(-1px)}
.issue-mark .im-no{font-weight:700}

.welcome-h{
  font-family:var(--f-display);font-weight:800;
  font-size: clamp(40px, 4.2vw, 58px);
  line-height:1.02;letter-spacing:-.015em;
  margin: .2em 0 36px;color:var(--forest);
  text-wrap:balance;
  max-width: 16ch;
}
.welcome-h em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;
  color:var(--crab);
  background:linear-gradient(transparent 55%, rgba(205,46,50,.14) 55%, rgba(205,46,50,.14) 85%, transparent 85%);
  padding:0 .08em;
}

.welcome-left p.lede{
  font-size: clamp(17px, 1.55vw, 21px);
  line-height:1.6;color:#2a3a2d;max-width:520px;
  text-wrap:pretty;margin: 0;
  padding-top: 1em; /* generous gap from H2 */
}
.welcome-left .motto{
  margin-top:30px;
  font-family:var(--f-serif);font-style:italic;
  font-size: clamp(22px, 2.2vw, 30px);
  color:var(--forest);
  border-left:3px solid var(--crab);
  padding-left:18px;line-height:1.35;
  max-width: 440px;
}
.signoff{
  margin-top:34px;display:flex;align-items:center;gap:14px;
  color:var(--forest);
  font-family:var(--f-display);text-transform:uppercase;
  font-size:11px;letter-spacing:.24em;opacity:.75;
}
.signoff .sig{width:96px;height:26px;color:var(--crab);opacity:.8}

/* ---- Right column: Contact Sheet collage ---- */
.welcome-right{
  position:relative;
  min-height: 620px;
  padding: 0;
  isolation:isolate;
}

/* =========================================================
   SCRAPBOOK — replaces contact-sheet.
   Photos keep their NATURAL aspect ratios, pinned to a paper
   table at hand-placed positions, with washi tape & rotations.
   ========================================================= */
.scrapbook{
  position:relative;
  width: 100%;
  aspect-ratio: 10 / 11;
  max-width: 680px;
  margin-left: auto;
  /* kraft paper table */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,.04), transparent 60%),
    #f1ead6;
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -24px rgba(10,26,13,.28),
    0 10px 20px -12px rgba(10,26,13,.18);
  isolation:isolate;
  overflow:hidden;
}
/* subtle paper fiber noise */
.scrapbook::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.05  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:multiply;
  z-index:0;
}
/* faint ruled lines on the paper (notebook feel) */
.scrapbook::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(64,102,72,.07) 39px 40px);
}

/* ---- Photo primitive (white polaroid border + shadow + tape) ---- */
.sb-photo{
  position:absolute;margin:0;
  background:#fdfcf6;
  padding:10px 10px 38px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 26px -10px rgba(10,26,13,.35),
    0 4px 8px -4px rgba(10,26,13,.2);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  z-index: 2;
}
.sb-photo > img{
  display:block;width:100%;height:auto;
  /* keep the natural aspect ratio — no cropping */
}
.sb-photo figcaption{
  position:absolute;left:14px;right:14px;bottom:10px;
  font-family:"Caveat","Kalam",var(--f-serif),cursive;
  font-size: 18px; line-height:1; color:#2a3a2d;
  letter-spacing:.01em;
}
.sb-photo:hover{
  transform: var(--sb-rot, none) translateY(-4px) scale(1.02);
  z-index: 6;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 26px 40px -14px rgba(10,26,13,.45),
    0 10px 20px -8px rgba(10,26,13,.25);
}

/* ---- Washi tape strips ---- */
.sb-tape{
  position:absolute;display:block;width:82px;height:22px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 8px),
    linear-gradient(var(--tape, rgba(224,30,36,.55)), var(--tape, rgba(224,30,36,.55)));
  box-shadow: 0 2px 4px rgba(10,26,13,.18);
  opacity:.92;
  z-index: 3;
}
.sb-tape-tl{top:-10px;left:-18px;transform:rotate(-24deg)}
.sb-tape-tr{top:-10px;right:-18px;transform:rotate(22deg)}

/* ---- Individual photo placements ----
   Positions defined by the photo's top-left anchor + width%.
   Rotations stored in --sb-rot so :hover can lift cleanly. */

/* 1. Seniors team (square 1:1) — top-left, tilted left */
.sb-p1{
  --sb-rot: rotate(-4.5deg);
  top: 6%; left: 4%;
  width: 40%;
  transform: var(--sb-rot);
}
.sb-p1 .sb-tape{--tape: rgba(224,30,36,.5)}

/* 2. Bowler in action (landscape 3:2) — top-right, tilted right, larger */
.sb-p2{
  --sb-rot: rotate(3.5deg);
  top: 3%; right: 3%;
  width: 52%;
  transform: var(--sb-rot);
  z-index: 4;
}
.sb-p2 .sb-tape{--tape: rgba(38,61,42,.55)}
.sb-p2 figcaption{font-size:20px}

/* 3. Batter portrait (4:5) — middle-left, tilted right */
.sb-p3{
  --sb-rot: rotate(2.8deg);
  top: 46%; left: 6%;
  width: 34%;
  transform: var(--sb-rot);
  z-index: 3;
}
.sb-p3 .sb-tape{--tape: rgba(224,30,36,.5)}

/* 4. Juniors group (square 1:1) — bottom-right, tilted left */
.sb-p4{
  --sb-rot: rotate(-3deg);
  bottom: 4%; right: 6%;
  width: 48%;
  transform: var(--sb-rot);
  z-index: 3;
}
.sb-p4 .sb-tape{--tape: rgba(38,61,42,.55)}

/* ---- Paper note (pinned top-center) ---- */
.sb-note{
  position:absolute;
  top: 45%; right: 2%;
  width: 22%;
  transform: rotate(5deg);
  padding: 10px 14px 14px;
  background: #fff7c2;
  box-shadow:
    0 8px 16px -6px rgba(10,26,13,.25),
    0 2px 4px -2px rgba(10,26,13,.15);
  font-family:"Caveat","Kalam",var(--f-serif),cursive;
  color:#3a2a10;
  z-index: 5;
  display:flex;flex-direction:column;gap:4px;
}
.sb-note::before{
  /* push-pin */
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ff6a6e, #a01418 70%);
  box-shadow: 0 2px 3px rgba(10,26,13,.4);
}
.sb-note-date{
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .22em; color: #6a4a1a;
  font-weight:700;
}
.sb-note-body{
  font-size: 15px; line-height: 1.25;
}

/* ---- Ticket stub (bottom-left) ---- */
.sb-ticket{
  position:absolute;
  bottom: 6%; left: 2%;
  width: 40%;
  transform: rotate(-7deg);
  display:flex; align-items:stretch;
  background: #fdfcf6;
  box-shadow:
    0 10px 20px -8px rgba(10,26,13,.3),
    0 3px 6px -3px rgba(10,26,13,.2);
  z-index: 5;
  border: 1px solid rgba(10,26,13,.08);
}
.sb-ticket-edge{
  width: 8px;
  background:
    radial-gradient(circle at center, #f1ead6 3px, transparent 3.5px) 0 0/8px 12px repeat-y;
}
.sb-ticket-body{
  flex:1; padding: 10px 14px;
  display:flex;flex-direction:column;gap:2px;
  border-right: 1px dashed rgba(10,26,13,.2);
  min-width:0;
}
.sb-ticket-label{
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 8.5px; letter-spacing: .26em; color: var(--crab);
  font-weight:800;
}
.sb-ticket-n{
  font-family: var(--f-display);
  font-weight:800; font-size: 26px; line-height:1;
  color: var(--forest); letter-spacing:-.01em;
}
.sb-ticket-meta{
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 8.5px; letter-spacing: .2em; color:#5a6a5d;
}
.sb-ticket-stub{
  padding: 10px 12px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background: var(--forest); color: #f6f2e4;
}
.sb-ticket-stub span:first-child{
  font-family: var(--f-display); font-weight:800; font-size:20px; line-height:1;
}
.sb-ticket-stub span:last-child{
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 7.5px; letter-spacing: .26em;
}

/* ---- EST 1990 stamp repositioned for the scrapbook ---- */
.sb-stamp{
  position:absolute;
  top: 4%; left: 42%;
  transform: rotate(-14deg);
  width: 110px; height: 110px;
  z-index: 1;
  color: var(--crab);
  opacity: .72;
  filter: contrast(1.05) drop-shadow(0 6px 12px rgba(10,26,13,.2));
  pointer-events:none;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .scrapbook{aspect-ratio: 1/1; max-width: 560px; margin: 0 auto}
  .sb-note{width: 26%}
  .sb-ticket{width: 44%}
  .sb-stamp{width: 100px; height: 100px}
}
@media (max-width: 640px){
  .scrapbook{aspect-ratio: 3/4}
  .sb-p1{top:3%; left:3%; width:52%}
  .sb-p2{top:26%; right:3%; width:56%}
  .sb-p3{top:50%; left:4%; width:44%}
  .sb-p4{bottom:3%; right:4%; width:58%}
  .sb-note{top:1%; left:56%; width:38%}
  .sb-ticket{bottom:1%; left:2%; width:54%}
  .sb-stamp{display:none}
}

/* =========================================================
   JUNIORS PATHWAY
   ========================================================= */
.juniors{color:var(--cream);position:relative;overflow:hidden}
.juniors .crest-watermark{
  position:absolute;right:-8%;bottom:-12%;width:540px;opacity:.05;pointer-events:none;
}
/* Faded Woolworths Cricket Blast photo bleeding into the section background —
   shows we run the Blasters program without competing with the text. A heavy
   forest wash keeps it subtle and the white heading/cards keep their contrast,
   fading to solid at the bottom so the lower cards sit on a clean base.
   (Higher specificity than `.noise > *` so position:absolute is preserved.) */
.juniors .juniors-photo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
/* Constant forest wash ABOVE the photos so the look stays consistent through
   every cross-fade and the white heading/cards keep their contrast; fades to
   solid at the bottom so the lower pathway cards sit on a clean base. */
.juniors .juniors-photo::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(19,50,25,.72) 0%, rgba(19,50,25,.82) 58%, var(--forest) 100%);
}
/* Cross-fading Blast photo layers — four images, each held ~7s with a soft
   dissolve. Negative delays stagger them so one is always on screen and the
   first is already visible at load (no black flash). */
.juniors .jp-slide{
  position:absolute;inset:0;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  opacity:0;animation: jp-cycle 28s infinite;
}
.juniors .jp-slide--1{ background-image:url(images/blast-bg.webp);   animation-delay: -2s; }
.juniors .jp-slide--2{ background-image:url(images/blast-bg-2.webp); animation-delay: -9s; }
.juniors .jp-slide--3{ background-image:url(images/blast-bg-3.webp); animation-delay: -16s; }
.juniors .jp-slide--4{ background-image:url(images/blast-bg-4.webp); animation-delay: -23s; }
@keyframes jp-cycle{
  0%   { opacity:0; }
  3%   { opacity:1; }
  22%  { opacity:1; }
  25%  { opacity:0; }
  100% { opacity:0; }
}
@media (max-width: 700px){
  /* a touch lighter wash on small screens so the kids still read through */
  .juniors .juniors-photo::after{
    background: linear-gradient(180deg, rgba(19,50,25,.74) 0%, rgba(19,50,25,.86) 62%, var(--forest) 100%);
  }
  .juniors .jp-slide{ background-position:center center; }
}
/* Respect reduced-motion: stop cycling, just show the first photo. */
@media (prefers-reduced-motion: reduce){
  .juniors .jp-slide{ animation:none; }
  .juniors .jp-slide--1{ opacity:1; }
}
.pathway{
  display:grid;gap:20px;
  grid-template-columns:1fr;
  margin-top: 0;
}
.pcard{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(241,242,241,.12);
  border-radius:var(--radius-card);
  padding:40px 32px 34px;
  position:relative;overflow:hidden;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  display:flex;flex-direction:column;gap:20px;
  min-height: 380px;
}
.pcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(224,30,36,.12), transparent 60%);
  opacity:0;transition: opacity .35s var(--ease);
}
.pcard:hover{
  transform:translateY(-6px);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border-color: rgba(224,30,36,.55);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
}
.pcard:hover::after{opacity:1}
.pcard .icon{
  width:64px;height:64px;color:var(--crab);
  display:flex;align-items:center;justify-content:center;
  background: rgba(224,30,36,.12);
  border:1px solid rgba(224,30,36,.35);
  border-radius:14px;
}
.pcard .icon--logo{
  background: transparent;
  border: none;
  width: 120px; height: 120px;
  padding: 0;
  margin-bottom: 4px;
}
.pcard .icon--logo img{
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
.pcard:hover .icon--logo img{
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.65));
}
.pcard .age{
  font-family:var(--f-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.22em;
  color:rgba(241,242,241,.6);
}
.pcard h3{
  font-family:var(--f-display);font-weight:800;
  font-size: clamp(30px, 3.2vw, 42px);
  text-transform:uppercase;letter-spacing:-.005em;
  margin:0;line-height:1;color:var(--cream);
}
.pcard p{
  color:rgba(241,242,241,.78);margin:0;flex:1;
  font-size:16px;line-height:1.6;
}
.pcard .link-arrow{color:#ff9196;margin-top:8px}
.pcard .link-arrow:hover{border-color:#ff9196}
.pcard .num-tag{
  position:absolute;top:20px;right:24px;
  font-family:var(--f-display);font-weight:800;
  font-size:14px;color:rgba(241,242,241,.25);
  letter-spacing:.2em;
}
.juniors-cta{
  margin-top: clamp(40px, 5vw, 64px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.juniors-cta .foot{
  font-size:13px;color:rgba(241,242,241,.55);
  font-family:var(--f-body);
}

@media (min-width: 900px){
  .pathway{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   LIVE SCORES
   ========================================================= */
.scores-grid{
  display:grid;gap:16px;grid-template-columns:1fr;
}
.score-card{
  background:#fff;
  border:1px solid rgba(10,26,13,.08);
  border-radius:var(--radius-card);
  padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.score-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,26,13,.1)}
.score-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grade-badge{
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  padding:5px 10px;background:var(--forest);color:var(--cream);
  border-radius:4px;
}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  color:var(--crab);
}
.live-pill .dot{
  width:7px;height:7px;background:var(--crab);border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}
.live-pill.upcoming{color:var(--muddies-green)}
.live-pill.upcoming .dot{background:var(--muddies-green);animation:none}
.live-pill.result{color:var(--muted)}
.live-pill.result .dot{background:var(--muted);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,30,36,.4)}50%{box-shadow:0 0 0 8px rgba(224,30,36,0)}}
.match-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.match-row .team{
  font-family:var(--f-display);font-weight:700;
  font-size:22px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--forest);
}
.match-row .team.away{color:var(--muted)}
.match-row .score{
  font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--forest);
}
.match-meta{
  display:flex;gap:14px;flex-wrap:wrap;
  padding-top:14px;border-top:1px dashed rgba(10,26,13,.14);
  font-size:13px;color:var(--muted);
}
.match-meta .sep{opacity:.4}
.scores-footer{margin-top:36px;display:flex;justify-content:center}

@media (min-width: 720px){ .scores-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width: 1024px){ .scores-grid{grid-template-columns:repeat(3,1fr)} }

/* =========================================================
   BROADCAST (LIVE SCORES) SECTION
   ========================================================= */
.broadcast{
  background: #07170a;
  color: var(--cream);
  position:relative;
  overflow:hidden;
  padding: clamp(44px, 6vw, 84px) 0 0; /* tighter; chyron sits at the bottom edge */
}
.broadcast-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 20% 15%, rgba(224,30,36,.14), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 90%, rgba(255,183,0,.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(241,242,241,.025) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(241,242,241,.018) 0 1px, transparent 1px 72px);
}
.broadcast .container{ position:relative; }
/* Two-column broadcast layout: intro (title + crab) | live panel */
.broadcast-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
@media (min-width: 920px){
  .broadcast-grid{
    grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
    gap: 52px;
    align-items: stretch;
  }
}
.broadcast-intro{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.broadcast-intro .eyebrow.on-dark{ display:inline-flex; align-items:center; gap:10px; color: rgba(241,242,241,.72); }
.broadcast-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-display); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#ffce4d; text-decoration:none; border-bottom:1px solid rgba(255,206,77,.4); padding-bottom:3px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.broadcast-link:hover{ color:#fff; border-color:#fff; }
.broadcast-link .arr{ transition: transform .2s var(--ease); }
.broadcast-link:hover .arr{ transform: translateX(4px); }
.broadcast-panel{ min-width: 0; }
.broadcast-panel .sb-browse{ margin-top: 0; }
@media (min-width: 920px){
  /* crab drops to the bottom of the intro column to balance the panel height */
  .broadcast-intro .commentator-wrap{ margin-top: auto; }
}
.broadcast-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: .95;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.on-air-dot{
  width:9px; height:9px; border-radius:50%; background:var(--crab);
  box-shadow: 0 0 0 0 rgba(224,30,36,.55);
  animation: onair-pulse 1.4s ease-out infinite;
}
@keyframes onair-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(224,30,36,.55); }
  100%{ box-shadow: 0 0 0 10px rgba(224,30,36,0); }
}

/* Scoreboard row — 3 tiles, middle is hero */
.scoreboard-row{
  display:grid; gap: 18px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px){
  .scoreboard-row{
    grid-template-columns: 1fr 1.9fr 1fr;
    gap: 20px;
  }
}
.sb-tile{
  background: linear-gradient(180deg, #0f2816, #081a0e);
  border: 1px solid rgba(241,242,241,.08);
  border-radius: 14px;
  padding: 20px;
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.sb-tile:hover{ transform: translateY(-3px); border-color: rgba(241,242,241,.18); }
.sb-tile-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom: 16px;
}
.sb-grade{
  font-family: var(--f-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream);
  padding: 5px 9px 4px;
  background: rgba(241,242,241,.08);
  border: 1px solid rgba(241,242,241,.12);
  border-radius: 4px;
}
.sb-grade--hero{ background: var(--crab); border-color: var(--crab); color:#fff; }
.sb-status{
  font-family: var(--f-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.sb-status--upcoming{ color: #8fc4a0; }
.sb-status--result{ color: rgba(241,242,241,.55); }
.sb-status--live{
  color: #ff5a5f;
  display:inline-flex; align-items:center; gap:6px;
}
.sb-status--live .dot{
  width:7px; height:7px; border-radius:50%; background:#ff5a5f;
  box-shadow: 0 0 0 0 rgba(255,90,95,.55);
  animation: onair-pulse 1.4s ease-out infinite;
}

/* Small tile */
.sb-tile--sm .sb-matchup{
  display:flex; flex-direction:column; gap: 8px;
  margin-bottom: 14px;
  flex: 1;
}
.sb-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.sb-team{
  font-family: var(--f-display); font-weight: 800;
  font-size: 17px; line-height: 1;
  color: var(--cream); letter-spacing: -0.005em;
}
.sb-team--away{ color: rgba(241,242,241,.7); }
.sb-score--sm{
  font-family: var(--f-display); font-weight: 800;
  font-size: 20px; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.sb-meta{
  font-family: var(--f-display); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241,242,241,.4);
  border-top: 1px dashed rgba(241,242,241,.1);
  padding-top: 10px;
}

/* Hero tile */
.sb-tile--hero{
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(224,30,36,.18), transparent 60%),
    linear-gradient(180deg, #102b18, #071b0d);
  border: 1px solid rgba(224,30,36,.25);
  padding: 24px 24px 18px;
}
.sb-hero-body{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  margin-bottom: 14px;
}
.sb-hero-team{ display:flex; flex-direction:column; gap:6px; min-width: 0; flex: 1; }
.sb-home-label{
  font-family: var(--f-display); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #ff5a5f; font-weight: 700;
}
.sb-team-name{
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: .95; letter-spacing: -0.015em;
  color: var(--cream);
}
.sb-batters{
  font-size: 12px;
  color: rgba(241,242,241,.68);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sb-hero-score{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 8.5vw, 88px);
  line-height: .85;
  letter-spacing: -0.03em;
  color: #ffb700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow:
    0 0 24px rgba(255,183,0,.35),
    0 2px 0 rgba(0,0,0,.35);
}
.sb-hero-score .slash{ color: rgba(255,183,0,.35); margin: 0 2px; font-weight: 700; }

.sb-hero-away{
  display:flex; align-items:baseline; gap: 10px;
  padding: 12px 0;
  border-top: 1px dashed rgba(241,242,241,.14);
  border-bottom: 1px dashed rgba(241,242,241,.14);
  margin-bottom: 14px;
}
.sb-vs{
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(241,242,241,.45);
}
.sb-away-name{
  font-size: clamp(18px, 2.4vw, 22px);
  color: rgba(241,242,241,.82);
  font-weight: 800;
}
.sb-to-bat{
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(241,242,241,.4);
  margin-left: auto;
}

.hero-ticker{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(241,242,241,.08);
  border-radius: 10px;
  margin-bottom: 12px;
}
.ticker-label{
  font-family: var(--f-display);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(241,242,241,.55);
  flex-shrink: 0;
}
.balls{ list-style:none; margin:0; padding:0; display:flex; gap:6px; flex:1; }
.balls .b{
  width: 26px; height: 26px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--f-display);
  font-weight: 800; font-size: 12px; line-height: 1;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.b--dot{ background: rgba(241,242,241,.08); color: rgba(241,242,241,.55); }
.b--run{ background: rgba(241,242,241,.14); color: var(--cream); }
.b--six{ background: #ffb700; color: #0a1a0d; }
.b--wkt{ background: var(--crab); color: #fff; }
.b.b--new{ animation: ball-pop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ball-pop{
  0%{ transform: scale(0) rotate(-40deg); opacity:0; }
  100%{ transform: scale(1) rotate(0); opacity:1; }
}
.over-count{
  font-family: var(--f-display);
  font-size: 11px; font-weight: 700;
  color: rgba(241,242,241,.55);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sb-meta--hero{
  color: rgba(241,242,241,.5);
  border-top: none; padding-top: 2px;
  font-size: 11px;
}
.sb-meta--hero .sep{ color: rgba(241,242,241,.3); }

/* ── Browse: team dropdown + Upcoming/Results tabs + compact match list ── */
.sb-browse{ margin-top: 40px; }
.sb-controls{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.sb-select-wrap{ display:inline-flex; align-items:center; gap:10px; }
.sb-select-label{
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  letter-spacing:.16em; text-transform: uppercase; color: rgba(241,242,241,.5);
}
.sb-select{
  font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--cream);
  background-color: rgba(241,242,241,.06);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23f1f2f1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  border: 1px solid rgba(241,242,241,.18); border-radius: 10px;
  padding: 10px 36px 10px 14px; -webkit-appearance: none; appearance: none;
  cursor: pointer; min-width: 190px; transition: border-color .2s var(--ease);
}
.sb-select:hover{ border-color: rgba(241,242,241,.35); }
.sb-select:focus{ outline: none; border-color: var(--crab); }
.sb-select option{ color: #14210f; }   /* native list uses OS palette */
.sb-tabs{
  display:inline-flex; background: rgba(0,0,0,.3); border: 1px solid rgba(241,242,241,.1);
  border-radius: 999px; padding: 3px; flex-shrink:0;
}
.sb-tabs button{
  font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing:.12em; text-transform: uppercase;
  cursor:pointer; border:0; background: transparent; color: rgba(241,242,241,.6);
  padding: 8px 18px; border-radius: 999px; transition: all .2s var(--ease);
}
.sb-tabs button.on{ background: var(--cream); color: var(--forest-deep); }

.sb-team-label{ display:inline-flex; align-items:baseline; gap:10px; font-family:var(--f-display); font-weight:800;
  font-size:18px; color:var(--cream); }
.sb-team-grade{ font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,242,241,.5); }
.sb-list{ display:flex; flex-direction:column; gap: 8px; }
.sb-mrow{
  display:grid; grid-template-columns: 86px 1fr auto; align-items:center; gap: 14px;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  background: rgba(241,242,241,.03);
  border: 1px solid rgba(241,242,241,.07);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.sb-mrow:hover{ border-color: rgba(241,242,241,.22); background: rgba(241,242,241,.06); }
/* clickable affordances */
.sb-tile[data-id]{ cursor: pointer; }
.sb-tile[data-id]:focus-visible,
.sb-mrow:focus-visible{ outline: 2px solid var(--crab); outline-offset: 2px; }
.sb-m-dcol{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sb-m-date{ font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing:.03em;
  color: rgba(241,242,241,.62); white-space:nowrap; }
.sb-m-time{ font-family: var(--f-display); font-weight: 700; font-size: 12px; color: #ffce4d; white-space:nowrap; }
.sb-m-teams{ display:flex; align-items:center; gap:8px; min-width:0;
  font-family: var(--f-display); font-size: 15px; color: var(--cream); }
.sb-m-teams b{ font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sb-m-teams .sb-m-opp{ color: rgba(241,242,241,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sb-m-teams i{ font-style:normal; color: rgba(241,242,241,.4); font-size: 12px; padding: 0 2px; flex:0 0 auto; }
.sb-m-logo{ flex:0 0 auto; position:relative; width:24px; height:24px; border-radius:6px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; background: rgba(241,242,241,.1);
  color: rgba(241,242,241,.6); font-family: var(--f-display); font-weight: 800; font-size: 11px; }
.sb-m-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.sb-m-ecol{ justify-self:end; text-align:right; min-width:0; }
.sb-m-score{ font-family: var(--f-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  white-space:nowrap; color: rgba(241,242,241,.85); }
.sb-m-score i{ font-style:normal; color: rgba(241,242,241,.35); margin: 0 5px; }
.sb-m-score .win{ color: #ffce4d; }
/* live (in-progress) match row: red Live badge + subtle row accent */
.sb-m-live{ display:inline-flex; align-items:center; gap:5px; font-family: var(--f-display);
  font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--crab); white-space:nowrap; }
.sb-m-live .dot{ width:7px; height:7px; border-radius:50%; background: var(--crab);
  box-shadow: 0 0 0 0 rgba(224,30,36,.5); animation: sb-live-pulse 1.6s infinite; }
.sb-mrow.is-live{ background: rgba(224,30,36,.07); border-color: rgba(224,30,36,.35); }
.sb-m-score.live{ color:#fff; }
@keyframes sb-live-pulse{ 0%{ box-shadow:0 0 0 0 rgba(224,30,36,.5);} 70%{ box-shadow:0 0 0 7px rgba(224,30,36,0);} 100%{ box-shadow:0 0 0 0 rgba(224,30,36,0);} }
/* chyron LIVE label (vs the white NEXT/result labels) */
.chyron-marquee b.chy-live{ color: var(--crab); }
.sb-m-venue{ font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing:.02em;
  color: rgba(241,242,241,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-block; max-width: 230px; vertical-align:bottom; }
a.sb-m-venue{ text-decoration:none; cursor:pointer; }
a.sb-m-venue:hover{ color:#ffce4d; text-decoration:underline; }
/* venue link inside the detail modal meta */
.mc-venue-link{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(241,242,241,.45); transition:color .2s var(--ease), border-color .2s var(--ease); }
.mc-venue-link:hover{ color:#ffce4d; border-bottom-color:#ffce4d; }
/* exact-location block in the detail modal */
.mc-venue-block{ display:block; margin-top:14px; padding:12px 14px; border-radius:10px; text-decoration:none;
  background:rgba(241,242,241,.04); border:1px solid rgba(241,242,241,.1); color:var(--cream);
  transition:border-color .2s var(--ease), background .2s var(--ease); }
.mc-venue-block:hover{ border-color:rgba(255,206,77,.5); background:rgba(255,206,77,.07); }
.mc-vb-name{ display:block; font-family:var(--f-display); font-weight:800; font-size:15px; }
.mc-vb-addr{ display:block; font-family:var(--f-body); font-size:12px; color:rgba(241,242,241,.62); margin-top:3px; }
.mc-vb-go{ display:block; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#ffce4d; margin-top:7px; }
.sb-m-na{ font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing:.06em; text-transform: uppercase;
  color: rgba(241,242,241,.42); white-space:nowrap; }
/* live match with no score recorded yet (e.g. day 1 of a 2-day game) */
.sb-m-inprog{ color: var(--crab); }
.sb-empty{ text-align:center; padding: 32px 20px; font-family: var(--f-body); color: rgba(241,242,241,.55); }
.sb-empty a{ color:#ffce4d; text-decoration:none; border-bottom:1px solid rgba(255,206,77,.4); }
.sb-empty--panel{ padding: 48px 24px; line-height: 1.8; }
/* ── Loading state: spinner + shimmering skeleton rows while the first
      PlayHQ fetch is in flight (replaced by real data or the fallback) ── */
.sb-loading{ padding: 2px 0; }
.sb-loading-head{ display:flex; align-items:center; gap:10px; padding: 4px 2px 16px; }
.sb-loading-txt{ font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing:.08em;
  text-transform: uppercase; color: rgba(241,242,241,.6); }
.sb-spinner{ width:16px; height:16px; border-radius:50%; flex:0 0 auto;
  border: 2px solid rgba(241,242,241,.18); border-top-color: var(--crab);
  animation: sb-spin .7s linear infinite; }
@keyframes sb-spin{ to{ transform: rotate(360deg); } }
.sb-skel-list{ display:flex; flex-direction:column; gap: 8px; }
.sb-skel-row{ display:grid; grid-template-columns: 86px 1fr auto; align-items:center; gap: 14px;
  padding: 12px 16px; border-radius: 10px; background: rgba(241,242,241,.03);
  border: 1px solid rgba(241,242,241,.07); }
.sb-skel{ display:block; height: 13px; border-radius: 6px; position:relative; overflow:hidden;
  background: rgba(241,242,241,.08); }
.sb-skel::after{ content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(241,242,241,.16), transparent);
  animation: sb-shimmer 1.3s infinite; }
@keyframes sb-shimmer{ 100%{ transform: translateX(100%); } }
.sb-skel-date{ width: 54px; }
.sb-skel-team{ width: 70%; }
.sb-skel-score{ width: 40px; justify-self:end; }
@media (max-width: 600px){ .sb-skel-row{ grid-template-columns: 1fr auto; } }
@media (prefers-reduced-motion: reduce){
  .sb-spinner{ animation: none; }
  .sb-skel::after{ animation: none; }
}
@media (max-width: 600px){
  .sb-mrow{ grid-template-columns: 1fr auto; gap: 5px 12px; padding: 11px 14px; }
  .sb-m-dcol{ grid-column:1; grid-row:1; flex-direction:row; gap:8px; align-items:baseline; }
  .sb-m-teams{ grid-column:1 / -1; grid-row:2; }
  .sb-m-ecol{ grid-column:2; grid-row:1; }
  .sb-m-venue{ max-width: 150px; }
}

/* Broadcast foot: CTA only (commentator now lives in head) */
.broadcast-foot{
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 56px;
  padding-bottom: 48px;
}
.commentator-wrap{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}
@media (min-width: 920px){
  .commentator-wrap{
    max-width: 440px;
    justify-content: flex-start;
  }
}
.commentator-crab{
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
  animation: crab-sway 4.8s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes crab-sway{
  0%,100%{ transform: rotate(-2deg) translateY(0); }
  50%{ transform: rotate(2deg) translateY(-4px); }
}

.broadcast-cta{
  display: flex; flex-direction: column; gap: 16px;
  align-items: center;
  text-align: center;
  padding-bottom: 12px;
}
.bc-cta-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}

/* Chyron ticker bar */
.chyron{
  margin-top: 12px;
  background: #0a1a0d;
  border-top: 1px solid rgba(255,183,0,.25);
  border-bottom: 1px solid rgba(255,183,0,.15);
  display:flex; align-items:stretch;
  overflow:hidden;
  position:relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.chyron-badge{
  background: var(--crab);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 20px;
  display:inline-flex; align-items:center;
  flex-shrink: 0;
  position:relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.chyron-track{
  flex: 1;
  overflow:hidden;
  display:flex; align-items:center;
  position:relative;
}
.chyron-marquee{
  display:inline-flex; white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #ffb700;
  padding-left: 20px;
  animation: chyron-scroll 60s linear infinite;
}
.chyron-marquee span{ padding-right: 2px; }
.chyron-marquee .chy-sep{ color: rgba(255,183,0,.45); padding: 0 16px; }
.chyron-marquee b{ color:#fff; font-weight:900; margin-right:6px; letter-spacing:.12em; }
@keyframes chyron-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
/* The ticker is a live news feed, so keep it scrolling even when the device
   asks for reduced motion — otherwise the global reduced-motion rule freezes
   it and only the first couple of items are ever visible. (Note: iOS Low
   Power Mode pauses CSS animations at the OS level and can't be overridden.) */
@media (prefers-reduced-motion: reduce){
  .chyron-marquee{ animation: chyron-scroll 60s linear infinite !important; }
}

/* =========================================================
   SENIORS — Quiet editorial spread on the dark forest
   ========================================================= */
.seniors-sec{
  position: relative; isolation: isolate;
  padding: clamp(64px, 8vw, 110px) 0;
  /* lightest forest green behind the mascots (right), falling to near-black
     (forest-deep) toward the edges so it blends with the dark sections above
     and below — no hard seam. */
  background:
    radial-gradient(125% 105% at 78% 42%,
      var(--forest) 0%,
      var(--forest-deep) 72%,
      var(--forest-deep) 100%);
  color: var(--cream);
  overflow: hidden;
}
/* one whisper of texture, nothing more */
.seniors-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(41,148,66,.08), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(224,30,36,.05), transparent 60%);
}

.sn-wrap{
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

/* Eyebrow row — small, calm, the only thing above the headline */
.sn-eyebrow{
  display:flex; align-items:center; gap: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);                                /* label reads in gold */
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(255, 206, 77, .22);     /* one thin gold hairline shared across the row */
}
.sn-rule{                                            /* short gold tick before the label */
  display:inline-block; width: 26px; height: 2px;
  background: var(--gold);
}
.sn-since{
  margin-left: auto;
  color: var(--muted);                               /* muted sage */
  letter-spacing: .3em;
}

/* Hero: headline left, image right */
.sn-hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
@media (min-width: 880px){
  .sn-hero{
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(36px, 4.5vw, 64px);
  }
}

.sn-statement{
  position: relative;
  padding-left: clamp(0px, 1.5vw, 24px);
}

.sn-headline{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(46px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  text-wrap: balance;
}
.sn-headline em{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--crab);
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 1em;
  position: relative;            /* anchor for the hand-drawn underline */
  display: inline-block;
}
/* loose hand-drawn gold underline beneath "grow up." — inline SVG, scales
   with the word; non-scaling-stroke keeps the ~3px weight at any size. */
.sn-underline{
  position: absolute;
  left: 0; right: 0; bottom: -.16em;
  width: 100%; height: .34em;
  color: var(--gold);            /* path stroke = currentColor */
  overflow: visible;
  pointer-events: none;
}

.sn-deck{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: rgba(241,242,241,.78);
  margin: 0;
  max-width: 32ch;
  padding-left: 14px;
  border-left: 2px solid var(--gold);   /* gold left-border accent */
}

/* Single image, quietly framed */
.sn-image{
  margin: 0;
  position: relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
/* picture is just a format wrapper — let the <img> be the real flex child */
.sn-image picture{ display: contents; }
.sn-image img{
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.85) contrast(1.02);
}
/* When the image is a transparent illustration (the crab duo).
   Extra specificity (.sn-image.sn-image--crabs) so the artwork keeps its
   shape — beats the generic mobile `.sn-image img{object-fit:cover}` rule. */
.sn-image.sn-image--crabs img{
  position: relative; z-index: 2;
  object-fit: contain;
  object-position: center bottom;
  /* Explicit ratio of the artwork (1400×1111). Reserves the box height BEFORE
     the lazy image decodes — `aspect-ratio:auto` collapsed to 0 pre-load, which
     hid the crabs and broke lazy-load. Keeps the illustration uncropped. */
  aspect-ratio: 1400 / 1111;
  max-width: 460px;
  /* shape-hugging shadow (replaces the generic ellipse) + a touch more pop;
     overrides the photo desaturate from the generic `.sn-image img` rule */
  filter: saturate(1.06) drop-shadow(0 16px 20px rgba(0,0,0,.45));
  animation: sn-crab-float 7s ease-in-out infinite;
  will-change: transform;       /* GPU-cheap; no blend/blur, so no flicker */
}
/* soft red radial glow BEHIND the mascots — ellipse sized to the wide duo */
.sn-image--crabs::before{
  content:"";
  position:absolute; z-index: 0;
  left:50%; top:46%;
  transform:translate(-50%, -50%);
  width: 112%; height: 120%;
  background: radial-gradient(ellipse 52% 46% at 50% 50%,
    rgba(224,30,36,.34) 0%,
    rgba(224,30,36,.12) 45%,
    transparent 72%);
  pointer-events:none;
}
/* grounding now comes from the img drop-shadow, so the old ellipse is off */
.sn-image--crabs::after{ content: none; }
/* slow, quiet idle bob for the mascots */
@keyframes sn-crab-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* larger mascots on desktop (mobile keeps the 460px cap) */
@media (min-width: 880px){
  .sn-image.sn-image--crabs img{ max-width: clamp(480px, 42vw, 620px); }
}

/* Foot: ONE contained stat slab — three stats + a gold price/CTA compartment */
.sn-foot{
  padding-top: clamp(24px, 3vw, 36px);
}
.sn-statbar{
  display: flex;
  flex-wrap: nowrap;            /* stays one row until it stacks at <=768px */
  align-items: stretch;
  background: rgba(10, 26, 13, .55);           /* dark translucent forest-deep fill */
  border: 1px solid rgba(241,242,241,.12);     /* hairline border */
  border-radius: 12px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

/* three evenly-weighted stat blocks, 1px vertical dividers between */
.sn-meta{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;                 /* allow the stat column to shrink, not the price box */
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.sn-meta > div{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
  border-left: 1px solid rgba(241,242,241,.10);
}
.sn-meta > div:first-child{ border-left: none; }

.sn-meta dt{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--crab);
  margin: 0;
}
.sn-meta dd{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: .005em;
  color: var(--cream);
  text-transform: uppercase;
  text-align: left;
  line-height: 1.15;
}

/* gold-tinted compartment: price beside the Sign-on button */
.sn-pricebox{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 26px);
  border-left: 1px solid rgba(255, 206, 77, .30);   /* gold-tinted divider */
  background: rgba(255, 206, 77, .05);              /* faint gold tint */
}

.sn-price{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.01em;
  background:
    linear-gradient(100deg,
      #b8851f 0%,
      #e6c14d 18%,
      #fff3b0 32%,
      #ffffff 42%,
      #fff3b0 52%,
      #e6c14d 68%,
      #b8851f 82%,
      #d4a93a 100%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.4))
    drop-shadow(0 0 14px rgba(245,217,122,.28));
  position: relative;
  display: inline-block;
  animation: sn-shimmer 4.5s ease-in-out infinite;
}
@keyframes sn-shimmer{
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.sn-price::after{
  content: none;
}
.sn-price em{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: .32em;
  letter-spacing: .04em;
  margin-left: 6px;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: var(--crab);
  color: var(--crab);
  filter: none;
  animation: none;
}

.sn-cta{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--crab);
  color: #fff;
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .2s var(--ease), gap .25s var(--ease), transform .2s var(--ease);
}
.sn-cta:hover{
  background: var(--crab-dark);
  gap: 18px;
  transform: translateY(-1px);
}
.sn-cta .arr{ transition: transform .2s; }
.sn-cta:hover .arr{ transform: translateX(4px); }

/* Stat slab stacks vertically on mobile */
@media (max-width: 768px){
  .sn-statbar{ flex-direction: column; }
  .sn-meta{ grid-template-columns: 1fr; flex-basis: auto; }
  .sn-meta > div{
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border-left: none;
    border-top: 1px solid rgba(241,242,241,.10);
  }
  .sn-meta > div:first-child{ border-top: none; }
  .sn-meta dt{ flex: 0 0 auto; }
  .sn-meta dd{ text-align: right; min-width: 0; }   /* wrap long values, hug the right edge */
  .sn-pricebox{
    border-left: none;
    border-top: 1px solid rgba(255, 206, 77, .30);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
  }
}
/* =========================================================
   GROUND
   ========================================================= */
.ground{
  position:relative;color:var(--cream);
  background: var(--forest-deep);
  overflow:hidden;
}
.ground-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(41,148,66,.25), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(19,50,25,.85), var(--forest-deep));
}
.ground-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(41,148,66,.04) 0 2px, transparent 2px 40px);
  opacity:.5;
}
.ground .container{position:relative;z-index:2;text-align:center}
.ground h2{
  font-size: clamp(46px, 8vw, 110px);
  line-height:.9;margin:0 0 14px;
}
.ground .addr{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.2em;
  font-size:15px;color:rgba(241,242,241,.8);margin-bottom:36px;
}
.ground-grid{
  display:grid;gap:28px;grid-template-columns:1fr;
  margin-top:44px;text-align:left;
}
.ground-map{
  aspect-ratio: 16/10;
  border-radius:var(--radius-card);overflow:hidden;
  border:1px solid rgba(241,242,241,.15);
  background:#0a1a0d;
}
.ground-map iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)}
.facilities{
  display:grid;gap:16px;grid-template-columns:1fr 1fr;
  align-content:start;
}
.fac{
  padding:22px 20px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(241,242,241,.12);
  border-radius:var(--radius-card);
}
.fac .n{
  font-family:var(--f-display);font-weight:800;font-size:40px;
  color:var(--crab);line-height:1;
}
.fac .l{
  margin-top:8px;font-family:var(--f-display);
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;
  color:rgba(241,242,241,.85);font-weight:600;
}
.ground-cta{margin-top:32px;display:flex;justify-content:center}

@media (min-width: 900px){
  .ground-grid{grid-template-columns: 1.2fr 1fr}
}

/* =========================================================
   GALLERY
   ========================================================= */
/* =========================================================
   GALLERY — Editorial photo grid
   ========================================================= */
.gallery-sec{ position: relative; }

/* Section header: title left, meta right, joined by a thin rule */
.gallery-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(10,26,13,.14);
}
@media (min-width: 720px){
  .gallery-head{
    grid-template-columns: 1fr auto;
    gap: 40px;
  }
}
.gh-left .eyebrow{ margin-bottom: 14px; }
.gh-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0;
}
.gh-title em{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--crab);
  text-transform: none;
  letter-spacing: -.01em;
}
.gh-right{
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(10,26,13,.55);
}
.gh-right strong{ color: var(--forest); font-weight: 800; }
.gh-count{ display: inline-flex; align-items: baseline; gap: 8px; }
.gh-sep{ width: 28px; height: 1px; background: rgba(10,26,13,.25); }

/* =========================================================
   COVERFLOW — 3D cover-flow carousel (replaces the bento grid)
   Center card large & upright; side cards recede, angle inward,
   dim and drop back with soft shadows. Positioned by JS (script.js).
   ========================================================= */
.coverflow{
  --cf-card-w: 80vw;          /* center card width (per breakpoint below) */
  --cf-aspect: 3 / 2;
  position: relative;
  user-select: none;
}
@media (min-width: 640px){  .coverflow{ --cf-card-w: 46vw; } }
@media (min-width: 1024px){ .coverflow{ --cf-card-w: clamp(340px, 30vw, 460px); } }

/* The 3D scene */
.cf-viewport{
  position: relative;
  perspective: 1700px;
  overflow-x: clip;
  overflow-y: visible;
  padding-block: clamp(24px, 4vw, 56px);
}
.cf-track{
  position: relative;
  height: calc(var(--cf-card-w) / (3 / 2));   /* match center card height */
  transform-style: preserve-3d;
}

/* A card (button = keyboard focusable + accessible) */
.cf-card{
  position: absolute;
  top: 50%; left: 50%;
  width: var(--cf-card-w);
  aspect-ratio: var(--cf-aspect);
  margin: 0; padding: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #d4d6d3;
  cursor: pointer;
  isolation: isolate;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  filter: brightness(.66) saturate(.9);
  box-shadow: 0 30px 60px -28px rgba(10,26,13,.65);
  transition:
    transform .62s var(--ease),
    filter .5s var(--ease),
    box-shadow .5s var(--ease),
    opacity .45s var(--ease);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.cf-card img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Bottom scrim so captions read on any photo */
.cf-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(10,26,13,.74) 100%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 1;
}

/* The active (center) card: upright, bright, lifted */
.cf-card.is-active{
  filter: none;
  box-shadow:
    0 1px 0 rgba(10,26,13,.04),
    0 44px 80px -30px rgba(10,26,13,.72);
  cursor: zoom-in;
}
.cf-card.is-active::after{ opacity: .96; }
.cf-card.is-active:hover{ filter: brightness(1.03); }

/* Numbered caption — only on the active card */
.cf-cap{
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 2;
  display: flex; align-items: baseline; gap: 12px;
  color: var(--cream);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.cf-card.is-active .cf-cap{ opacity: 1; transform: none; }
.cf-no{
  font-size: 10px; font-weight: 700;
  color: var(--crab);
  letter-spacing: .26em;
  padding-right: 12px;
  border-right: 1px solid rgba(241,242,241,.45);
  flex: 0 0 auto;
}
.cf-tx{
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Play overlay (video cards) — injected by JS */
.cf-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid; place-items: center;
  width: clamp(54px, 6vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(224,30,36,.92);   /* --crab */
  color: var(--cream);
  box-shadow: 0 10px 28px -8px rgba(10,26,13,.6);
  transition: transform .35s var(--ease), background .35s var(--ease);
  pointer-events: none;
}
.cf-play svg{ width: 42%; height: 42%; margin-left: 8%; }
.cf-card.is-active:hover .cf-play{ transform: translate(-50%,-50%) scale(1.08); }

/* Controls — two circular arrows centred below */
.cf-controls{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(20px, 3vw, 36px);
}
.cf-arrow{
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 14px 26px -14px rgba(10,26,13,.55);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cf-arrow svg{ width: 24px; height: 24px; }
.cf-arrow:hover{ background: var(--crab); transform: translateY(-2px); }
.cf-arrow:active{ transform: translateY(0); }
.cf-arrow:focus-visible{ outline: 3px solid var(--crab); outline-offset: 3px; }

/* =========================================================
   COVERFLOW LIGHTBOX — fullscreen photo / video viewer
   ========================================================= */
.cf-lightbox{
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10,26,13,.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.cf-lightbox[hidden]{ display: none; }
.cf-lightbox.open{ opacity: 1; }
.cf-lb-stage{
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.cf-lb-stage img,
.cf-lb-stage video{
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  background: #000;
}
.cf-lb-cap{
  position: absolute;
  left: 0; right: 0; bottom: clamp(18px, 4vw, 40px);
  text-align: center;
  margin: 0;
  color: var(--cream);
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  font-weight: 600;
}
.cf-lb-close,
.cf-lb-nav{
  position: absolute;
  display: grid; place-items: center;
  color: var(--cream);
  border-radius: 50%;
  background: rgba(241,242,241,.1);
  border: 1px solid rgba(241,242,241,.22);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.cf-lb-close{ top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); width: 48px; height: 48px; }
.cf-lb-nav{ top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.cf-lb-prev{ left: clamp(10px, 3vw, 32px); }
.cf-lb-next{ right: clamp(10px, 3vw, 32px); }
.cf-lb-close svg, .cf-lb-nav svg{ width: 24px; height: 24px; }
.cf-lb-close:hover{ background: var(--crab); }
.cf-lb-nav:hover{ background: var(--crab); }
.cf-lb-prev:hover{ transform: translateY(-50%) scale(1.06); }
.cf-lb-next:hover{ transform: translateY(-50%) scale(1.06); }
.cf-lb-close:focus-visible, .cf-lb-nav:focus-visible{ outline: 3px solid var(--crab); outline-offset: 3px; }
@media (max-width: 639px){
  .cf-lb-nav{ width: 44px; height: 44px; }
}

.gallery-foot{
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(10,26,13,.14);
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   SOCIAL FEED — Live from Facebook (dark stage)
   ========================================================= */
.social-sec{
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--forest-deep);
  color: var(--cream);
  overflow: hidden;
}
.social-bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(41,148,66,.18), transparent 65%),
    radial-gradient(50% 40% at 90% 100%, rgba(24,119,242,.10), transparent 70%);
}
.social-wrap{ position: relative; z-index: 1; }

/* Header */
.social-head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
  padding-bottom: clamp(28px, 3.5vw, 44px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
  border-bottom: 1px solid rgba(241,242,241,.14);
}
@media (min-width: 880px){
  .social-head{ grid-template-columns: 1fr auto; gap: 48px; }
}
.sh-left .eyebrow{ margin-bottom: 16px; }
.sh-title{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
  text-wrap: balance;
}
.sh-title em{
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--crab);
  text-transform: none;
  letter-spacing: -.01em;
}
.sh-handle{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border: 1px solid rgba(241,242,241,.18);
  border-radius: 999px;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--f-display);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.sh-handle:hover{
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.sh-handle svg{ width: 22px; height: 22px; color: #1877f2; }
.sh-handle-tx{ display: flex; flex-direction: column; gap: 2px; line-height: 1; text-align: left; }
.sh-handle-l1{
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(241,242,241,.5); font-weight: 600;
}
.sh-handle-l2{
  font-size: 14px; letter-spacing: .04em; font-weight: 700;
}

/* Facebook feed — real-feed drop-in zone (third-party widget) + follow bar */
.fb-feed{ position: relative; }
.fb-feed-embed{ width: 100%; }
.fb-feed-embed iframe{ max-width: 100%; border: 0; }
/* the interim Page Plugin terminal stays centred; a pasted widget grid fills the width */
.fb-feed-embed .feed-terminal{ margin-left: auto; margin-right: auto; }

.fb-followbar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 24px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(241,242,241,.14);
}
.fb-followbar-lede{
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4;
  color: rgba(241,242,241,.82); margin: 0; max-width: 46ch;
}
.fb-followbar-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fb-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(241,242,241,.2); color: var(--cream); text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.fb-chip svg{ width: 16px; height: 16px; }
.fb-chip--fb svg{ color: #1877f2; }
.fb-chip--ig svg{ color: #e1306c; }
.fb-chip:hover{ border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); transform: translateY(-1px); }

/* Body split */
.social-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: stretch;
}
@media (min-width: 960px){
  .social-body{ grid-template-columns: minmax(0, 540px) 1fr; }
}

/* Feed terminal */
.feed-terminal{
  background: #0a1a0d;
  border: 1px solid rgba(241,242,241,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.02) inset;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.ft-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(241,242,241,.1);
}
.ft-dot{
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.ft-dot--r{ background: #ff5f57; }
.ft-dot--y{ background: #febc2e; }
.ft-dot--g{ background: #28c840; }
.ft-bar-label{
  margin-left: 14px;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241,242,241,.55);
  font-weight: 600;
  flex: 1;
}
.ft-bar-live{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: .26em;
  font-weight: 700;
  color: var(--crab);
}
.ft-bar-pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crab);
  box-shadow: 0 0 0 0 rgba(224,30,36,.6);
  animation: ft-pulse 1.8s ease-out infinite;
}
@keyframes ft-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(224,30,36,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(224,30,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,30,36,0); }
}
.ft-screen{
  background: #fff;
  width: 100%;
  /* let iframe define height */
}
.ft-screen iframe{
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

/* Editorial side panel */
.social-side{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  padding-top: 4px;
}
.ss-lede{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.45;
  color: rgba(241,242,241,.86);
  margin: 0;
  max-width: 36ch;
}
.ss-lede strong{
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cream);
  background: linear-gradient(transparent 60%, rgba(224,30,36,.32) 60%);
  padding: 0 .15em;
}

/* Channel rows */
.ss-channels{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(241,242,241,.12);
  border-bottom: 1px solid rgba(241,242,241,.12);
  padding: 14px 0;
}
.ss-chan{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--cream);
  border-radius: 8px;
  transition: background .25s var(--ease), padding .25s var(--ease);
}
.ss-chan:hover{
  background: rgba(255,255,255,.04);
  padding-left: 14px;
}
.ss-chan-ico{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: #fff;
}
.ss-chan-ico--fb{ background: #1877f2; }
.ss-chan-ico--ig{ background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); }
.ss-chan-ico svg{ width: 22px; height: 22px; }
.ss-chan-tx{ display: flex; flex-direction: column; gap: 4px; flex: 1; line-height: 1; }
.ss-chan-l1{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--cream);
}
.ss-chan-l2{
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(241,242,241,.55);
  font-weight: 600;
}
.ss-chan-arrow{
  font-family: var(--f-display);
  font-size: 22px;
  color: rgba(241,242,241,.4);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.ss-chan:hover .ss-chan-arrow{
  color: var(--crab);
  transform: translateX(4px);
}

/* CTA button */
.ss-cta{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--crab);
  color: var(--cream);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px -10px rgba(224,30,36,.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ss-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -10px rgba(224,30,36,.7);
  background: #c8181d;
}
.ss-cta-arrow{
  display: inline-block;
  transition: transform .25s var(--ease);
}
.ss-cta:hover .ss-cta-arrow{ transform: translateX(4px); }

/* Footnote */
.ss-note{
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241,242,241,.45);
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 38ch;
}
.ss-note-dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crab);
  margin-top: 6px;
  flex: 0 0 auto;
}

/* =========================================================
   SPONSORS
   ========================================================= */
.sponsor-premier{
  display:grid;gap:20px;grid-template-columns:1fr;
  padding: clamp(28px, 3.5vw, 44px);
  background:#fff;border:1px solid rgba(10,26,13,.08);
  border-radius:var(--radius-card);
  margin-bottom: clamp(40px, 5vw, 64px);
  align-items:center;
}
.sponsor-premier .tag{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--crab);
  display:inline-flex;align-items:center;gap:8px;
}
.sponsor-premier .tag::before{content:"";width:20px;height:2px;background:var(--crab)}
.sponsor-premier h3{
  font-family:var(--f-display);font-weight:800;font-size:clamp(26px, 3vw, 38px);
  text-transform:uppercase;margin:.3em 0 .4em;color:var(--forest);letter-spacing:-.005em;line-height:1;
}
.sponsor-premier p{margin:0;color:#3a4a3d;font-size:15px}
.premier-logo{
  aspect-ratio: 16/10;
  background: var(--cream);
  border:1px solid rgba(10,26,13,.08);
  border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  padding: clamp(20px, 3vw, 36px);
}
.premier-logo img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Photo variant — a portrait headshot fills the frame instead of logo-style contain */
.premier-logo--photo{
  aspect-ratio: 1/1;
  background: var(--cream);
  padding: 0;
  overflow: hidden;
}
.premier-logo--photo img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
@media (min-width: 900px){.sponsor-premier{grid-template-columns: 1fr 1.4fr;gap:40px}}

/* Marquee carousel */
/* ---- Sponsor marquee: boxed logo slider ----
   Every logo lives in its own fixed-size CARD with a solid background,
   padding and a border. The logo is centred inside and scaled to fit
   with object-fit:contain — so the card physically separates each logo
   from its neighbours and overlap is impossible regardless of shape.
   Two identical groups scroll left by exactly one group + one gap, so
   the loop is mathematically seamless for ANY number of logos. */
.sponsor-marquee{
  --sm-tile-w: clamp(150px, 13vw, 164px);   /* slot width  (~160px) */
  --sm-tile-h: clamp(82px, 8vw, 92px);      /* slot height (~72px logo area + padding) */
  --sm-gap:    clamp(28px, 3.6vw, 48px);     /* space between slots (gap, no margins) */
  position: relative;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding: clamp(24px, 3.2vw, 40px) 0;
  background: #fff;
  border-top: 1px solid rgba(10,26,13,.10);
  border-bottom: 1px solid rgba(10,26,13,.10);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sm-track{
  display: flex;
  width: max-content;
  gap: var(--sm-gap);
  align-items: center;
  animation: sm-scroll 42s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.sponsor-marquee:hover .sm-track{ animation-play-state: paused; }
@keyframes sm-scroll{
  from { transform: translate3d(0, 0, 0); }
  /* one full group (-50%) + half the inter-group gap = exactly one
     group + one gap, landing group B where group A began. */
  to   { transform: translate3d(calc(-50% - (var(--sm-gap) / 2)), 0, 0); }
}
.sm-row{
  display: flex;
  align-items: center;
  gap: var(--sm-gap);
  flex: 0 0 auto;
}
.sm-tile{
  /* The separating box: fixed size, solid bg, border, padding. */
  flex: 0 0 auto;
  width: var(--sm-tile-w);
  height: var(--sm-tile-h);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(10,26,13,.12);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10,26,13,.04);
  text-decoration: none;
  color: var(--forest);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.sm-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(10,26,13,.12);
  border-color: rgba(10,26,13,.2);
}
.sm-tile img{
  /* Fit the logo inside the card's padded area on BOTH axes, aspect
     ratio preserved — it can never spill past the card edges. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(55%) contrast(1.02);
  transition: filter .3s var(--ease);
}
.sm-tile:hover img{ filter: none; }
.sm-tile--text{
  /* Text "logos" use the same card; styled to read as a wordmark. */
  flex-direction: column;
  text-align: center;
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}
.sm-tile--text .smt-name{
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--forest);
}
.sm-tile--text .smt-sub{
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: .2em;
  font-weight: 600;
  color: rgba(10,26,13,.55);
}
@media (prefers-reduced-motion: reduce){
  .sm-track{ animation: none; }
}

/* Tablet — 721–1023px */
@media (min-width: 721px) and (max-width: 1023px){
  .sponsor-marquee{ --sm-tile-w: 152px; --sm-tile-h: 88px; --sm-gap: 36px; }
  .sm-track{ animation-duration: 36s; }
}

.sponsor-foot{margin-top:32px;text-align:center}

/* ── Sponsor bar hidden state (client request 2026-06-26) ──────────────────
   Collapses the scrolling marquee AND tightens the gap it leaves behind, so the
   premier card sits neatly above the "Become a sponsor" link. Single toggle:
   remove "sponsors--bar-hidden" from <section id="sponsors"> to restore both. */
.sponsors--bar-hidden .sponsor-marquee{ display:none; }
.sponsors--bar-hidden .sponsor-premier{ margin-bottom:0; }
/* Without the marquee the section is short, so trim the big bottom padding that
   otherwise leaves a slab of white above the next section. */
.sponsors--bar-hidden{ padding-bottom: clamp(44px, 5vw, 72px); }

/* =========================================================
   FINAL CTA BAND — "Ready to be a Muddie?"
   ========================================================= */
.final-cta{
  --cta-green:      #1F7A33;
  --cta-green-deep: #0E4719;
  --cta-green-mid:  #165C26;
  background:
    radial-gradient(ellipse 80% 60% at 25% 40%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(120deg, var(--cta-green-deep) 0%, var(--cta-green-mid) 55%, var(--cta-green) 100%);
  color:var(--cream);
  padding: clamp(100px, 12vw, 170px) 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position:relative;overflow:hidden;
  isolation:isolate;
}/* Grain overlay */
.final-cta::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.4;mix-blend-mode:overlay;
}
/* Subtle diagonal highlight panel — right half catches the crab */
.final-cta::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-10%;right:-20%;width:75%;height:140%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  transform: skewX(-10deg);
}

/* THE crab — full-figure, right side, dramatic */
.cta-crab{
  position:absolute;z-index:2;pointer-events:none;
  right: -6%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: center;
  width: clamp(480px, 58vw, 820px);
  height:auto;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,.4))
    drop-shadow(0 6px 0 rgba(0,0,0,.18));
  animation: crabFloat 8s ease-in-out infinite, crabFlinch 3.2s cubic-bezier(.4,.2,.2,1) infinite;
}
@keyframes crabFloat{
  0%,100%{ translate: 0 0; }
  50%   { translate: 0 -10px; }
}
@keyframes crabFlinch{
  0%, 42%, 58%, 100% { rotate: -8deg; scale:1; }
  50%                { rotate: -10.5deg; scale:1.02; }
}

/* Ghost crab — large flipped silhouette on LEFT, slow drift */
.cta-crab--ghost{
  display:block;
  right: auto; left: -14%;
  top: 50%;
  transform: translateY(-50%) rotate(18deg) scaleX(-1);
  width: clamp(460px, 56vw, 780px);
  opacity: .085;
  filter: brightness(0) saturate(0);
  animation: crabDrift 14s ease-in-out infinite;
  z-index: 1;
  mix-blend-mode: multiply;
}
@keyframes crabDrift{
  0%,100%{ transform: translateY(-50%) rotate(18deg) scaleX(-1); }
  50%   { transform: translateY(calc(-50% + 14px)) rotate(16deg) scaleX(-1); }
}

/* Floating cricket balls — real stitched balls arcing across */
.cta-ball{
  position:absolute;z-index:1;pointer-events:none;border-radius:50%;
  background: radial-gradient(circle at 35% 32%, #FFFFFF 0%, #F1F2F1 45%, #D8D9D6 75%, #B2B3B0 100%);
  box-shadow:
    inset -2px -3px 6px rgba(0,0,0,.22),
    inset 2px 2px 4px rgba(255,255,255,.6),
    0 4px 10px rgba(0,0,0,.3);
}
.cta-ball::before{
  content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;
  background: repeating-linear-gradient(to bottom, rgba(140,20,30,.85) 0 2px, transparent 2px 5px);
  transform: translateX(-50%);
}
.cta-ball--1{ width:24px;height:24px; top:18%; left:26%; animation: ballArc1 11s ease-in-out infinite; }
.cta-ball--2{ width:14px;height:14px; top:60%; left:18%; animation: ballArc2 13s ease-in-out infinite; animation-delay:-4s; }
.cta-ball--3{ width:10px;height:10px; top:38%; left:48%; animation: ballArc3 9s  ease-in-out infinite; animation-delay:-6s; }
@keyframes ballArc1{
  0%   { transform: translate(0,0)      rotate(0deg);   opacity:0; }
  12%  { opacity:.9; }
  50%  { transform: translate(70px,-50px) rotate(200deg); opacity:.9; }
  88%  { opacity:.9; }
  100% { transform: translate(140px,20px)  rotate(380deg); opacity:0; }
}
@keyframes ballArc2{
  0%   { transform: translate(0,0)       rotate(0deg);   opacity:0; }
  15%  { opacity:.8; }
  50%  { transform: translate(-50px,-70px) rotate(-220deg); opacity:.8; }
  85%  { opacity:.8; }
  100% { transform: translate(-100px,30px) rotate(-420deg); opacity:0; }
}
@keyframes ballArc3{
  0%   { transform: translate(0,0)       rotate(0deg);   opacity:0; }
  18%  { opacity:.75; }
  50%  { transform: translate(30px,-90px)  rotate(320deg); opacity:.75; }
  82%  { opacity:.75; }
  100% { transform: translate(60px,-160px) rotate(640deg); opacity:0; }
}

/* Slow light shimmer across the whole band */
.final-cta .shimmer{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%, transparent 100%);
  background-size: 300% 100%;
  animation: shimmerMove 9s linear infinite;
}
@keyframes shimmerMove{
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce){
  .cta-crab, .cta-crab--ghost, .cta-ball, .final-cta .shimmer{ animation:none !important; }
}

.final-cta .container{position:relative;z-index:3}
.cta-content{
  max-width: 600px;
  text-align:left;
}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.3em;font-size:11px;
  color:rgba(255,255,255,.92);
  padding: 8px 16px 8px 14px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
  margin-bottom: 36px;
  border-radius: 999px;
}
.cta-eyebrow::before{
  content:"";width:6px;height:6px;background:var(--cream);border-radius:50%;
  box-shadow:0 0 0 3px rgba(241,242,241,.2);
}
.final-cta h2{
  font-family:var(--f-display);font-weight:800;
  font-size: clamp(60px, 9vw, 140px);
  line-height:.86;letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0 0 32px;
  color:var(--cream);
}
/* "Muddie?" — same family, heavier, skewed, with an ANIMATED red offset-shadow
   that breathes in and out — stays stamped/embossed, never underlined */
.final-cta h2 em{
  font-family:var(--f-display);font-style:normal;font-weight:900;
  display:inline-block;
  color: var(--cream);
  text-transform:uppercase;
  letter-spacing:-.025em;
  font-size: 1em;
  padding-right:.08em;
  transform: skewX(-8deg);
  transform-origin: left bottom;
  text-shadow:
    6px 6px 0 #E01E24,
    7px 7px 0 rgba(0,0,0,.25);
  animation: muddiePunch 3.2s cubic-bezier(.4,.2,.2,1) infinite;
}
@keyframes muddiePunch{
  0%   { transform: skewX(-8deg) translate(0,0);       text-shadow: 6px 6px 0 #E01E24, 7px 7px 0 rgba(0,0,0,.25); }
  42%  { transform: skewX(-8deg) translate(0,0);       text-shadow: 6px 6px 0 #E01E24, 7px 7px 0 rgba(0,0,0,.25); }
  50%  { transform: skewX(-11deg) translate(-3px,-2px); text-shadow: 12px 12px 0 #E01E24, 14px 14px 0 rgba(0,0,0,.3); }
  58%  { transform: skewX(-8deg) translate(0,0);       text-shadow: 6px 6px 0 #E01E24, 7px 7px 0 rgba(0,0,0,.25); }
  100% { transform: skewX(-8deg) translate(0,0);       text-shadow: 6px 6px 0 #E01E24, 7px 7px 0 rgba(0,0,0,.25); }
}
@media (prefers-reduced-motion: reduce){
  .final-cta h2 em{ animation:none }
}
.final-cta .sub{
  font-family:var(--f-body);
  font-size: clamp(17px, 1.5vw, 20px);
  color:rgba(255,255,255,.88);
  max-width:420px;
  margin: 0 0 40px;
  line-height:1.55;
}
.cta-row{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.final-cta .btn{
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.5);
}
.final-cta .vouchers{
  margin:0;
  font-size:11.5px;color:rgba(255,255,255,.8);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.22em;
  display:inline-flex;align-items:center;gap:10px;line-height:1.3;
  max-width: 220px;
}
.final-cta .vouchers::before{
  content:"✓";font-family:var(--f-body);font-size:11px;
  width:22px;height:22px;min-width:22px;
  display:inline-flex;align-items:center;justify-content:center;
  background: var(--cream);color: var(--cta-green);border-radius:50%;
  font-weight:700;letter-spacing:0;
}

/* Responsive tuning */
@media (max-width: 900px){
  .final-cta{padding: 80px 0 clamp(340px, 70vw, 460px)}
  .cta-content{max-width:100%;position:relative;z-index:4}
  .cta-crab{
    right:-10%;left:auto;top:auto;bottom: 0;
    transform: rotate(-6deg);
    width: min(100%, 540px);
  }
  @keyframes crabFloat{
    0%,100%{transform: rotate(-6deg)}
    50%{transform: translateY(-6px) rotate(-5deg)}
  }
  .final-cta h2{font-size: clamp(54px, 13vw, 88px)}
  .cta-row{flex-direction:column;align-items:flex-start;gap:20px}
  .final-cta .vouchers{max-width:100%}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--forest-deep);color:var(--cream);
  padding: 72px 0 28px;
}
.foot-grid{
  display:grid;gap: 36px;
  grid-template-columns:1fr;
}
.foot-col h5{
  font-family:var(--f-display);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--cream);margin:0 0 16px;
  opacity:.6;
}
.foot-col a{display:block;padding:5px 0;font-size:15px;color:rgba(241,242,241,.85)}
.foot-col a:hover{color:var(--crab)}
.foot-brand .motto{
  font-family:var(--f-serif);font-style:italic;font-size:20px;
  color:var(--cream);margin:16px 0;line-height:1.3;
}
.foot-brand .addr{font-size:14px;color:rgba(241,242,241,.7);line-height:1.55}
.foot-brand .logo-row{display:flex;align-items:center;gap:12px}
.foot-brand .logo-row img{height:54px;width:auto}
.foot-brand .logo-row span{
  font-family:var(--f-display);font-weight:800;
  font-size:22px;letter-spacing:.12em;text-transform:uppercase;
}
.foot-socials{display:flex;gap:10px;margin-top:8px}
.foot-socials a{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(241,242,241,.06);border:1px solid rgba(241,242,241,.15);
  border-radius:8px;padding:0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.foot-socials a:hover{background:var(--crab);border-color:var(--crab)}
.foot-socials svg{width:18px;height:18px}
.foot-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(241,242,241,.1);
  text-align:center;font-size:12px;color:rgba(241,242,241,.5);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.22em;
}

@media (min-width: 720px){.foot-grid{grid-template-columns: 1.4fr 1fr 1fr 1fr}}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition: opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   PLACEHOLDER IMAGES (SVG-as-bg)
   ========================================================= */
.ph-hero{
  background:
    linear-gradient(180deg, rgba(19,50,25,.35), rgba(10,26,13,.75)),
    radial-gradient(ellipse at 40% 60%, rgba(41,148,66,.25), transparent 60%),
    linear-gradient(135deg, #0f2814 0%, #1e4a29 40%, #133219 100%);
  width:100%;height:100%;
  position:relative;
}
.ph-hero::before{
  /* faint pitch lines */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0) 30%, rgba(0,0,0,.4) 100%),
    repeating-linear-gradient(78deg, rgba(41,148,66,.08) 0 2px, transparent 2px 32px);
}
.ph-hero::after{
  /* crowd-ish dot texture bottom */
  content:"";position:absolute;inset:auto 0 0 0;height:35%;
  background-image: radial-gradient(circle, rgba(10,26,13,.8) 1px, transparent 1.5px);
  background-size: 6px 6px;
  opacity:.25;
}

.ph-gal{
  width:100%;height:100%;
  background-size: cover;background-position:center;
}
.ph-1{background: linear-gradient(135deg,#1e4a29,#0a1a0d), radial-gradient(ellipse at 30% 40%, rgba(224,30,36,.15), transparent 50%)}
.ph-2{background: linear-gradient(200deg,#299442,#133219)}
.ph-3{background: linear-gradient(160deg,#0a1a0d,#1e4a29 60%,#E01E24 160%)}
.ph-4{background: linear-gradient(45deg,#133219,#0a1a0d)}
.ph-5{background: linear-gradient(120deg,#1e4a29,#299442)}
.ph-6{background: linear-gradient(60deg,#0a1a0d,#1e4a29)}
.ph-7{background: linear-gradient(180deg,#299442,#0a1a0d)}
.ph-8{background: linear-gradient(135deg,#E01E24 -50%,#133219 50%)}

/* =========================================================
   PINNED CLUB NOTICE (news section)
   ========================================================= */
.fb-pin{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--cream);color:var(--ink);
  border-radius:14px;
  border-left:5px solid var(--crab);
  padding:22px 26px;
  margin:0 0 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.fb-pin-body{flex:1 1 320px}
.fb-pin-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--crab);
  margin-bottom:8px;
}
.fb-pin-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--crab)}
.fb-pin-body h3{
  margin:0 0 6px;font-family:var(--f-display);font-weight:800;
  font-size:clamp(20px,2.4vw,26px);line-height:1.1;text-transform:uppercase;color:var(--forest);
}
.fb-pin-body p{margin:0;font-size:15px;color:rgba(10,26,13,.72)}
.fb-pin .fb-pin-btn{flex:0 0 auto}

/* =========================================================
   POLISH PASS — sizing & placement rhythm
   Tightens shared spacing tokens and caps display sizes.
   Append-only; respects existing rules via specificity.
   ========================================================= */

/* Cap display headlines on ultra-wide so they don't blow out */
@media (min-width: 1600px){
  .section-head h2{ font-size: clamp(56px, 4.4vw, 84px); }
  .hero h1{ font-size: clamp(72px, 6.5vw, 132px); }
  .sn-headline{ font-size: clamp(56px, 4.6vw, 88px); }
  .sh-title{ font-size: clamp(64px, 5.5vw, 104px); }
  .cta-content h2{ font-size: clamp(64px, 5.8vw, 116px); }
}

/* Normalize section header rhythm */
.section-head{ max-width: 920px; }
.section-head .eyebrow{ margin-bottom: 14px; }
.section-head h2{ margin-top: 0; }
.section-head p,
.section-head .lede{
  max-width: 60ch;
  margin-top: 16px;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--muted);
  line-height: 1.6;
}
.section.dark .section-head p,
.section.dark .section-head .lede{ color: rgba(241,242,241,.72); }

/* Prose readability cap — any paragraph following a heading inside a section */
.section p{ max-width: 64ch; }
.section.dark p{ max-width: 64ch; }

/* Button row spacing — when 2+ buttons sit together */
.btn-row,
.hero-cta-row,
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.btn-row.spaced{ gap: 18px; }

/* Eyebrow vertical alignment with headline */
.eyebrow + h2,
.eyebrow + h1,
.eyebrow + .sn-headline,
.eyebrow + .sh-title{
  margin-top: 18px;
}

/* Tighter card body rhythm in scoreboard tiles */
.sb-tile{ padding: clamp(20px, 2vw, 28px); }
.sb-tile-head{ margin-bottom: 14px; }
.sb-meta{ margin-top: 14px; font-size: 12px; letter-spacing: .14em; }

/* Seniors hero — vertical alignment polish */
@media (min-width: 880px){
  .sn-statement{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Seniors fixtures — consistent row rhythm */
.sn-fixtures{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sn-fixtures li{
  padding: 14px 0;
  border-top: 1px solid rgba(241,242,241,.14);
}
.sn-fixtures li:last-child{ border-bottom: 1px solid rgba(241,242,241,.14); }

/* Seniors footer — local rule handles spacing; nothing to override here */

/* Social section — header row breathing */
.social-head{ align-items: end; }
@media (min-width: 880px){
  .sh-handle{ align-self: end; margin-bottom: 8px; }
}

/* Footer rhythm */
.site-footer{
  padding: clamp(64px, 8vw, 96px) 0 clamp(32px, 4vw, 48px);
}
.foot-grid{
  gap: clamp(32px, 4vw, 56px);
}
.foot-grid h6{
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--cream);
  opacity: .7;
}
.foot-grid li{ margin: 6px 0; line-height: 1.5; }

/* Marquee — consistent vertical air */
.marquee{
  padding: 18px 0;
  font-size: 14px;
  letter-spacing: .12em;
}

/* Final CTA — center-balance the content vertically */
.final-cta{
  justify-content: center;
}
.cta-content{
  max-width: 880px;
  margin: 0 auto;
}
.cta-content h2{ margin: 0 0 20px; }
.cta-content p{ margin: 0 0 32px; max-width: 56ch; }

/* Small consistent eyebrow→element gap inside cards */
.fb-card .eyebrow,
.sb-tile .eyebrow{ margin-bottom: 10px; }

/* Reveal animation — keep transition tidy */
.reveal{ transition-timing-function: var(--ease); }
html, body{ overflow-x: hidden; }
*, *::before, *::after{ max-width: 100%; }
/* Exempt marquees from the global max-width — they need to overflow.
   NOTE: the sponsor slider's track + rows must size to max-content, but
   we intentionally do NOT exempt `.sm-tile img` — those keep max-width:100%
   so every logo stays contained inside its card (no overflow/overlap). */
.chyron,
.chyron-marquee,
.chyron-marquee *,
.marquee,
.marquee-track,
.marquee-track *,
.sponsor-marquee .sm-track,
.sponsor-marquee .sm-row{ max-width: none !important; }

@media (max-width: 720px){
  /* General containers: tighter side padding */
  .container,
  .wrap,
  .sn-wrap,
  .social-wrap,
  .scoreboard-wrap,
  .footer-wrap,
  .ground-wrap{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Section vertical rhythm — compress */
  .section,
  .seniors-sec,
  .social-sec,
  .scoreboard-sec,
  .ground-sec,
  .gallery-sec,
  .final-cta,
  .pathway-sec,
  .scores-sec{
    padding-top: clamp(56px, 14vw, 88px);
    padding-bottom: clamp(56px, 14vw, 88px);
  }

  /* Display headlines — keep punch but cap size */
  h1, .hero h1{
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: .95;
  }
  h2{
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: .98;
  }
  h3{ font-size: clamp(22px, 6vw, 30px) !important; }

  /* Body copy: don't go below 15px */
  p{ font-size: 15px; line-height: 1.55; }

  /* Eyebrows: slightly tighter */
  .eyebrow{ font-size: 11px; letter-spacing: .22em; }

  /* Stack any 2-col splits */
  .broadcast-foot,
  .broadcast-head,
  .social-body,
  .sn-hero,
  .sn-foot,
  .ground-grid,
  .footer-cols,
  .pathway,
  .scores-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Hero — keep crab + headline readable */
  .hero{ min-height: 90vh; padding-top: 100px; padding-bottom: 60px; }
  .hero-eyebrow{ font-size: 11px; }
  .hero-cta-row{ flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta-row a{ width: 100%; justify-content: center; }

  /* Buttons */
  .cta, .btn, .ss-cta, .sn-cta, .broadcast-cta{
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    font-size: 14px;
  }

  /* Scoreboard section — single column tiles */
  .scoreboard-grid{
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .sb-tile--hero{ grid-column: auto !important; }
  .sb-hero-score{ font-size: clamp(56px, 16vw, 88px) !important; }
  .sb-photo-strip{ display: none; } /* portrait collage too cramped on mobile */
  .scoreboard-row{ grid-template-columns: 1fr !important; gap: 18px; }

  /* Broadcast / commentator */
  .commentator-wrap{ justify-content: center; margin: 0 auto; }
  .commentator-crab{ max-width: 300px !important; }
  .broadcast-head{ text-align: center; }
  .broadcast-head .bh-text{ align-items: center; }
  .chyron{ font-size: 12px; }
  .chyron-badge{ font-size: 10px; letter-spacing: .18em; padding: 6px 10px; }

  /* Seniors hero image */
  .sn-image img{ aspect-ratio: 4/5; object-fit: cover; }
  .sn-headline{ font-size: clamp(40px, 11vw, 64px) !important; }
  .sn-fixtures li{
    grid-template-columns: 60px 1fr !important;
    gap: 4px 14px;
    padding: 14px 0;
  }
  .sn-fx-meta{ grid-column: 2; font-size: 12px; }
  .sn-cta-block{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .sn-price{ text-align: center; }

  /* Social feed terminal */
  .social-head{ grid-template-columns: 1fr !important; align-items: start; }
  .sh-handle{ align-self: flex-start; padding: 10px 14px; }
  .feed-terminal{ max-width: 100%; }
  .ft-screen iframe{ height: 600px; }
  .ss-lede{ font-size: 18px; }
  .ss-chan{ padding: 14px 6px; gap: 14px; }
  .ss-chan-ico{ width: 38px; height: 38px; }
  .ss-chan-l1{ font-size: 15px; }

  /* Ground / facilities */
  .ground-map{ aspect-ratio: 4/3; }
  .facilities{ grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Gallery — single column stack */
  .gallery{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px;
  }
  .gallery .gal-item{
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4/3;
  }

  /* Scrapbook collage — already responsive but tighten */
  .scrapbook{ max-width: 100%; }

  /* Final CTA */
  .final-cta{ padding: 80px 20px clamp(280px, 60vw, 380px); }
  .cta-content h2{ font-size: clamp(40px, 12vw, 64px) !important; }

  /* Footer */
  .foot-grid{ grid-template-columns: 1fr !important; gap: 32px; }
}

/* Extra-small phones */
@media (max-width: 420px){
  .container, .wrap, .sn-wrap, .social-wrap,
  .scoreboard-wrap, .footer-wrap, .ground-wrap{
    padding-left: 16px;
    padding-right: 16px;
  }
  h1, .hero h1{ font-size: clamp(36px, 11vw, 52px) !important; }
  h2{ font-size: clamp(30px, 9vw, 44px) !important; }
  .sb-hero-score{ font-size: 56px !important; }
  .commentator-crab{ max-width: 230px !important; }
  .ft-screen iframe{ height: 520px; }
}

/* =========================================================
   MOBILE POLISH FIXES
   - Kill cream overscroll bezel at top of viewport
   - Stop the final-CTA crab from sitting under the Register button
   - Tighten sponsor marquee on small screens
   ========================================================= */

/* iOS / Android overscroll above the hero must show forest-deep, not cream */
html{ background: var(--forest-deep); }

@media (max-width: 900px){
  /* Don't centre the CTA content vertically — push it to the top so the
     crab below has its own clear space at the bottom of the section. */
  .final-cta{
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(72px, 14vw, 110px);
    padding-bottom: clamp(360px, 78vw, 520px);
  }
  /* Constrain crab and lock it to the bottom corner so the figure
     never crosses into the headline or the buttons. */
  .cta-crab{
    width: min(86%, 420px);
    right: -8%;
    bottom: -2%;
    top: auto;
    transform: rotate(-6deg);
  }
  .cta-crab--ghost{
    width: min(80%, 380px);
    left: -18%;
    bottom: 4%;
    top: auto;
    transform: rotate(14deg) scaleX(-1);
  }
  /* Make sure the buttons / vouchers row clears the crab visually. */
  .cta-content{ padding-bottom: 12px; }
}

@media (max-width: 720px){
  /* Sponsor marquee — smaller cards, faster scroll */
  .sponsor-marquee{
    --sm-tile-w: 134px;
    --sm-tile-h: 80px;
    --sm-gap: 24px;
    padding: 18px 0;
  }
  .sm-track{ animation-duration: 30s; }
  .sm-tile{ padding: 10px 14px; border-radius: 12px; }
  .sm-tile--text .smt-name{ font-size: 16px; }
  .sm-tile--text .smt-sub{ font-size: 9.5px; letter-spacing: .16em; margin-top: 6px; }
}

@media (max-width: 420px){
  .sponsor-marquee{ --sm-tile-w: 116px; --sm-tile-h: 74px; --sm-gap: 18px; }
  .sm-tile{ padding: 9px 12px; }
  .sm-tile--text .smt-name{ font-size: 14px; }
}

/* =========================================================
   MATCH CENTRE — broadcast scoreboard (#playhq-embed)
   Floodlit night-cricket look: ink-black glass panels that lift
   off the green section, amber "LED" score digits, result-coded
   rails (green win / red loss / amber upcoming / live pulse).
   CSS-only rework — class names match match-centre.js.
   ========================================================= */
.mc{ display:flex; flex-direction:column; gap:22px;
  --ink:#05100a; --panel-top:#1c4329; --panel-bot:#11291a;
  --amber:#ffce4d; --amber-glow:rgba(255,206,77,.3);
  --win:#4ade8a; --loss:#ff6b70; --up:#ffce4d;
  --hair:rgba(241,242,241,.12);
}

/* top bar: team selector + view toggle */
.mc-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--hair);
}
.mc-teams{ display:flex; flex-wrap:wrap; gap:9px; }
.mc-pill{
  font-family:var(--f-display); font-weight:700; font-size:13px;
  letter-spacing:.04em; cursor:pointer;
  color:rgba(241,242,241,.74); background:rgba(241,242,241,.04);
  border:1px solid var(--hair); border-radius:999px;
  padding:8px 16px; display:inline-flex; align-items:center; gap:8px;
  transition:all .2s var(--ease);
}
.mc-pill:hover{ color:var(--cream); border-color:rgba(241,242,241,.32); transform:translateY(-1px); }
.mc-pill.on{ background:linear-gradient(180deg,#f5444a,var(--crab)); border-color:var(--crab); color:#fff;
  box-shadow:0 8px 20px -8px rgba(224,30,36,.7); }
.mc-toggle{ display:inline-flex; background:rgba(0,0,0,.34); border:1px solid var(--hair); border-radius:999px; padding:3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4); }
.mc-toggle button{
  font-family:var(--f-display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; border:0; background:transparent; color:rgba(241,242,241,.6);
  padding:7px 17px; border-radius:999px; transition:all .2s var(--ease);
}
.mc-toggle button.on{ background:linear-gradient(180deg,#fff,#e7e9e6); color:var(--forest-deep);
  box-shadow:0 3px 10px -3px rgba(0,0,0,.5); }

.mc-panel{ position:relative; }

/* live dot */
.mc-livedot{ width:7px; height:7px; border-radius:50%; background:var(--loss); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,91,96,.6); animation:onair-pulse 1.4s ease-out infinite; }
.mc-livedot.mc-static{ animation:none; box-shadow:none; background:var(--crab); }

/* ── timeline ── */
.mc-timeline{
  position:relative; display:flex; flex-direction:column; gap:14px;
  max-height:clamp(440px, 68vh, 660px); overflow-y:auto;
  padding:6px 6px 6px 0; scrollbar-width:thin; scrollbar-color:rgba(241,242,241,.2) transparent;
}
.mc-timeline::-webkit-scrollbar{ width:8px; }
.mc-timeline::-webkit-scrollbar-thumb{ background:rgba(241,242,241,.16); border-radius:8px; }
/* spine sits under the result rail, dimmer */
.mc-spine{ position:absolute; left:6px; top:12px; bottom:12px; width:3px; border-radius:3px; background:rgba(241,242,241,.07); }

.mc-game{
  position:relative; text-align:left; cursor:pointer; width:100%; isolation:isolate;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"rounds rounds" "teams teams" "meta meta";
  gap:11px 14px; padding:17px 20px 17px 26px; overflow:hidden;
  background:linear-gradient(158deg, var(--panel-top), var(--panel-bot) 75%);
  border:1px solid rgba(241,242,241,.14); border-radius:16px;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  color:var(--cream); transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* result-coded left rail (replaces the plain node) */
.mc-game::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:rgba(241,242,241,.18);
}
.mc-win::before{ background:linear-gradient(180deg, var(--win), #1c7d49); box-shadow:0 0 18px -2px rgba(63,216,132,.5); }
.mc-loss::before{ background:linear-gradient(180deg, var(--loss), #a01c20); box-shadow:0 0 18px -2px rgba(255,91,96,.5); }
.mc-upcoming::before{ background:linear-gradient(180deg, var(--up), #b07e10); }
.mc-draw::before,.mc-na::before{ background:rgba(241,242,241,.22); }
.mc-live::before{ background:linear-gradient(180deg,#ff7a7e,var(--loss)); box-shadow:0 0 22px 0 rgba(255,91,96,.7); animation:mc-railpulse 1.6s ease-in-out infinite; }
@keyframes mc-railpulse{ 50%{ box-shadow:0 0 30px 3px rgba(255,91,96,.95); } }
.mc-game:hover{ transform:translateY(-3px); border-color:rgba(241,242,241,.24);
  box-shadow:0 22px 42px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07); }
/* node retained for the focus card's glow halo only */
.mc-node{ display:none; }

.mc-g-rounds{ grid-area:rounds; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-round{ font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(241,242,241,.5); }
.mc-chip{ font-family:var(--f-display); font-weight:800; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; }
.mc-chip--win{ color:#bff3d3; background:rgba(63,216,132,.14); border-color:rgba(63,216,132,.3); }
.mc-chip--loss{ color:#ffb3b5; background:rgba(255,91,96,.13); border-color:rgba(255,91,96,.3); }
.mc-chip--draw,.mc-chip--na{ color:rgba(241,242,241,.62); background:rgba(241,242,241,.07); border-color:rgba(241,242,241,.16); }
.mc-chip--upcoming{ color:#ffd987; background:rgba(255,194,51,.12); border-color:rgba(255,194,51,.3); }
.mc-chip--live{ color:#fff; background:rgba(255,91,96,.22); border-color:rgba(255,91,96,.5); }

.mc-g-teams{ grid-area:teams; display:flex; flex-direction:column; gap:9px; }
.mc-g-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mc-tn{ font-family:var(--f-display); font-weight:800; font-size:19px; line-height:1.05; letter-spacing:-.01em; color:var(--cream);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
.mc-away .mc-tn{ color:rgba(241,242,241,.9); font-weight:700; }
.mc-sc{ font-family:var(--f-display); font-weight:800; font-size:25px; color:var(--cream); font-variant-numeric:tabular-nums; flex:0 0 auto;
  letter-spacing:.01em; }
.mc-away .mc-sc{ color:var(--cream); }
/* winner's score lights up amber — both scores stay fully legible */
.mc-win  .mc-g-row:not(.mc-away) .mc-sc,
.mc-loss .mc-g-row.mc-away      .mc-sc{ color:var(--amber); text-shadow:0 0 16px var(--amber-glow); }
.mc-g-meta{ grid-area:meta; font-family:var(--f-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(241,242,241,.42); border-top:1px dashed rgba(241,242,241,.1); padding-top:11px; }

/* focus (live / current) game — enlarged centre card, the broadcast hero */
.mc-game.is-focus{
  padding:26px 26px 20px 30px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,194,51,.16), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(224,30,36,.14), transparent 60%),
    linear-gradient(160deg,#16331f,#06140c);
  border-color:rgba(255,194,51,.32);
  box-shadow:0 28px 60px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
}
.mc-game.is-focus::before{ width:6px; }
.mc-game.is-focus .mc-tn{ font-size:clamp(22px,3.2vw,30px); }
.mc-game.is-focus .mc-sc{ font-size:clamp(38px,5.4vw,58px); line-height:.9; }
.mc-game.is-focus .mc-g-row:not(.mc-away) .mc-sc,
.mc-game.is-focus.mc-na .mc-sc,
.mc-game.is-focus.mc-draw .mc-sc{ color:var(--amber); text-shadow:0 0 28px var(--amber-glow); }
.mc-game.is-focus .mc-away .mc-sc{ color:rgba(255,194,51,.5); text-shadow:none; }
.mc-game.is-focus.mc-loss .mc-g-row.mc-away .mc-sc{ color:var(--amber); text-shadow:0 0 28px var(--amber-glow); }
.mc-game.is-focus.mc-loss .mc-g-row:not(.mc-away) .mc-sc{ color:rgba(255,194,51,.5); text-shadow:none; }
.mc-game.mc-live.is-focus{ border-color:rgba(255,91,96,.5); }

/* ── ladder ── */
.mc-ladder-wrap{ background:linear-gradient(158deg,var(--panel-top),var(--panel-bot) 70%); border:1px solid rgba(241,242,241,.09); border-radius:16px; padding:8px 6px; overflow-x:auto;
  box-shadow:0 12px 28px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.mc-ladder{ width:100%; border-collapse:collapse; font-family:var(--f-body); color:var(--cream); min-width:460px; }
.mc-ladder th{ font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,242,241,.45); text-align:center; padding:13px 8px; border-bottom:1px solid rgba(241,242,241,.14); }
.mc-ladder th.mc-ld-team{ text-align:left; padding-left:14px; }
.mc-ladder td{ text-align:center; padding:12px 8px; font-size:14px; font-variant-numeric:tabular-nums; border-bottom:1px solid rgba(241,242,241,.06); }
.mc-ladder tbody tr{ transition:background .2s var(--ease); }
.mc-ladder tbody tr:hover td{ background:rgba(241,242,241,.04); }
.mc-ladder tr:last-child td{ border-bottom:0; }
.mc-pos{ color:rgba(241,242,241,.5); font-weight:700; }
.mc-ld-team{ text-align:left !important; padding-left:14px !important; font-family:var(--f-display); font-weight:700; font-size:15px;
  display:flex; align-items:center; gap:8px; }
.mc-pts{ font-weight:800; color:var(--amber); }
.mc-ladder tr.mc-is-muddies td{ background:linear-gradient(90deg, rgba(224,30,36,.2), rgba(224,30,36,.07)); }
.mc-ladder tr.mc-is-muddies .mc-ld-team{ color:var(--amber); }
.mc-ladder tr.mc-is-muddies .mc-pts{ color:#fff; }
.mc-ladder tr.mc-is-muddies td:first-child{ box-shadow:inset 4px 0 0 var(--crab); }
.mc-ld-foot{ font-family:var(--f-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(241,242,241,.4); padding:12px 14px 6px; }
.mc-ld-foot a{ color:var(--amber); }

/* ── empty / fallback ── */
.mc-empty{ text-align:center; color:rgba(241,242,241,.55); padding:40px 20px; font-family:var(--f-body); }
.mc-empty.mc-sm{ padding:16px; font-size:13px; }
.mc-fallback{ display:flex; flex-direction:column; align-items:center; gap:14px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,194,51,.14), transparent 60%),
    linear-gradient(158deg,var(--panel-top),var(--panel-bot) 70%);
  border:1px solid rgba(241,242,241,.1); border-radius:16px; padding:44px 24px;
  box-shadow:0 12px 28px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.mc-fallback h3{ font-family:var(--f-display); font-weight:900; font-size:clamp(24px,4vw,34px); color:var(--cream); }
.mc-fallback p{ max-width:48ch; }
.mc-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:700; letter-spacing:.04em;
  text-decoration:none; color:#fff; background:linear-gradient(180deg,#f5444a,var(--crab)); border:1px solid var(--crab); padding:12px 22px; border-radius:10px;
  box-shadow:0 8px 20px -8px rgba(224,30,36,.7); transition:all .2s var(--ease); }
.mc-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(224,30,36,.8); }

/* ── detail modal ── */
.mc-overlay{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(7,20,11,.78); backdrop-filter:blur(6px); }
.mc-overlay.open{ display:flex; animation:mc-fade .2s var(--ease); }
@keyframes mc-fade{ from{opacity:0} to{opacity:1} }
.mc-dialog{ width:min(640px,100%); max-height:88vh; overflow-y:auto; border-radius:18px; padding:clamp(20px,4vw,34px);
  background:radial-gradient(700px 320px at 110% -10%, rgba(224,30,36,.14), transparent 60%), linear-gradient(180deg,#102b18,#071b0d);
  border:1px solid rgba(224,30,36,.28); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); color:var(--cream);
  scrollbar-width:thin; animation:mc-pop .25s var(--ease); }
@keyframes mc-pop{ from{transform:translateY(12px); opacity:0} to{transform:translateY(0); opacity:1} }
.mc-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mc-close{ cursor:pointer; border:1px solid rgba(241,242,241,.18); background:rgba(241,242,241,.06); color:var(--cream);
  width:34px; height:34px; border-radius:50%; font-size:14px; line-height:1; transition:all .2s var(--ease); }
.mc-close:hover{ background:var(--crab); border-color:var(--crab); color:#fff; }
.mc-score-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-bottom:14px; }
.mc-sg-team{ display:flex; flex-direction:column; gap:8px; }
.mc-sg-team.away{ text-align:right; }
.mc-sg-name{ font-family:var(--f-display); font-weight:800; font-size:clamp(16px,2.4vw,22px); line-height:1.05; color:var(--cream); }
.mc-sg-team.away .mc-sg-name{ color:rgba(241,242,241,.7); }
.mc-sg-score{ font-family:var(--f-display); font-weight:900; font-size:clamp(42px,8vw,68px); line-height:.9; font-variant-numeric:tabular-nums; color:var(--cream); }
.mc-sg-score.win{ color:#ffb700; text-shadow:0 0 22px rgba(255,183,0,.3); }
.mc-sg-team.away .mc-sg-score{ color:rgba(241,242,241,.6); }
.mc-sg-v{ font-family:var(--f-display); font-weight:700; color:rgba(241,242,241,.35); font-size:14px; letter-spacing:.2em; }
.mc-resultline{ text-align:center; font-family:var(--f-display); font-weight:700; font-size:clamp(15px,2.2vw,19px); color:rgba(241,242,241,.8); }
.mc-resultline b{ color:#a7e8bd; } .mc-resultline .mc-loss{ color:#ff9a9d; } .mc-livetxt{ color:#ff5a5f; }
.mc-modal-meta{ text-align:center; font-family:var(--f-display); font-size:12px; letter-spacing:.06em; color:rgba(241,242,241,.5);
  margin-top:12px; padding-top:14px; border-top:1px solid rgba(241,242,241,.12); }
.mc-modal-meta .mc-sep{ margin:0 8px; opacity:.4; }
.mc-squads{ margin-top:18px; }
.mc-squads h4{ font-family:var(--f-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(241,242,241,.6); margin-bottom:12px; }
.mc-squads .mc-note{ display:block; font-size:10px; letter-spacing:.02em; text-transform:none; color:rgba(241,242,241,.38); margin-top:3px; }
.mc-squad-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:520px){ .mc-squad-cols{ grid-template-columns:1fr; } }
.mc-squad-cols h5{ font-family:var(--f-display); font-weight:800; font-size:15px; color:var(--cream); margin-bottom:8px; }
.mc-squad{ list-style:none; counter-reset:p; display:flex; flex-direction:column; gap:3px; padding:0; }
.mc-squad li{ counter-increment:p; display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:7px;
  background:rgba(241,242,241,.04); font-size:13px; font-family:var(--f-body); }
.mc-squad li::before{ content:counter(p); width:16px; text-align:right; color:rgba(241,242,241,.35); font-size:11px; font-variant-numeric:tabular-nums; }
.mc-squad li span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-role{ margin-left:auto; font-family:var(--f-display); font-size:9px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:4px; }
.mc-role.c{ background:rgba(41,148,66,.2); color:#a7e8bd; }
.mc-role.wk{ background:rgba(255,183,0,.16); color:#ffcf5a; }
.mc-role.fi{ background:rgba(241,242,241,.08); color:rgba(241,242,241,.45); }
.mc-innings{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; font-size:13px; color:rgba(241,242,241,.7); }
.mc-innings b{ color:var(--cream); margin-right:6px; }
.mc-dialog .mc-btn{ margin-top:18px; width:100%; justify-content:center; }

/* ── club logos ── */
.mc-logo{ position:relative; flex:0 0 auto; width:28px; height:28px; border-radius:7px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(241,242,241,.1); color:rgba(241,242,241,.65);
  font-family:var(--f-display); font-weight:800; font-size:12px; line-height:1; }
.mc-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.mc-logo--sm{ width:24px; height:24px; border-radius:6px; font-size:11px; }
.mc-logo--lg{ width:54px; height:54px; border-radius:13px; font-size:22px; }
.mc-game.is-focus .mc-logo{ width:34px; height:34px; border-radius:9px; font-size:14px; }
.mc-ld-team .mc-logo{ flex:0 0 auto; }
.mc-sg-team .mc-logo--lg{ margin-bottom:6px; }
.mc-sg-team.away{ align-items:flex-end; }
.mc-sg-team:not(.away){ align-items:flex-start; }

/* ════════════════════════════════════════════════════════════════════════
   GPU-flicker fix (2026-06-25)
   --------------------------------------------------------------------------
   On Windows/Chromium, `backdrop-filter: blur()` and `mix-blend-mode` force
   the compositor to repaint the whole blurred/blended region every frame that
   anything animates or scrolls underneath. With this many always-on
   animations that showed up as flickering "bits" across the page ("monitor
   goes weird"). This block removes those two effects from the decorative
   elements while keeping the look as close as possible. Purely cosmetic —
   delete this whole block to revert.
   ════════════════════════════════════════════════════════════════════════ */

/* 1 — remove backdrop blurs (the #1 flicker cause on Windows) … */
.hero-badge,
.sn-statbar,
.cf-lightbox,
.cta-eyebrow,
.mc-overlay{
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
/* … and firm up the backgrounds so the panels still read as solid glass */
.hero-badge{ background: rgba(10,26,13,.62); }
.sn-statbar{ background: rgba(10,26,13,.82); }
.cta-eyebrow{ background: rgba(0,0,0,.42); }
.cf-lightbox{ background: rgba(10,26,13,.96); }
.mc-overlay{ background: rgba(7,20,11,.92); }

/* 2 — stop the page-wide grain/noise overlays from blend-compositing every
       frame; keep a faint static texture via reduced opacity */
.hero-grain,
.noise::after,
.final-cta::before,
.welcome-sec .welcome-paper,
.scrapbook::before{
  mix-blend-mode: normal !important;
}
.hero-grain{ opacity: .06; }
.noise::after{ opacity: .05; }
.final-cta::before{ opacity: .06; }
.welcome-sec .welcome-paper{ opacity: .5; }
.scrapbook::before{ opacity: .25; }