/* =====================================================================
   ARIZONA SPORTS COMPLEX — shared design system
   Look: UCFB-inspired (Montserrat + Rock Salt, skewed italic, self-draw
   line art) rebuilt in ASC brand (red on white, dark image sections).
===================================================================== */
:root{
  --red:#E23A2E; --red-2:#F0463A; --red-ink:#fff;
  --ink:#131316; --ink-2:#3a3a40; --muted:#6d6d74; --faint:#9a9aa0;
  --paper:#ffffff; --paper-2:#f4f4f2; --paper-3:#ecece9;
  --line:#e4e4e0; --line-2:#d7d7d2;
  --dark:#0d0d0f; --dark-2:#17171a;
  --disp:'Montserrat',system-ui,sans-serif; --sans:'Montserrat',system-ui,sans-serif; --hand:'Rock Salt',cursive;
  --wrap:1200px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{position:relative}

/* ---------- type ---------- */
.eyebrow{font-family:var(--hand);color:var(--red);font-size:clamp(18px,2.6vw,24px);line-height:1.05;display:inline-block;margin-bottom:18px;transform:rotate(-2deg);
  -webkit-text-stroke:.45px currentColor;text-stroke:.45px currentColor}
.display{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.94;letter-spacing:-.01em}
h1.display{font-size:clamp(44px,8vw,104px)}
h2.display{font-size:clamp(34px,5.5vw,68px)}
h3.display{font-size:clamp(22px,3vw,30px)}
.red{color:var(--red)}
.lead{font-size:clamp(16px,2vw,19px);color:var(--ink-2);font-weight:500;max-width:56ch}

/* ---------- buttons (clean diagonal edges via clip-path, angle matched to the header) ---------- */
.btn{--o:22px;position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 32px;
  font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:14px;letter-spacing:.02em;
  background:var(--red);color:var(--red-ink);cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  clip-path:polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%)}
.btn>*{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--red-2);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}
.btn.sm{--o:17px;padding:12px 22px;font-size:12.5px}
/* ghost = clean parallelogram outline built from TWO nested parallelograms
   (outer = outline colour, inner ::before = fill colour). No corner artifacts. */
.btn.ghost{background:var(--ink);color:var(--ink)}
.btn.ghost::before{content:'';position:absolute;inset:2px;z-index:0;background:var(--paper);transition:opacity .2s var(--ease);
  clip-path:polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%)}
