:root{
  --bg:#FBFAF7; --bg2:#F1EEE8; --ink:#0F1E33; --body:#4A566A; --mute:#5C6675;
  --line:#E4DFD6; --blue:#0A63A8; --blue-d:#0A4C82; --link:#0A5A99;
  --orange:#E4572E; --orange-d:#A8371A; --orange-bg:#FDEDE7;
  --navy:#0F1E33; --dark:#0B1220; --dark2:#111C2E; --lime:#C8FF3D;
  --on-dark:#B7C7D8; --on-navy:#BACBDD; --sky:#9CC8EC;
  --display:'Archivo',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-0.02em;line-height:1.05}
h4{font-weight:700;letter-spacing:-0.01em}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(28px,3.6vw,38px)}
h3{font-size:clamp(22px,2.4vw,26px);font-weight:700;letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty;line-height:1.6}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.sec{padding:clamp(40px,6vw,64px) 0}
/* .wrap and .sec are sometimes combined on one element (class="wrap sec"). Both use the
   padding shorthand, and .sec being defined later wiped out .wrap's side padding entirely —
   that's why those sections ran edge-to-edge with zero left/right padding on every screen
   size. Two classes gives this higher specificity than either alone, so it wins regardless
   of source order and restores both the vertical AND horizontal padding together. */
