/* =====================================================================
   OPTION 1 — "MIXTE-INSPIRED"  (gomixte.com translated onto Flash brand)
   Warm cream canvas, huge bold navy sans, hand-painted brush accent,
   light-blue hand-drawn squiggles/underlines, tilted photo collage
   photos + doodles, circle-arrow CTAs. Palette map: Mixte orange -> Flash
   BLUE (primary pop); Mixte light-blue -> Flash SKY + GOLD (annotations).
   Accessibility: AA+ contrast on text, strong focus, reduced-motion safe.
   ===================================================================== */
/* Permanent Marker + Caveat now load non-blocking from each page head
   (2026-07-31 perf pass) — @import here chained a render-blocking request */

:root{ --cream:#F5F1E7; --sky:#2E7DF0; --brush:var(--brand); }

/* warm airy canvas with a soft peach-toward-blue glow, no aurora mesh */
body{background:var(--cream)}
body::before{display:none !important}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 88% 8%, rgba(255,199,44,.18), transparent 60%),
             radial-gradient(55% 45% at 6% 100%, rgba(0,80,208,.10), transparent 60%)}

/* strong always-on focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.btn:focus-visible,.cta-arrow:focus-visible,[type=radio]:focus-visible,[type=checkbox]:focus-visible{
  outline:3px solid var(--navy);outline-offset:3px;border-radius:8px}

/* ---- header: airy cream, pill nav ---- */
header.site{background:rgba(245,241,231,.9);border-bottom:none;
  -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}
nav.primary a{font-weight:700;border-radius:999px;color:var(--navy)}
nav.primary a:hover{background:rgba(0,80,208,.10);color:var(--brand)}
nav.primary a[aria-current="page"]{background:var(--navy);color:#fff}

/* ---- typography: big bold navy sans + brush + hand ---- */
h1,h2{color:var(--navy);font-style:normal;letter-spacing:-.02em;line-height:.98}
h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:700}
.brush{font-family:'Permanent Marker',cursive;font-weight:400;color:var(--brush);
  font-style:normal;letter-spacing:.005em;line-height:.92;display:inline-block}
.hand{font-family:'Caveat',cursive;font-weight:700;color:var(--sky);font-size:1.5rem;line-height:1}

/* ---- hand-drawn underline + squiggle (decorative) ---- */
.uline{display:block;color:var(--gold);height:auto;margin-top:-.1em}
.squiggle{color:var(--sky);pointer-events:none}

/* ---- circle-arrow CTA (Mixte signature) ---- */
.cta-arrow{display:inline-flex;align-items:center;gap:13px;text-decoration:none;font-weight:700;
  color:var(--navy);font-size:1.06rem}