.btn.ghost:hover{color:#fff;transform:translateY(-2px)}
.btn.ghost:hover::before{opacity:0}
.btn.on-dark.ghost{background:#fff;color:#fff}
.btn.on-dark.ghost::before{background:var(--dark)}
.btn.on-dark.ghost:hover{color:var(--ink)}
.textlink{font-weight:700;color:var(--red);display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;font-size:13px;letter-spacing:.03em}
.textlink svg{width:15px;height:15px;transition:.25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- nav (UCFB-style: floating white angled panels, always SEE-THROUGH,
   generous spacing all around. Auto-hides on scroll down, reveals on scroll up. ---------- */
:root{ --hdr-h:72px; --slant:34px; --hdr-x:46px; --hdr-y:16px;
  /* button/pill skew matched to the header diagonal: atan(34/72) ~= 25deg */
  --skew:-25deg; --unskew:25deg; }
.nav{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.nav.hidden{transform:translateY(calc(11px - var(--hdr-h)))}    /* scrolled down: one smooth slide up, leaves an ~11px peek on any screen (no jitter) */
.nav-in{width:100%;max-width:none;margin:0;padding:var(--hdr-y) var(--hdr-x);
  display:flex;align-items:flex-start;justify-content:space-between;gap:0;pointer-events:none;
  transition:padding .45s cubic-bezier(.4,0,.2,1)}
/* Flush top (no top gap) both at the very top AND while hiding, so scrolling down is a
   single clean slide with no padding growth fighting the transform. The floating top gap
   only appears when revealed on scroll-up. Side gaps stay constant in every state. */
.nav.attop .nav-in,.nav.hidden .nav-in{padding-top:0;padding-bottom:0}
/* the panels are the only clickable, opaque parts; everything else stays see-through */
.nav-in>a,.nav-links{pointer-events:auto;height:var(--hdr-h)}
/* brand panel: white, diagonal cut on its RIGHT edge, big logo */
.nav-in>a{display:flex;align-items:center;background:#fff;padding:0 calc(var(--slant) + 20px) 0 28px;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.5);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%)}
.nav .logo{height:48px;width:auto;display:block}
/* nav panel: the angled white shape is drawn by ::before so the container is NOT clipped
   and dropdowns can overflow it. Links + dropdowns sit above the shape. */
.nav-links{position:relative;display:flex;align-items:center;gap:26px;background:transparent;
  padding:0 24px 0 calc(var(--slant) + 30px)}
.nav-links::before{content:'';position:absolute;inset:0;z-index:0;background:#fff;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.5);
  clip-path:polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%)}
.nav-links>*{position:relative;z-index:1}
.nav-links a:not(.btn){font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);transition:.2s}
.nav-links a:not(.btn):hover,.nav-links a.active{color:var(--red)}
.nav-links .btn{margin-left:2px}
/* ---- dropdown menu (Programs) ---- */
.nav-item{position:relative;display:inline-flex;align-items:center;height:100%}
.nav-item>a{display:inline-flex;align-items:center;gap:5px}
.nav-caret{width:10px;height:10px;flex:none;transition:transform .25s var(--ease)}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);min-width:204px;
  background:#fff;border-top:3px solid var(--red);box-shadow:0 26px 46px -14px rgba(0,0,0,.42);
  display:flex;flex-direction:column;padding:8px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:80}
.dropdown::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px)}
.dropdown a{padding:9px 14px;font-size:12.5px;white-space:nowrap;transition:.15s}
.dropdown a:hover{color:var(--red);background:var(--paper-2)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;align-self:center;pointer-events:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.nav-toggle span{display:block;width:24px;height:2.5px;border-radius:2px;margin:5px 0;background:#fff;transition:background .2s,transform .3s var(--ease),opacity .2s}
.nav-toggle.on span{background:var(--red-2)}
.nav-toggle.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* ---- "more" menu: standard 3-line menu icon between Register and Member Login (turns into an X when open); click drops a panel with the
   less-used pages (News, Contact) + quick contact info. Room to add more links later. ---- */
.nav-more{position:relative;display:inline-flex;align-items:center;height:100%}
.more-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:40px;margin-right:4px;padding:0;
  background:none;border:0;cursor:pointer}
.more-btn i{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink);transition:background .2s,transform .3s var(--ease),opacity .2s}
.more-btn:hover i,.more-btn.active i,.nav-more.open .more-btn i{background:var(--red)}
.nav-more.open .more-btn i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-more.open .more-btn i:nth-child(2){opacity:0}
.nav-more.open .more-btn i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.more-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.more-panel{position:absolute;top:100%;left:50%;min-width:290px;display:flex;flex-direction:column;padding:10px;z-index:80;
  background:#fff;border-top:3px solid var(--red);box-shadow:0 26px 46px -14px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.nav-more.open .more-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px)}
.nav-links .more-panel>a{padding:11px 14px;font-family:var(--disp);font-weight:800;font-style:italic;font-size:18px;letter-spacing:.01em}
.nav-links .more-panel>a:hover{background:var(--paper-2)}
.more-info{display:flex;flex-direction:column;gap:7px;margin-top:8px;padding:14px 14px 6px;border-top:1px solid var(--line)}
.nav-links .more-info a{font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);overflow-wrap:anywhere}
.nav-links .more-info a:hover{color:var(--red)}

/* keep anchor targets clear of the fixed header */
:target{scroll-margin-top:calc(var(--hdr-h) + var(--hdr-y)*2 + 10px)}

/* ---------- reveal + self-draw ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.draw path,.draw line,.draw polyline,.draw circle{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.5s var(--ease)}
.draw.in path,.draw.in line,.draw.in polyline,.draw.in circle{stroke-dashoffset:0}

/* ---------- coaching-board PLAY (minimal tactical sketch, UCFB style) ----------
   SCROLL-SCRUBBED: site.js ties each element's progress to scroll position, so the
   play draws as you scroll down and unwinds as you scroll back up. One shared def,
   injected into every .play. No timed transitions here (scroll drives it frame by frame). */