.wrap.sec{padding:clamp(40px,6vw,64px) clamp(18px,4vw,44px)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);margin-bottom:12px}
.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--body);max-width:700px}
.muted{color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 28px;border-radius:100px;font-size:16px;font-weight:700;font-family:var(--display);cursor:pointer;border:none;transition:.15s}
.btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--navy);color:#fff}
.btn-o{background:var(--orange);color:#fff}.btn-o:hover{background:var(--navy);color:#fff}
.btn-s{border:1px solid #B9B1A3;color:var(--ink);background:none}.btn-s:hover{border-color:var(--ink);color:var(--ink)}
.btn-l{background:var(--lime);color:var(--dark)}.btn-l:hover{background:#fff;color:var(--dark)}
.pill{display:inline-block;font-family:var(--display);padding:5px 11px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pill-open{background:#E6F2E9;color:#1E6B3A}
.pill-fill{background:var(--orange-bg);color:var(--orange-d)}
.pill-wait{background:#FBF0DA;color:#7A5410}
.pill-closed{background:#EDEAE3;color:var(--mute)}
.pill-soon{background:#E8F1F9;color:var(--link)}
.note{display:flex;gap:10px;align-items:flex-start;padding:14px 18px;border-radius:12px;background:#FBF0DA;border:1px solid #E6D5AC;font-size:15.5px;line-height:1.55;color:#7A5410}
image-slot{display:block;position:relative;width:100%;height:100%;min-height:120px;border-radius:inherit;overflow:hidden}
.ph{position:relative;width:100%;height:100%;min-height:120px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#E9E4DA 0 12px,#F1EEE8 12px 24px);border-radius:inherit;overflow:hidden}
.ph span{font-size:12.5px;line-height:1.45;letter-spacing:.04em;color:#8C8578;text-align:center;padding:14px 18px;max-width:34ch}
.ph-dark{background:repeating-linear-gradient(135deg,#152134 0 12px,#111C2E 12px 24px)}
.ph-dark span{color:#7A8CA3}

/* chrome */
.topbar{background:var(--navy);color:#D6E2EF;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.topbar a{color:#D6E2EF}.topbar a:hover{color:#fff}
.topbar ul{display:flex;gap:22px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{height:48px;width:auto}
.brand span{font-size:14.5px;color:var(--mute)}
nav.main{display:flex;font-family:var(--display);align-items:center;gap:clamp(14px,1.7vw,28px);font-size:16px;font-weight:600;white-space:nowrap}
nav.main a{color:var(--ink)}nav.main a:hover{color:var(--blue)}
nav.main a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:6px}
nav.main a.ext{color:var(--mute)}
.burger{display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink);font-size:22px;cursor:pointer}
.crumb{padding:14px 0;background:var(--bg2);font-size:14.5px;color:var(--mute)}
.crumb .sep{padding:0 8px;color:#A79E90}
.crumb .cur{color:var(--ink);font-weight:600}
.phero{padding:clamp(34px,5vw,52px) 0 clamp(30px,4vw,44px);background:var(--bg);border-bottom:1px solid var(--line)}
.phero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.phero h1{max-width:900px}
.phero .lede{margin-top:14px}
.phero-dark{background:var(--dark);color:#EAF1F8;border-bottom:none}
.phero-dark h1{color:#fff}
.phero-dark .lede{color:var(--on-dark)}
.phero-dark .eyebrow{color:var(--lime)}

.table,.mcard dl,.mcard .fee,.hero .statrow,.sess,time{font-variant-numeric:tabular-nums}

/* cards + grids */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
a.card:hover{transform:translateY(-4px);color:var(--ink);border-color:var(--blue)}
.card .thumb{height:170px;position:relative;overflow:hidden}
.card .body{display:flex;flex-direction:column;gap:9px;padding:22px 24px 24px;flex:1}
.card h3{font-size:23px;line-height:1.15}
.card p{font-size:16px;color:var(--body);flex:1}
.card .meta{font-size:13.5px;color:var(--mute)}
.go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--link)}
.tile{padding:26px 28px;border-radius:14px;background:var(--bg2);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px}
a.tile:hover{background:#E8F1F9;color:var(--ink)}
.tile b{display:block;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-0.02em}
.tile small{display:block;margin-top:4px;font-size:15px;color:var(--mute)}
.panel{padding:32px 34px;border-radius:16px;background:var(--bg2)}
.panel-dark{padding:34px 36px;border-radius:18px;background:var(--navy);color:#fff}
.panel-dark h2,.panel-dark h3{color:#fff}
.panel-dark p{color:var(--on-navy)}
.bullets{display:flex;flex-direction:column;gap:10px}
.bullets div{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.55;color:var(--body)}
.bullets i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--link);display:block}
.panel-dark .bullets div{color:var(--on-navy)}
.panel-dark .bullets i{background:var(--lime)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:11px 19px;border-radius:100px;border:1px solid #C9C2B6;background:none;color:var(--body);font-family:var(--display);font-size:15px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chips-dark .chip{border-color:rgba(255,255,255,.3);color:var(--on-navy)}
.chips-dark .chip:hover{color:#fff}
.chips-dark .chip[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.empty{padding:44px;border:1px dashed #C9C2B6;border-radius:16px;background:#F6F3EE;display:flex;flex-direction:column;align-items:flex-start;gap:14px}

/* list layout for <4 programs */
.plist{display:flex;flex-direction:column;gap:16px}
.plist a{display:grid;grid-template-columns:300px minmax(0,1fr) auto;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.plist a:hover{border-color:var(--blue);color:var(--ink)}
.plist .thumb{min-height:230px;position:relative;overflow:hidden}
.plist .body{display:flex;flex-direction:column;gap:12px;padding:30px 34px;min-width:0}
.plist h3{font-size:28px;line-height:1.12}
.plist .specs{display:flex;gap:34px;flex-wrap:wrap;padding-top:14px;border-top:1px solid #EDE8E0}
.plist .specs dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.plist .specs dd{margin:0;font-size:16.5px;font-weight:600}
.plist .act{display:flex;align-items:center;padding:30px 34px 30px 0}
.plist .act span{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:100px;background:var(--bg2);font-size:15.5px;font-weight:700;color:var(--link);white-space:nowrap}

/* tables */
.table{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.table .thead,.table .trow{display:grid;grid-template-columns:1.5fr 1.4fr .9fr .9fr 1fr 1.15fr;gap:16px;align-items:center}
.table .thead{padding:14px 24px;background:var(--bg2);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.table .trow{padding:18px 24px;border-top:1px solid #EDE8E0;font-size:16px;color:var(--body)}
.table .trow b{color:var(--ink);font-weight:600}
.table .act{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mcards{display:none;flex-direction:column;gap:12px}
.mcard{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px}
.mcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.mcard h4{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-0.025em}
.mcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:15.5px}
.mcard dt{color:var(--mute)}.mcard dd{margin:0;color:var(--ink)}
.mcard .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #EDE8E0}
.mcard .fee{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.03em}

/* field map */
.fieldcard{min-width:0;padding:22px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.fieldcard .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.fieldcard b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.03em}
.fieldcard em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.pitch{height:64px;border-radius:6px;border:1px solid #C2DCCB;background:#E3F0E7;display:grid;place-items:center}
.pitch i{display:block;width:1px;height:100%;background:#C2DCCB}
.fieldcard dl{display:flex;flex-direction:column;gap:5px;margin:14px 0 0;font-size:14.5px;color:var(--body)}
.fieldcard dl div{display:flex;gap:6px}
.fieldcard dt{color:var(--mute)}
.fieldcard dd{margin:0}

/* gallery */
.gal3{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:340px;gap:14px}
.gal5{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:14px}
.gal5 .big{grid-column:span 2;grid-row:span 2}
.gal3>div,.gal5>div{position:relative;min-width:0;overflow:hidden;border-radius:14px}

/* faq + anchors */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:14px;background:var(--bg2);overflow:hidden}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;font-size:18px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;color:var(--link);line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq p{padding:0 24px 22px;font-size:17px;line-height:1.6;color:var(--body)}
.anchorwrap{display:grid;grid-template-columns:270px minmax(0,1fr);gap:88px}
/* Sticky-centered sidebar: top:50% + translateY(-50%) keeps the rail vertically
   centered in the viewport while scrolling through the middle of .anchorwrap, and
   — because this is still position:sticky — it naturally stops at the top or
   bottom edge of .anchorwrap itself rather than floating past the section. No
   scroll-listener JS needed; the browser's own sticky/containing-block math
   handles the release points. */
/* Positioning is handled entirely by JS (site.js) — CSS position:sticky was
   unreliable here (an ancestor in the real BB Themer layout was breaking its
   containing-block math), so this is now a plain flow element that JS turns
   into position:fixed, vertically centered in the viewport, clamped to the
   top/bottom edges of .anchorwrap. */
.rail{display:flex;flex-direction:column;gap:4px;align-content:start;position:sticky;top:100px}
.rail a{padding:11px 14px;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:var(--body);font-size:16px;font-weight:500}
.rail a:hover{background:var(--bg2);color:var(--ink)}
.rail a.on{background:#E8F1F9;border-left-color:var(--blue);color:var(--blue-d);font-weight:700}
.railsel{display:none}
.longform{display:flex;flex-direction:column;gap:44px;max-width:760px}
.longform h2{font-size:30px;line-height:1.1;scroll-margin-top:110px}
.longform p{margin:0 0 14px;font-size:18px;line-height:1.7;color:var(--body)}

/* forms */
.form{padding:36px 38px;border-radius:18px;background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600;color:var(--body)}
.field .opt{color:#8A8272;font-weight:400}
.field input,.field select,.field textarea{padding:14px 16px;border-radius:10px;border:1px solid #C9C2B6;background:#fff;font-family:var(--sans);font-size:16px;color:var(--ink)}
.field textarea{resize:vertical}
.formfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.success{display:none;flex-direction:column;align-items:flex-start;gap:16px;padding:34px 6px}
.success .tick{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#E6F2E9;color:#1E6B3A;font-size:26px;font-weight:700}
form.sent .fgrid{display:none}
form.sent .success{display:flex}
form.error .formfoot::before{content:"Something went wrong sending that — please try again or call us.";display:block;width:100%;font-size:14.5px;color:#B3261E;margin-bottom:4px}

/* misc blocks */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stats b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,32px);letter-spacing:-0.03em;color:var(--blue)}
.stats small{display:block;margin-top:4px;font-size:14px;color:var(--mute)}
.dark .stats b{color:#fff}.dark .stats small{color:var(--on-dark)}
.hours div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid #E0D9CD;font-size:17px}
.hours span:last-child{font-weight:600;color:var(--ink)}
.hours span:first-child{color:var(--body)}
.mapwrap{position:relative;height:460px;border-radius:18px;overflow:hidden}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sponsorgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 28px;align-items:center}
.slogo{display:flex;align-items:center;justify-content:center;height:84px;padding:12px 18px;border-radius:12px;background:#fff;border:1px solid #EAE4D9;filter:grayscale(1);opacity:.82;transition:filter .15s,opacity .15s,border-color .15s}
.slogo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.slogo.tall img{max-height:78%}
.slogo:hover{filter:none;opacity:1;border-color:#D8CFBF}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:40px 44px;border-radius:18px;background:var(--navy);color:#fff;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:30px}
.cta-band p{color:var(--on-navy);font-size:17px;max-width:640px;margin-top:10px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--blue);color:#fff;border-top:1px solid rgba(255,255,255,.20)}
body{padding-bottom:78px}
@media (max-width:620px){body{padding-bottom:64px}}
.sticky-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.sticky-cta b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.025em}
.sticky-cta small{font-size:16px;color:rgba(255,255,255,.85)}
.sticky-cta a{padding:13px 26px;border-radius:100px;background:#fff;color:var(--blue);font-size:15px;font-weight:700}
.sticky-cta a:hover{background:var(--navy);color:#fff}

/* footer */
footer{background:var(--navy);color:#fff;padding:60px 0 36px}
.fgridcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
footer .wordmark{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-0.045em;margin-bottom:12px}
footer p{font-size:16px;line-height:1.6;color:var(--on-navy);max-width:340px;margin-bottom:16px}
footer address{font-style:normal;font-size:16px;line-height:1.7;color:#E3ECF5}
footer address a{color:#E3ECF5}
.fcol h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:16px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:16px}
.fcol a{color:var(--on-navy)}.fcol a:hover{color:#fff}
.legal{padding-top:22px;font-size:14px;color:#8FA4BB}

/* "Still not covered? Call... or email..." note sits inside .rail on the rules pages, and
   .rail a carries nav-link chrome (padding, border-left, block layout) meant for the sidebar
   links — reset that back to plain inline text for the phone/email links in this note only. */
.rail div a,.rail div a:link,.rail div a:visited,.rail div a:hover,.rail div a:focus,.rail div a:active{
  display:inline!important;padding:0!important;margin:0!important;border:none!important;
  border-radius:0!important;background:none!important;
  color:var(--link);font-size:inherit!important;font-weight:600!important;
  text-decoration:none;transition:none;transform:none
}

/* Live-streaming page hero — split text+image layout (not the home page's full-bleed
   background hero, even though it shares the .hero class). fit="contain" on the image-slot
   already guarantees the whole photo is always visible with nothing cropped; these rules
   just make sure the frame around it never squeezes it on narrow screens. */
.livestream-hero{height:auto;min-height:0;overflow:visible;flex-direction:row}
.livestream-hero .copy{order:1}
.livestream-hero-media{order:2;min-height:440px;background:var(--dark)}
/* Below desktop (tablet and mobile both) the hero image does not render at all — text
   and buttons only, full width. */
@media (max-width:1180px){
  .livestream-hero{flex-direction:column;align-items:stretch}
  .livestream-hero .copy{padding:32px clamp(18px,4vw,44px) 32px;max-width:none}
  .livestream-hero-media{display:none}
}

/* hero (home) */
.hero{position:relative;display:flex;align-items:center;height:78vh;min-height:620px;max-height:820px;overflow:hidden;background:#0F1E33}
.hero .media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .media .ph,.hero .media image-slot{position:absolute;inset:0;border-radius:0;min-height:0}
.hero .vid{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .vid iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,177.78vh);height:max(100%,56.25vw);border:0;pointer-events:none}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(15,30,51,.82) 0%,rgba(15,30,51,.35) 100%)}
.hero .veil{position:absolute;inset:0;pointer-events:none;background:rgba(15,30,51,.30)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .copy{display:flex;flex-direction:column;gap:22px;max-width:640px}
.hero h1{font-size:clamp(38px,5vw,68px);color:#fff}
.hero .lede{color:rgba(255,255,255,.86);max-width:640px}
.hero .badge{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);color:#fff;font-size:13.5px;font-weight:700}
.hero .badge i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block}
.hero .btn-s{border-color:#fff;color:#fff;background:none}
.hero .btn-s:hover{background:#fff;border-color:#fff;color:var(--navy)}
.hero .statrow{display:flex;gap:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);margin-top:6px;flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){.hero .vid{display:none}}

@media (max-width:1180px){
  .anchorwrap{grid-template-columns:1fr;gap:24px}
  .rail{display:none}
  .railsel{display:block;position:sticky;top:82px;z-index:30;padding:12px 0;background:var(--bg)}
  .railsel select{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #C9C2B6;background:#fff;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink)}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsorgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plist a{grid-template-columns:220px minmax(0,1fr)}
  .plist .act{grid-column:2;padding:0 34px 30px}
}
@media (max-width:980px){
  nav.main{position:fixed;left:0;right:0;top:82px;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 0;display:none;max-height:calc(100vh - 82px);overflow:auto}
  nav.main.open{display:flex}
  nav.main a{padding:15px clamp(18px,4vw,44px);border-bottom:1px solid var(--line)}
  nav.main a.btn{margin:12px clamp(18px,4vw,44px);border-bottom:none;justify-content:center}
  .burger{display:block}
  .grid3,.grid2{grid-template-columns:1fr}
  /* Blanket safety net: every two/three-column layout on the site is built with an inline
     grid-template-columns style (e.g. "1fr 1.3fr" FAQ splits, phero-row content splits) rather
     than a .grid2/.grid3 class, so the class-based rule above never reaches them and they were
     staying multi-column and cramped ("1-2" instead of stacked) below tablet width. Force every
     such inline grid to a single column here so everything stacks cleanly on mobile, site-wide. */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  h1,h2,h3,h4,p,.lede{overflow-wrap:break-word;word-break:break-word}
  iframe{max-width:100%}
  .gal3,.gal5{grid-template-columns:1fr;grid-auto-rows:240px}
  .gal5 .big{grid-column:span 1;grid-row:span 1}
  .table .thead{display:none}
  .table{border:none;background:none}
  .mcards{display:flex}
  .table .trow{display:none}
  .fgridcols{grid-template-columns:1fr 1fr}
  .plist a{grid-template-columns:1fr}
  .plist .thumb{min-height:200px}
  .plist .act{grid-column:1;padding:0 34px 30px}
  .cta-band{padding:30px 28px}
}
@media (max-width:860px){
  .hero{height:70vh;min-height:520px}
  .hero h1{font-size:40px}
  .hero .statrow{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
  .hero .scrim{background:linear-gradient(to bottom,rgba(15,30,51,.75) 0%,rgba(15,30,51,.55) 100%)}
}
@media (max-width:620px){
  .stats,.grid4,.sponsorgrid{grid-template-columns:1fr 1fr}
  .fgridcols{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .topbar ul:first-child li:first-child{display:none}
  .sticky-cta small{display:none}
  .btn{width:100%}
  .phero-row .btn{width:auto}
}

/* Component classes above set display, which outranks the UA [hidden] rule.
   This guard must stay last so hidden always wins. */
[hidden]{display:none !important}