.cta-arrow .circ{width:48px;height:48px;border-radius:50%;background:var(--brand);color:#fff;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .18s,background .18s}
.cta-arrow .circ svg{width:22px;height:22px;stroke:#fff}
.cta-arrow:hover .circ{transform:translateX(4px);background:var(--blue-700)}
.cta-arrow.lg{font-size:1.18rem}
.cta-arrow.lg .circ{width:56px;height:56px}

/* keep .btn usable but restyle flat/rounded on this theme */
.btn{border-radius:999px;box-shadow:none;border:2px solid var(--navy);background:var(--navy);color:#fff}
.btn:hover{background:#000e2e;filter:none}
.btn.on-dark{background:var(--gold);color:var(--navy);border-color:var(--navy)}
.btn.line{background:transparent;color:var(--navy)}


/* ---- cards: airy, minimal (Mixte isn't boxy) ---- */
.card,.panel{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:1px solid rgba(0,26,69,.10);box-shadow:0 18px 40px -30px rgba(11,27,58,.5)}
.card{border-radius:16px}
.panel{border-radius:20px}
.quick a .card{transition:transform .16s}
.quick a:hover .card{transform:translateY(-3px)}
.feature-ic{background:var(--brand) !important;border-radius:50%}

/* eyebrow: navy caps with ONE gold bolt on the RIGHT, base orientation
   (Leah 2026-07-31: "flip this bolt and keep it" on every hero/footer —
   the left bolt retires site-wide, section labels lose bolts entirely) */
.eyebrow{color:var(--navy);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{display:none}
.eyebrow::after{content:"";width:.4em;height:1.1em;background:var(--gold);flex:0 0 auto;
  clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%)}

/* interior page hero: airy cream, navy headline (not the dark block) */
.pagehero{background:transparent;color:var(--navy);clip-path:none}
.pagehero::after{display:none}
.pagehero img.bg{display:none}
.pagehero h1{color:var(--navy)}
.pagehero p{color:var(--n-700)}
.pagehero .badge{background:var(--gold);color:var(--navy);border:2px solid var(--navy)}
.pagehero .badge .bolt{color:var(--navy)}


/* forms: crisp outlined (Mixte newsletter style) */
.field input,.field select,.field textarea{border:1.5px solid var(--navy);border-radius:8px;background:#fff}
fieldset{border:1.5px solid rgba(0,26,69,.25);border-radius:12px}
legend{color:var(--navy);font-weight:700}

/* footer: dark navy block */
footer.site{background:var(--navy)}

@media(prefers-reduced-motion:reduce){
  .cta-arrow:hover .circ,.quick a:hover .card{transform:none}
}

/* ---- intermittent "flash" sheen on filled buttons + CTA circles ---- */
.btn:not(.line){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.line)::after{content:"";position:absolute;top:0;left:-70%;width:42%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:flashsweep 4.6s ease-in-out infinite}
.cta-arrow .circ{position:relative;overflow:hidden;isolation:isolate}
.cta-arrow .circ::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);animation:flashsweep 4.6s ease-in-out infinite}
@keyframes flashsweep{0%,70%{left:-80%}88%,100%{left:170%}}
@media(prefers-reduced-motion:reduce){.btn::after,.cta-arrow .circ::after{display:none}}

/* hand-drawn draw-on-scroll paths use round joins */
svg[data-draw] path{stroke-linejoin:round}

/* ---- gallery grid (tilted collage look) ---- */
.gallery.duo-grid figure{position:relative;border:none;
  box-shadow:0 22px 44px -30px rgba(11,27,58,.55);transition:transform .2s ease}
.gallery.duo-grid figure:nth-child(odd){transform:rotate(-1.6deg)}
.gallery.duo-grid figure:nth-child(even){transform:rotate(1.6deg)}
.gallery.duo-grid figure:hover{transform:rotate(0) scale(1.02);z-index:2}
@media(prefers-reduced-motion:reduce){.gallery.duo-grid figure:hover{transform:none}}

/* hand-drawn underline sitting under a heading */
.head-underline{display:block;width:min(340px,80%);color:var(--gold);margin:2px 0 6px}

/* header CTA pill: force white label (beats nav.primary a specificity) */
nav.primary a.btn{color:#fff !important;background:var(--navy);border-color:var(--navy)}
nav.primary a.btn:hover{color:#fff;background:#000e2e}

/* ---- interior page hero: auto hand-drawn gold underline under the h1 ---- */
.pagehero h1{position:relative;display:inline-block;padding-bottom:.3em}
.pagehero h1::after{content:"";position:absolute;left:2px;bottom:0;width:min(320px,74%);height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='20' viewBox='0 0 320 20' fill='none'%3E%3Cpath d='M5 12C90 4 210 4 315 9' stroke='%23FFC72C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;background-size:contain}

/* section heading hand-drawn underline (draw-on-scroll via data-draw) */
.wrap h2 + .head-underline{margin-top:2px}

/* ---- systemic: every panel is light in this theme, so force its text readable
        regardless of any legacy inline light colors (kills faint/invisible text) ---- */
.panel{color:var(--ink)}
.panel h1,.panel h2,.panel h3,.panel h4,.panel legend,.panel cite{color:var(--navy)!important}
.panel p,.panel li,.panel blockquote,.panel .stat-item .k{color:var(--ink)!important}
.panel .eyebrow{color:var(--navy)!important}

/* ---- animated lightning-bolt streak (draws on scroll via data-draw) ---- */
.bolt-flow{display:block;margin:8px auto;color:var(--brand);width:48px;height:150px}
.bolt-flow path{filter:drop-shadow(0 1px 5px rgba(0,80,208,.28))}
.bolt-flow.gold{color:var(--gold)}

/* ===== dynamic lightning loading splash (bold flash + screen shake + shockwave) ===== */
#splash{position:fixed;inset:0;z-index:99999;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#0a3d8c,#000f2a 74%)}
#splash.done{animation:spOut .5s ease forwards}
@keyframes spOut{to{opacity:0;visibility:hidden}}
#splash .stage{position:relative;display:flex;flex-direction:column;align-items:center;animation:spShake .45s .42s ease-out}
@keyframes spShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-4px,2px)}45%{transform:translate(4px,-2px)}70%{transform:translate(-2px,1px)}}
#splash .logo{width:min(260px,60vw);opacity:0;transform:scale(.9);
  animation:spLogoIn .4s .28s cubic-bezier(.2,1.3,.35,1) forwards, spBright .13s .45s 1}
@keyframes spLogoIn{to{opacity:1;transform:none}}
@keyframes spBright{0%,100%{filter:none}50%{filter:brightness(2.7) drop-shadow(0 0 28px #c3daff)}}
#splash .strike{position:absolute;top:-54%;left:50%;transform:translateX(-50%);width:140px;height:112%;z-index:2;opacity:0;
  filter:drop-shadow(0 0 18px #7fb0ff) drop-shadow(0 0 4px #fff);animation:spBolt .6s .24s ease-out forwards}
#splash .strike path{fill:#f4f8ff}
@keyframes spBolt{0%{opacity:0}7%{opacity:1}13%{opacity:.15}20%{opacity:1}40%{opacity:.85}100%{opacity:0}}
#splash .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:spFlash .45s .4s ease-out}
@keyframes spFlash{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}
#splash .ground{position:relative;width:1px;height:1px}
#splash .ring{position:absolute;left:50%;top:0;width:30px;height:30px;border:3px solid #a8caff;border-radius:50%;opacity:0;
  animation:spRing .6s .44s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}
@media(prefers-reduced-motion:reduce){#splash{display:none!important}}

/* =====================================================================
   FULL-WIDTH FLUID LAYOUT + 5 RESPONSIVE BREAKPOINTS
   ===================================================================== */
:root{--gutter:clamp(18px,3.6vw,80px)}
.wrap,.bar,.home-hero .inner,.pagehero .inner{max-width:1800px;margin-inline:auto;
  padding-left:var(--gutter);padding-right:var(--gutter)}
.home-hero p.lede{max-width:46ch}       /* keep line length readable when full-width */
.impact .wrap{max-width:1800px;margin-inline:auto}

/* BP5 · wide desktop (>=1440): use the room */
@media(min-width:1440px){
  .quick{grid-template-columns:repeat(4,1fr)}
  .gallery,.gallery.duo-grid{grid-template-columns:repeat(4,1fr)}
}
/* BP4 · desktop 1024-1439 = base grids */
/* BP3 · tablet (<=1023) */
@media(max-width:1023px){
  .home-hero .row{grid-template-columns:1fr;gap:26px}
  .home-hero .photo{order:-1;max-width:360px;justify-self:start}
  .quick{grid-template-columns:repeat(2,1fr)}
  .wrap.grid.cols-2,.panel.grid.cols-2{grid-template-columns:1fr}
}
/* BP2 · phablet (<=767): nav collapses to the hamburger (see <=900 rule),
   so no scroller here — that would be a side-scroll violation */
@media(max-width:767px){
  .quick{grid-template-columns:1fr 1fr}
  .gallery,.gallery.duo-grid{grid-template-columns:1fr 1fr}
  .grid2,.checkgrid{grid-template-columns:1fr}
  .bar{flex-wrap:wrap;row-gap:8px}
}
/* BP1 · phone (<=480) */
@media(max-width:480px){
  :root{--gutter:16px}
  .quick{grid-template-columns:1fr}
  .gallery,.gallery.duo-grid{grid-template-columns:1fr 1fr}
  .home-hero .l1{font-size:clamp(2rem,9vw,2.8rem)}
  .home-hero .brush{font-size:clamp(3.4rem,19vw,5rem)}
  .home-hero .photo{max-width:100%}
  .stat-band{grid-template-columns:1fr 1fr}
}

/* interior-page hero underline draws itself on load */
.pagehero h1::after{animation:ulineIn .85s .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes ulineIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.pagehero h1::after{animation:none}}

/* ===== gallery photos: natural full color in clean white frames ===== */
.gallery.duo-grid figure{background:none !important;border:5px solid #fff;border-radius:14px;
  box-shadow:0 22px 44px -30px rgba(11,27,58,.45)}
.gallery.duo-grid img{mix-blend-mode:normal !important;filter:none !important}

/* =====================================================================
   ELEVATION PASS (2026-07-14) — bring polish to the UA-CES / sonate.io
   bar while keeping the Kinetic Editorial DNA. Appended layer: wins by
   cascade order over the base theme above.
   ===================================================================== */

/* -- type scale: bigger, tighter, more editorial -- */
body{font-size:1.04rem;line-height:1.7}
h2{font-size:clamp(2.3rem,4.6vw,4rem);letter-spacing:-.025em}
.home-hero .l1{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.home-hero .brush{font-size:clamp(4rem,10vw,8rem)}
.home-hero p.lede{font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.65;color:var(--n-700)}
.eyebrow{letter-spacing:.16em;font-size:.78rem}

/* -- section rhythm: room to breathe -- */
main section{padding-block:clamp(64px,7.5vw,118px)}
main section + section{padding-top:clamp(24px,3vw,48px)}

/* -- one 8px radius discipline (no pills) -- */
.btn,nav.primary a,.card,.panel,.duo,.gallery.duo-grid figure,
.field input,.field select,.field textarea{border-radius:8px !important}
.btn{padding:13px 24px;font-weight:700;letter-spacing:.01em}
.btn:not(.line):hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,42,107,.55)}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}

/* -- slight glass: translucent cards with depth (matches Flash Ops) -- */
.card,.panel{background:rgba(255,253,248,.74) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15) !important;
  backdrop-filter:blur(10px) saturate(1.15) !important;
  border:1px solid rgba(0,42,107,.10) !important;
  box-shadow:0 18px 38px -28px rgba(0,42,107,.5)}
.quick a .card{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.quick a:hover .card{transform:translateY(-5px);box-shadow:0 26px 46px -26px rgba(0,42,107,.55)}


/* -- marquee band: TRAIN / COMPETE / BELONG, slow + seamless -- */
.flash-marquee{overflow:hidden;background:var(--navy);padding:14px 0;
  border-block:3px solid var(--gold)}
.flash-marquee .mq{display:flex;width:max-content;animation:mqScroll 26s linear infinite}
.flash-marquee span.seq{display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.22em;white-space:nowrap}
.flash-marquee .mbolt{width:.55em;height:1.25em;background:var(--gold);flex:0 0 auto;
  clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%)}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.flash-marquee .mq{animation:none}}

/* -- scroll reveal: gentle rise, motion-safe -- */
@media(prefers-reduced-motion:no-preference){
  [data-rvl]{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
  [data-rvl].in{opacity:1;transform:none}
}

/* -- nav: wrap on small screens, never horizontal-scroll -- */
@media(max-width:767px){
  nav.primary{flex-wrap:wrap !important;overflow-x:visible !important;padding-bottom:0}
}

/* -- footer: more presence -- */
footer.site{padding:64px 0 34px;border-top:3px solid var(--gold)}

/* footer columns collapse cleanly on small screens (fixes 40px h-overflow) */
@media(max-width:767px){
  footer .cols{grid-template-columns:1fr;gap:22px}
}
@media(min-width:768px) and (max-width:1023px){
  footer .cols{grid-template-columns:1fr 1fr}
}

/* ================= 2026-07-16: hero mosaic + partners + pennants ================= */

/* ---- mosaic hero: 24-photo collage under a light wash, content centered ---- */
.mosaic-hero{position:relative;overflow:hidden;padding:clamp(72px,9vw,140px) 0;text-align:center}
/* explicit template rows, NOT grid-auto-rows:1fr — WebKit/iOS treats auto rows as
   indefinite, so the imgs' height:100% resolves against the whole grid (giant slivers) */
.mosaic{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:6px}
/* height:auto + align-self:stretch, NOT height:100% — WebKit/iOS resolves a % height
   here against the whole grid container (giant sliver tiles); stretch sizes to the row */
.mosaic img{width:100%;height:auto;align-self:stretch;object-fit:cover;border-radius:8px;min-height:0}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(245,241,231,.9),rgba(245,241,231,.82) 45%,rgba(245,241,231,.94))}
.mosaic-hero .inner.center{position:relative;z-index:2;display:grid;justify-items:center;gap:6px}
.mosaic-hero .statement.oneline{margin:14px 0 4px;white-space:nowrap}
.mosaic-hero .oneline .l1{display:inline;font-weight:700;color:var(--navy);letter-spacing:-.02em;
  font-size:clamp(1.7rem,5.2vw,4.6rem);line-height:1}
/* Belong: same face as the rest of the statement, visually heavier (Ubuntu tops out
   at 700, so the extra weight comes from a same-color stroke) */
.mosaic-hero .oneline .belong{-webkit-text-stroke:.032em currentColor;paint-order:stroke fill}
.mosaic-hero .lede{font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.6;color:var(--n-700);
  max-width:none;margin:10px 0 4px}
.mosaic-hero .actions{display:flex;justify-content:center;align-items:center;gap:26px;
  flex-wrap:wrap;margin-top:22px}
@media(max-width:640px){
  /* phones: EXACTLY 9 equal tiles (3x3), no partial row (Maurice 2026-08-02
     — the fixed 29vw rows left a fourth row peeking cut-off at the bottom).
     1fr rows divide the hero evenly so all nine are identical and the grid
     always fills edge to edge; tiles 10+ hidden (10-12 were eager: ~45KB of
     hidden webp accepted; 13+ are lazy and never fetch). */
  .mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);grid-auto-rows:0}
  .mosaic img:nth-child(n+10){display:none}
  .mosaic-hero .statement.oneline{white-space:normal}
  .mosaic-hero .lede br{display:none}
}

/* ---- partners band (ua-ces "In Good Company" energy, Flash kit) ---- */
.partners-band{background:#fff;border-block:1px solid var(--line, #ddd5c2);padding:18px 0 14px}
.pb-label{display:flex;justify-content:center;margin:0 0 10px}
.partners-band .flash-marquee{background:transparent;border:none;padding:4px 0}
.partners-band .mq{animation-duration:34s}
.partners-band .pt{font-weight:700;color:var(--navy);letter-spacing:.04em;font-size:1.02rem}
.partners-band .pt.slot{color:var(--n-700);font-weight:500;font-style:italic}
.partners-band .mbolt{background:var(--gold)}
.partners-band span.seq{letter-spacing:0;color:var(--navy)}

/* ---- pennants (shared look with option 4) ---- */
.sb-pennants{text-align:center}
.sb-pennants .head-underline{margin-inline:auto}
.ts-penrow{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 14px;margin-top:30px}
.ts-pen{display:grid;justify-items:center;gap:8px;text-decoration:none;text-align:center}
.ts-pen .ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--navy);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s}
.ts-pen .ic{width:36px;height:36px;stroke:var(--navy);fill:none;stroke-width:1.7}
.ts-pen .nm{font-weight:700;color:var(--navy);line-height:1.15}
.ts-pen .mo{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-700)}
.ts-pen:hover .ring{transform:translateY(-5px);border-color:var(--brand);
  box-shadow:0 18px 30px -16px rgba(0,80,208,.5)}