.play,.hit{overflow:visible}
.play .pl-o,.play .pl-x,.hit .pl-o,.hit .pl-x{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.play circle,.play .pl-draw{fill:none;stroke:#fff;stroke-width:3}
.play .pl-draw{stroke-dasharray:400;stroke-dashoffset:400}
.play .pl-head,.play line,.hit line{stroke-linecap:square}
.play line{stroke:var(--red-2);stroke-width:3}
.play.ink circle,.play.ink .pl-draw{stroke:var(--ink)}
.play.ink line{stroke:var(--red)}
/* on the red CTA band, flip the accent X to white so it stays visible */
.ctaband .play line{stroke:#fff}
/* floating plays that sit in a section's open corner (UCFB-style accents) */
.play.float{position:absolute;width:200px;height:auto;z-index:1;pointer-events:none}
.split .play{display:block;max-width:320px;margin:0 auto}

/* scattered O / X hits: sized + placed off the section padding so they stay off content */
.sec{position:relative;--pad:clamp(64px,9vw,120px)}
.sec.tight{--pad:clamp(48px,6vw,80px)}
.hit{position:absolute;width:calc(var(--pad) * .4);height:calc(var(--pad) * .4);z-index:1;pointer-events:none}
.hit circle{fill:none;stroke:var(--ink);stroke-width:3}
.sec.dark .hit circle{stroke:#fff}
.hit line{stroke:var(--red);stroke-width:3}
@media (max-width:767px){ .play.float{display:none} }

/* ---------- decorative motif ---------- */
.motif{position:absolute;pointer-events:none}
.hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--dark)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-media::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(9,9,11,.92) 0%, rgba(9,9,11,.55) 42%, rgba(9,9,11,.15) 70%, rgba(9,9,11,.5) 100%),
  linear-gradient(0deg, rgba(9,9,11,.95) 2%, transparent 42%)}
/* UCFB hero stripes: 12 slanted bars fading in toward the bottom-right corner and running
   up behind the header. Static; the skew makes them lean in from the bottom right. */
/* hero bars + stats-band stripes share one grid (--sw bar, --sp repeat, both anchored at the
   page centre) and skew around the seam between the two sections, so every stripe runs
   straight on from the hero into the band below */
:root{--sw:60px;--sp:100px}
.hero-stripes{position:absolute;top:0;bottom:0;left:50%;display:flex;gap:calc(var(--sp) - var(--sw));z-index:1;pointer-events:none;
  transform:skewX(-28deg);transform-origin:bottom}
.hero-stripes i{flex:0 0 var(--sw);background:#b2b2b2}
.hero-stripes i:nth-child(1){opacity:0}.hero-stripes i:nth-child(2){opacity:.073}.hero-stripes i:nth-child(3){opacity:.147}
.hero-stripes i:nth-child(4){opacity:.22}.hero-stripes i:nth-child(5){opacity:.293}.hero-stripes i:nth-child(6){opacity:.367}
.hero-stripes i:nth-child(7){opacity:.44}.hero-stripes i:nth-child(8){opacity:.513}.hero-stripes i:nth-child(9){opacity:.587}
.hero-stripes i:nth-child(10){opacity:.66}.hero-stripes i:nth-child(11){opacity:.733}.hero-stripes i:nth-child(12){opacity:.807}
/* faint continuation of the stripes on the band right under the hero */
.stats{position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:4000px;margin-left:-2000px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 var(--sw),transparent var(--sw) var(--sp));
  transform:skewX(-28deg);transform-origin:top}
.stats-in{position:relative}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 24px 74px;width:100%}
.hero .eyebrow{color:var(--red-2)}
.hero-tag{--o:13px;position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;margin-bottom:26px;background:rgba(255,255,255,.34);
  clip-path:polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%)}
.hero-tag::before{content:'';position:absolute;inset:1.5px;z-index:0;background:#111318;
  clip-path:polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%)}
.hero-tag>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--red-2);box-shadow:0 0 0 4px rgba(240,70,58,.28)}
.hero h1{margin:6px 0 20px;max-width:15ch;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.hero .lead{color:rgba(255,255,255,.86)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-awards{position:absolute;right:24px;bottom:30px;z-index:2;text-align:right;opacity:.9}

/* ---------- program switcher: sticky row on every program page so people can hop between programs
   from anywhere. Always keeps the header's own gap below the header: under the 11px peek while the
   header is tucked away, under the full header when it pops back in (body.hdr-on set by site.js). ---------- */
.prog-nav{position:sticky;top:calc(11px + var(--hdr-y));z-index:55;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);
  transition:top .5s cubic-bezier(.4,0,.2,1)}
body.hdr-on .prog-nav{top:calc(var(--hdr-h) + var(--hdr-y) * 2)}
.prog-nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prog-nav-in::-webkit-scrollbar{display:none}
.prog-nav a{flex:none;position:relative;padding:18px 14px;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.6);white-space:nowrap;transition:color .2s}
.prog-nav a:hover{color:#fff}
.prog-nav a.on{color:#fff}
.prog-nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--red-2);
  transform:skewX(-25deg) scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.prog-nav a.on::after{transform:skewX(-25deg) scaleX(1)}
.prog-nav a:focus-visible{outline:2px solid var(--red-2);outline-offset:-4px}
/* anchor jumps (Free Agents, Sunshine) land clear of header + switcher */
html:has(.prog-nav) :target{scroll-margin-top:calc(var(--hdr-h) + var(--hdr-y) * 2 + 70px)}
@media (max-width:900px){
  .prog-nav-in{padding:0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent)}
  .prog-nav a{padding:16px 12px;font-size:12px}
}

/* ---------- page hero (interior pages) ---------- */
.phero{position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:calc(var(--hdr-h) + var(--hdr-y)*2 + clamp(28px,4vw,46px)) 0 clamp(40px,6vw,66px)}
.phero.img .phero-bg{position:absolute;inset:0;z-index:0}
.phero.img .phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.phero.img .phero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.85),rgba(9,9,11,.45))}
/* video banner hero (e.g. Parties): footage plays behind the heading */
.phero.video{min-height:min(70vh,600px);display:flex;flex-direction:column;justify-content:center}
.phero.video .phero-bg{position:absolute;inset:0;z-index:0}
.phero.video .phero-bg video{width:100%;height:100%;object-fit:cover}
.phero.video .phero-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(9,9,11,.88) 0%, rgba(9,9,11,.5) 46%, rgba(9,9,11,.2) 100%),
  linear-gradient(0deg, rgba(9,9,11,.7) 0%, transparent 40%)}
.phero .wrap{position:relative;z-index:2}
.phero .eyebrow{color:var(--red-2)}
.phero h1{margin:4px 0 16px;max-width:18ch}
.phero .lead{color:rgba(255,255,255,.82)}
.crumb{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:18px}
.crumb a:hover{color:#fff}
.crumb span{margin:0 8px;opacity:.5}

/* ---------- stats bar ---------- */
.stats{background:var(--ink);color:#fff}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:46px 0}
.stat{text-align:center;padding:8px 20px;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.14)}
.stat b{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(34px,4.6vw,54px);line-height:1;display:block}
.stat b em{color:var(--red-2);font-style:italic}
/* ---- home WHY ASC: interactive feature switcher. Pick a reason (hover / tap / keys) and its photo
   wipes in on the site's diagonal; a red bar times each one and auto-advances while in view. ---- */
.why-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(40px,6vw,80px);align-items:center}
.why h2.display{font-size:clamp(34px,4.3vw,56px)}
.why-list{margin-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.why-item{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:baseline;width:100%;text-align:left;
  padding:18px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;font:inherit;cursor:pointer;position:relative}
.why-item .wn{font-family:var(--disp);font-weight:900;font-style:italic;font-size:15px;color:rgba(255,255,255,.32);transition:color .3s}
.why-item .wt{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(18px,1.9vw,23px);line-height:1.1;
  color:rgba(255,255,255,.5);transition:color .3s,transform .4s var(--ease)}
.why-item .wd{grid-column:2;display:block;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:44ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .4s ease,margin .45s var(--ease)}
.why-item:hover .wt{color:rgba(255,255,255,.85)}
.why-item.is-on .wn{color:var(--red-2)}
.why-item.is-on .wt{color:#fff;transform:translateX(4px)}
.why-item.is-on .wd{max-height:96px;opacity:1;margin-top:8px}
.why-item .wbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red-2);transform:scaleX(0);transform-origin:left}
.why-item.is-on .wbar{animation:whyBar var(--why-t,6s) linear forwards}
.why.paused .why-item.is-on .wbar{animation-play-state:paused}
@keyframes whyBar{to{transform:scaleX(1)}}
.why-item:focus-visible{outline:2px solid var(--red-2);outline-offset:4px}
/* media: stacked photos, the incoming one wipes in with a slanted leading edge */
.why-media{position:relative;aspect-ratio:4/5;max-height:560px;width:100%;justify-self:end}
.why-media .wm{position:absolute;inset:0;margin:0;overflow:hidden;
  clip-path:polygon(125% 0,125% 0,125% 100%,100% 100%)}