.ts-pen.now .ring{border-color:var(--gold);background:var(--gold)}
.ts-pen.now .mo::after{content:" · now";color:var(--brand)}
.ts-hint{margin-top:18px;font-size:.84rem;color:var(--n-700)}
@media(max-width:1023px){.ts-penrow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ts-penrow{grid-template-columns:1fr 1fr}}

/* ---- mission: centered, no longer bundled left ---- */
.mission-center{text-align:center}
.mission-center blockquote{margin-inline:auto !important;max-width:56ch !important}
.mission-center .eyebrow{justify-content:center}
.mission-center .bolt-rule{display:flex;justify-content:center}

/* ---- get-involved: sport-focus two-column mode ---- */
.sport-side .ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--navy);margin-bottom:14px}
.sport-side .ring .ic{width:42px;height:42px;stroke:var(--navy);fill:none;stroke-width:1.7}
.sport-side.now .ring{background:var(--gold);border-color:var(--gold)}
.sport-side .season-chip{display:inline-block;margin:4px 0 12px;padding:4px 10px;border-radius:8px;
  background:var(--navy);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sport-side.now .season-chip{background:var(--gold);color:var(--navy)}
.sport-side ul{margin:14px 0 0;padding-left:20px}
.sport-side li{margin-bottom:8px}
.sport-side .backlink{display:inline-block;margin-top:18px;font-weight:700;color:var(--brand)}

/* hero fine-tuning: page-embedded styles fight the theme — insist */
.mosaic-hero .lede{max-width:none !important;font-size:clamp(1.02rem,1.5vw,1.3rem) !important}
.hero-veil{background:linear-gradient(180deg,rgba(245,241,231,.85),rgba(245,241,231,.72) 45%,rgba(245,241,231,.92))}

/* partners band: real logos, thank-you label */
.partners-band .pt.logo{display:inline-flex;align-items:center}
.partners-band .pt.logo img{height:48px;width:auto;display:block}
.partners-band span.seq{gap:44px;padding-right:44px;align-items:center}

/* hero veil: gold base per Maurice */
.hero-veil{background:linear-gradient(180deg,rgba(255,199,44,.82),rgba(255,199,44,.68) 45%,rgba(255,199,44,.88))}

/* hero veil: slate #414B63 trial (over the gold trial) */
.hero-veil{background:linear-gradient(180deg,rgba(65,75,99,.85),rgba(65,75,99,.7) 45%,rgba(65,75,99,.9))}
/* dark wash flips the hero copy light */
.mosaic-hero .oneline .l1{color:#fff}
.mosaic-hero .lede{color:#e6ebf5 !important}
.mosaic-hero .badge{background:var(--gold);color:var(--navy)}
.mosaic-hero .cta-arrow{color:#fff}

/* partners band v2: clickable hi-res logos + wordmark chips; pause to click */
.partners-band .pt.logo img{height:56px;width:auto;display:block}
.partners-band a.pt.logo{display:inline-flex;align-items:center;border-radius:8px;padding:4px 6px;
  transition:transform .18s ease}
.partners-band a.pt.logo:hover{transform:translateY(-2px)}
.partners-band .pt.word{font-weight:700;color:var(--navy);letter-spacing:.05em;font-size:1.02rem;
  border:1.5px solid var(--line,#ddd5c2);border-radius:8px;padding:10px 16px;background:#fff}
.partners-band .flash-marquee:hover .mq,
.partners-band .flash-marquee:focus-within .mq{animation-play-state:paused}

/* BELONG. in gold on the slate wash (beats the .l1 white above by source order) */
.mosaic-hero .oneline .belong{color:var(--gold)}

/* partners band v3: all-logo roster, crisp downscales */
.partners-band .pt.word{display:none}
.partners-band .pt.logo img{height:56px;width:auto;display:block;
  image-rendering:-webkit-optimize-contrast}
.partners-band .mq{animation-duration:44s}

/* partners band v5: one uniform optical size in a fixed cell, so a wide
   wordmark and a small crest read as one curated row, not a jumble.
   Grayscale at rest lifts to full color on hover to further unify. */
.partners-band a.pt.logo,.partners-band .pt.logo{
  height:64px;display:inline-flex;align-items:center;justify-content:center}
.partners-band .pt.logo img{height:38px;width:auto;max-width:160px;object-fit:contain;
  filter:grayscale(1) opacity(.82);transition:filter .2s ease}
.partners-band a.pt.logo:hover img,.partners-band a.pt.logo:focus-visible img{filter:none}
/* gentle exceptions only for pure wordmarks that go illegible at 38px tall */
.lg-sportsworld img,.lg-eagles img,.lg-blakslee img{height:30px !important}

/* ---- prefooter: the contact form lives above the footer on every page ---- */
.prefooter{background:var(--navy);color:#fff;padding-block:clamp(48px,6vw,84px)}
.prefooter .pf-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,72px);align-items:start}
.prefooter .eyebrow{color:var(--gold)}
.prefooter h2{color:#fff;font-size:clamp(1.7rem,2.8vw,2.4rem)}
.prefooter p{color:#d9e4f8}
.prefooter .contact-rows{display:grid;gap:10px;margin-top:18px}
.prefooter .contact-rows a,.prefooter .contact-rows span{display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;font-weight:500}
.prefooter .contact-rows a:hover{color:var(--gold)}
.prefooter .contact-rows .ic{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;flex:0 0 auto}
.pf-form{display:grid;gap:14px}
.pf-form .pf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:5px;color:#e6ebf5}
.pf-form input,.pf-form select,.pf-form textarea{width:100%;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.62);border-radius:8px;color:#fff;padding:10px 12px;font:inherit}
.pf-form input:focus,.pf-form select:focus,.pf-form textarea:focus{
  background:rgba(255,255,255,.24);border-color:var(--gold);outline:none}
.pf-form input::placeholder,.pf-form textarea::placeholder{color:rgba(233,240,252,.7)}
.pf-form select option{color:var(--navy);background:#fff}
.pf-form .btn{justify-self:start;background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pf-form .btn:hover{background:#ffd45c;border-color:#ffd45c}
@media(max-width:860px){
  .prefooter .pf-grid{grid-template-columns:1fr}
  .pf-form .pf-row{grid-template-columns:1fr}
}

/* ================= Leah brief: 3-part header ================= */
.bar.bar3{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.bar3 .so-mark img{display:block;width:46px;height:46px}
.bar3 .mcf-mark img{display:block;width:58px;height:auto}
.bar3 nav.primary{justify-content:center;margin-left:0}
/* dropdowns */
.navdrop{position:relative}
.navdrop > button{font:inherit;font-weight:700;color:var(--navy);background:none;border:none;
  padding:9px 11px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.navdrop > button:hover{background:rgba(0,80,208,.10);color:var(--brand)}
.navdrop .caret{font-size:.8em;transition:transform .15s}
.navdrop[data-open] .caret{transform:rotate(180deg)}
.navdrop .menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  min-width:210px;display:none;background:#fff;border:1px solid var(--line,#ddd5c2);
  border-radius:8px;box-shadow:0 24px 44px -22px rgba(0,42,107,.45);padding:8px;z-index:300}
.navdrop[data-open] .menu{display:grid;gap:2px}
.navdrop .menu a{display:block;padding:9px 12px;border-radius:8px;font-weight:600;color:var(--navy);
  text-decoration:none;white-space:nowrap}
.navdrop .menu a:hover{background:rgba(0,80,208,.10);color:var(--brand)}
@media(max-width:900px){
  .bar.bar3{grid-template-columns:auto 1fr auto}
  .bar3 nav.primary{grid-column:1 / -1;grid-row:2;justify-content:center}
  .bar3 .so-mark{grid-row:1}
  .bar3 .mcf-mark{grid-row:1;justify-self:end}
  .navdrop .menu{position:static;transform:none;box-shadow:none;border:none;background:rgba(0,80,208,.05)}
}

/* ---- Keep Up with the Flash ---- */
.keepup{background:#fff;border-bottom:1px solid var(--line,#ddd5c2)}
.ku-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:center}
.ku-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.ku-form .ku-email{grid-column:1 / -1}
.ku-form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:5px}
.ku-form input{width:100%;border:1.5px solid var(--navy);border-radius:8px;padding:10px 12px;font:inherit;background:#fff}
.ku-form .btn{justify-self:start}
@media(max-width:860px){.ku-grid{grid-template-columns:1fr}}

/* ---- calendar embeds ---- */
.cal-embed{margin-top:22px;border:1px solid var(--line,#ddd5c2);border-radius:8px;overflow:hidden;
  background:#fff;box-shadow:0 18px 36px -28px rgba(0,42,107,.4)}
.cal-embed iframe{display:block;width:100%;height:600px;border:0}
.cal-embed.compact iframe{height:420px}
.cal-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* ---- seasons + current events ---- */
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.season-card h3{margin-bottom:2px}
.season-card .mo{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-700)}
.season-card ul{margin:10px 0 0;padding-left:18px}
.season-card li{margin-bottom:6px}
.current-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.current-card .when{display:inline-block;background:var(--gold);color:var(--navy);border-radius:8px;
  padding:3px 10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
@media(max-width:1023px){.season-grid{grid-template-columns:1fr 1fr}.current-list{grid-template-columns:1fr}}
@media(max-width:600px){.season-grid{grid-template-columns:1fr}}

/* ---- follow band ---- */
.follow-band{text-align:center;background:#fff;border-top:1px solid var(--line,#ddd5c2)}
.follow-links{display:flex;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.follow-links .btn .ic{width:18px;height:18px;vertical-align:-3px;margin-right:6px;stroke:currentColor;fill:none;stroke-width:2}

/* mini steps + checkbox grids reused by the new forms */
.steps.mini li{padding:12px 14px 12px 56px;font-size:.98rem}
.steps.mini li::before{width:28px;height:28px;left:14px}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:8px}
.chk{display:flex;align-items:center;gap:10px;font-weight:500;min-height:44px;padding:6px 4px;line-height:1.35}
/* larger, easy-to-hit checkboxes/radios — caregivers, older volunteers,
   and athletes with motor/vision differences are core users here */
.chk input[type=checkbox],.chk input[type=radio],
.joinform input[type=checkbox],.joinform input[type=radio],
.pf-form input[type=checkbox],.pf-form input[type=radio],
form.block input[type=checkbox],form.block input[type=radio]{
  width:22px;height:22px;flex:0 0 auto;accent-color:var(--navy);cursor:pointer}

/* official SOOH lockup top-left (SO brand: clear space around the mark) */
.bar3 .so-mark img{width:195px;height:auto;display:block;padding:2px 0}
@media(max-width:1100px){.bar3 .so-mark img{width:160px}}
@media(max-width:900px){.bar3 .so-mark img{width:150px}}

/* SO brand guidelines p.34: the color mark sits on WHITE only — header goes
   white glass instead of cream so the SOOH lockup is compliant */
header.site{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line,#ddd5c2)}

/* ---- prefooter IS the footer now ---- */
.pf-meta{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:10px 28px;
  font-size:.82rem;color:#bccbe8;max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
.pf-meta a{color:#fff}
.pf-meta a:hover{color:var(--gold)}

/* ---- clean join form (page + modal share .joinform) ---- */
.joinform{display:grid;gap:18px;text-align:left}
.joinform fieldset{border:1.5px solid var(--line,#ddd5c2);border-radius:8px;
  padding:14px 16px 16px;margin:0}
.joinform legend{font-weight:700;padding:0 6px}
.joinform .checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-top:6px}
.joinform .chk{display:flex;align-items:center;gap:10px;font-weight:500;min-height:44px;padding:6px 4px;line-height:1.35}
.joinform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.joinform .field label{display:block;font-weight:700;font-size:.9rem}
.joinform .field input{display:block;width:100%;margin-top:5px;border:1.5px solid var(--navy);
  border-radius:8px;padding:10px 12px;font:inherit;font-weight:400;background:#fff}
.joinform .other-wrap{margin-top:10px}
@media(max-width:560px){.joinform .checkgrid,.joinform .grid2{grid-template-columns:1fr}}

/* ---- floating bolt: join from anywhere ---- */
.join-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:60px;height:60px;
  border:none;border-radius:8px;background:var(--gold);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(0,16,48,.5);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s}
.join-fab img{height:38px;width:auto}
.join-fab:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 20px 36px -12px rgba(0,16,48,.55)}
.join-fab .fab-tip{position:absolute;right:70px;top:50%;transform:translateY(-50%);
  background:var(--navy);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s}
.join-fab:hover .fab-tip,.join-fab:focus-visible .fab-tip{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .join-fab{animation:fabPulse 5s ease-in-out infinite}
  @keyframes fabPulse{0%,88%,100%{box-shadow:0 14px 30px -10px rgba(0,16,48,.5)}
    94%{box-shadow:0 14px 30px -10px rgba(0,16,48,.5),0 0 0 10px rgba(255,199,44,.25)}}
}

/* ---- join modal ---- */
.join-modal{margin:auto;width:min(680px,calc(100vw - 32px));max-height:86dvh;
  border:none;border-radius:8px;padding:0;background:#fff;
  box-shadow:0 40px 90px -30px rgba(0,16,48,.6)}
.join-modal::backdrop{background:rgba(0,26,69,.55);backdrop-filter:blur(3px)}
.join-modal .jm-head{display:flex;align-items:center;justify-content:space-between;
  background:var(--navy);color:#fff;padding:14px 20px}
.join-modal .jm-head h2{margin:0;color:#fff;font-size:1.3rem}
.join-modal .jm-close{background:none;border:none;color:#fff;font-size:1.1rem;
  cursor:pointer;padding:6px 10px;border-radius:8px}
.join-modal .jm-close:hover{background:rgba(255,255,255,.15)}
.join-modal .joinform{padding:20px;overflow-y:auto;max-height:calc(86dvh - 60px)}
.joinform [hidden]{display:none !important}

/* join page hero: same mosaic-under-slate treatment as home */
.join-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3.4rem);letter-spacing:-.02em;
  text-transform:none;font-style:normal;max-width:22ch;margin:14px 0 4px}
.join-hero .badge{background:var(--gold);color:var(--navy)}
.join-hero .lede{color:#e6ebf5 !important}

/* ============ above-the-fold discipline (2026-07-16 audit) ============
   The first viewport must open on content. Page heroes were double-padded:
   their own inner padding PLUS the elevation layer's section padding. */
main > section:first-child,
main > section:first-of-type{padding-top:clamp(18px,2.2vw,32px) !important}
.pagehero .inner{padding-top:12px !important;padding-bottom:30px !important}
.mosaic-hero{padding-top:clamp(24px,3vw,44px) !important;
  padding-bottom:clamp(44px,5.5vw,80px) !important}
.join-hero{padding-bottom:clamp(36px,4.5vw,64px) !important}

/* mobile header: two rows were costing 194px — tighten to the essentials */
@media(max-width:767px){
  .bar.bar3{gap:8px;padding-top:8px;padding-bottom:6px}
  .bar3 .so-mark img{width:132px}
  .bar3 .mcf-mark img{width:44px}
  nav.primary a,.navdrop > button{font-size:.86rem;padding:6px 8px}
  nav.primary{row-gap:0}
}

/* ---- ticker: no loop-jump — the track only moves once every logo is in ---- */
.partners-band .mq{animation-play-state:paused}
.partners-band.go .mq{animation-play-state:running}
.partners-band .flash-marquee:hover .mq{animation-play-state:paused !important}

/* ---- page heroes: eyebrow over centered h1 + descriptor ---- */
.pagehero .inner{text-align:center;display:grid;justify-items:center}
.pagehero .inner .eyebrow{justify-content:center}
.pagehero p{margin-inline:auto}
.mosaic-hero .inner.center .eyebrow{color:#ffd45c}
.mosaic-hero .inner.center .eyebrow::before{background:var(--gold)}

/* ---- join hero: copy steps forward ---- */
.join-hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:18ch;
  text-shadow:0 4px 30px rgba(0,16,48,.55);line-height:1.04}
.join-hero .lede{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:500;
  text-shadow:0 2px 16px rgba(0,16,48,.6)}

/* ---- MCF badge in the header: +25% ---- */
.bar3 .mcf-mark img{width:73px}
@media(max-width:767px){.bar3 .mcf-mark img{width:55px}}

/* dropdown forgiveness: bridge the gap + let ::after keep the hover alive */
.navdrop[data-open]::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:16px}

/* checkbox rows: brand.css .field label (space-between) must not scatter them */
fieldset .checkgrid .chk,.checkgrid .chk,label.chk{display:flex !important;
  justify-content:flex-start !important;align-items:center;gap:8px;
  text-align:left;width:auto;font-weight:500}

/* checkboxes/radios are not text fields: kill the global width stretch */
input[type="checkbox"],input[type="radio"]{width:auto !important;flex:0 0 auto}

/* ---- anchors land content mid-viewport (where the page allows) ---- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id],footer[id],[id^="register"]{scroll-margin-top:max(110px,26vh)}

/* ---- Instagram strip: 4 latest posts ---- */
.ig-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 26px}
.ig-post{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:8px;
  border:1px solid var(--line,#ddd5c2);background:var(--navy)}
.ig-post img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.ig-post:hover img{transform:scale(1.05)}
.ig-post .cap{position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;color:#fff;
  font-size:.82rem;line-height:1.35;text-align:left;opacity:0;transition:opacity .25s;
  background:linear-gradient(180deg,transparent,rgba(0,16,48,.88))}
.ig-post:hover .cap,.ig-post:focus-visible .cap{opacity:1}
.ig-post .ig-ico{position:absolute;top:10px;right:10px;width:22px;height:22px;
  stroke:#fff;fill:none;stroke-width:2;filter:drop-shadow(0 2px 6px rgba(0,16,48,.7))}
@media(max-width:767px){.ig-strip{grid-template-columns:1fr 1fr}}

/* ---- hero CTAs: matched shapes, gold icons, white text ---- */
.btn-hero{display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;font-size:1.06rem}
.btn-hero .bico{height:20px;width:auto;flex:0 0 auto}
.btn-hero .bico.heart{width:20px;height:20px;fill:var(--gold);stroke:var(--gold);stroke-width:1.5}
.btn-blue600{background:var(--blue-600,#0050D0);border-color:var(--blue-600,#0050D0);color:#fff}
.btn-blue600:hover{background:var(--blue-700,#0040A8);border-color:var(--blue-700,#0040A8)}

/* ============ seam discipline (universal): a hero introduces, then hands
   off — hero bottom padding + next-section top padding must not stack ==== */
.pagehero{padding-bottom:clamp(18px,2.2vw,32px) !important}
.pagehero + section,.mosaic-hero + section,.mosaic-hero + .partners-band{
  padding-top:clamp(20px,2.5vw,36px) !important}
.join-hero{padding-bottom:clamp(26px,3vw,44px) !important}
main section + section{padding-top:clamp(20px,2.5vw,40px)}

/* ---- hero lede: louder ---- */
.mosaic-hero .lede{font-size:clamp(1.18rem,1.9vw,1.6rem) !important;
  font-weight:500;line-height:1.55}

/* ---- accessibility widget (bottom-left) ---- */
.a11y-fab{position:fixed;left:22px;bottom:22px;z-index:900;width:52px;height:52px;
  border:2px solid var(--navy);border-radius:8px;background:#fff;color:var(--navy);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 26px -10px rgba(0,16,48,.4);transition:transform .18s}
.a11y-fab svg{width:30px;height:30px}
.a11y-fab:hover{transform:translateY(-2px)}
.a11y-panel{position:fixed;left:22px;bottom:84px;z-index:901;width:230px;
  background:#fff;border:1.5px solid var(--navy);border-radius:8px;padding:16px;
  box-shadow:0 26px 50px -20px rgba(0,16,48,.5);display:grid;gap:10px}
.a11y-panel[hidden]{display:none}
.a11y-title{margin:0;font-weight:700;font-size:.95rem}
.a11y-panel label{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:500}
.a11y-reset{margin-top:4px;justify-self:start;background:none;border:1.5px solid var(--line,#ddd5c2);
  border-radius:8px;padding:6px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.a11y-reset:hover{border-color:var(--navy)}

/* ---- the modes ---- */
html[data-a11y-text] body{font-size:118%}
html[data-a11y-text] .mosaic-hero .oneline .l1{font-size:clamp(1.9rem,5.6vw,5rem)}
html[data-a11y-links] a{text-decoration:underline !important;text-underline-offset:3px}
html[data-a11y-contrast] body{background:#fff}
html[data-a11y-contrast] .hero-veil{background:rgba(10,14,22,.93) !important}
html[data-a11y-contrast] p,html[data-a11y-contrast] .lede{color:var(--navy)}
html[data-a11y-contrast] .mosaic-hero .lede,
html[data-a11y-contrast] .mosaic-hero .oneline .l1{color:#fff !important}
html[data-a11y-contrast] .hint,html[data-a11y-contrast] .eyebrow{color:#1c2a4a}
html[data-a11y-contrast] .partners-band .pt.slot{color:#1c2a4a}
html[data-a11y-motion] *,html[data-a11y-motion] *::before,html[data-a11y-motion] *::after{
  animation:none !important;transition:none !important}
html[data-a11y-motion] #splash{display:none !important}
html[data-a11y-motion] html{scroll-behavior:auto}

/* ============ typography law: no orphan words, ever ============
   Headings/short copy balance their lines (kills single-word tails and
   often pulls text a line tighter); body copy uses pretty for last-line
   orphan control. Progressive enhancement — older engines just wrap. */
h1,h2,h3,.lede,.pagehero p,.d-copy p,blockquote,figcaption,.hint,
.card p,.panel p,.steps li{text-wrap:balance}
p{text-wrap:pretty}

/* ============ personalization panel (PageAssist-parity) ============ */
.skiplink{position:fixed;top:-60px;left:16px;z-index:1200;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700;transition:top .15s}
.skiplink:focus{top:12px}
.a11y-panel{position:fixed;left:22px;bottom:84px;z-index:950;width:min(360px,calc(100vw - 44px));
  max-height:min(72dvh,640px);display:grid;grid-template-rows:auto 1fr;
  background:#fff;border:1.5px solid var(--navy);border-radius:8px;overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(0,16,48,.55)}
.a11y-panel[hidden]{display:none}
.pa-head{position:relative;background:var(--navy);color:#fff;padding:16px 44px 14px 18px}
.pa-title{margin:0;font-weight:700;font-size:1.05rem;color:#fff}
.pa-sub{margin:4px 0 0;font-size:.8rem;color:#c9d7f2}
.pa-close{position:absolute;top:10px;right:10px;background:none;border:1.5px solid rgba(255,255,255,.5);
  border-radius:8px;color:#fff;padding:5px 9px;cursor:pointer}
.pa-close:hover{background:rgba(255,255,255,.15)}
.pa-body{overflow-y:auto;padding:14px 16px 16px}
.pa-sec{margin:12px 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--n-700,#4d5a74);border-bottom:1px solid #eee7d4;padding-bottom:5px}
.pa-sec:first-child{margin-top:0}
.pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pa-tile{display:grid;justify-items:center;gap:3px;padding:12px 8px 10px;font:inherit;
  font-size:.82rem;font-weight:600;color:var(--navy);background:#f7f4ea;border:1.5px solid transparent;
  border-radius:8px;cursor:pointer;text-align:center;line-height:1.2}
.pa-tile:hover{border-color:var(--navy)}
.pa-tile .pa-ico{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:700}
.pa-tile em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--n-700,#4d5a74)}
.pa-tile[data-on]{background:#eaf1fe;border-color:var(--brand)}
.pa-tile[data-on] .pa-ico{background:var(--brand)}
.pa-tile[data-on] em{color:var(--brand)}
.pa-reset{margin-top:14px;width:100%;padding:11px;font:inherit;font-weight:700;
  background:#f1ede0;border:1.5px solid var(--line,#ddd5c2);border-radius:8px;cursor:pointer}
.pa-reset:hover{border-color:var(--navy)}

/* ---- the modes ---- */
/* Dyslexia mode must beat per-element font-family. A body-only rule only reaches
   elements that INHERIT their font — but themes (esp. Squarespace) pin font-family
   directly on p, li, and paragraph blocks, so those kept the theme font and it
   looked like the toggle "only worked on headers." Target everything (decorative
   .brush/.hand included — all text should read cleanly); keep the brand SVG
   lockup text in Ubuntu. */
/* :not(#_) is a specificity boost — it excludes nothing (no element has id="_")
   but adds an ID's weight, so this wins even against highly-specific theme font
   rules like .fe-block .sqsp-block-content p. svg text re-pinned below to keep
   the brand lockup + pictograms in Ubuntu. */
html[data-pa-font] body:not(#_),
html[data-pa-font] *:not(#_){
  font-family:'OpenDyslexic',Verdana,Arial,sans-serif !important}
html[data-pa-font] svg text:not(#_){font-family:'Ubuntu',system-ui,sans-serif !important}
html[data-pa-fontsize="1"]{font-size:115%}
html[data-pa-fontsize="2"]{font-size:130%}
html[data-pa-fontsize="3"]{font-size:145%}
html[data-pa-spacing="1"] body{letter-spacing:.06em;word-spacing:.12em;line-height:1.9}
html[data-pa-spacing="2"] body{letter-spacing:.12em;word-spacing:.25em;line-height:2.2}
html[data-pa-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 12-6 1 3.5 6-3 1.6L9 16l-5 4z' fill='%23002a6b' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important}
html[data-pa-contrast="1"] body{background:#fff}
html[data-pa-contrast="1"] .hero-veil{background:rgba(10,14,22,.94) !important}
html[data-pa-contrast="1"] p,html[data-pa-contrast="1"] .hint{color:#0a1430}
html[data-pa-contrast="1"] .mosaic-hero .lede,
html[data-pa-contrast="1"] .mosaic-hero .oneline .l1{color:#fff !important}
html[data-pa-contrast="2"]{filter:invert(1) hue-rotate(180deg)}
html[data-pa-contrast="2"] img,html[data-pa-contrast="2"] canvas,
html[data-pa-contrast="2"] iframe,html[data-pa-contrast="2"] video{filter:invert(1) hue-rotate(180deg)}
html[data-pa-focus] :focus{outline:4px solid var(--gold) !important;outline-offset:3px !important}
html[data-pa-focus] :focus-visible{outline:4px solid var(--gold) !important}
html[data-pa-links] a:not(.btn):not(.pa-tile){outline:2px solid var(--brand);outline-offset:2px;
  background:rgba(0,80,208,.08);text-decoration:underline !important}
html[data-pa-headings] h1,html[data-pa-headings] h2,html[data-pa-headings] h3{
  outline:3px solid var(--gold);outline-offset:4px;background:rgba(255,199,44,.14)}
html[data-pa-buttons] button:not(.pa-tile):not(.pa-close):not(.pa-reset),
html[data-pa-buttons] .btn,html[data-pa-buttons] input,html[data-pa-buttons] select,
html[data-pa-buttons] textarea{outline:3px dashed var(--danger) !important;outline-offset:3px}
html[data-pa-motion] *,html[data-pa-motion] *::before,html[data-pa-motion] *::after{
  animation:none !important;transition:none !important}
html[data-pa-motion] #splash{display:none !important}
html[data-pa-images] img:not(.pa-keep){visibility:hidden}
html[data-pa-images] .mosaic,html[data-pa-images] .livebg{visibility:hidden}
.pa-altbadge{display:inline-block;background:var(--navy);color:#fff;font-size:.75rem;
  font-weight:600;padding:3px 8px;border-radius:8px;margin:4px;max-width:260px;vertical-align:top}
#pa-guide{position:fixed;left:0;right:0;height:4px;background:var(--gold);z-index:1100;
  pointer-events:none;box-shadow:0 0 0 1px rgba(0,26,69,.35)}
.pa-maskpart{position:fixed;left:0;right:0;background:rgba(4,12,30,.55);z-index:1090;pointer-events:none}

/* inline SOOH lockup (program name = Medina County per guidelines p.26) */
.bar3 .so-mark .so-lockup-svg{width:195px;height:auto;display:block;padding:2px 0}
@media(max-width:1100px){.bar3 .so-mark .so-lockup-svg{width:160px}}
@media(max-width:767px){.bar3 .so-mark .so-lockup-svg{width:140px}}

/* ============ mobile pass (<767 attention) ============ */
/* steps base was never ported from the option-4 study — circles, not "1." */
.steps{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 60px;background:#fff;
  border:1.5px solid var(--line,#ddd5c4);border-radius:8px}
.steps li::before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);
  font-weight:700;display:grid;place-items:center}

/* calendar embeds: month grids are unreadable on phones — agenda takes over */
.cal-embed iframe.cal-mobile{display:none}
@media(max-width:767px){
  .cal-embed iframe.cal-desktop{display:none}
  .cal-embed iframe.cal-mobile{display:block;height:520px}
  .cal-actions{flex-direction:column;align-items:stretch}
  .cal-actions .btn{text-align:center}
}

/* ============ mobile: center-justified everything (≤767) ============
   One-hand ergonomics for lefties and righties alike; visual balance. */
@media(max-width:767px){
  main section,main .wrap,.pagehero .inner,.prefooter .pf-info{text-align:center}
  .eyebrow{justify-content:center;display:flex}
  .home-hero p.lede,main p,.hint{margin-inline:auto}
  .head-underline,.uline{margin-inline:auto}
  .cta-arrow{justify-content:center}
  .actions,.follow-links,.cal-actions{justify-content:center}
  .sb-pennants .ts-penrow{justify-items:center}
  .prefooter .contact-rows a,.prefooter .contact-rows span{justify-content:center}
  .pf-meta{justify-content:center;text-align:center}
  .g-meta{justify-content:center}
  /* steps: circle above centered text instead of hanging left */
  .steps li{padding:16px 16px 14px;text-align:center}
  .steps li::before{position:static;transform:none;margin:0 auto 8px}
  /* forms: section legends/eyebrows center, but field label→input pairs keep a
     left edge so the eye can scan straight down the fields (form ergonomics) */
  .joinform,.pf-form,form.block{text-align:center}
  .joinform legend{text-align:center}
  .joinform .field label,.joinform .field,
  .pf-form label,.pf-form .pf-row,
  form.block label,form.block .field{text-align:left}
  .joinform .field input,.joinform .field select,.joinform .field textarea,
  .pf-form input,.pf-form select,.pf-form textarea,
  form.block input,form.block select,form.block textarea{text-align:left}
  .checkgrid .chk,label.chk{justify-content:flex-start !important;text-align:left}
  .pf-form .btn,.joinform .btn{justify-self:center;margin-inline:auto}
  .mission-center blockquote{text-align:center}
  /* stretch, NOT center: center makes tile width depend on the (lazy, maybe
     unloaded) image and the whole target collapses to ~2px until scroll */
  .ig-strip{justify-items:stretch}
}

/* sport cards: on mobile the card body is center-aligned, so center the icon
   too (otherwise it hangs top-left and looks accidental beside centered text) */
@media(max-width:767px){
  .sportgrid .card{align-items:center;text-align:center}
}

/* gallery: hold the layout even if a remote photo is slow or 404s, so the
   section never collapses to empty cream under the CTA */
.gallery figure,.gallery.duo-grid figure{background:#ece6d6;border-radius:8px;
  overflow:hidden;aspect-ratio:4/3}
/* no min-height here: combined with aspect-ratio it transfers into a min-WIDTH
   (240px) that overflows narrow mobile grid tracks; the ratio alone holds layout */
.gallery figure img,.gallery.duo-grid figure img{width:100%;height:100%;object-fit:cover;display:block}

/* clear the fixed corner FABs so the last content isn't stuck under them */
@media(max-width:767px){
  main{padding-bottom:72px}
}

/* dropdown parent shows the active pill when you're on its section's page */
.navdrop > button[aria-current="page"]{background:var(--navy);color:#fff}

/* ============ bolt de-duplication: one bolt per moment ============ */
section:not(.page-section):not(.region):has(.bolt-rule) .eyebrow::before,
.panel:has(.bolt-rule) .eyebrow::before,
.wrap:has(> .bolt-flow) .eyebrow::before{display:none}

/* ============ drawn-on bolts: perfectly even breathing room ============ */
main > .bolt-flow{margin-block:clamp(30px,4vw,56px)}
main > section:has(+ .bolt-flow){padding-bottom:0 !important}
main > .bolt-flow + section{padding-top:0 !important}
.wrap > .bolt-flow{display:block;margin:0 auto clamp(30px,4vw,56px)}

/* ============ gentle viewport nudge: proximity snap, never a cage ==== */
@media(prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  main > section{scroll-snap-align:start;scroll-snap-margin-top:96px;scroll-margin-top:96px}
  footer.prefooter{scroll-snap-align:start}
}

/* ============ ONE spacing rhythm (2026-07-17) ============
   Every section owns clamp(44,5.5vw,80) top and bottom — every boundary is
   therefore identical. Exceptions: page-top fold + hero handoffs only. */
main > section{padding-block:clamp(44px,5.5vw,80px) !important}
main > section:first-child{padding-top:clamp(18px,2.2vw,32px) !important}
.mosaic-hero{padding-top:clamp(24px,3vw,44px) !important;
  padding-bottom:clamp(44px,5.5vw,80px) !important}
.pagehero + section,.mosaic-hero + section,.mosaic-hero + .partners-band{
  padding-top:clamp(20px,2.5vw,36px) !important}
/* bolts sit centered in the standard gap — the earlier zeroing retires */
main > section:has(+ .bolt-flow){padding-bottom:clamp(44px,5.5vw,80px) !important}
main > .bolt-flow + section{padding-top:clamp(44px,5.5vw,80px) !important}
main > .bolt-flow{margin-block:0}
/* hero CTAs centered at every width */
.mosaic-hero .actions{justify-content:center !important;align-items:center !important}
/* footer joins the same rhythm token */
footer.prefooter{padding-block:clamp(44px,5.5vw,80px)}

/* hero veil: heavier so the type owns the frame */
.hero-veil{background:linear-gradient(180deg,rgba(65,75,99,.93),rgba(65,75,99,.82) 45%,rgba(65,75,99,.95))}
/* partners label: centered even when it wraps (band isn't a <section>) */
.partners-band{text-align:center}
.pb-label{display:flex;justify-content:center;text-align:center;flex-wrap:wrap;
  row-gap:2px;max-width:34ch;margin-inline:auto}

/* pagehero underline centers under its centered heading */
.pagehero h1::after{left:50%;transform:translateX(-50%);background-position:center}

/* snap: desktop-only — phones scroll free */
@media(max-width:767px){html{scroll-snap-type:none}}

/* ---- season cards v2: seasonal accents + pictogram rows ---- */
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.season-card{padding:0;overflow:hidden;text-align:left;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.season-card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px rgba(0,42,107,.5)}
.sc-head{padding:16px 18px 14px;color:#fff}
.sc-head h3{margin:0;color:#fff;font-size:1.25rem}
.sc-head .mo{display:inline-block;margin-top:3px;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.s-winter .sc-head{background:linear-gradient(135deg,var(--navy),#0a3d8c)}
.s-spring .sc-head{background:linear-gradient(135deg,var(--sky),#5b9bff)}
.s-summer .sc-head{background:linear-gradient(135deg,#e0a800,var(--gold));color:var(--navy)}
.s-summer .sc-head h3{color:var(--navy)}
.s-fall .sc-head{background:linear-gradient(135deg,var(--brand),#0070f0)}
.sc-list{list-style:none;margin:0;padding:12px 14px 16px;display:grid;gap:8px}
.sc-list li{display:flex;align-items:center;gap:10px;font-weight:600}
.sc-list .si{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;background:rgba(0,80,208,.09)}
.sc-list .ic{width:19px;height:19px;stroke:var(--navy);fill:none;stroke-width:1.8}
.s-winter .sc-list .si{background:rgba(0,42,107,.1)}
.s-spring .sc-list .si{background:rgba(46,125,240,.12)}
.s-summer .sc-list .si{background:rgba(255,199,44,.22)}
.s-fall .sc-list .si{background:rgba(0,80,208,.12)}
@media(max-width:1023px){.season-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.season-grid{grid-template-columns:1fr}
  .sc-head{text-align:center}
  .sc-list li{justify-content:center}}

/* ≤767 fixes: steps.mini kept its desktop badge padding (specificity), and
   plain content lists strand their disc markers at the card edge when text centers */
@media(max-width:767px){
  .steps.mini li{padding:16px 16px 14px;text-align:center}
  .steps.mini li::before{position:static;left:auto;transform:none;margin:0 auto 8px}
  .panel ul:not([class]),.block ul:not([class]){list-style:none;padding-left:0;margin-inline:auto}
  .panel ul:not([class]) li,.block ul:not([class]) li{padding:2px 0}
  .panel.grid{gap:26px}
}

/* months line must read on its seasonal header color */
.season-card .sc-head .mo{color:#fff;opacity:.92}
.s-summer .sc-head .mo{color:var(--navy);opacity:.8}

/* about stat band: inline left-align is desktop-only; stays HORIZONTAL on
   phones (Leah 2026-07-29), just tighter */
@media(max-width:767px){.stat-band{text-align:center !important}}
@media(max-width:480px){.stat-band{gap:10px}
  .stat-band .n{font-size:1.55rem}
  .stat-band .k{font-size:.7rem;letter-spacing:.08em}}

/* snap retired everywhere — free scrolling on all devices */
html{scroll-snap-type:none !important}
main > section{scroll-snap-align:none !important}

/* partners label: no bolt, bigger, one line (wraps only when it truly can't fit) */
.pb-label::before{display:none}
.pb-label{font-size:clamp(.8rem,1.35vw,1.05rem);max-width:none;white-space:nowrap}
@media(max-width:700px){.pb-label{white-space:normal;max-width:30ch}}
@media(max-width:700px){.pb-label{max-width:none;letter-spacing:.07em;text-wrap:balance}}
@media(max-width:700px){.pb-label{padding-inline:24px;box-sizing:border-box}}
/* mobile: two EVENLY split lines (Leah 2026-07-31: "sponsors" was floating
   alone) — balance beats the shrink-to-one-line vw approach for readability */
@media(max-width:700px){.pb-label{white-space:normal;text-wrap:balance;letter-spacing:.07em;
  font-size:clamp(10px,3vw,12.8px);max-width:none;padding-inline:16px;box-sizing:border-box}}

/* ================= mobile hamburger nav ================= */
.ham{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;
  padding:10px;border-radius:8px;justify-self:end}
.ham:hover{background:rgba(0,80,208,.10)}
.ham span{display:block;height:3px;background:var(--navy);border-radius:2px;margin:5px 0;
  transition:transform .2s,opacity .2s}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:900px){
  .bar3 nav.primary{display:none !important}
  .ham{display:block}
}
.mnav{position:fixed;inset:0;z-index:1200;display:none;background:rgba(245,241,231,.98);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:auto}
.mnav.open{display:block}
body.mnav-lock{overflow:hidden}
.mn-head{display:flex;justify-content:flex-end;padding:14px 16px}
.mn-close{width:44px;height:44px;border:none;background:none;cursor:pointer;border-radius:8px;
  font-size:1.5rem;color:var(--navy);line-height:1}
.mn-close:hover{background:rgba(0,80,208,.10)}
.mnav nav{display:grid;gap:2px;padding:4px 24px 48px;text-align:center;max-width:420px;margin-inline:auto}
.mnav nav a{display:block;color:var(--navy);text-decoration:none;font-weight:700;
  font-size:1.3rem;padding:11px 12px;border-radius:8px}
.mnav nav a:hover{background:rgba(0,80,208,.10);color:var(--brand)}
.mnav nav a[aria-current="page"]{background:var(--navy);color:#fff}
.mnav nav .sub{display:grid;gap:0;margin:-4px 0 6px}
.mnav nav .sub a{font-size:1rem;font-weight:600;color:#3f4d68;padding:7px 12px}

/* bolt watermark behind the open menu: fixed dead-center, 60% viewport height */
.mnav::before{content:"";position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  height:60vh;aspect-ratio:244.19 / 800;background:url("https://static1.squarespace.com/static/6a6265e55bf79b0b9de831be/t/6a7098d561412d59eace20d6/1785764053750/bolt+only.png") center/contain no-repeat;
  opacity:.07;pointer-events:none}
.mnav .mn-head,.mnav nav{position:relative;z-index:1}

/* ---- Leah review batch 2026-07-22 ---- */
/* tighter section handoffs where flagged */
main > section.tight-top{padding-block-start:clamp(16px,2.2vw,30px) !important}
/* eyebrows bigger universally (Leah: match the partners-band label scale) */
.eyebrow{font-size:clamp(.8rem,1.35vw,1.05rem)}
/* eyebrow with a bolt on BOTH sides + larger (Leah: Programs header, Go Flash chip) */
.eyebrow.flash-both{font-size:clamp(1rem,1.8vw,1.35rem)}
/* flash-both's mirrored right bolt retired 2026-07-31 — the base .eyebrow::after
   (right side, base orientation) is now the single site-wide bolt */
/* hero photos more visible (Leah): lighter slate veil */
.hero-veil{background:linear-gradient(180deg,rgba(65,75,99,.84),rgba(65,75,99,.66) 45%,rgba(65,75,99,.88))}
/* hero Join bolt icon +25% */
.btn-hero .bico{height:25px}
.btn-hero .bico.heart{width:25px;height:25px}
/* partner logos bigger, band itself unchanged */
.partners-band .pt.logo img{height:50px;max-width:200px}
.lg-sportsworld img,.lg-eagles img,.lg-blakslee img{height:38px !important}
/* word chips back on (partners without artwork yet) */
.partners-band .pt.word{display:inline-flex;align-items:center}
/* center the calendar action buttons */
.cal-actions{justify-content:center}
/* keepup separator: plain border -> bolt line */
.keepup{border-bottom:none}
.keepup .bolt-rule{margin:0 0 26px}
/* mission core tenets with bolts between */
.mission-center .tenets{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;
  margin:18px 0 0;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);
  font-size:clamp(.95rem,1.4vw,1.15rem)}
.mission-center .tenets .tbolt{width:.5em;height:1.2em;background:var(--gold);flex:0 0 auto;
  clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%)}
/* bolt+word travel as one unit so a wrap never strands a bolt at line end */
.mission-center .tenets .tpair{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
/* circular badge marks read smaller than wordmarks at equal height — scale up for balance */
.lg-kiwanis img,.lg-widows img,.lg-knights img,.lg-rotary img,
.lg-greatoaks img,.lg-cloverleaf img{height:64px !important}
/* Leah: mission fills the panel, not scrunched center */
.mission-center blockquote{max-width:none !important}

/* ---- Leah final review batch 2026-07-23 ---- */
/* straight gold rule under page-hero headings, full width of the words
   (the hand-drawn curve read as random) */
.pagehero h1::after{left:0 !important;transform:none !important;width:100% !important;
  height:5px !important;border-radius:3px;background:var(--gold) !important;background-size:auto;
  animation:none !important}
/* emphasis-word variant: no full rule; the marked word carries the line */
.pagehero h1.em-line::after{display:none !important}
.pagehero h1 .uword{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:.13em;text-underline-offset:.16em}
/* bolts restored where a bolt-rule divider had suppressed the eyebrow bolt */
/* keepup re-show retired 2026-07-31 (Leah: "Remove both bolts on this line") */
.panel.keep-bolt:has(.bolt-rule) .eyebrow::after{display:block}
/* contact photo-banner hero: community photos under the slate veil */
.photo-hero{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,120px) !important}
.photo-hero .ph-band{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.photo-hero .ph-band img{width:100%;height:100%;object-fit:cover;display:block}
.photo-hero .hero-veil{position:absolute;inset:0}
.photo-hero .inner{position:relative;z-index:1}
.photo-hero h1{color:#fff}
.photo-hero .eyebrow{color:#ffd45c}
.photo-hero .eyebrow::before,.photo-hero .eyebrow::after{background:var(--gold)}
/* phones: ONE hero photo — the three girls (Leah 2026-07-31) */
@media(max-width:640px){.photo-hero .ph-band{grid-template-columns:1fr}
  .photo-hero .ph-band img:nth-child(1),
  .photo-hero .ph-band img:nth-child(3){display:none}}
/* partners band: stacked logo + name chip (Medina Township / Blakslee Park) */
.partners-band .pt.stack{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.partners-band .pt.stack img{height:34px !important;width:auto}
.partners-band .pt.stack .pn{font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap}
/* menu anchors land the section right under the header (was 26vh lower) */
section[id],footer[id],[id^="register"]{scroll-margin-top:110px}
/* join hero headline: all caps to match the homepage statement */
.join-hero .l1{text-transform:uppercase}
/* even out perceived nav rhythm around dropdown carets (Shop gap note) */
.navdrop > button{padding-right:8px}
/* mobile-safe heading underline: the ::after bar spans the h1 BOX, which on
   wrapped mobile headings is wider than the words — a text underline follows
   the words on every line instead */
.pagehero h1::after{display:none !important}
.pagehero h1{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:.13em;text-underline-offset:.18em}
.pagehero h1.em-line{text-decoration:none}
/* wrapped-heading underline metrics: at .16em offset + .13em thickness the
   line fell into the next line's space when a heading wrapped. These are
   caps-only headings (no descenders) — tuck the line tight under the letters
   and give wrapped lines a touch more air so it never collides. */
.pagehero h1{line-height:1.22;text-underline-offset:.09em;text-decoration-thickness:.1em}
.pagehero h1 .uword{text-decoration-thickness:.1em;text-underline-offset:.09em}
/* nav dropdown buttons: explicit size — font:inherit picked up a different
   base size inside Squarespace than the .95rem links beside them */
.navdrop > button{font-size:.95rem}
/* centered CTA panels get community photos on each side (Leah: photos on
   these pages) — photo | panel | photo on desktop, panel-only on mobile */
.flank{display:grid;grid-template-columns:minmax(200px,400px) minmax(0,680px) minmax(200px,400px);
  gap:clamp(18px,2.5vw,32px);align-items:stretch;justify-content:center}
/* the PANEL's content decides the row height; photos are absolute fills so a
   portrait image can never stretch the row and strand the text in a void */
.flank > .panel{margin:0 !important;max-width:none !important;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.flank-ph{position:relative;margin:0;border-radius:14px;overflow:hidden;border:5px solid #fff;
  box-shadow:0 22px 44px -30px rgba(11,27,58,.45);min-height:240px}
.flank-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:960px){.flank{display:block}.flank-ph{display:none}}
/* mission seam balance: below = mission bottom + calendar tight-top; sized so
   above (44-77px section top) and below land visually equal at every width */
main > section.tight-bottom{padding-block-end:clamp(28px,3.36vw,47px) !important}
/* uniform seams site-wide: sections whose only content is a boxed card
   (panel/flank) read airier than text sections at equal padding — give them
   the tighter rhythm so every section boundary looks the same (the "mission
   balance", generalized) */
main > section:has(> .wrap > .panel:only-child),
main > section:has(> .wrap > .flank:only-child){
  padding-block:clamp(28px,3.36vw,47px) !important}
/* ===== ONE RHYTHM, SITE-WIDE (final say) ===== every section owns the same
   clamp both sides so every boundary reads identical — the "mission balance"
   applied to EVERY seam. Hero fold/handoff exceptions stay tuned. */
main > section{padding-block:clamp(28px,3.36vw,47px) !important}
main > section:first-child,
main > section:first-of-type{padding-top:clamp(18px,2.2vw,32px) !important}
.pagehero{padding-bottom:clamp(18px,2.2vw,32px) !important}
.pagehero + section,.mosaic-hero + section,
.mosaic-hero + .partners-band{padding-top:clamp(20px,2.5vw,36px) !important}
.photo-hero{padding-block:clamp(64px,9vw,120px) !important}
.join-hero{padding-bottom:clamp(26px,3vw,44px) !important}
main > .bolt-flow + section{padding-top:clamp(28px,3.36vw,47px) !important}
main > section:has(+ .bolt-flow){padding-bottom:clamp(28px,3.36vw,47px) !important}
.mosaic-hero{padding-bottom:clamp(28px,3.36vw,47px) !important}
/* footer subscribe checkbox: navy accent disappears on the navy footer —
   gold reads on navy, and the label copy is already light */
.prefooter input[type="checkbox"]{accent-color:var(--gold)}

/* ---- Leah bolt redesign 2026-07-31 (supersedes the 07-29 mobile mirror) ----
   ONE right-side bolt, base orientation, ALL viewports — heroes, footers,
   "On the socials", events Calendar, index mission. Section labels have NONE. */
/* where a bolt-rule or drawn bolt already anchors the block, no eyebrow bolt */
section:not(.page-section):not(.region):has(.bolt-rule) .eyebrow::after,
.panel:has(.bolt-rule) .eyebrow::after,
.wrap:has(> .bolt-flow) .eyebrow::after,
.pb-label::after,
/* Leah's explicit removals (section labels) */
#upcoming .eyebrow::after,
#seasons .eyebrow::after,
#athlete .eyebrow::after,
#sponsor .eyebrow::after,
#donate .eyebrow::after,
#unified .eyebrow::after,
#volunteer .eyebrow::after,
#forms .eyebrow::after{display:none}
/* index mission eyebrow bolt: added 07-31 am ("add a bolt here"), REMOVED same
   day per Leah — the :has(.bolt-rule) suppression above applies again */
@media(max-width:767px){
  /* a wrapped eyebrow strands its bolt at the screen edge; theme1.js tags
     those .eb-wrap and the bolt steps out entirely */
  .eyebrow.eb-wrap::before,.eyebrow.eb-wrap::after{display:none}
  /* the one long flash-both ("Current registration opportunities") holds one line at 390 */
  .sb-pennants .eyebrow.flash-both{font-size:clamp(.78rem,3.6vw,1rem)}
}
/* events: three season cards after the fall/year-round card retired */
.season-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1023px){.season-grid.three{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.season-grid.three{grid-template-columns:1fr}}
/* inline month tag on season-list items that span seasons (bowling, cornhole) */
.sc-list .mo-inline{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n-700);margin-left:2px;white-space:nowrap}

/* lab tools (inline head guard sets .no-splash before first paint) skip the
   splash overlay entirely so lab metrics measure the page, not the intro */
.no-splash #splash{display:none !important}

/* calendar facade: the Google iframe loads only when scrolled near, so the
   third-party cookie never exists at page load (PSI best-practices) and the
   iframe's weight leaves the critical path. Placeholders hold the iframe's
   exact height so hydration causes zero layout shift. */
.cal-embed [data-cal-src]{display:block;width:100%;height:600px;background:#fbfaf5;
  display:grid;place-items:center}
.cal-embed.compact [data-cal-src]{height:420px}
.cal-wait{color:var(--n-700);font-size:.95rem;margin:0}
.cal-embed [data-cal-src].cal-mobile{display:none}
@media(max-width:767px){
  .cal-embed [data-cal-src].cal-desktop{display:none}
  .cal-embed [data-cal-src].cal-mobile{display:grid;height:520px}}

/* ---- Leah 2026-08-04: bolts, viewport-specific ---- */
/* desktop only: a trailing bolt closes the tenets row after "Empowerment",
   and the hero eyebrow gets its left bolt back so it reads symmetrically */
.mission-center .tenets .tend{display:inline-flex;align-self:center}
@media(min-width:768px){
  .mosaic-hero .inner.center .eyebrow::before{content:"";display:block;width:.4em;height:1.1em;
    background:var(--gold);flex:0 0 auto;
    clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%)}
}
/* mobile: the tenets row carries NO bolts at all ("remove all bolts from this area") */
@media(max-width:767px){
  .mission-center .tenets .tbolt{display:none}
  .mission-center .tenets{gap:10px}
}

/* ---- Maurice 2026-08-06: bookend bolts on every flash-both eyebrow ----
   The right bolt (.eyebrow::after) has carried alone since 07-31; the hero
   regained its left bolt on 08-04 and reads well, so that pairing now extends
   to the remaining flash-both labels (Programs, Get involved, Wear the bolt,
   Join the Flash, Donate, Contact, On the socials...). Orientation matches the
   approved hero treatment: both bolts the SAME direction, not mirrored. */
/* RULE: an eyebrow has EITHER two bolts or none — never one. Scoping this to
   .flash-both (2026-08-06) missed the plain eyebrows that still carried a single
   right bolt: "Shop", "Reach us", "Calendar", and the "Say hello" prefooter on
   every page. Applying to .eyebrow and reusing the exact ::after suppression list
   keeps the count symmetrical wherever a bolt shows at all. */
.eyebrow::before{content:"";display:block;width:.4em;height:1.1em;
  background:var(--gold);flex:0 0 auto;
  clip-path:polygon(65.5% 52.7%,93% 29.1%,61.4% 33.1%,84.1% 0%,0% 55.2%,36% 49.4%,9.9% 73.5%,41.1% 68.7%,19.1% 100%,100% 48.1%)}
/* the left bolt stays off wherever Leah's 07-31 pass suppressed the right one,
   so her stripped section labels stay stripped (this list mirrors the ::after
   suppressions above — keep the two in step if either changes) */
section:not(.page-section):not(.region):has(.bolt-rule) .eyebrow::before,
.panel:has(.bolt-rule) .eyebrow::before,
.wrap:has(> .bolt-flow) .eyebrow::before,
.pb-label::before,
#upcoming .eyebrow::before,
#seasons .eyebrow::before,
#athlete .eyebrow::before,
#sponsor .eyebrow::before,
#donate .eyebrow::before,
#unified .eyebrow::before,
#volunteer .eyebrow::before,
#forms .eyebrow::before{display:none}
/* ...and back on where the right bolt is explicitly re-shown */
.panel.keep-bolt:has(.bolt-rule) .eyebrow::before{display:block}

/* ---- 2026-08-06: the a11y text scaler must never break the layout ----
   REPORTED BY LEAH, invisible to everyone else: the personalization widget
   scales the root font to 115/130/145% and persists that in localStorage
   ('flash-pa'), so a reviewer who once tapped "Font size" carries it forever
   while a fresh device shows nothing wrong. At 145% on a 390px phone this
   produced 151px of horizontal overflow on About and 29px on Contact.
   Two independent causes, both guarded here rather than patched per-page:

   1. GRID ITEMS DEFAULT TO min-width:auto, so an item that cannot shrink below
      its min-content pushes its own track wider than the viewport. */
.wrap.grid > *,.panel.grid > *,.grid > .panel{min-width:0}

/* 2. LONG UNBREAKABLE TOKENS set that min-content floor. The contact email
      alone measured 357px at 145%, which is wider than the whole content box.
      Scoped to where long tokens actually live so body copy keeps normal
      hyphen-free wrapping. */
.contact-rows a,.pf-info a,a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

/* 3. Headings must never be pinned with white-space:nowrap — it cannot wrap at
      ANY size, so it overflows instead. about.html's "Everyone belongs" carried
      an inline nowrap and was the single worst offender; it is now
      text-wrap:balance. This catches any that get re-added later. */
h1[style*="nowrap"],h2[style*="nowrap"],h3[style*="nowrap"]{white-space:normal !important;text-wrap:balance}

/* ---- 2026-08-07: make the SCALED states actually usable, not just non-overflowing ----
   Stopping the horizontal overflow was only half the job. At 130/145% several blocks
   still read as broken because a decorative mark laid out as a flex sibling stays
   vertically centred against text that has since wrapped to 2-4 lines, so it floats
   off on its own. Everything here is scoped to html[data-pa-fontsize], so the
   approved 100% design is untouched.

   1. EYEBROWS: the bolts become inline marks that flow WITH the words, so a wrap can
      never strand one (same principle as the .tpair fix for the tenets row). */
html[data-pa-fontsize] .eyebrow{display:block}
html[data-pa-fontsize] .eyebrow::before,
html[data-pa-fontsize] .eyebrow::after{display:inline-block;vertical-align:-.08em;margin:0 .32em}
html[data-pa-fontsize] .eyebrow::before{display:none}
html[data-pa-fontsize] .eyebrow.flash-both::before{display:inline-block}

/* 2. ICON ROWS (contact + prefooter): align the icon to the FIRST LINE of its label
      rather than the middle of a four-line block. */
html[data-pa-fontsize] .contact-rows > *,
html[data-pa-fontsize] .pf-info .contact-rows > *,
html[data-pa-fontsize] .cinfo-rows > *{align-items:flex-start}
html[data-pa-fontsize] .contact-rows svg,
html[data-pa-fontsize] .contact-rows .ic{margin-top:.15em;flex:0 0 auto}

/* 3. BUTTONS: these are flex containers, so the label is an anonymous flex item that
      sizes to max-content and cannot wrap internally — at 145% it ran straight out of
      the pill and the sheen's overflow:hidden silently guillotined it. Dropping to
      inline-block in scaled mode makes the label ordinary inline text that wraps, and
      the icon flows with the first word instead of being a rigid flex sibling. */
html[data-pa-fontsize] .btn,
html[data-pa-fontsize] .btn-hero{display:inline-block;height:auto;min-height:0;
  padding-inline:clamp(14px,4vw,26px);text-align:center;line-height:1.25}
html[data-pa-fontsize] .btn .bico,
html[data-pa-fontsize] .btn-hero .bico{display:inline-block;vertical-align:-.18em;
  margin-right:.4em;flex:none}

/* 4. Wrapped centred body text with a hanging icon reads better left-aligned once it
      is several lines deep. */
html[data-pa-fontsize="3"] .contact-rows{text-align:left}