.why-media .wm img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.why-media .wm::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,11,.55),transparent 45%)}
.why-media .wm.was{z-index:1;clip-path:polygon(0 0,125% 0,125% 100%,-25% 100%)}
.why-media .wm.was img{transform:none}
.why-media .wm.is-on{z-index:2;clip-path:polygon(0 0,125% 0,125% 100%,-25% 100%);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.why-media .wm.is-on img{transform:none;transition:transform 1.6s var(--ease)}
.why-count{position:absolute;left:-1px;bottom:26px;z-index:3;display:flex;align-items:baseline;gap:6px;padding:10px 26px 10px 18px;
  background:var(--red);color:#fff;font-family:var(--disp);font-weight:900;font-style:italic;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.why-count b{font-size:22px;line-height:1}
.why-count span{font-size:12px;letter-spacing:.08em;opacity:.8}
.why-play{position:absolute;top:-34px;right:-28px;width:190px;height:auto;z-index:3;pointer-events:none}
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:30px}
  .why-media{order:-1;aspect-ratio:4/3;justify-self:stretch}
  .why-play{width:130px;top:-22px;right:-8px}
}
@media (prefers-reduced-motion:reduce){ .why-item .wbar{display:none} .why-media .wm.is-on,.why-media .wm.is-on img{transition:none} }

/* ---- members (light variant; phone mockup stays dark) ---- */
.member.light{background:var(--paper-2);color:var(--ink)}
.member.light h2{color:var(--ink)}
.member.light .eyebrow{color:var(--red)}
.member.light .lead{color:var(--ink-2)}
.member.light .mbul{color:var(--ink)}
.member.light .mbul .mi{background:rgba(226,58,46,.1);color:var(--red)}

/* ---- scoreboard reels: every digit is a spinning drum that blurs at speed, then settles
   with a small mechanical kick; suffix slams up, the + flashes, a red broadcast bar wipes
   in under the number, and the label rises. Replays each time the band scrolls into view. */
.stat b.reels{display:inline-flex;align-items:flex-end;position:relative;padding-bottom:12px}
.reel{position:relative;display:inline-block;height:1em;clip-path:inset(0 -.4em)}
.reel .rg{visibility:hidden}
.reel .rs{position:absolute;left:50%;top:0;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,0)}
.reel .rs i{display:block;height:1em;line-height:1;font-style:italic}
.stat .sfx{display:inline-block;clip-path:inset(0 -.4em);height:1em}
.stat .sfx>i{display:inline-block;font-style:italic;transform:translateY(105%)}
.stat b.reels em{display:inline-block;transform:scale(0);opacity:0}
.stat b.reels::after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:3px;background:var(--red-2);
  transform:skewX(-25deg) scaleX(0);transform-origin:left}
.stat.rl>span{opacity:0;transform:translateY(10px)}
.stat.rl+.stat.rl::before{transform:scaleY(0)}
/* running */
.stats.go .reel .rs{transform:translate(-50%,calc(var(--n) * -1em));transition:transform var(--dur) cubic-bezier(.16,.84,.26,1.035) var(--dl);
  animation:reelBlur var(--dur) ease-out var(--dl) both}
@keyframes reelBlur{0%{filter:blur(0)}12%{filter:blur(2.4px)}62%{filter:blur(1.2px)}85%,100%{filter:blur(0)}}
.stats.go .stat .sfx>i{transform:none;transition:transform .5s cubic-bezier(.2,1.4,.4,1) var(--land)}
.stats.go .stat b.reels em{transform:none;opacity:1;animation:plusPop .7s cubic-bezier(.2,1.6,.4,1) var(--land) both}
@keyframes plusPop{0%{transform:scale(0) rotate(-90deg);opacity:0;text-shadow:none}
  55%{transform:scale(1.35);opacity:1;text-shadow:0 0 18px rgba(240,70,58,.9)}100%{transform:none;opacity:1;text-shadow:none}}
.stats.go .stat b.reels::after{transform:skewX(-25deg) scaleX(1);transition:transform .55s cubic-bezier(.7,0,.2,1) var(--land)}
.stats.go .stat.rl>span{opacity:1;transform:none;transition:opacity .5s ease var(--land),transform .6s var(--ease) var(--land)}
.stats.go .stat.rl+.stat.rl::before{transform:none;transition:transform .7s var(--ease) var(--dl)}
@media (prefers-reduced-motion:reduce){
  .stats .reel .rs,.stats .stat .sfx>i,.stats .stat b.reels em,.stats .stat b.reels::after,.stats .stat.rl>span,.stats .stat.rl::before{transition:none!important;animation:none!important}
}
.stats-in.five{grid-template-columns:repeat(5,1fr)}
.stats-in.five .stat{padding:8px 12px}
.stat>span{display:block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.sec.alt{background:var(--paper-2)}
.sec.dark{background:var(--dark);color:#fff}
.sec.dark .lead{color:rgba(255,255,255,.8)}
.shead{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec-head{margin-bottom:44px;max-width:62ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;max-width:none}
.sec-head .lead{margin-top:16px}

/* ---------- programs grid ---------- */
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);padding:28px 26px 26px;min-height:210px;
  display:flex;flex-direction:column;transition:.35s var(--ease);cursor:pointer}
.pcard::before{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:var(--red);transition:width .4s var(--ease)}
.pcard:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,0,0,.3)}
.pcard:hover::before{width:100%}
.pcard .pnum{font-family:var(--disp);font-weight:900;font-style:italic;font-size:15px;color:var(--red)}
.pcard .page{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:auto}
.pcard h3{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:23px;line-height:1;margin:8px 0 10px}
.pcard p{font-size:14px;color:var(--ink-2);line-height:1.5}
.pcard .arw{position:absolute;right:22px;bottom:22px;color:var(--ink);opacity:.25;transition:.3s}
.pcard:hover .arw{opacity:1;color:var(--red);transform:translateX(4px)}

/* ---------- split / feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.rev .split-media{order:2}
.feat-list{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.feat{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat .fn{font-family:var(--disp);font-weight:900;font-style:italic;color:var(--red);font-size:15px;min-width:34px}
.feat h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.01em}
.feat p{font-size:13.5px;color:var(--muted);margin-top:3px}
.split-media{position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-media .tac{position:absolute;inset:-24px -24px auto auto;width:180px;height:180px;z-index:2}

/* ---------- prose (rich content) ---------- */
.prose{max-width:70ch;font-size:16px;color:var(--ink-2);line-height:1.75}
.prose>*+*{margin-top:16px}
.prose h3{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;color:var(--ink);font-size:22px;margin-top:34px}
.prose h4{font-weight:800;color:var(--ink);font-size:16px;text-transform:uppercase;letter-spacing:.02em;margin-top:24px}
.prose strong{color:var(--ink);font-weight:700}
.prose ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:'';position:absolute;left:0;top:9px;width:10px;height:9px;background:var(--red);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}

/* ---------- info / fact cards ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.info-card{background:var(--paper);border:1px solid var(--line);padding:24px 22px;position:relative}
.sec.alt .info-card{background:#fff}
.info-card .ik{font-family:var(--hand);color:var(--red);font-size:16px;display:block;margin-bottom:9px;-webkit-text-stroke:.4px currentColor;text-stroke:.4px currentColor}
.info-card h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:15px;margin-bottom:8px}
.info-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.info-card .big{font-family:var(--disp);font-weight:900;font-style:italic;font-size:34px;color:var(--ink);line-height:1}
.info-card .big em{color:var(--red);font-style:italic}
/* ---- clickable contact / team cards: whole card is the link (maps, call, email). Same hover as the home
   program cards: lift, red bar sweeps across the top, arrow slides. Equal heights, action pinned to bottom. ---- */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* team: 6-col grid, each card spans 2 → 3 on top, the last 2 centered below; 1fr rows = every card same height */
.lgrid.team{grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr}
.lgrid.team>.lcard{grid-column:span 2}
.lgrid.team>.lcard:nth-child(4):nth-last-child(2){grid-column:2 / span 2}
.lcard{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  padding:24px 22px 22px;color:var(--ink);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease),opacity .8s var(--ease)}
.sec.alt .lcard{background:#fff}
.lcard::before{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:var(--red);transition:width .4s var(--ease)}
.lcard:hover,.lcard:focus-visible{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,0,0,.3)}
.lcard:hover::before,.lcard:focus-visible::before{width:100%}
.lcard:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lcard .ik{font-family:var(--hand);color:var(--red);font-size:15px;line-height:1.3;display:block;margin-bottom:10px;-webkit-text-stroke:.4px currentColor}
.lcard h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.2;margin-bottom:8px}
.lcard p{font-size:13.5px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.lcard .lc-act{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:color .25s}
.lcard .lc-act svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.lcard:hover .lc-act,.lcard:focus-visible .lc-act{color:var(--red)}
.lcard:hover .lc-act svg,.lcard:focus-visible .lc-act svg{transform:translateX(4px)}
@media (max-width:1000px){ .lgrid,.lgrid.team{grid-template-columns:repeat(2,1fr)} .lgrid.team>.lcard,.lgrid.team>.lcard:nth-child(4):nth-last-child(2){grid-column:auto}
  .lgrid.team>.lcard:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - 16px) / 2)} }
@media (max-width:560px){ .lgrid,.lgrid.team{grid-template-columns:1fr;grid-auto-rows:auto} .lgrid.team>.lcard:last-child:nth-child(odd){width:100%} }

/* ---------- pricing cards ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.price{background:#fff;border:1px solid var(--line);padding:30px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.price.feature{border-color:var(--ink);box-shadow:0 24px 50px -30px rgba(0,0,0,.35)}
.price.feature::before{content:'';position:absolute;left:0;top:0;height:5px;width:100%;background:var(--red)}
.price .pt{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:19px}
.price .psub{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:4px}
.price .pv{font-family:var(--disp);font-weight:900;font-style:italic;font-size:44px;margin:16px 0 4px;line-height:1}
.price .pv small{font-size:14px;color:var(--muted);font-style:normal;font-weight:600}
.price ul{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.price ul li{position:relative;padding-left:24px;font-size:13.5px;color:var(--ink-2)}
.price ul li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:8px;background:var(--red);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}

/* ---------- schedule / dates table ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th{text-align:left;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--muted);padding:0 16px 12px;border-bottom:2px solid var(--ink)}
.dtable td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.dtable tr:hover td{background:var(--paper-2)}
.dtable td:first-child{font-weight:700;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;
  font-family:var(--disp);font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qi{--o:7px;position:relative;flex:none;width:30px;height:26px;background:var(--paper-3);display:grid;place-items:center;transition:.3s var(--ease);
  clip-path:polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%)}
.faq summary .qi::before,.faq summary .qi::after{content:'';position:absolute;background:var(--ink)}
.faq summary .qi::before{width:12px;height:2.4px}.faq summary .qi::after{width:2.4px;height:12px;transition:.3s}
.faq details[open] summary .qi{background:var(--red)}
.faq details[open] summary .qi::before,.faq details[open] summary .qi::after{background:#fff}
.faq details[open] summary .qi::after{transform:scaleY(0)}
.faq .fa-body{padding:0 0 22px;color:var(--ink-2);font-size:14.5px;line-height:1.7;max-width:70ch}

/* ---------- partners marquee ---------- */
.marq{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex;align-items:center;gap:16px;width:max-content;animation:mscroll 90s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes mscroll{to{transform:translateX(-50%)}}
.mtile{flex:0 0 auto;width:172px;height:96px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;padding:16px 18px}
.mtile img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ncard{position:relative;overflow:hidden;background:var(--ink);color:#fff;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.ncard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:.5s var(--ease)}
.ncard::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,12,.94) 8%,rgba(10,10,12,.1) 70%)}
.ncard:hover img{transform:scale(1.06);opacity:.85}
.ncard .nc-in{position:relative;z-index:2;padding:26px}
.ncard .nk{font-family:var(--hand);color:var(--red-2);font-size:16px;-webkit-text-stroke:.4px currentColor;text-stroke:.4px currentColor}
.ncard h3{font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:22px;line-height:1.02;margin:12px 0 8px}
.ncard p{font-size:13.5px;color:rgba(255,255,255,.8)}

/* ---------- CTA band ---------- */
.ctaband{background:var(--red);color:#fff;position:relative;overflow:hidden}
.ctaband .wrap{padding:clamp(48px,7vw,84px) 24px;position:relative;z-index:2;text-align:center}
.ctaband h2{color:#fff}
.ctaband p{color:rgba(255,255,255,.9);font-size:17px;font-weight:500;margin:14px auto 26px;max-width:52ch}
.ctaband .btn{background:#fff;color:var(--red)}
.ctaband .btn:hover{background:var(--ink);color:#fff}
/* ghost on the red band: white outline, red interior */
.ctaband .btn.ghost{background:#fff;color:#fff}
.ctaband .btn.ghost::before{background:var(--red)}
.ctaband .btn.ghost:hover{color:var(--red)}
.ctaband .play{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:280px;height:200px;opacity:.5;z-index:1}

/* ---------- member CTA ---------- */
.member{background:var(--dark);color:#fff;overflow:hidden;position:relative}
.member .wrap{padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(64px,9vw,110px);position:relative;z-index:2}
.member-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.member .eyebrow{color:var(--red-2)}
.member h2{color:#fff;max-width:14ch}
.member .lead{color:rgba(255,255,255,.82);margin-top:18px}
.mbullets{margin:26px 0 30px;display:flex;flex-direction:column;gap:12px}
.mbul{display:flex;align-items:center;gap:13px;font-weight:600;font-size:15px}
.mbul .mi{width:30px;height:30px;flex:none;display:grid;place-items:center;background:rgba(240,70,58,.16);color:var(--red-2);border-radius:50%}
.mbul .mi svg{width:16px;height:16px}
.member-cta{display:flex;gap:14px;flex-wrap:wrap}
.phone-mock{position:relative;justify-self:center;width:250px;aspect-ratio:9/19;background:linear-gradient(160deg,#1c1c20,#101013);border:2px solid rgba(255,255,255,.12);border-radius:34px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.phone-mock .scr{width:100%;height:100%;border-radius:24px;overflow:hidden;background:#0c0c0e;position:relative}
.phone-mock .scr .hd{padding:24px 16px 14px;background:radial-gradient(120% 80% at 50% 0,rgba(226,58,46,.4),transparent 70%)}
.phone-mock .scr .hd b{font-family:var(--disp);font-weight:900;font-style:italic;font-size:19px;color:#fff;display:block}
.phone-mock .scr .hd span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-2);font-weight:700}
.mock-row{margin:10px 12px;padding:11px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.mock-row b{font-size:11px;color:#fff;font-weight:700;display:block}
.mock-row span{font-size:9px;color:rgba(255,255,255,.55)}
.mock-row .qr{float:right;width:30px;height:30px;border-radius:7px;background:
  repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px),repeating-linear-gradient(0deg,#fff 0 3px,#0c0c0e 3px 6px);background-blend-mode:multiply;opacity:.85}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .flogo{height:38px;margin-bottom:18px}
.foot p,.foot a{color:rgba(255,255,255,.68);font-size:14px;line-height:1.9}
.foot a:hover{color:#fff}
.foot h5{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin-bottom:14px;color:#fff}
.foot .col a{display:block;overflow-wrap:anywhere}
.foot-grid>*{min-width:0}
.foot-bot{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--hdr-h:58px;--slant:20px;--hdr-x:16px;--hdr-y:12px}
  .nav-in>a{padding:0 calc(var(--slant) + 14px) 0 16px}
  .nav .logo{height:36px}
  .nav-links{position:fixed;inset:calc(var(--hdr-h) + var(--hdr-y)*2) 12px auto 12px;height:auto;max-height:calc(100vh - var(--hdr-h) - 40px);overflow-y:auto;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 20px;transform:translateY(-160%);transition:.3s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);clip-path:none}
  .nav-links::before{display:none}
  .nav-links.open{transform:none}
  .nav-links a:not(.btn){width:100%;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
  .nav-links .btn{margin-top:14px;width:100%;justify-content:center}
  /* dropdown expands inline in the mobile menu */
  .nav-item{display:block;width:100%;height:auto}
  .nav-item>a{width:100%;justify-content:space-between}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;background:transparent;border-top:none;box-shadow:none;padding:0 0 6px 14px}
  .dropdown a{padding:11px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .nav-item .nav-caret{display:none}
  .nav-toggle{display:block}
  /* in the phone menu the "more" items just list inline, Member Login stays last */
  .more-btn{display:none}
  .nav-more{display:block;width:100%;height:auto;order:9}
  .nav-links .btn{order:10}
  .more-panel{position:static;min-width:0;padding:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;border-top:0;transition:none}
  .nav-links .more-panel>a{font-family:inherit;font-style:normal;font-weight:700}
  .nav-links .more-panel>a:hover{background:none}
  .more-info{margin-top:4px;padding:12px 0 2px;border-top:0}
  .nav-links .more-info a{width:auto;padding:0;border:0;font-size:13px}
  .prog-grid,.news-grid{grid-template-columns:1fr 1fr;gap:14px}
  .split,.member-grid{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:-1}
  .split-media{order:-1;max-width:440px}
  .split-media .tac{width:130px;height:130px;inset:-16px -8px auto auto}
  .stats-in{grid-template-columns:1fr 1fr;gap:26px 0;padding:36px 0}
  .stat:nth-child(3)::before,.stat:nth-child(2)::before{display:none}
  .stats-in.five{grid-template-columns:1fr 1fr}
  .stats-in.five .stat::before{display:none}
  .stats-in.five .stat:nth-child(2n)::before{display:block}
  .stats-in.five .stat:nth-child(5){grid-column:1/-1}
  .ctaband .play{display:none}
}
@media (max-width:560px){
  :root{--sw:36px;--sp:60px}
  .split .play{max-width:240px}
  .prog-grid,.news-grid{grid-template-columns:1fr}
  .hero-awards{display:none}
  .mtile{width:150px;height:84px}
}