/* ==============================================================   MINNEAPOLIS GYMNASTICS — "So much more than Gymnastics"
   Design system. Bold + playful, brand-true.
   Purple + lime lead; blue / orange / red are one-per-section accents.
   Type: Inter (web proxy for Codec). Weight creates hierarchy.
   ===================================================================== */

/* ---------- 0. Fonts ---------- */
/* Fonts load via a <link> in the shared head (build.py) — an @import here
   made the browser fetch styles.css, THEN discover the font CSS: a serial
   render-blocking chain costing ~1-2s on slow connections. */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --purple:  #5E17EB;
  --purple-2:#7B3CF5;      /* lighter step for gradients */
  --purple-d:#4310B0;      /* deeper step for gradients */
  --lime:    #E4FF62;
  --blue:    #38B6FF;
  --red:     #FF3939;
  --orange:  #FF9D38;

  /* Neutrals */
  --black:   #000000;
  --ink:     #201B33;      /* body text — a warm near-black with purple bias */
  --slate:   #605E5E;
  --cloud:   #FAF8FF;      /* faint purple-tinted background */
  --white:   #FFFFFF;
  --line:    #ECE7F6;      /* hairline borders */

  /* Type scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.2rem, 2rem + 5.6vw, 6.6rem);

  /* Radii */
  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  /* Shadows (purple-tinted, never pure black) */
  --sh-sm: 0 2px 10px rgba(32,27,51,.08);
  --sh-md: 0 14px 34px rgba(94,23,235,.14);
  --sh-lg: 0 30px 70px rgba(94,23,235,.22);

  /* Layout */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --sectiony: clamp(64px, 9vw, 128px);
  --header-h: 74px;   /* sticky header height — heroes fill the rest of the viewport */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; scrollbar-gutter: stable; }
/* the global 92px scroll-padding leaves an 18px gap under the 74px header;
   pull the home plan section flush so Register Now lands exactly at its top */
#get-started { scroll-margin-top: -18px; }
#camps, #lineup { scroll-margin-top: -17px; } /* hero CTAs land their section flush under the sticky header */
/* footer Hours link: land with the gym photo's midpoint at the top of the
   viewport so the hours list is on screen without scrolling (~310px on
   desktop and mobile alike — measured, not guessed) */
#hours { scroll-margin-top: -310px; }
/* footer Mobile App link: pull past the 92px scroll-padding AND the section's
   own top padding so the heading lands just under the header — no sliver of
   the locations/maps section left showing above */
#app { scroll-margin-top: -66px; }
@media (max-width: 720px) { #app { scroll-margin-top: -38px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* NOTE: do NOT set overflow-x on html. With html untouched, body's
   overflow-x:hidden propagates to the viewport (clips sideways overflow
   at the true scroller). Setting it on html stops that propagation and
   turns body into a scroll container — which silently breaks every
   position:sticky element on the page, including the site header. */
/* While any modal is open (every modal path sets body overflow:hidden;
   the promo popup is covered by :has) the floating chat launcher and
   language pill get out of the way — on short phones they sat on top of
   the open dialog and blocked its buttons. */
#cn-root, #mgl-root { transition: opacity .2s ease; }
body[style*="overflow: hidden"] #cn-root, body[style*="overflow: hidden"] #mgl-root,
body:has(.popup:not([hidden])) #cn-root, body:has(.popup:not([hidden])) #mgl-root {
  opacity: 0; pointer-events: none;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: propagated to the viewport it forbids ALL sideways
     scrolling (touch or programmatic) while pinch-zoom stays available.
     NOTE: keep html overflow untouched or sticky breaks (see html note). */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
a, button, .faq__q, .nav__toggle, input, select, textarea, summary {
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(94,23,235,.15);
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { line-height: 1.02; letter-spacing: -0.02em; font-weight: 900; color: var(--ink); text-wrap: balance; }
.lede { text-wrap: pretty; }
.display {
  font-size: var(--step-5);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.h1 { font-size: var(--step-4); letter-spacing: -0.025em; }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--slate); font-weight: 500; }
.dot { color: var(--lime); }
.mark-lime { background: var(--lime); color: var(--ink); padding: 0 .12em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step--1); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple);
}
.eyebrow::before { content:""; width: 22px; height: 3px; border-radius: 3px; background: var(--lime); }
.eyebrow--light { color: #fff; }
.eyebrow--light::before { background: var(--lime); }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
/* Every standard section is a full-screen "slide", exactly like the hero:
   it fills one browser window (minus the sticky header) and centers its
   content. min-height (not height) so longer content still flows/scrolls. */
.section {
  padding-block: clamp(36px, 5vh, 64px);
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}
.section--tight { padding-block: clamp(44px, 6vw, 80px); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.center.measure, .center.measure-sm { margin-inline: auto; }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
/* 1fr tracks are really minmax(auto,1fr): a child with a large min-content
   width (e.g. a banner with an implied min width) silently widens the track
   past the container. Grid items must never dictate track width. */
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.section-head { max-width: 720px; margin-bottom: clamp(20px, 3vh, 40px); }
.section-head.center { margin-inline: auto; }
.section-head .lede { margin-top: 14px; }
/* the same breathing room everywhere a lede follows its title — split
   sections had the subtext flush against the h2 */
.h2 + .lede { margin-top: 14px; }

/* Section tones (color-blocking; one accent per section) */
.tone-cloud  { background: var(--cloud); }
.tone-white  { background: var(--white); }
.tone-purple { background: linear-gradient(155deg, var(--purple-2), var(--purple) 55%, var(--purple-d)); color: #fff; }
.tone-purple h1, .tone-purple h2, .tone-purple h3 { color: #fff; }
.tone-purple .lede { color: rgba(255,255,255,.82); }
/* white cards inside purple sections keep their own ink text — tone-purple's
   white-text rules are for copy sitting directly on the gradient (this had
   card titles/body rendering white-on-white, i.e. invisible) */
.tone-purple .card { color: var(--ink); }
.tone-purple .card h3, .tone-purple .card .card__title { color: var(--ink); }
.tone-blue   { background: linear-gradient(160deg, #EAF7FF, #D6EFFF); }
.tone-lime   { background: linear-gradient(160deg, #F6FFD1, #ECFFA6); }
.tone-orange { background: linear-gradient(160deg, #FFF3E4, #FFE6C9); }
.tone-bluegrad { background: linear-gradient(135deg, #5BC8FF, #1E9AE8); }
.tone-bluegrad h2 { color: #fff; }
.tone-bluegrad .lede { color: rgba(255,255,255,.94); }
.tone-ink    { background: radial-gradient(120% 120% at 15% 10%, #2A2340, #17122B 70%); color: #fff; }
.tone-band-orange { background: linear-gradient(135deg,#FFA43F,#F57C00); }
.tone-band-orange .lede { color: rgba(255,255,255,.94); }
.ctaflank{ position:absolute; bottom:-40px; width:clamp(140px, 17%, 215px); z-index:1; pointer-events:none; }
.ctaflank svg{ display:block; width:100%; height:auto; }
.ctaflank--l{ left:4.5%; transform:rotate(-9deg); width:clamp(130px, 15%, 190px); }
.ctaflank--r{ right:4.5%; transform:rotate(9deg); width:clamp(135px, 17%, 215px); }
/* preschool-open-gym band: chunkier equipment illustrations */
.ctaflank--pog.ctaflank--l{ width:clamp(170px, 20%, 255px); }
.ctaflank--pog.ctaflank--r{ width:clamp(180px, 22%, 275px); }
@media (max-width:860px){ .ctaflank{ display:none; } }
.tone-ink h1,.tone-ink h2,.tone-ink h3 { color:#fff; }
.tone-ink .lede { color: rgba(255,255,255,.75); }

/* ---------- 5. Beam divider (signature motif) ---------- */
.beam { display:flex; align-items:center; gap:0; height: 10px; }
.beam__bar { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lime), var(--blue)); flex: 1; }
.beam__leg { width: 4px; height: 16px; background: var(--purple); border-radius: 3px; margin-top: 10px; }
.beam--sm { width: 72px; }
.beam--sm .beam__bar { flex: none; width: 72px; }

/* Wave / shape section transitions */
.edge { position:absolute; left:0; right:0; height: 60px; pointer-events:none; }
.edge--top { top:-1px; }
.edge--bottom { bottom:-1px; }

/* ---------- 6. Buttons ---------- */
.btn {
  --bg: var(--purple); --fg: #fff; --ring: transparent;
  max-width: 100%; text-align: center; /* long labels wrap instead of running off phone screens */
  display: inline-flex; align-items: center; justify-content:center; gap: 10px;
  padding: 15px 28px; border-radius: var(--r-pill);
  font-weight: 800; letter-spacing: .01em; font-size: var(--step-0);
  background: var(--bg); color: var(--fg);
  border: 2.5px solid var(--ring);
  box-shadow: none;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn svg { display: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: none; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--lg { padding: 18px 36px; font-size: var(--step-1); }
.btn--sm { padding: 11px 20px; font-size: var(--step--1); }

/* cap-themed card buttons (non-monthly pricing sections) */
.btn--cap-orange, .btn--cap-blue, .btn--cap-lime {
  position: relative; isolation: isolate; background: transparent;
  transition: color .3s var(--ease);
}
.btn--cap-orange::before, .btn--cap-blue::before, .btn--cap-lime::before,
.btn--cap-orange::after,  .btn--cap-blue::after,  .btn--cap-lime::after {
  content: ""; position: absolute; z-index: -1; border-radius: inherit;
  transition: opacity .3s var(--ease);
}
/* rest state: gradient fills the whole pill (border box included) */
.btn--cap-orange::before { inset: -2.5px; background-image: linear-gradient(135deg, #FFB460, #FF7A00); }
.btn--cap-blue::before   { inset: -2.5px; background-image: linear-gradient(135deg, #5BC8FF, #1E9AE8); }
.btn--cap-lime::before   { inset: -2.5px; background-image: linear-gradient(135deg, #C6EE2E, #9DB414); }
/* hover state: white face inside the gradient ring */
.btn--cap-orange::after, .btn--cap-blue::after, .btn--cap-lime::after { inset: 0; background: #fff; opacity: 0; }
.btn--cap-orange { color: #fff; }
.btn--cap-blue   { color: #fff; }
.btn--cap-lime   { color: #fff; }
.btn--cap-orange:hover::after, .btn--cap-blue:hover::after, .btn--cap-lime:hover::after { opacity: 1; }
.btn--cap-orange:hover { color: #E8720C; }
.btn--cap-blue:hover   { color: #1273B8; }
.btn--cap-lime:hover   { color: #7F930D; }

/* Primary: purple fill, lime halo (signature register style) */
.btn--primary {
  --bg: var(--purple); --fg:#fff; --ring: transparent;
  position: relative; isolation: isolate; background: transparent;
  transition: color .3s var(--ease);
}
/* Inverse hover: gradient fill at rest; hovering turns the fill white and
   gives the 2.5px ring and the label the purple gradient. Fallback below is
   solid purple text; the @supports block upgrades the label to the gradient
   (painted as element background layers so nothing can cover the glyphs). */
.btn--primary::before, .btn--primary::after {
  content: ""; position: absolute; z-index: -1; border-radius: inherit;
  transition: opacity .35s var(--ease);
}
.btn--primary::before { inset: -2.5px; background-image: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d)); }
.btn--primary::after  { inset: 0; background: #fff; opacity: 0; }
.btn--primary:hover { color: var(--purple); }
.btn--primary:hover::after { opacity: 1; }
.btn--primary:hover svg { color: var(--purple); }
@supports (-webkit-background-clip: text, padding-box, border-box) {
  .btn--primary:hover {
    background-image:
      linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d)),
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d));
    -webkit-background-clip: text, padding-box, border-box;
    background-clip: text, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .btn--primary:hover::before, .btn--primary:hover::after { opacity: 0; }
}
/* Accent (lime) button: lime at rest, and the SAME inverse hover as the
   primary — white fill, purple-gradient ring and label. */
.btn--accent {
  --bg: var(--lime); --fg: var(--ink); --ring: transparent;
  position: relative; isolation: isolate; background: transparent;
  transition: color .3s var(--ease);
}
.btn--accent::before, .btn--accent::after {
  content: ""; position: absolute; z-index: -1; border-radius: inherit;
  transition: opacity .35s var(--ease);
}
.btn--accent::before { inset: -2.5px; background-image: linear-gradient(90deg, #ECFF8A, var(--lime) 50%, #C6EE2E); }
.btn--accent::after  { inset: 0; background: #fff; opacity: 0; }
.btn--accent:hover { color: var(--purple); }
.btn--accent:hover::after { opacity: 1; }
.btn--accent:hover svg { color: var(--purple); }
@supports (-webkit-background-clip: text, padding-box, border-box) {
  .btn--accent:hover {
    background-image:
      linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d)),
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d));
    -webkit-background-clip: text, padding-box, border-box;
    background-clip: text, padding-box, border-box;
    background-origin: padding-box, padding-box, border-box;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .btn--accent:hover::before, .btn--accent:hover::after { opacity: 0; }
}
.btn--ghost   { --bg: transparent; --fg: var(--purple); --ring: var(--purple); box-shadow:none; }
.btn--ghost:hover { --bg: var(--purple); --fg:#fff; }
.btn--light   { --bg:#fff; --fg: var(--purple); --ring: transparent; }
/* white button, purple-gradient label; hovering adds the primary button's
   gradient ring (same white-fill hover look, mirrored technique) */
.btn--white-grad { --bg: transparent; --ring: transparent; position: relative; isolation: isolate; }
.btn--white-grad .btn__gradtext {
  background: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn--white-grad::before, .btn--white-grad::after {
  content: ""; position: absolute; border-radius: inherit; z-index: -1;
}
.btn--white-grad::before { inset: -2.5px; background-image: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d)); opacity: 0; transition: opacity .25s var(--ease); }
.btn--white-grad::after { inset: 0; background: #fff; }
.btn--white-grad:hover::before { opacity: 1; }
.btn--ghost-light { --bg: transparent; --fg:#fff; --ring: rgba(255,255,255,.6); box-shadow:none; }
.btn--ghost-light:hover { --bg:#fff; --fg: var(--purple); --ring:#fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.textlink { font-weight: 800; color: var(--purple); display: inline-flex; align-items:center; gap: 7px; }
.textlink svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.textlink:hover { text-decoration: none; }
.textlink:hover svg { transform: translateX(4px); }

/* ---------- 7. Pills / chips ---------- */
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 15px; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 800;
  background: #fff; color: var(--ink); border: 2px solid var(--line);
}
.chip--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.chip--blue { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.chip--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.chip--purple { background: var(--purple); border-color: var(--purple); color:#fff; }
.chip--ghostlight { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color:#fff; }

/* ---------- 8. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display:flex; align-items:center; gap: 20px; height: 74px; }
.brand { display:flex; align-items:center; gap: 12px; color: var(--ink); font-weight:900; }
.brand:hover { text-decoration:none; }
/* Logo "falls" out of the menu bar — ~20% of it hangs below, tilted for play */
.brand__mark {
  width: 96px; height: 96px; flex: none; object-fit: contain;
  align-self: flex-start; margin-top: 7px; margin-bottom: -20px;
  position: relative; z-index: 120; /* above the drawer (a 99-z sibling in the header) so the badge never gets clipped */
  filter: drop-shadow(0 6px 14px rgba(32,27,51,.22));
}
@media (max-width: 720px) { .brand__mark { width: 98px; height: 98px; margin-top: 6px; margin-bottom: -38px; } }
/* hamburger drawer: current page reads from aria-current, not a pill */
.drawer .nav__link.is-active { background: transparent; color: inherit; }
.brand__name { display:flex; flex-direction:column; line-height: 1; }
.brand__name b { font-size: 1.02rem; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 900; }
/* Tagline: lowercase, chunky, tracked so its width matches the GYMNASTICS line above */
.brand__name span {
  display: block; font-size: .72rem; font-weight: 900; color: var(--purple); margin-top: 4px;
  letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
.brand__name .brand__dot { font-style: normal; font-size: 1.3em; line-height: 0; }
.nav__links { display:flex; align-items:center; gap: 4px; margin-left: auto; flex: 1 1 auto; justify-content: space-evenly; }
.nav__link {
  padding: 9px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem;
  color: var(--ink); transition: background .15s, color .15s;
  white-space: nowrap;   /* multi-word tabs (Camps & Events) stay on one line */
}
.nav__link:hover { text-decoration:none; background: #fff; color: var(--purple); }
.nav__link.is-active { background: var(--purple); color:#fff; }
/* Nav dropdowns (Camps, Parties) */
.nav__item--drop { position: relative; }
.nav__item--drop > .nav__link { display: inline-flex; align-items: center; gap: 3px; }
.nav__chev { transition: transform .2s var(--ease); }
.nav__item--drop:hover > .nav__link .nav__chev,
.nav__item--drop:focus-within > .nav__link .nav__chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--sh-md); padding: 8px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease); z-index: 120;
}
.nav__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.nav__item--drop:hover .nav__menu,
.nav__item--drop:focus-within .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 3px); }
.nav__sub { display: block; padding: 9px 12px; border-radius: 9px; font-weight: 700; font-size: .95rem; color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; }
.nav__sub:hover, .nav__sub:focus-visible { background: var(--cloud); color: var(--purple); text-decoration: none; }
.drawer .nav__sub { padding: 10px 14px 10px 30px; font-size: 1rem; color: var(--slate); }
.drawer .nav__sub:hover { color: var(--purple); }
.nav__cta { margin-left: 8px; }
.nav__toggle { display:none; background:none; border:0; width: 46px; height: 46px; border-radius: 12px; }
.nav__toggle span { display:block; width: 24px; height: 2.6px; background: var(--ink); border-radius: 3px; margin: 5px auto; transition: .25s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(7.6px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-7.6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 74px 0 auto 0; z-index: 99;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 16px var(--gut) 26px; display:none; flex-direction: column; gap: 6px;
  box-shadow: var(--sh-md);
  overscroll-behavior: contain;
}
.drawer.is-open { display:flex; animation: drawerIn .28s var(--ease); }
@keyframes drawerIn { from { opacity:0; transform: translateY(-10px);} to{opacity:1; transform:none;} }
/* paddle-style menu sheet: big bold rows with chevron circles, rounded bottom */
.drawer { border-radius: 0; gap: 0; max-height: calc(100dvh - 74px); overflow: auto; } /* square, fully white — rounded corners let the page peek through */
.drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__row .nav__link { flex: 1; font-size: 1.4rem; font-weight: 900; letter-spacing: -.01em; color: var(--ink); padding: 13px 6px; }
.drawer__chev { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #F1EEFA; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.drawer__chev svg { display: block; transform: rotate(-90deg); transition: transform .2s var(--ease); }
.drawer__chev[aria-expanded="true"] svg { transform: rotate(0); }
.drawer__subs { display: none; flex-direction: column; padding: 0 6px 10px; }
.drawer__subs.is-open { display: flex; }
.drawer .btn { margin-top: 14px; }
.drawer__meta { margin-top: 12px; color: var(--slate); font-weight: 600; font-size: .9rem; }
/* drawer footer: the language + chat tools live here on phones */
/* Persistent mobile tool bar: language / socials / chat on EVERY page.
   Full width, flat edges, fixed to the bottom; sits above the drawer. */
.mg-toolbar { display: none; }
@media (max-width: 720px){
  .mg-toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    padding: 9px 18px calc(9px + env(safe-area-inset-bottom)) 18px; /* globe and ? sit the same distance in from each edge */
    background: #fff; border-top: 1px solid var(--line); }
  /* socials truly centered on the page, tighter cluster */
  .mg-toolbar .drawer__socs { position: absolute; left: 50%; transform: translateX(-50%); gap: 6px; margin: 0; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* fill every pixel between header and the tool bar — no page showing through */
  .drawer { height: calc(100dvh - 74px - 54px - env(safe-area-inset-bottom)); max-height: none; }
  /* summoned floating widgets open above the bar */
  #mgl-root { bottom: calc(24px + env(safe-area-inset-bottom)) !important; left: 10px !important; } /* its menu opens 46px above this — right on top of the bar's pill */
  body.mg-tool-lang #mgl-root .mgl-btn, body.mg-tool-lang #mgl-root .mgl-nudge { visibility: hidden; } /* just the menu, floating above the bar's pill */
  #cn-root { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  /* phones: the panel's header X does the closing — no bottom launcher-X,
     and the panel reclaims its space */
  body.mg-tool-chat .cn-launch { display: none !important; }
  body.mg-tool-chat .cn-panel { bottom: 0 !important; height: calc(100dvh - 140px) !important; max-height: none !important; }
}
.drawer__socs { display: flex; gap: 8px; margin-inline: auto; }
.drawer__tool--lang { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--lime); background: var(--purple); color: #fff; font: inherit; font-weight: 800; font-size: .8rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 12px rgba(94,23,235,.25); }
.drawer__tool--lang svg { color: #fff; }
/* purple + neon-green motif, matching the floating launchers */
.drawer__tool { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--lime); background: var(--purple); color: #fff; font: inherit; font-weight: 800; font-size: .84rem; padding: 7px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 12px rgba(94,23,235,.25); }
.drawer__tool svg { display: block; color: var(--lime); width: 14px; height: 14px; }
.drawer__soc { width: 38px; height: 38px; padding: 0; font: inherit; cursor: pointer; flex: none; border-radius: 50%; background: var(--purple); border: 2px solid var(--lime); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(94,23,235,.25); }
.drawer__soc svg { width: 17px; height: 17px; }
.drawer__soc[data-drawer-tool="chat"], .drawer__soc[data-drawer-tool="lang"] { width: 36px; height: 36px; } /* the two tool circles match */
.mg-toolbar__q { font-size: 19px; font-weight: 900; line-height: 1; color: #fff; }
.drawer__soc svg { display: block; }
.drawer__soc:hover { text-decoration: none; }
.mg-toolbar .drawer__socs .drawer__soc { background: transparent; border: 0; box-shadow: none; color: var(--purple); width: 36px; height: 36px; }
.mg-toolbar .drawer__socs .drawer__soc svg { width: 21px; height: 21px; }
/* the TikTok glyph fills less of its 24px viewBox — bump it so it reads the
   same height as the other two icons in the mobile bar */
.mg-toolbar .drawer__socs .drawer__soc[aria-label="TikTok"] svg { width: 24px; height: 24px; }
@media (min-width: 721px){ .drawer__tools { display: none; } }
/* phones: the floating launchers stay out of the way until summoned from
   the drawer (or while their panel/menu is open) */
@media (max-width: 720px){
  #mgl-root, #cn-root { opacity: 0; pointer-events: none; }
  body.mg-tool-lang #mgl-root, body.mg-tool-chat #cn-root { opacity: 1; pointer-events: auto; }
}
/* mobile header CTA (opens the Find the Perfect Class popup) — hidden on desktop */
.nav__cta-m { display: none; }

/* 1140px: full nav row (brand + 9 tabs incl. Camps & Events + More + CTA) needs ~1120px */
@media (max-width: 1140px) {
  .nav { position: relative; z-index: 120; justify-content: space-between; } /* whole nav (badge included) paints above the open drawer — sibling-context z on the transformed brand alone was unreliable in iOS Safari */
  .nav__links { display:none; }
  .nav__cta { display:none; }
  .nav__toggle { display:block; }
  /* hamburger left · logo centered · Register Now right */
  .nav .brand { position: absolute; left: 50%; transform: translateX(-50%); z-index: 120; } /* the transform makes .brand a stacking context — the z must live here for the badge to paint over the open drawer */
  .nav__cta-m { display: inline-flex; font-size: .85rem; padding: 9px 15px; white-space: nowrap; }
}

/* ---------- 9. Hero ---------- */
.hero {
  position: relative; overflow: clip;
  background: linear-gradient(160deg,#F3ECFF 0%, #FAF8FF 42%, #EAF7FF 100%);
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}
.hero__inner { padding-block: clamp(48px, 7vw, 96px); position: relative; z-index: 2; }
.hero .display { max-width: none; font-size: clamp(2rem, 1.2rem + 3.9vw, 5.2rem); }
.hero .display .ln { white-space: nowrap; }
.hero .display .ln--lime { color: var(--lime); }

/* Photo hero: child-gymnast subject fills the right; title sits on a scrim at left */
.hero--photo {
  background-color: #17122B;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: #fff;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(23,18,43,.95) 0%, rgba(23,18,43,.82) 34%,
    rgba(23,18,43,.42) 58%, rgba(23,18,43,.08) 82%, rgba(23,18,43,0) 100%);
}
.hero--photo .hero__lead { max-width: 640px; position: relative; }
.hero--photo .display { color: #fff; }
.hero--photo .eyebrow { color: #fff; }
.hero--photo .hero__rot { color: #fff; }
.hero--photo .rot__word { color: var(--lime); }
.hero--photo .hero__stat b { color: #fff; }
.hero--photo .hero__stat span { color: rgba(255,255,255,.72); }
@media (max-width: 860px) {
  .hero--photo::before {
    background: linear-gradient(178deg, rgba(23,18,43,.68) 0%, rgba(23,18,43,.8) 55%, rgba(23,18,43,.92) 100%);
  }
}
.hero__rot { font-size: var(--step-2); font-weight: 800; margin-top: 18px; color: var(--ink); }
.rot__word {
  display:inline-block; color: var(--purple);
}
.rot__word.is-swap { animation: rotSwap .5s var(--ease); }
@keyframes rotSwap { 0%{opacity:0; transform: translateY(14px) rotate(-2deg);} 100%{opacity:1; transform:none;} }
.hero__actions { margin-top: 30px; }
.hero__stats { display:flex; flex-wrap:wrap; gap: 12px 34px; margin-top: 40px; }
.hero__stat b { display:block; font-size: var(--step-2); font-weight: 900; letter-spacing: -0.03em; line-height:1; }
.hero__stat span { font-size: var(--step--1); color: var(--slate); font-weight: 600; }

/* Floating shapes */
.blob { position:absolute; border-radius: 46% 54% 60% 40% / 46% 40% 60% 54%; filter: blur(2px); opacity:.9; z-index: 1; pointer-events:none; }
.blob--lime { width: 220px; height: 220px; background: var(--lime); top: 8%; right: 6%; animation: float1 9s ease-in-out infinite; }
.blob--blue { width: 150px; height: 150px; background: var(--blue); bottom: 8%; right: 26%; animation: float2 11s ease-in-out infinite; }
.blob--orange { width: 90px; height: 90px; background: var(--orange); top: 54%; left: 4%; animation: float1 8s ease-in-out infinite; }
@keyframes float1 { 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-26px) rotate(8deg);} }
@keyframes float2 { 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(22px) rotate(-6deg);} }
@media (max-width: 760px){ .blob--blue{ display:none; } .blob--lime{ width:150px; height:150px; } }

/* ---------- 10. Age finder (signature interactive) ---------- */
/* Sky-blue gradient container that frames the class finder */
.finder-box {
  position: relative; overflow: clip;
  background: linear-gradient(150deg, #6CCBFF 0%, #38B6FF 52%, #1F9FEC 100%);
  border-radius: var(--r-lg); padding: clamp(26px, 5vw, 60px); box-shadow: var(--sh-md);
}
.finder-box .section-head { margin-bottom: clamp(22px, 3vw, 34px); }
.finder-box .eyebrow, .finder-box .h2 { color: var(--ink); }
.finder-box .eyebrow::before { background: #fff; }
.finder-box .lede { color: var(--ink); opacity: .82; }
.finder-box .section-head { margin-bottom: clamp(20px, 3vw, 30px); }
/* Embedded class-chooser widget */
.chooser-frame { display: block; width: 100%; max-width: 600px; margin: 0 auto; border: 0; background: transparent; height: 360px; transition: height .3s var(--ease); }

/* Chooser modal — the quiz fills the lightbox with one thin, equal margin
   on every side, and gets a taller box so the first question fits unscrolled */
.chooser-modal { padding: clamp(12px, 2vw, 20px); place-items: start center; }
.chooser-modal .cmodal__dialog { width: min(720px, 100%); margin-top: max(14px, env(safe-area-inset-top)); max-height: calc(100dvh - 100px); overflow: visible; }
.chooser-modal .cmodal__scroll { padding: 10px; border-radius: calc(var(--r-lg) - 3px); }   /* rounded clip — content must not square off the dialog's corners */
.chooser-modal .cmodal__scroll { min-height: 0; } /* flex child must shrink so the dialog's max-height wins and the quiz scrolls inside — never past the screen bottom */
.chooser-modal .chooser-frame { max-width: none; }
.cmodal__body .chooser-frame { max-width: none; }   /* class-times list fills the details lightbox */

/* ---------- 11. Cards ---------- */
.card {
  background: #fff; border-radius: var(--r-lg); border: 2px solid var(--line);
  box-shadow: var(--sh-sm); overflow: clip;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display:flex; flex-direction: column;
}
.card--link:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: #E0D5FA; }
/* Home "A class for every kid" tiles — grow and pop on hover */
.prog-card { position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.prog-card:hover { transform: scale(1.06); box-shadow: var(--sh-lg); z-index: 2; }
.prog-card .btn--light { border-color: var(--line); }
.prog-card .btn--light:hover { border-color: var(--purple); }
.card__body { padding: clamp(20px, 2.4vw, 28px); display:flex; flex-direction:column; gap: 10px; flex:1; }
.card__body .btn, .card__body .textlink { margin-top: auto; }
.card__title { font-size: var(--step-1); font-weight: 900; letter-spacing: -0.02em; }
.card__meta { display:flex; flex-wrap:wrap; gap: 8px; }
.card__price { font-size: var(--step-3); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero__stat b { font-variant-numeric: tabular-nums; }
.card__price small { font-size: var(--step-0); font-weight: 700; color: var(--slate); }
.pricing-cat { text-align: center; font-size: var(--step-2); font-weight: 900; letter-spacing: -0.02em; margin-bottom: clamp(18px, 2.5vw, 28px); }

/* ---------- Pricing option cards (brand-color cap over the top) ---------- */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}

.pcard__cap {
  padding: 16px 18px 15px; text-align: center; color: #fff;
  border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100px;
}
.pcard__cap h3 { font-size: var(--step-1); font-weight: 900; line-height: 1.08; letter-spacing: .005em; text-transform: uppercase; color: #fff; }
.pcard__cap p { margin-top: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff; opacity: 1; }
.pcap--purple { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
.pcap--red    { background: linear-gradient(135deg, #FF7A6B, #E8281B); }
.pcap--blue   { background: linear-gradient(135deg, #5BC8FF, #1E9AE8); color: var(--ink); }
.pcap--lime   { background: linear-gradient(135deg, #C6EE2E, #9DB414); color: #fff; }
.pcap--orange { background: linear-gradient(135deg, #FFB460, #FF7A00); color: var(--ink); }
.pcap--green  { background: linear-gradient(135deg, #8FE0A3, #48B667); }
.pcard__body {
  padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 10px;
  flex: 1; text-align: center;
}
.pcard__body > p { color: var(--slate); font-weight: 500; }
.pcard__body .ticklist { text-align: left; margin-top: 2px; }
.pcard__body .btn { margin-top: auto; }
.pcard__soon { margin-top: auto; align-self: center; display: inline-block; padding: 11px 20px;
  border-radius: var(--r-pill); background: linear-gradient(135deg, #5BC8FF, #1E9AE8);
  color: #fff; font-weight: 800; font-size: var(--step--1); letter-spacing: .02em; text-align: center; }
.pcard__price { font-size: var(--step-3); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pcard__price small { font-size: var(--step-0); font-weight: 700; color: var(--slate); letter-spacing: 0; }
.pcard--pop { border-color: var(--purple); box-shadow: var(--sh-md); z-index: 0; }
/* repaint the purple outline above the tab so it never looks broken */
.pcard--pop::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--purple);
  border-radius: var(--r-lg); pointer-events: none; z-index: 1; }
/* stacked/wrapped price cards need headroom for the "Most popular" tab
   (it rises 31px above its card) */
.grid:has(> .pcard) { row-gap: 46px; }
/* a lime tab peeking out from behind the card's purple cap */
.pcard__pop {
  position: absolute; top: -31px; left: 50%; transform: translateX(-50%); z-index: -1;
  background: var(--lime); color: var(--ink);
  font-size: .77rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; padding: 5px 18px 21px; border-radius: 12px 12px 0 0;
}
.mini-trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 28px); margin-top: clamp(24px, 3.5vw, 40px);
}
.mini-trust__item { display: flex; gap: 11px; align-items: flex-start; }
.mini-trust__item svg { flex: none; width: 22px; height: 22px; color: var(--purple); margin-top: 2px; }
/* hero trio: step-style stroked icons that draw themselves once on load */
.mini-trust--steps { display:grid; grid-template-columns:repeat(2, minmax(0, 480px)); align-items:stretch; justify-content:center; gap: 24px 28px; margin: 4px auto 22px; text-align:left; }
.mini-trust--steps .mini-trust__item > div { max-width: 52ch; }
.mini-trust--steps .mini-trust__item { align-items:center; gap: 14px;
  background:#fff; border:2px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-sm); padding: 12px 20px; }
.mini-trust--steps .mini-trust__item b { font-size: 1rem; }
.mini-trust--steps .mini-trust__item > div span { color: var(--slate); font-size: .9rem; }
.tico { flex:none; width: 52px; height: 52px; }
.tico--cal { width: 60px; height: 60px; }
.tico svg { width: 100%; height: 100%; display:block; overflow: visible; }
/* dasharray must EXCEED the true path length (46.1) or a round-cap sliver dot
   shows at the line's end before the draw begins */
.tico .draw { stroke-dasharray: 47.5; stroke-dashoffset: 47.5; }
.reveal.is-in .tico .draw--play { animation: pcheckDraw 1.3s ease-out .6s forwards; }
.reveal.is-in .tico .draw--slash{ animation: pcheckDraw 1.1s ease-out .9s forwards; }
.tico--doc .half { transform-box: fill-box; transform-origin: center; }
.reveal.is-in .tico--doc .half--a { animation: ticoBreakA .6s ease-out 2s forwards; }
.reveal.is-in .tico--doc .half--b { animation: ticoBreakB .6s ease-out 2s forwards; }
@keyframes ticoBreakA { to { transform: translate(-3.5px, -3px) rotate(-4deg); } }
@keyframes ticoBreakB { to { transform: translate(3.5px, 3px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){
  .tico .draw { stroke-dashoffset: 0; animation: none !important; }
  .tico--doc .half { animation: none !important; }
}
@media (max-width: 860px){ .mini-trust--steps { grid-template-columns: 1fr; justify-items: start; max-width: 420px; gap: 16px; } }
.mini-trust__item b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; }
.mini-trust__item span { display: block; font-size: .84rem; color: var(--slate); font-weight: 500; }
@media (max-width: 620px) { .mini-trust { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Tuition estimator (Pricing page) ---------- */
.calc { max-width: 780px; margin-inline: auto; background:#fff; border:2px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(20px, 2.6vw, 34px);
  display:flex; flex-direction:column; gap: 18px; }
.calc__child { display:flex; flex-direction:column; gap: 12px;
  padding: 16px 18px; border:2px solid var(--line); border-radius: var(--r-md); background: var(--cloud); }
.calc__childhead { display:flex; justify-content:space-between; align-items:center; gap: 12px; }
.calc__childhead label { font-weight: 800; font-size: .9rem; }
.calc__level { display:flex; flex-wrap:wrap; gap: 12px 22px; align-items:flex-end; }
.calc__remove--lvl { margin-left:auto; }
.calc__addlevel { align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  color: var(--purple); font-weight: 800; font-size: .87rem; }
.calc__addlevel:hover { color: var(--purple-d, #4310B0); }
.calc__field { display:flex; flex-direction:column; gap: 7px; }
.calc__field label { font-weight: 800; font-size: .9rem; }
.calc__addrow { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.calc__tag { display:inline-block; margin-left:4px; padding: 1px 8px; border-radius: var(--r-pill);
  color: var(--ink); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; }
.calc__tag--sib { background: var(--orange); color: #fff; }
.calc__tag--multi { background: var(--blue); color: #fff; }
.calc__select { font: inherit; padding: 11px 14px; border-radius: var(--r-sm); border:2px solid var(--line);
  background:#fff; color: var(--ink); min-height: 48px; min-width: 200px; cursor:pointer; }
.calc__select:focus { outline:none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(94,23,235,.15); }
.stepper { display:inline-flex; align-items:center; border:2px solid var(--line); border-radius: var(--r-pill); background:#fff; overflow:clip; height: 48px; }
.stepper button { width: 46px; height: 100%; font-size: 1.35rem; font-weight: 900; line-height:1;
  background:#fff; color: var(--purple); border:none; cursor:pointer; transition: background .15s var(--ease); }
.stepper button:hover { background: var(--cloud); }
.stepper button:disabled { color: var(--line); cursor:default; }
.stepper output { min-width: 40px; text-align:center; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.calc__remove { margin-left:auto; align-self:center; background:none; border:none; padding:6px 4px;
  color: var(--slate); font: inherit; font-weight: 700; font-size: .9rem; cursor:pointer; }
.calc__remove:hover { color: var(--red); text-decoration: underline; }
.calc__add { align-self:flex-start; }
.calc__summary { border-top: 2px solid var(--line); padding-top: 18px; display:flex; flex-direction:column; gap: 10px; }
.calc__line { display:flex; justify-content:space-between; gap: 16px; font-weight: 700; }
.calc__line small { color: var(--slate); font-weight: 600; white-space: nowrap; }
.calc__total { display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin-top: 4px; padding-top: 16px; border-top: 2px dashed var(--line); }
.calc__total > span { font-weight: 800; font-size: var(--step-1);
  background: linear-gradient(180deg, #58AEF5 0%, #4438E0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: var(--purple); -webkit-text-fill-color: transparent; }
.calc__total strong { font-size: var(--step-3); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--purple); }
.calc__total small { font-size: var(--step--1); color: var(--slate); font-weight: 700; margin-left: 4px; }
.calc__total .calc__mo { font-style: normal; font-weight: 900; font-size: .52em; letter-spacing: -0.01em; margin-left: 2px;
  background: linear-gradient(180deg, #58AEF5 0%, #4438E0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: var(--purple); -webkit-text-fill-color: transparent; }
.calc__total .calc__tax { font-size: .34em; font-weight: 800; letter-spacing: -0.01em; color: var(--slate); margin-left: 3px; }
@media (max-width: 560px) {
  .calc__child { gap: 14px; }
  .calc__field, .calc__select { width: 100%; min-width: 0; }
  .calc__remove { margin-left: 0; }
}

/* Feature tile with big icon */
.feature { text-align: left; }
.feature__ico {
  width: 60px; height: 60px; border-radius: 18px; display:grid; place-items:center;
  color:#fff; margin-bottom: 16px;
}
.feature__ico svg { width: 30px; height: 30px; }
.ico-purple { background: var(--purple); }
.ico-blue { background: var(--blue); color: var(--ink); }
.ico-orange { background: var(--orange); color: var(--ink); }
.ico-red { background: var(--red); }
.ico-lime { background: var(--lime); color: var(--ink); }

/* ---------- 12. Photo placeholders (branded, not gray) ---------- */
.ph {
  position: relative; border-radius: var(--r-md); overflow: clip;
  background: linear-gradient(135deg, var(--purple-2), var(--purple));
  color:#fff; display:grid; place-items:center; isolation:isolate;
  min-height: 180px;
}
.ph::after {
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(circle at 20% 25%, rgba(228,255,98,.55), transparent 42%),
    radial-gradient(circle at 82% 70%, rgba(56,182,255,.55), transparent 45%);
}
.ph--blue { background: linear-gradient(135deg,#5AC4FF,#2E9BE0); }
.ph--lime { background: linear-gradient(135deg,#E9FF7A,#C7E84A); color: var(--ink); }
.ph--orange { background: linear-gradient(135deg,#FFB460,#FF9127); color: var(--ink); }
.ph--ink { background: linear-gradient(135deg,#3A3057,#211A38); }
.ph__tag {
  position: relative; z-index: 1; display:inline-flex; align-items:center; gap: 8px;
  font-weight: 800; font-size: var(--step--1);
  background: rgba(0,0,0,.28); color:#fff; padding: 8px 14px; border-radius: var(--r-pill);
  backdrop-filter: blur(3px);
}
.ph__tag svg { width: 15px; height: 15px; opacity:.9; }
/* Real photo inside a .ph frame (replaces the branded placeholder look) */
.ph--img { background: var(--cloud, #eef); }
.ph--img::after { display: none; }
.ph--img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* location gym photos carry their gym's brand color as an outline (matches the map pins).
   The frame overlaps the card's 2px border (negative margin) and matches its 28px outer
   radius, so the photo+outline reach the card corners with zero white space. The frame
   color also paints BEHIND the photo so corner seams can never show white. */
.card:has(> .loc) { overflow: visible; }
.ph--loc-ne, .ph--loc-s { margin: -2px -2px 0; border-radius: 28px 28px var(--r-md) var(--r-md); }
.ph--loc-ne { border: 4px solid var(--purple); background: var(--purple); }
.ph--loc-s  { border: 4px solid var(--blue); background: var(--blue); }
.ph--loc-ne::after, .ph--loc-s::after { content: ""; display: block; position: absolute; inset: 0; border-radius: 24px 24px calc(var(--r-md) - 4px) calc(var(--r-md) - 4px); pointer-events: none; z-index: 2; }
.ph--loc-ne::after { background: linear-gradient(135deg, rgba(123,60,245,.76), rgba(67,16,176,.8)); }
.ph--loc-s::after  { background: linear-gradient(135deg, rgba(91,200,255,.76), rgba(30,154,232,.8)); }
.ph--wide { aspect-ratio: 16/10; min-height: 0; } /* see .ph--banner note: inherited min-height implies a min width that overflows 320px phones */
.ph--tall { aspect-ratio: 4/5; }
.ph--square { aspect-ratio: 1/1; }
.ph--hero { aspect-ratio: 5/6; min-height: 320px;
  /* never let a split photo push a full-screen section past one viewport */
  max-height: calc(100dvh - var(--header-h) - 170px); }
/* owners' family photo: frame matches the photo's own 10:7 ratio so no
   faces or name labels are ever cropped away; slightly bigger with a small
   rightward tilt, floating lime blob peeking out behind (site blob motif) */
.ph--family { aspect-ratio: 10/7; min-height: 0; max-height: none; }
.guide-media { position: relative; }
.guide-media .guide-blob { width: 126%; height: 116%; top: -9%; right: -14%; z-index: 0; filter: none; opacity: 1;
  animation: none; /* stationary — no float drift */
  border-radius: 63% 37% 52% 48% / 41% 66% 34% 59%; transform: rotate(-22deg); }
.guide-media .ph--family { position: relative; z-index: 1; transform: rotate(2deg) scale(1.05); }
@media (max-width: 760px) { .guide-media .guide-blob { width: 118%; height: 112%; top: -7%; right: -10%; } .guide-media .ph--family { transform: rotate(1.5deg) scale(1.03); } }
/* min-height:0: the inherited .ph min-height:180px + aspect-ratio 21/9
   implies a 420px minimum width, which pushed location/camp cards past the
   right edge of phones (clipped ~40px at 390w) and clipped the second card
   of 2-col grids at tablet widths. The ratio alone sizes the banner now. */
.ph--banner { aspect-ratio: 21/9; min-height: 0; }
/* photo duo: two landscape frames, top-left and bottom-right, corners
   overlapping — same nostalgic white-border + hover-grow motif as the fan */
.photoduo { position: relative; aspect-ratio: 20/19; }
.photoduo__item { position: absolute; width: 76%; background: #fff; border-radius: 14px; padding: 9px 9px 22px; box-shadow: 0 18px 40px rgba(32,27,51,.18); transform: var(--duo-t); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.photoduo__item .ph { aspect-ratio: 16/10; min-height: 0; max-height: none; border-radius: 8px; }
.photoduo__item:nth-child(1) { top: 0; left: 0; --duo-t: rotate(-2.5deg); z-index: 1; }
.photoduo__item:nth-child(2) { bottom: 0; right: 0; --duo-t: rotate(2.5deg); z-index: 2; }
.photoduo__item:hover { transform: var(--duo-t) scale(1.05); z-index: 5; box-shadow: 0 26px 56px rgba(32,27,51,.26); }
.photoduo__item .ph__tag { font-size: .68rem; }
/* Birthday photoduo: gradient frames matching the camp pages' framed photos */
.photoduo__item--blue { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
.photoduo__item--orange { background: linear-gradient(135deg, #FFB460, #FF7A00); }
/* nostalgic photo fan: three white-bordered frames in an arc, overlapping at
   the bottom corners; each grows slightly on hover (keeping its tilt) */
.photofan { display: flex; align-items: flex-end; justify-content: center; padding: 30px 0 14px; }
.photofan__item { flex: 0 0 44%; background: #fff; border-radius: 14px; padding: 9px 9px 24px; box-shadow: 0 18px 40px rgba(32,27,51,.18); position: relative; transform: var(--fan-t); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.photofan__item:nth-child(1) { --fan-t: rotate(-9deg) translateY(12px); z-index: 1; }
.photofan__item:nth-child(2) { --fan-t: rotate(-0.5deg) translateY(-16px); z-index: 2; margin: 0 -7%; }
.photofan__item:nth-child(3) { --fan-t: rotate(9deg) translateY(12px); z-index: 1; }
.photofan__item:hover, .photofan__item.is-hot { transform: var(--fan-t) scale(1.07); z-index: 5; box-shadow: 0 26px 56px rgba(32,27,51,.26); }
.photofan__item .ph { aspect-ratio: 4/5; min-height: 0; max-height: none; border-radius: 8px; }
.photofan__item .ph__tag { font-size: .68rem; }
@media (max-width: 760px) { .photofan { padding-top: 18px; } .photofan__item { padding-bottom: 18px; } }

/* Playful sticker badge on some photos */
.sticker {
  position:absolute; z-index:2; top: 14px; left: 14px;
  background: var(--lime); color: var(--ink); font-weight: 900; font-size: .8rem;
  padding: 7px 13px; border-radius: var(--r-pill); transform: rotate(-6deg);
  box-shadow: var(--sh-sm); text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- 13. Marquee ---------- */
.marquee { overflow: hidden; background: var(--purple); color:#fff; padding: 16px 0; }
.marquee__row { display:flex; gap: 40px; width: max-content; animation: marq 26s linear infinite; }
.marquee__row span { font-weight: 900; font-size: var(--step-1); text-transform: uppercase; letter-spacing: -0.01em; display:flex; align-items:center; gap: 40px; }
.marquee__row span::after { content: "✦"; color: var(--lime); }
@keyframes marq { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee__row{ animation:none; } }

/* ---------- 14. Testimonials ---------- */
.quote { background:#fff; border-radius: var(--r-lg); border: 2px solid var(--line); padding: clamp(22px,3vw,32px); box-shadow: var(--sh-sm); display:flex; flex-direction:column; gap: 16px; }
.quote__stars { color: var(--orange); letter-spacing: 2px; font-size: 1.1rem; }
.quote p { font-size: var(--step-1); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.quote__who { display:flex; align-items:center; gap: 12px; margin-top: auto; }
.quote__av { width: 44px; height: 44px; border-radius: 50%; display:grid; place-items:center; font-weight: 900; color:#fff; flex:none; }
.quote__who b { display:block; font-size: .95rem; }
.quote__who span { font-size: .82rem; color: var(--slate); }

/* ---------- 15. Steps / list ---------- */
.steps { counter-reset: step; display:grid; gap: 18px; }
.step { display:flex; gap: 18px; align-items:flex-start; }
.step__n {
  counter-increment: step; flex:none;
  width: 46px; height: 46px; border-radius: 50%; background: #38B6FF; color: #fff;
  display:grid; place-items:center; font-weight: 900; font-size: 1.15rem;
}
.step__n::before { content: counter(step); }
/* 1-2-3 relay: each number swells in turn (1s each), then 3 holds largest
   for ~5s before the pattern restarts from the top. 7s total cycle. */
.steps .step:nth-child(1) .step__n { animation: stepSwell1 7s var(--ease) infinite; }
.steps .step:nth-child(2) .step__n { animation: stepSwell2 7s var(--ease) infinite; }
.steps .step:nth-child(3) .step__n { animation: stepSwell3 7s var(--ease) infinite; }
/* rest = light blue, swollen ("selected") = purple; white numbers pop on both */
@keyframes stepSwell1 { 0% { transform: scale(1); background-color: #38B6FF; } 7.1% { transform: scale(1.18); background-color: var(--purple); } 14.3%, 100% { transform: scale(1); background-color: #38B6FF; } }
@keyframes stepSwell2 { 0%, 14.3% { transform: scale(1); background-color: #38B6FF; } 21.4% { transform: scale(1.18); background-color: var(--purple); } 28.6%, 100% { transform: scale(1); background-color: #38B6FF; } }
@keyframes stepSwell3 { 0%, 28.6% { transform: scale(1); background-color: #38B6FF; } 35.7%, 95% { transform: scale(1.28); background-color: var(--purple); } 100% { transform: scale(1); background-color: #38B6FF; } }
@media (prefers-reduced-motion: reduce) { .steps .step .step__n { animation: none; } }
/* photo-hover on private events grows the matching check circle (beats the relay animation) */
.steps--checks .step__n { transition: transform .28s var(--ease); }
.steps--checks .step.is-hot .step__n { transform: scale(1.35); }
/* birthday split: hovering a duo photo grows its matching clock */
.steps--clocks .step__n { transition: transform .28s var(--ease); }
.steps--clocks .step.is-hot .step__n { transform: scale(1.32); }
.ticklist { display:grid; gap: 12px; }
.ticklist li { display:flex; gap: 12px; align-items:flex-start; font-weight: 500; }
.ticklist svg { flex:none; width: 24px; height: 24px; color: var(--purple); margin-top: 1px; }
.tone-purple .ticklist svg, .tone-ink .ticklist svg { color: var(--lime); }

/* ---------- 16. FAQ accordion ---------- */
/* No rule above the first question — the category title stands on its own;
   each question keeps its own light divider below. */
.faq { border-top: 0; }
.faq__item { border-bottom: 2px solid var(--line); }
.faq__q {
  width:100%; text-align:left; background:none; border:0; padding: 22px 8px;
  display:flex; justify-content:space-between; align-items:center; gap: 16px;
  font-weight: 800; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.01em;
}
.faq__q .ico { flex:none; width: 32px; height: 32px; border-radius:50%; background: var(--cloud); display:grid; place-items:center; transition: .25s var(--ease); }
.faq__q .ico svg { width: 18px; height: 18px; color: var(--purple); }
.faq__item.is-open .faq__q .ico { background: var(--purple); transform: rotate(45deg); }
.faq__item.is-open .faq__q .ico svg { color:#fff; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq__a-inner { padding: 0 8px 24px; color: var(--slate); font-weight: 500; max-width: 68ch; }
/* rich answers: paragraphs, links, and step lists inside an answer */
.faq__a-inner > p { margin: 0 0 .8em; }
.faq__a-inner > p:last-child { margin-bottom: 0; }
.faq__a-inner strong { color: var(--ink); font-weight: 700; }
.faq__a-inner ul { list-style: disc; padding-left: 24px; margin: .5em 0 1em; }
.faq__a-inner ul li { margin: .45em 0; }
.faq__a-inner ul li::marker { color: var(--purple); }
.faq__a-inner ol.faq-steps li { margin: .45em 0; }
.faq__a-inner a:not(.btn) { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq__a-inner a:hover { color: var(--purple-d); }
.faq-steps { margin: .4em 0 1em; padding-left: 1.4em; display: grid; gap: .4em; }
.faq-steps li { padding-left: .2em; }
.faq-steps li::marker { color: var(--purple); font-weight: 700; }

/* ---- FAQ page header ---- */
/* First-slide sections center their content in the viewport; padding must be
   symmetric or the flex centering visibly drifts down. */
.faq-top { padding-block: clamp(40px, 6vw, 76px); }
.faq-head { text-align: center; max-width: 60ch; margin: 0 auto; }
.faq-head__title { margin: 0 0 16px; }
.dot--purple { color: var(--purple); }
.dot--blue { color: var(--blue); }
.dot--orange { color: var(--orange); }
.dot--lime { color: var(--lime); }
.dot--green { color: #8AE6A0; }
.dot--neon { color: var(--lime); }
.faq-head__sub {
  color: var(--slate); font-size: var(--step-1); line-height: 1.5;
  font-weight: 500; margin: 0 auto; max-width: 52ch;
}
.faq-head__sub--wide{ max-width:92ch; }
.faq-head:has(.faq-head__sub--wide), .faq-head:has(.mini-trust--steps){ max-width:none; }
.faq-head__sub a { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-head__sub a:hover { color: var(--purple-d); }
/* tuition-calculator link: plain purple text that grows slightly on hover */
.faq-head__sub a.calc-pill{ display:inline-block; color:var(--purple); font-weight:700; text-decoration:none;
  transition: transform .18s var(--ease); }
.faq-head__sub a.calc-pill:hover{ color:var(--purple); text-decoration:none; transform:scale(1.08); }

/* ---- FAQ category wayfinding nav (single plane, no container) ---- */
.faq-nav {
  display: flex; flex-wrap: nowrap; gap: 8px;
  justify-content: safe center; align-items: center;
  position: sticky; top: 74px; z-index: 20;
  margin: 22px 0 4px; padding: 12px 4px;
  background: var(--white); border-bottom: 2px solid var(--line);
  overflow-x: auto;
}
/* Topic rail with scroll arrows (FAQ page) */
.faq-navwrap {
  position: sticky; top: 74px; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  margin: 22px 0 4px; background: var(--white); border-bottom: 2px solid var(--line);
}
.faq-navwrap .faq-nav { position: static; border-bottom: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
.faq-nav__arrow {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--cloud); color: var(--purple);
  display: grid; place-items: center; cursor: pointer; transition: .2s var(--ease);
}
.faq-nav__arrow svg { width: 18px; height: 18px; }
.faq-nav__arrow--prev svg { transform: scaleX(-1); }
.faq-nav__arrow:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.faq-nav__arrow[disabled] { opacity: .35; pointer-events: none; }
.faq-navwrap[data-no-overflow] .faq-nav__arrow { display: none; }

/* FAQ search */
.faq-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 18px auto 0;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 8px 4px 18px; transition: border-color .2s var(--ease);
}
.faq-search:focus-within { border-color: var(--purple); }
.faq-search svg { flex: none; width: 19px; height: 19px; color: var(--purple); }
.faq-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--step-0); color: var(--ink); padding: 10px 4px; min-height: 44px; outline: none; }
.faq-noresults {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  text-align: center; color: var(--slate); font-weight: 600; margin: 26px auto 8px;
}
.faq-noresults[hidden] { display: none; }
/* Baked weekly schedule inside program option panels (crawlable SEO layer) */
.opt__sched { margin-top: 14px; }
.opt__schedlist { display: grid; gap: 5px; margin: 0 0 6px; }
.opt__schedlist li { font-size: var(--step--1); color: var(--ink); position: relative; padding-left: 16px; line-height: 1.4; }
.opt__schedlist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.opt__schedlist a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--line); transition: color .15s, border-color .15s; }
.opt__schedlist a:hover { color: var(--purple); border-color: var(--purple); }
.opt__schedlist small { color: var(--slate); font-size: .92em; }
.opt__sched-note { font-size: .8rem; color: var(--slate); margin-top: 10px; line-height: 1.45; }

/* Small "+ tax" tag beside every price on the pricing page */
.pcard__tax { font-size: .74rem; font-weight: 700; color: var(--slate); margin-left: 7px; letter-spacing: .01em; white-space: nowrap; }
.pcard__flag { display:inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 11px; border-radius: 999px;
  background: var(--lime); color: var(--ink); font-family: Inter, sans-serif;
  font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  -webkit-text-fill-color: var(--ink); }
.faq-noresults a { color: var(--purple); font-weight: 800; }
.faq__item[hidden], .faq-cat[hidden] { display: none; }
.faq-nav__link {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--cloud); color: var(--ink);
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  border: 1.5px solid var(--line); transition: .2s var(--ease);
}
.faq-nav__link svg { width: 17px; height: 17px; color: var(--purple); transition: color .2s var(--ease); }
.faq-nav__link, .faq-nav__link:hover { text-decoration: none; }  /* buttons, not links */
.faq-nav__link:hover { background: var(--purple); color: #fff; border-color: var(--purple); transform: translateY(-1px); }
.faq-nav__link:hover svg { color: #fff; }

/* ---- Pricing page sticky category nav (sticks across the whole page) ---- */
.price-nav { position: sticky; top: var(--header-h); z-index: 20; background: var(--white); border-bottom: 2px solid var(--line); }
.price-nav__inner {
  display: flex; flex-wrap: nowrap; gap: 8px;
  justify-content: safe center; align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gut);
  overflow-x: auto; scrollbar-width: none;
}
.price-nav__inner::-webkit-scrollbar { display: none; }
.price-nav .faq-nav__link,
.price-nav .faq-nav__link:hover { text-decoration: none; }
.price-nav .faq-nav__link.is-active { background: var(--purple); color: #fff; border-color: var(--purple); }
.price-nav .faq-nav__link.is-active svg { color: var(--lime); }
.pnav-ico {
  display: inline-block; flex: none; width: 20px; height: 20px;
  background: var(--purple);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.price-nav .faq-nav__link:hover .pnav-ico,
.price-nav .faq-nav__link.is-active .pnav-ico { background: var(--lime); }
/* pricing page only — .price-nav is its sticky category rail; without the scope
   these ids also match sections on the programs/camps pages and over-offset their anchors */
/* pricing nav targets: land flush under header + sticky price-nav */
.price-nav ~ #monthly, .price-nav ~ #estimator, .price-nav ~ #camps,
.price-nav ~ #opengyms, .price-nav ~ #adult, .price-nav ~ #parties { scroll-margin-top: 60px; }
@media (max-width: 560px) { .price-nav__inner { padding: 10px 16px; gap: 8px; } }

/* ---- FAQ category groups ---- */
/* NB: html's scroll-padding-top (92px) adds to this — total offset 92+52 = 144,
   flush under the 74px header + 71px sticky topic rail so no previous question
   peeks above the landed section */
.faq-cat { scroll-margin-top: 52px; padding-top: 40px; }
/* 'Pick your Friday' / 'Pick the days' calendars: land below the sticky nav */
#dates { scroll-margin-top: 96px; }
.faq-cat:first-of-type { padding-top: 28px; }
.faq-cat__title {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--step-2); font-weight: 900; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.faq-cat__ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--purple); color: #fff;
}
.faq-cat__ico svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .faq-nav { top: 74px; padding: 10px; gap: 8px; }
  .faq-nav__link { padding: 8px 12px; font-size: .85rem; }
}

/* ---------- 17. Split / media rows ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items:center; }
/* Slide-sized split content: slightly tighter type so a text column fits one screen */
.split .h2 { font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.55rem); }
.split .lede { font-size: clamp(1rem, .93rem + .38vw, 1.22rem); line-height: 1.42; }
.split .ticklist { gap: 10px; }
.split .ticklist li { font-size: .98rem; }
.split .ticklist svg { width: 21px; height: 21px; }
.split .mt-3 { margin-top: 18px; }
.split .mt-4 { margin-top: 24px; }
.split--rev .split__media { order: -1; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }

/* ---------- 18. Location cards ---------- */
.loc { display:grid; grid-template-columns: 1fr; gap: 0; }
.loc__map { position:relative; }
.loc__frame { display:block; width:100%; aspect-ratio:21/9; border:0; background:var(--cloud,#eef); }
/* Brand map pin — the badge logo in a colored teardrop replaces Google's red
   marker (the embed is centered pin-less; the overlay pin marks the gym and
   the whole map clicks through to Google Maps). Purple = Northeast, blue = South. */
.loc__maplink { position: absolute; inset: 0; z-index: 2; display: block; }
.loc__pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -94%);
  filter: drop-shadow(0 10px 14px rgba(32,27,51,.38));
  transition: transform .2s var(--ease);
}
.loc__maplink:hover .loc__pin { transform: translate(-50%, -94%) scale(1.07); }
.loc__pin-body {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  background: var(--pin, var(--purple));
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.loc__pin-body img { display: block; width: 42px; height: 42px; border-radius: 50%; background: #fff; transform: rotate(45deg); }
.loc__pin--ne { --pin: var(--purple); }
.loc__pin--s  { --pin: var(--blue); }
.loc__info { padding: clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap: 10px; }
.loc__row { display:flex; gap: 10px; align-items:flex-start; color: var(--slate); font-weight: 500; }
.loc__row svg { flex:none; width: 20px; height: 20px; color: var(--purple); margin-top: 2px; }

/* ---------- 19. CTA band ---------- */
/* CTA band: a compact closer, about half its old height */
.section--cta { min-height: 0; padding-block: clamp(28px, 5vh, 56px); }
.cta-band { position:relative; overflow:clip; border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 40px) clamp(24px, 4vw, 48px); text-align:center; }
.cta-band .display, .cta-band .h1, .cta-band .h2 { color:#fff; }
.cta-band .lede { font-size: var(--step-0); }
/* whimsical backdrop: dotted tumbling paths, sparkles, confetti dots */
.cta-band__deco { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cta-band__deco svg { width:100%; height:100%; display:block; }
.ctadeco__drift { animation: ctaDrift 9s ease-in-out infinite alternate; }
.ctadeco__drift--alt { animation-duration: 12s; animation-delay: -4s; }
@keyframes ctaDrift { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.ctadeco__spark { transform-origin: center; transform-box: fill-box; animation: ctaTwinkle 3.4s ease-in-out infinite; }
.ctadeco__spark--alt { animation-delay: -1.5s; }
@keyframes ctaTwinkle { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(.5); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ctadeco__drift, .ctadeco__spark { animation: none; } }

/* ---------- 20. Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: clamp(48px,6vw,72px) 32px; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--blue); text-decoration:none; }
/* Link columns size to their content so no program name ever wraps;
   the brand column absorbs the leftover width. */
.footer__grid { display:grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, auto); gap: 30px 48px; }
@media (min-width: 821px){ .footer__col a { white-space: nowrap; } }
@media (max-width: 820px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; align-items: start; } .footer__grid > :first-child { grid-column: 1 / -1; } }
.footer__logo { width: clamp(104px, 12vw, 148px); height: auto; }
.footer__brand b { color:#fff; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; }
.footer__col h2 { color:#fff; font-size: 1rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom: 14px; font-weight:800; }
.footer__col a { display:block; padding: 5px 0; font-weight: 500; }
.footer__social { display:flex; gap:10px; margin-top: 16px; }
.footer__social a { width: 40px; height:40px; border-radius:50%; background: rgba(255,255,255,.08); display:grid; place-items:center; }
.footer__social svg { width: 20px; height: 20px; }
.footer__social--bottom { margin-top: 0; }
.footer__social--bottom a { width: 36px; height: 36px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display:flex; flex-wrap:wrap; gap: 12px; justify-content:space-between; align-items:center; font-size: .84rem; }

/* ---------- 20b. Weather & Class Status (footer pill + popover) ---------- */
.footer__legal { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
/* desktop row order: © · contact · status chip · socials */
.footer__copy { order: 1; } .footer__contact { order: 2; } .footer__bottom .cstatus { order: 3; } .footer__social--bottom { order: 4; }
/* phones: stacked — ©, then email · phone, then the class-status chip */
@media (max-width: 720px){
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__copy { order: 1; } .footer__contact { order: 2; } .footer__bottom .cstatus { order: 3; } .footer__social--bottom { order: 4; }
}
.cstatus { position: relative; display: inline-block; }
.cstatus__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82); font-size: .78rem; font-weight: 700; line-height: 1;
  transition: background .2s var(--ease), border-color .25s var(--ease), color .2s var(--ease);
}
.cstatus__btn:hover { background: rgba(255,255,255,.13); color: #fff; }
.cstatus__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cstatus__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.cstatus__btnlabel { white-space: nowrap; }
.cstatus__chev { display: inline-flex; color: rgba(255,255,255,.5); transition: transform .25s var(--ease); }
.cstatus__chev svg { width: 15px; height: 15px; }
.cstatus.is-open .cstatus__chev { transform: rotate(180deg); }

/* Collapsed pill only lights up when something is actually off */
.cstatus[data-state="canceled"] .cstatus__btn { border-color: rgba(255,57,57,.6); background: rgba(255,57,57,.15); color: #fff; }
.cstatus[data-state="canceled"] .cstatus__dot { background: var(--red); }
.cstatus[data-state="modified"] .cstatus__btn { border-color: rgba(255,157,56,.6); background: rgba(255,157,56,.15); color: #fff; }
.cstatus[data-state="modified"] .cstatus__dot { background: var(--orange); }
.cstatus[data-alert] .cstatus__dot { animation: cstatusPulse 2s ease-out infinite; }
@keyframes cstatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,57,57,.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,57,57,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,57,57,0); }
}
.cstatus[data-state="modified"][data-alert] .cstatus__dot { animation-name: cstatusPulseAmber; }
@keyframes cstatusPulseAmber {
  0% { box-shadow: 0 0 0 0 rgba(255,157,56,.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,157,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,157,56,0); }
}
@media (prefers-reduced-motion: reduce) { .cstatus[data-alert] .cstatus__dot { animation: none; } }

/* Popover */
.cstatus__pop {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 40;
  width: min(324px, calc(100vw - 40px));
  background: #2b2542; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md);
  box-shadow: 0 22px 54px rgba(0,0,0,.5); padding: 15px 16px 14px;
  text-align: left; animation: cstatusPop .18s var(--ease);
}
.cstatus__pop::after {
  content: ""; position: absolute; top: 100%; left: 20px; width: 12px; height: 12px;
  background: #2b2542; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
  transform: translateY(-6px) rotate(45deg);
}
@keyframes cstatusPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cstatus__pop { animation: none; } }
.cstatus__pophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cstatus, .cstatus__pop { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
.cstatus__eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cstatus__eyebrow svg { width: 13px; height: 13px; flex: none; }
.cstatus__close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.07); border: 0; color: rgba(255,255,255,.6); }
.cstatus__close:hover { background: rgba(255,255,255,.14); color: #fff; }
.cstatus__close svg { width: 15px; height: 15px; }
.cstatus__headline { font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.3; }
.cstatus__msg { margin-top: 6px; font-size: .86rem; color: rgba(255,255,255,.72); line-height: 1.5; }
.cstatus__meta { margin-top: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); }
/* Per-hour list inside the popover */
.cstatus__list { margin-top: 13px; display: grid; gap: 2px; }
.cstatus__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); font-size: .86rem; }
.cstatus__oi { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.cstatus__oname { flex: 1; color: #fff; font-weight: 600; }
.cstatus__ostate { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.cstatus__opt[data-state="closed"] { background: rgba(255,57,57,.12); }
.cstatus__opt[data-state="closed"] .cstatus__oi { background: var(--red); }
.cstatus__opt[data-state="closed"] .cstatus__ostate { color: #ff8a8a; }

/* ---------- 20b. Home "More ways to play" photo squares ---------- */
.progsq { margin-top: clamp(22px, 3vw, 34px); }
/* pricing-card treatment: photo on top, program gradient below a rounded
   S-curve divider that flows gently downward left-to-right */
.progsq__card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm); padding: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.progsq__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(105,105,120,.26); }
.progsq__ph { background-image: var(--img); background-size: cover; background-position: center; aspect-ratio: 16 / 10.5; }
.progsq__body {
  position: relative; flex: 1; margin-top: -36px;
  /* smoothstep S-curve: flat at the left, easing down to 36px at the right */
  clip-path: polygon(0 0, 8% 0.7px, 16% 2.5px, 24% 5.3px, 32% 8.7px, 40% 12.7px, 50% 18px, 60% 23.3px, 70% 28.2px, 80% 32.3px, 90% 35px, 100% 36px, 100% 100%, 0 100%);
  padding: 42px 22px 22px; color: #fff;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.progsq--orange .progsq__body { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.progsq--purple .progsq__body { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
.progsq--lime   .progsq__body { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.progsq--blue   .progsq__body { background: linear-gradient(135deg, #5BC8FF, #1E9AE8); }
/* camps page: four cards with longer copy + long titles — let height follow
   content and let titles wrap instead of the home cards' fixed 4/3 ratio */
.progsq--camps .progsq__card { aspect-ratio: auto; }
.progsq--camps .progsq__body h3 { white-space: normal; }
.progsq__body h3 { color: #fff; font-size: clamp(21px, 1.75vw, 25px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-top: auto; white-space: nowrap; }
.progsq__body p { color: rgba(255,255,255,.94); font-weight: 500; font-size: var(--step--1); line-height: 1.45; }
.progsq__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.progsq__more { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 800; font-size: .9rem; text-decoration: none; opacity: .92; }
.progsq__more:hover { text-decoration: none; opacity: 1; color: #fff; }
.progsq__more svg { display: inline; }
/* no fixed card ratio on mobile — the gradient body must fit ALL its text
   and buttons (a 4/3 ratio clipped them behind overflow:hidden) */

/* ---------- 21. Mobile sticky CTA ---------- */
/* (bottom sticky Register bar removed 2026-08 — ate too much phone space) */


/* ---------- 23. Page hero (interior) ---------- */
.phero {
  position:relative; overflow:clip;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
}
.phero__inner { padding-block: clamp(48px, 6vw, 88px); position:relative; z-index:2; }
.phero .h1 { max-width: 16ch; }
/* hero subtext breathes a little more under the title, on every page */
.phero .lede, .hero .hero__rot, .mgcal-intro .lede, .faq-top .lede { margin-top: 18px; }

/* Photo header: subject fills the open (right) side; scrim keeps the title side legible */
.phero--photo {
  color: #fff;
  background-color: #17122B;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.phero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(23,18,43,.95) 0%,
    rgba(23,18,43,.86) 28%,
    rgba(23,18,43,.55) 48%,
    rgba(23,18,43,.12) 72%,
    rgba(23,18,43,0) 100%);
}
.phero--photo .phero__inner { position: relative; z-index: 2; }
/* Private Events hero: Northeast & South photos side by side behind a lime
   diagonal divider; each half wears its location's transparent color wash */
.phero--dualgym { background-image: none; }
/* no dark text scrim here — the color washes carry the contrast, and the
   lime divider reads as one solid color edge to edge */
.phero--dualgym::before { content: none; }
/* hero lede narrowed to break onto three lines; the CTA wears the blue
   gradient (rest + hover ring/label) so it pops off the purple side */
.phero--dualgym .lede { max-width: 36ch; }
.phero--dualgym .btn--primary::before { background-image: linear-gradient(90deg, #5BC8FF, #38B6FF 50%, #1E9AE8); }
.phero--dualgym .btn--primary:hover { color: #1E9AE8; }
.phero--dualgym .btn--primary:hover svg { color: #1E9AE8; }
@supports (-webkit-background-clip: text, padding-box, border-box) {
  .phero--dualgym .btn--primary:hover {
    background-image:
      linear-gradient(90deg, #5BC8FF, #38B6FF 50%, #1E9AE8),
      linear-gradient(#fff, #fff),
      linear-gradient(90deg, #5BC8FF, #38B6FF 50%, #1E9AE8);
  }
}
.dualgym { position: absolute; inset: 0; z-index: 0; }
.dualgym__half { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* both photos render at the same scale (height-fit with slight overscan) and
   anchor to their outer edges, so the rooms read continuous across the seam;
   washes strong enough that the white hero text pops */
/* hero-specific crops put each gym's wall/floor line at 50% of the image
   height, so the room line carries straight across the lime seam at any
   viewport (measured: NE line was at 59%, South at 34% — CSS nudging alone
   could never close that gap) */
.dualgym__ne { clip-path: polygon(0 0, 64% 0, 54% 100%, 0 100%); background-image: linear-gradient(135deg, rgba(123,60,245,.76), rgba(67,16,176,.9)), url('photos/loc-ne-hero.webp'); background-size: auto 106%; background-position: left center; }
.dualgym__s { clip-path: polygon(64% 0, 100% 0, 100% 100%, 54% 100%); background-image: linear-gradient(135deg, rgba(91,200,255,.74), rgba(30,154,232,.88)), url('photos/loc-south-hero.webp'); background-size: auto 106%; background-position: right center; }
.dualgym__line { position: absolute; inset: 0; background: var(--lime); clip-path: polygon(63.6% 0, 64.4% 0, 54.4% 100%, 53.6% 100%); }
.phero--photo .h1 { color: #fff; }
.phero--photo .lede { color: rgba(255,255,255,.86); }
.phero--photo .crumb, .phero--photo .crumb a { color: rgba(255,255,255,.82); }
.phero--photo .crumb span { color: rgba(255,255,255,.5); }
.phero--photo .badge-note { color: rgba(255,255,255,.82); }
.phero--photo .eyebrow { color: #fff; }
/* On narrow screens the subject can't sit beside the text — darken overall so text stays readable */
@media (max-width: 860px) {
  .phero--photo { background-position: center right; }
  .phero--photo::before {
    background: linear-gradient(178deg, rgba(23,18,43,.72) 0%, rgba(23,18,43,.82) 55%, rgba(23,18,43,.92) 100%);
  }
}

/* ---------- 24. Utility ---------- */
.badge-note { display:inline-flex; gap:8px; align-items:center; font-weight:700; color: var(--slate); font-size: var(--step--1); }
.badge-note::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--lime); }
.mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.hide-sm { }
@media (max-width: 620px){ .hide-sm { display:none; } }
.tag-row { display:flex; flex-wrap:wrap; gap: 8px; }

/* ---------- 25. Motion story ----------
   Scroll-driven storytelling, kept restrained and transform-only:
   - reveals "stick the landing": cards settle in with a touch of scale+blur
   - section heads tilt upright as they land; their title period bounces last
   - photos unmask (clip-path) with a slow Ken-Burns settle
   - a lime-to-blue "balance beam" fills across the top as you scroll
   - JS (main.js) adds gentle parallax drift + a hero scroll cue
   Everything degrades to static under prefers-reduced-motion. */
.reveal { transition: opacity .95s var(--ease), transform .95s cubic-bezier(.25,.8,.25,1), filter .9s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(30px); }
.js .card.reveal, .js .quote.reveal, .js .price-card.reveal { transform: translateY(34px) scale(.955); filter: blur(6px); }
.js .section-head.reveal { transform: translateY(30px) rotate(-1.1deg); transform-origin: 12% 100%; }
.reveal.is-in, .js .reveal.is-in { opacity: 1; transform: none; filter: none; }
/* container boxes settle at the same unhurried pace as the photo unmask */
.js .card.reveal, .js .quote.reveal, .js .price-card.reveal { transition-duration: 1.25s, 1.25s, 1.15s; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

/* photo frames unmask, image settles */
.js .reveal .ph--img { clip-path: inset(9% 9% 9% 9% round var(--r-md)); transition: clip-path 1.25s var(--ease); }
.js .reveal.is-in .ph--img { clip-path: inset(0 0 0 0 round var(--r-md)); }
.js .reveal .ph--img img { transform: scale(1.09); transition: transform 1.9s var(--ease); }
.js .reveal.is-in .ph--img img { transform: scale(1); }

/* the title's colored period bounces in after the headline lands */
.js .reveal .dot { display: inline-block; opacity: 0; transform: scale(0); }
.js .reveal.is-in .dot { animation: dotPop .6s cubic-bezier(.34,1.56,.64,1) .55s both; }
@keyframes dotPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* Weather closure lightbox — greets each new visitor while classes are
   marked closed (auto-retires at 10 PM gym time; see assets/cms.js) */
.wxmodal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: clamp(16px, 4vw, 44px); }
.wxmodal__backdrop { position: absolute; inset: 0; background: rgba(23,18,43,.62); backdrop-filter: blur(4px); }
.wxmodal__dialog {
  position: relative; width: min(560px, 100%);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); text-align: center;
  background: radial-gradient(120% 120% at 15% 10%, #2A2340, #17122B 70%); color: #fff;
  box-shadow: var(--sh-lg); overflow: clip;
}
.wxmodal__ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: linear-gradient(135deg, #5AC4FF, #2E9BE0); color: #fff; box-shadow: var(--sh-md); }
.wxmodal__ico svg { width: 38px; height: 38px; }
.wxmodal__eyebrow { font-size: var(--step--1); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.wxmodal h2 { color: #fff; font-size: var(--step-2); }
.wxmodal__msg { color: rgba(255,255,255,.85); margin: 12px auto 0; max-width: 46ch; font-weight: 500; line-height: 1.55; }
.wxmodal__meta { color: rgba(255,255,255,.55); font-size: .85rem; margin-top: 10px; }
.wxmodal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.wxmodal__dismiss { --bg: transparent; --fg: #fff; --ring: rgba(255,255,255,.4); }
.wxmodal__dismiss:hover { --ring: #fff; }

/* hero scroll cue */
.scrollcue {
  position: absolute; left: 50%; bottom: 16px; z-index: 3; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255,255,255,.85); font-size: .7rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .4s var(--ease); pointer-events: none;
}
.scrollcue svg { width: 18px; height: 18px; animation: cueDip 1.8s var(--ease) infinite; }
@keyframes cueDip { 0%,100% { transform: translateY(0); opacity:.9; } 50% { transform: translateY(7px); opacity:.35; } }
body.mg-scrolled .scrollcue { opacity: 0; }

/* Home welcome head: big gradient 'Welcome!' over a second plain line */
.welcomehead { display: block; }
.welcomehead__hi {
  display: block; font-size: 1.55em; line-height: 1.08; margin-bottom: 2px;
  background: linear-gradient(135deg, #9A66FF, #5E17EB);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.welcomehead__ln {
  display: block; color: var(--ink); white-space: nowrap;
  /* sized so the one-line sentence matches the 720px paragraph block below */
  font-size: min(2.84rem, 5.55vw);
}
/* parallax layers (transform driven from main.js) */
[data-para] { will-change: transform; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; filter:none; }
  .js .reveal .ph--img { clip-path:none; transition:none; }
  .js .reveal .ph--img img { transform:none; transition:none; }
  .js .reveal .dot, .js .reveal.is-in .dot { opacity:1; transform:none; animation:none; }
  .scrollcue { display:none; }
  .blob { animation:none; }
  .rot__word.is-swap { animation:none; }
}

/* ---------- 26. Skip link + focus ---------- */
.skip-link { position:absolute; left:-9999px; top:0; background: var(--purple); color:#fff; padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 999; font-weight:800; }
.skip-link:focus { left:0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- 27. Form ---------- */
.field { display:flex; flex-direction:column; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 800; font-size: 1rem; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 13px 15px; border-radius: var(--r-sm); border: 2px solid var(--line);
  background:#fff; color: var(--ink); min-height: 48px; width: 100%;
}
.field textarea { min-height: 185px; resize: vertical; line-height: 1.55; }
/* Branded dropdown (.mgdd): fully custom control — the native select stays in
   the form (hidden) for submission; main.js builds this UI over it */
.mgdd { position: relative; }
.mgdd select { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.mgdd__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 13px 15px;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink); text-align: left;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.mgdd__btn:hover { border-color: var(--purple); }
.mgdd.is-open .mgdd__btn, .mgdd__btn:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(94,23,235,.15); }
.mgdd__chev { color: var(--purple); flex: none; transition: transform .18s var(--ease); }
.mgdd.is-open .mgdd__chev { transform: rotate(180deg); }
.mgdd__list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--sh-md);
  padding: 6px; max-height: 290px; overflow: auto; display: none;
}
.mgdd.is-open .mgdd__list { display: block; animation: mgddIn .16s var(--ease); }
@keyframes mgddIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.mgdd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink);
  padding: 11px 13px; border-radius: 9px; cursor: pointer;
}
.mgdd__opt:hover, .mgdd__opt.is-hl { background: var(--cloud); color: var(--purple); }
.mgdd__opt.is-sel { color: var(--purple); }
.mgdd__opt.is-sel::after { content: "\2713"; font-weight: 800; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(94,23,235,.15); }
.form-card { background:#fff; border-radius: var(--r-lg); border:2px solid var(--line); box-shadow: var(--sh-sm); padding: clamp(22px,3vw,34px); }

/* ---------- 29. "Why gymnastics" trust panel ---------- */
.trust {
  background:#fff; border:2px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: clamp(28px, 5vw, 60px);
}
.trust__intro { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align:center; }
.trust__intro .lede { margin-top: 14px; }
.trust__pillar { text-align:left; }
.trust__pillar .feature__ico { margin-bottom: 14px; }
.trust__pillar .card__title { margin-bottom: 4px; }
.trust__pillar p { color: var(--slate); font-weight: 500; }
.lead {
  margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(24px, 3vw, 32px);
  border-top: 2px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center;
}
.lead__text .chip { margin-bottom: 10px; }
.lead__text h3 { font-size: var(--step-1); font-weight: 900; letter-spacing: -0.02em; }
.lead__text p { color: var(--slate); font-weight: 500; margin-top: 6px; }
.lead__text p b { color: var(--ink); font-weight: 800; }
.lead__row { display: flex; gap: 12px; flex-wrap: wrap; }
.lead__row input {
  flex: 1 1 220px; min-width: 0; font: inherit;
  padding: 14px 18px; border-radius: var(--r-pill); border: 2px solid var(--line);
  background: #fff; color: var(--ink); min-height: 52px;
}
.lead__row input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(94,23,235,.15); }
.lead__row .btn { flex: none; }
.lead__note { display: none; margin-top: 12px; font-weight: 800; color: var(--purple); }
.lead__form.is-sent .lead__note { display: block; }
@media (max-width: 820px) { .lead { grid-template-columns: 1fr; } }

/* ---------- 30. Programs journey timeline ---------- */
.timeline { position: relative; --rail: 64px; --dotoff: clamp(30px, 3.4vw, 47px); }
.timeline::before {
  content:""; position:absolute; z-index:0; bottom: var(--rail-end, 0px);
  top: var(--rail-start, calc(var(--dotoff) + var(--rail) / 2)); /* first dot's center (JS refines) */
  left: calc(var(--rail) / 2); width: 3px; transform: translateX(-50%);
  background: var(--line); border-radius: 3px;
}
.timeline__fill {
  position:absolute; z-index:1; height: 0;
  top: var(--rail-start, calc(var(--dotoff) + var(--rail) / 2));
  left: calc(var(--rail) / 2); width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--purple), var(--blue));
  border-radius: 3px;
}
.timeline__list { list-style:none; margin:0; padding:0; position: relative; z-index: 2; }
.tl-stop {
  position: relative; display: grid;
  grid-template-columns: var(--rail) 1fr; gap: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(44px, 6vw, 88px);
}
.tl-stop:last-child { padding-bottom: 0; }
.tl-dot {
  position: relative; z-index: 2;
  margin-top: var(--dotoff); /* center the icon on the program title line */
  width: var(--rail); height: var(--rail); border-radius: 50%;
  background:#fff; border: 3px solid var(--line); color: var(--purple);
  display: grid; place-items: center;
  transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
}
.tl-dot svg { width: 28px; height: 28px; }
/* Youth's triple-star composition reads smaller than single-glyph icons — let it fill the circle */
#youth .tl-dot svg { width: 38px; height: 38px; }
.tl-stop.is-active .tl-dot {
  background: var(--purple); color:#fff; border-color: var(--lime);
  box-shadow: 0 0 0 6px rgba(94,23,235,.12), var(--sh-md); transform: scale(1.06);
}
.tl-panel { min-width: 0; }
.tl-head {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 40px);
  align-items: center; margin-bottom: clamp(20px, 3vw, 32px);
}
.tl-head > * { min-width: 0; } /* keep photo min-content width from widening the fr tracks */
.tl-headtext .h2 { margin-bottom: 6px; }
.tl-age { display: block; color: var(--ink); font-weight: 800; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.tl-photo .ph { width: 100%; }

/* Expandable class-detail panel inside each option card */
.opt-card {
  position: relative; --glow: 94,23,235;
  box-shadow: 7px 7px 0 rgb(var(--glow));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.opt-card.reveal:hover { transform: scale(1.05); z-index: 2; box-shadow: 10px 10px 0 rgb(var(--glow)); }
.opt-card--dual { box-shadow: -7px 7px 0 rgb(var(--glow)), 7px 7px 0 rgb(var(--glow2, var(--glow))); }
.opt-card--dual.reveal:hover { box-shadow: -10px 10px 0 rgb(var(--glow)), 10px 10px 0 rgb(var(--glow2, var(--glow))); }
.opt__age { color: var(--ink); font-weight: 700; font-size: var(--step--1); margin-top: -4px; }
.opt__badge {
  position: absolute; top: 13px; right: 13px; z-index: 3;
  background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  transform: rotate(4deg);
  box-shadow: 0 3px 10px rgba(32,27,51,.15);
}

/* Adult Program refresh banner — brand light-blue gradient, below the cards */
.adult-refresh {
  position: relative;
  margin-top: 26px; padding: 30px 34px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #5BC8FF, #1E9AE8);
  color: #fff; box-shadow: var(--sh-md);
  display: flex; align-items: center;
  gap: 18px 36px; flex-wrap: wrap;
}
.adult-refresh__text { flex: 1 1 380px; min-width: 0; }
.adult-refresh h3 {
  color: #fff; font-size: clamp(20px, 2.6vw, 26px); font-weight: 900;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 8px;
}
.adult-refresh__dot { color: var(--lime); }
.adult-refresh p { color: rgba(255,255,255,.92); max-width: 56ch; }
.adult-refresh__text .btn { margin-top: 18px; white-space: normal; text-align: center; }
/* live founding-spots scarcity pill — hidden until /api/founding-spots returns real data */
.agspots, .adult-refresh p.agspots { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: .92rem; box-shadow: 0 4px 14px rgba(32,27,51,.18); }
.agspots[hidden], .adult-refresh p.agspots[hidden] { display: none; }
/* mobile: force "Become a / Founding Member" onto two lines; desktop hides the break */
.agbtn br { display: none; }
@media (max-width: 720px) {
  .agbtn br { display: inline; }
  .btn__txt.agbtn { text-wrap: wrap; } /* balance would split "Founding Member" onto a 3rd line */
  .adult-refresh__text .btn--lg { padding-inline: 14px; } /* room so "Founding Member" holds one line */
}
/* desktop: spots pill sits on its own line under the CTA (mirrors mobile) */
@media (min-width: 721px) {
  .adult-refresh__text p.agspots:not([hidden]) { display: flex; width: max-content; }
}
.agspots b { font-weight: 900; }
/* stacked numbers-over-label pill */
/* .btn__txt: block wrapper inside a button whose long label should break
   into even lines (text-wrap:balance misreports overflow on the button's
   own anonymous flex text, so balance lives on a real block instead) */
.btn__txt { display: block; text-wrap: balance; }
.agspots--stack .agspots__lines { display: flex; flex-direction: column; line-height: 1.25; }
.agspots--stack .agspots__sub { font-weight: 800; font-size: .84em; }
.agspots__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: agspotsPulse 2s ease-out infinite; }
@keyframes agspotsPulse { 0% { box-shadow: 0 0 0 0 rgba(32,27,51,.35); } 70% { box-shadow: 0 0 0 7px rgba(32,27,51,0); } 100% { box-shadow: 0 0 0 0 rgba(32,27,51,0); } }
@media (prefers-reduced-motion: reduce) { .agspots__dot { animation: none; } }
/* the founding-member card: inverse tilt, breaking out of the right edge */
.adult-refresh__card {
  flex: 0 1 330px; margin: -4px -74px -4px auto;
  transform: rotate(5deg);
  filter: drop-shadow(0 18px 32px rgba(8,42,66,.38));
}
.agcard { background: linear-gradient(135deg, #262230 0%, #0D0B13 72%); border-radius: 18px; overflow: hidden; padding: 16px 20px 0; }
.agcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.agcard__logo { width: 44px; height: 44px; border-radius: 50%; display: block; }
.agcard__pill { border: 2.5px solid #5BC8FF; color: #5BC8FF; font-weight: 900; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.agcard__lbl { font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9A93B0; margin: 0 0 2px; }
.agcard__name { color: #fff; font-size: 1.22rem; font-weight: 900; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 11px; white-space: nowrap; }
.agcard__val { color: #fff; font-weight: 800; font-size: 1rem; margin: 0 0 14px; }
.agcard__strip { background: #fff; color: var(--ink); margin: 0 -20px; padding: 10px 20px 13px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.agcard__lbl--ink { color: #8B8798; }
.agcard__dashes { font-weight: 900; letter-spacing: .28em; margin: 0; line-height: 1; }
.agcard__loc { text-align: right; font-size: .68rem; line-height: 1.35; }
.agcard__loc p { margin: 0; color: #6B6580; max-width: none; }
.agcard__loc b { font-size: .7rem; color: var(--ink); }
@media (max-width: 980px) {
  .adult-refresh__card { margin: 10px auto 2px; transform: rotate(3deg); }
}
@media (max-width: 640px) {
  .adult-refresh { padding: 22px 20px; }
  .adult-refresh__text .btn { width: 100%; justify-content: center; }
  .adult-refresh__card { flex-basis: 300px; }
}
.opt__panel, .opt__reg { display: none; }  /* hidden sources — shown in the lightbox */

/* ---------- Class-detail lightbox ---------- */
.cmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 44px); }
.cmodal[hidden] { display: none; }
.cmodal__backdrop {
  position: absolute; inset: 0; background: rgba(23,18,43,.55);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.cmodal__dialog {
  position: relative; z-index: 1; width: min(680px, 100%); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  --glow: 94,23,235; --glow2: 67,16,176;
  border: 3px solid transparent; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg,
      color-mix(in srgb, rgb(var(--glow)) 84%, #fff),
      rgb(var(--glow)) 52%,
      color-mix(in srgb, rgb(var(--glow)) 76%, #000)) border-box;
}
.cmodal__dialog--dual {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, rgb(var(--glow)), rgb(var(--glow2))) border-box;
}
.cmodal__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: clamp(26px, 4vw, 44px) clamp(26px, 4vw, 44px) 10px; }
.cmodal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--cloud); color: var(--purple); display: grid; place-items: center;
  font-size: 22px; line-height: 1; transition: background .15s, color .15s, transform .2s var(--ease);
}
.cmodal__close:hover { background: var(--purple); color: #fff; }
.cmodal__close { outline: none; -webkit-tap-highlight-color: transparent; }
.cmodal__close:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; } /* keyboard users get a brand ring, never the UA blue */
.cmodal__dialog:focus { outline: none; }
/* class-detail lightbox wears the class's own colors: the See-class-times
   button and the close button pick up --glow/--glow2 from the dialog */
.cmodal__dialog .cmodal__actions .btn--primary[data-class-list]::before {
  background-image: linear-gradient(135deg, rgb(var(--glow)), rgb(var(--glow2, var(--glow)))); }
.cmodal__dialog .cmodal__actions .btn--primary[data-class-list]:hover { color: rgb(var(--glow)); }
.cmodal__dialog .cmodal__close { background: linear-gradient(135deg, rgb(var(--glow, 94,23,235)), rgb(var(--glow2, var(--glow, 94,23,235)))); color: #fff; }
.cmodal__dialog .cmodal__close:hover { filter: brightness(1.12); }
/* chooser lightbox close: light blue, simple hover, no spin */
/* chooser lightbox X matches the quiz's outlined back buttons (no spin, color-only hover) */
.chooser-modal .cmodal__close { background: #fff; border: 2.5px solid var(--purple); color: var(--purple);
  top: 0; right: auto; left: 50%; transform: translate(-50%, -50%) !important; box-shadow: var(--sh-md);
  transition: background .15s, color .15s, border-color .15s; }
/* stationary X — background simply turns blue on hover */
.chooser-modal .cmodal__close:hover { background: #1E9AE8; border-color: #1E9AE8; color: #fff; }
.cmodal__title { font-size: var(--step-1); font-weight: 900; letter-spacing: -0.02em; padding-right: 40px; }
.cmodal__age { color: var(--ink); font-weight: 700; font-size: var(--step--1); margin: 4px 0 14px; }
.cmodal__body .opt__meta { color: var(--ink); font-size: var(--step--1); font-weight: 700; margin-bottom: 12px; }
.cmodal__body p { color: var(--ink); font-size: var(--step--1); font-weight: 400; line-height: 1.5; margin-bottom: 10px; }
.cmodal__body .opt__learn { font-size: var(--step-0); font-weight: 800; color: var(--ink); margin: 8px 0 8px; }
.cmodal__body .opt__closing { font-size: var(--step--1); color: var(--ink); line-height: 1.5; margin-top: 16px; }
.cmodal__body .opt__skills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; margin-top: 6px; }
/* Skill headings match the duration/cost line: same size, font, and weight */
.cmodal__body .opt__h { font-size: var(--step--1); font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 6px 0 6px;
  display: flex; align-items: flex-start; gap: 7px; }
.cmodal__body .opt__h .skico { margin: 3px 0 0; }
.cmodal__body ul { display: grid; gap: 6px; margin: 0 0 4px; }
.cmodal__body li { position: relative; padding-left: 16px; color: var(--ink); font-size: var(--step--1); font-weight: 400; line-height: 1.4; }
.cmodal__body li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.cmodal__actions {
  flex: 0 0 auto; display: grid; gap: 10px;
  padding: 14px clamp(26px, 4vw, 44px) clamp(20px, 3vw, 28px);
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 22px -10px rgba(32,27,51,.16);
}
.cmodal__actions .btn { width: 100%; }
@media (max-width: 560px) { .cmodal__body .opt__skills { grid-template-columns: 1fr; } }
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmPop { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmodal__backdrop, .cmodal__dialog { animation: none; } }
.opt__panel p { color: var(--ink); font-size: var(--step-0); font-weight: 400; line-height: 1.6; margin-bottom: 12px; }
.opt__panel .opt__meta { font-weight: 700; margin-bottom: 12px; }
.opt__panel .opt__h { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 800; margin: 16px 0 8px; }
.opt__panel ul { display: grid; gap: 8px; margin: 0 0 6px; }
.opt__panel li { position: relative; padding-left: 18px; color: var(--ink); font-size: var(--step-0); font-weight: 400; line-height: 1.55; }
.opt__panel li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.opt__actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.opt-card .card__body .btn { margin-top: 0; }
.opt__actions .btn { width: 100%; }
@media (max-width: 860px) {
  .timeline { --rail: 44px; --dotoff: 42px; } /* title sits lower on mobile (measured) */
  .tl-head { grid-template-columns: 1fr; }
  .tl-dot { top: 14px; } /* icon sits just above title-center — titles read slightly lower beside it */
  .tl-stop:first-child .tl-dot { top: 19px; } /* first stop's head sits a touch lower */
  .tl-dot svg { width: 20px; height: 20px; }
  #youth .tl-dot svg { width: 26px; height: 26px; } /* triple-star glyph was 38px, spilling out of the 44px circle */
}


/* ---------- 31. Journey ride ---------- */
.journey {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex; flex-direction: column;
}
/* Journey backdrop. Drop a real photo at assets/journey-bg.jpg (2000x1100) and
   it appears automatically under the soft wash; until then the gradient alone
   shows (a missing image layer is simply skipped).
   AI IMAGE PROMPT: A candid wide photo inside a bright gymnastics gym. On the
   far LEFT a smiling young child (about 4) in a leotard; on the far RIGHT a
   smiling tween (about 11) in a leotard; they look toward each other across a
   wide-open center (keep the middle empty). Blue mats, soft natural light,
   joyful, no text, no logos. */
.journey__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(120deg, rgba(243,236,255,.86) 0%, rgba(250,248,255,.78) 42%, rgba(234,247,255,.86) 100%),
    url('journey-bg.jpg') center / cover no-repeat,
    linear-gradient(120deg, #F3ECFF 0%, #FAF8FF 42%, #EAF7FF 100%);
}
.journey__viewport { position: relative; z-index: 1; flex: 1 1 auto; overflow: hidden; }
.journey__track { position: relative; display: flex; height: 100%; width: 600%; transition: transform 2.15s cubic-bezier(.7,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .journey__track { transition: none; } }
.journey__panel { flex: 0 0 16.6667%; position: relative; display: grid; place-items: center; padding: clamp(16px, 2.5vh, 26px) clamp(24px,5vw,56px); text-align: center; z-index: 2; }
/* intro-panel gymnast cutouts: tot left, teen right. They pop in with a
   springy rise when the section scrolls into view (reveal), and fade away
   the moment the intro panel stops being active so the journey animation
   plays uncluttered. */
.journey__mascot { position: absolute; bottom: 4%; z-index: 1; pointer-events: none; }
.journey__mascot--l { left: clamp(14px, 5.5vw, 100px); width: clamp(95px, 10vw, 185px); }
.journey__mascot--r { right: clamp(12px, 4.5vw, 84px); width: clamp(150px, 16vw, 300px); }
.js .journey__mascot.reveal { opacity: 0; transform: translateY(46px) rotate(-4deg) scale(.85); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.34,1.56,.64,1); }
.js .journey__mascot--r.reveal { transform: translateY(46px) rotate(4deg) scale(.85); transition-delay: .15s; }
.js .journey__mascot.reveal.is-in { opacity: 1; transform: none; }
.journey__panel:not(.is-active) .journey__mascot { opacity: 0 !important; transition: opacity .45s var(--ease); }
@media (max-width: 900px) { .journey__mascot { display: none; } }
.journey__inner { max-width: 640px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s; }
.journey__panel.is-active .journey__inner { opacity: 1; transform: none; }
.journey .h2 { font-size: var(--step-3); }
.journey .lede { margin-top: 14px; }
.journey .btn-row { margin-top: 26px; }


/* station colour washes + badge */
.journey__stop::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.journey__inner { position: relative; z-index: 1; }
.stop--1::before { background: radial-gradient(52% 52% at 50% 46%, rgba(94,23,235,.12), transparent 72%); }
.stop--2::before { background: radial-gradient(52% 52% at 50% 46%, rgba(56,182,255,.14), transparent 72%); }
.stop--3::before { background: radial-gradient(52% 52% at 50% 46%, rgba(255,157,56,.15), transparent 72%); }
.stop--4::before { background: radial-gradient(52% 52% at 50% 46%, rgba(198,238,46,.18), transparent 72%); }
.journey__num { display: inline-block; font-size: var(--step--1); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
.journey__badge { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; color: #fff; box-shadow: var(--sh-md); }
.journey__badge svg { width: 42px; height: 42px; }
.stop--1 .journey__badge { background: linear-gradient(135deg, var(--purple-2), var(--purple)); color: #fff; }
.stop--2 .journey__badge { background: linear-gradient(135deg, #5AC4FF, #2E9BE0); color: var(--ink); }
.stop--3 .journey__badge { background: linear-gradient(135deg, #FFB460, #FF9127); color: var(--ink); }

/* Title underline that draws across the title then dots a pulsing period */
.journey__titlewrap { position: relative; display: block; width: fit-content; margin: 0 auto; }
.journey__title { font-size: clamp(1.7rem, 1rem + 3vw, 3.1rem); font-weight: 900; letter-spacing: -0.03em; line-height: .95; white-space: nowrap; }
@media (max-width: 560px) { .journey__title { white-space: normal; } }
.journey__rule { position: absolute; left: 0; bottom: -16px; width: 100%; height: 6px; background: transparent; opacity: 1; }
/* underline (and its period) stays hidden until the comet lands, then picks up the motion */

/* visited stops keep their underline — no collapse on departure */
/* going backward the underline gathers into its LEFT end instead — that's
   where the road connects — and on arrival it re-unfurls out of the period */
.journey__rule::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px rgba(94,23,235,.5); transform: translateY(-50%); opacity: 0; }
/* the period pops only once the traveling spark has finished the 2.15s ride */
.journey__stop.is-active .journey__rule::after { opacity: 1; transition: opacity .2s ease 2.18s; }
.stop--2 .journey__rule::after { background: var(--blue); box-shadow: 0 0 12px rgba(56,182,255,.5); }
.stop--3 .journey__rule::after { background: var(--orange); box-shadow: 0 0 12px rgba(255,157,56,.5); }
.stop--4 .journey__rule::after { background: #C6EE2E; box-shadow: 0 0 12px rgba(198,238,46,.55); }
.journey__stop.is-active .journey__rule::after { animation: periodPulse 1.5s ease-in-out 2.5s infinite; }
@keyframes periodPulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .journey__rule { background: var(--purple); } .stop--2 .journey__rule { background: var(--blue); } .stop--3 .journey__rule { background: var(--orange); } .stop--4 .journey__rule { background: #C6EE2E; } .journey__rule::after, .journey__stop.is-active .journey__rule::after { opacity: 1; animation: none; transition: none; } }

/* The journey road — a real curved path drawn in "world space": the SVG lives
   inside the panning track, so each leg of the line is a place you travel,
   not a screen effect. Legs stay drawn behind you; going back retracts the
   same road. Each leg's stroke blends the two stops' colors, exits the
   departing period, and lands tangent into the arriving title's underline. */
.journey__road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.journey__road path { fill: none; stroke-width: 6; stroke-linecap: round; }
.journey__road .seg-p { filter: drop-shadow(0 0 8px rgba(94,23,235,.4)); }
.journey__road .seg-b { filter: drop-shadow(0 0 8px rgba(56,182,255,.4)); }
.journey__road .seg-o { filter: drop-shadow(0 0 8px rgba(255,157,56,.4)); }
.journey__road .seg-l { filter: drop-shadow(0 0 8px rgba(198,238,46,.45)); }
/* the rider: a period-sized dot that travels the road itself (CSS motion path) */
.journey__spark {
  /* no negative margins: offset-path already centers the box on the path,
     so any margin shifts the rider off the line */
  position: absolute; left: 0; top: 0; width: 16px; height: 16px;
  border-radius: 50%; background: var(--purple); box-shadow: 0 0 16px rgba(94,23,235,.7);
  z-index: 4; opacity: 0; pointer-events: none; offset-rotate: 0deg;
}
@media (prefers-reduced-motion: reduce) { .journey__road, .journey__spark { display: none; } }
.journey__age { display: block; margin-top: 28px; font-size: var(--step-1); font-weight: 800; color: var(--purple); }
.journey__desc { margin-top: 16px; font-size: var(--step-1); color: var(--slate); font-weight: 500; line-height: 1.5; }

/* Self-led navigation right under each panel's text */
.journey__step { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; }
/* final stop: the back arrow drops below the join button so the road never cuts it */
.journey__step:has([data-journey-join]) { flex-direction: column-reverse; gap: 14px; }
.journey__nav { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line); background: #fff; color: var(--purple); display: grid; place-items: center; box-shadow: var(--sh-sm); transition: border-color .15s, background .15s, color .15s, transform .15s var(--ease); }
.journey__nav svg { display: block; width: 22px; height: 22px; }
.journey__nav--prev svg { transform: rotate(180deg); }
.journey__nav:hover { border-color: var(--purple); transform: translateY(-2px); }
.journey__nav--next { border-color: transparent; background: var(--purple); color: #fff; box-shadow: var(--sh-md); animation: nextPulse 2.8s ease-in-out infinite; }
.journey__nav--next:hover { background: var(--purple-d); }
@keyframes nextPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(94,23,235,.5); } 50% { box-shadow: 0 0 0 14px rgba(94,23,235,0); } }
/* the pulse reads calmer at a slower beat */
@media (prefers-reduced-motion: reduce) { .journey__nav--next { animation: none; } }

/* Level explorer inside each journey stop (per-level colors from BRAND §2a via --lvl) */
.journey__inner--wide { max-width: 900px; width: 100%; }
.journey__stop .journey__age { margin-top: 24px; }
.journey__stop .journey__desc { max-width: 660px; margin-left: auto; margin-right: auto; }
.journey__stop .journey__step { margin-top: 22px; }
.levels { margin-top: 22px; }
.levels__hint { font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); opacity: .7; margin-bottom: 10px; }
.levels__path { display: flex; align-items: flex-start; justify-content: center; }
.levels__node { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 6px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.levels__node:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 12px; }
.levels__dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--lvl) 0%, var(--lvlmid, var(--lvl)) 46%, var(--lvl2, var(--lvl)) 100%); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(32,27,51,.28); transition: transform .25s var(--ease), box-shadow .25s; }
.levels__node:hover .levels__dot { transform: scale(1.2); }
.levels__node.is-active .levels__dot { transform: scale(1.4); box-shadow: 0 0 0 3px #fff, 0 0 16px var(--lvl); }
.levels__lbl { font-size: 12.5px; font-weight: 800; color: var(--slate); white-space: nowrap; transition: color .2s; }
.levels__node.is-active .levels__lbl { color: var(--ink); }
.levels__link { flex: 0 1 clamp(14px, 4vw, 56px); height: 3px; border-radius: 2px; background: var(--line); margin-top: 14px; }
.levels__cards { position: relative; display: grid; margin-top: 16px; text-align: left; }
.levels__card { grid-area: 1 / 1; position: relative; overflow: clip; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 16px; box-shadow: var(--sh-md); padding: clamp(16px, 2.6vw, 26px); opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.levels__card.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .35s var(--ease) .05s, transform .35s var(--ease) .05s, visibility 0s; }
.levels__cardtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.levels__name { font-size: var(--step-1); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; }
.levels__tagline { margin-top: 4px; color: var(--slate); font-weight: 500; font-size: .95rem; }
.levels__chip { flex: none; font-size: 12.5px; font-weight: 800; padding: 7px 13px; border-radius: 999px; background: linear-gradient(135deg, var(--lvl) 0%, var(--lvlmid, var(--lvl)) 46%, var(--lvl2, var(--lvl)) 100%); color: #fff; box-shadow: var(--sh-sm); white-space: nowrap; }
.levels__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-top: 14px; }
.levels__h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.levels__h svg { color: var(--purple); flex: none; }
.levels__col ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.levels__col li { position: relative; padding-left: 16px; font-size: .92rem; color: var(--slate); font-weight: 500; line-height: 1.4; }
.levels__col li::before { content: ""; position: absolute; left: 0; top: .48em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--lvl), var(--lvl2, var(--lvl))); box-shadow: 0 0 0 1px rgba(32,27,51,.06); }
.levels__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 800; font-size: .92rem; color: var(--purple); }
.levels__more:hover { text-decoration: underline; }
.levels__more svg { transition: transform .2s var(--ease); }
.levels__more:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .levels__path { flex-wrap: wrap; row-gap: 2px; }
  .levels__link { flex-basis: 12px; }
  .levels__lbl { font-size: 11.5px; }
  .levels__cols { grid-template-columns: 1fr; gap: 14px; }
  .levels__chip { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .levels__dot, .levels__card, .levels__more svg { transition: none; }
}

/* ---------- 32. Attention pop-up ---------- */
.popup { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: clamp(16px,4vw,40px); }
.popup[hidden] { display: none; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(23,18,43,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: popFade .25s var(--ease); }
.popup__dialog {
  position: relative; z-index: 1; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  border: 3px solid transparent; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(140deg, var(--purple-2), var(--purple) 55%, var(--purple-d)) border-box;
  padding: clamp(26px,4vw,40px); animation: popIn .32s var(--ease);
}
.popup__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--cloud); color: var(--purple); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background .15s, color .15s, transform .2s var(--ease); }
.popup__close:hover { background: var(--purple); color: #fff; }
.popup__chip { margin-bottom: 12px; }
.popup__dialog .h2 { font-size: var(--step-2); padding-right: 30px; }
.popup__lede { margin-top: 10px; color: var(--slate); font-weight: 500; line-height: 1.5; }
.popup__pillars { display: grid; gap: 12px; margin: 18px 0; }
.popup__pillar { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.popup__pillar .feature__ico { width: 42px; height: 42px; margin: 0; flex: none; border-radius: 12px; }
.popup__pillar .feature__ico svg { width: 22px; height: 22px; }
.popup__pillar b { display: block; font-weight: 800; }
.popup__pillar > div span { font-size: var(--step--1); color: var(--slate); font-weight: 500; }
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.popup.is-closing .popup__backdrop { animation: popFadeOut .22s var(--ease) forwards; }
.popup.is-closing .popup__dialog { animation: popOut .22s var(--ease) forwards; }
@keyframes popFadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
.calcpop .popup__dialog { width: min(840px, 100%); }
/* one thin, light-gray scrollbar standard for every lightbox scroller:
   5px, rounded, track inset past the corner curves */
.popup__dialog, .cmodal__scroll, .cmodal__dialog {
  scrollbar-width: thin; scrollbar-color: #C9C9D6 transparent; }
.popup__dialog::-webkit-scrollbar, .cmodal__scroll::-webkit-scrollbar, .cmodal__dialog::-webkit-scrollbar { width: 5px; }
.popup__dialog::-webkit-scrollbar-track, .cmodal__scroll::-webkit-scrollbar-track, .cmodal__dialog::-webkit-scrollbar-track {
  background: transparent; margin-block: 26px; }
.popup__dialog::-webkit-scrollbar-thumb, .cmodal__scroll::-webkit-scrollbar-thumb, .cmodal__dialog::-webkit-scrollbar-thumb {
  background: #C9C9D6; border-radius: 999px; }
.calcpop .calc { border: 0; box-shadow: none; padding: 14px 2px 0; max-width: none; }
@media (prefers-reduced-motion: reduce) { .popup__backdrop, .popup__dialog { animation: none; } }

/* ---------- 33. Auto-scrolling review rail ---------- */
/* Hear from Our Community: ~2/3 the default full-viewport section height
   (text sizes untouched — only the vertical envelope tightens) */
#reviews{ min-height: calc((100vh - var(--header-h)) * 0.66); padding-block: clamp(26px, 3.5vh, 44px); }
#reviews .rev-scroller{ margin-top: clamp(16px, 2.5vw, 26px); }
.rev-scroller { margin-top: clamp(28px,4vw,44px); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rev-scroller__row { display: flex; gap: 24px; width: max-content; animation: revScroll 104s linear infinite; }
.rev-scroller .quote--scroll { flex: 0 0 360px; width: 360px; margin: 0; }
@keyframes revScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rev-scroller { -webkit-mask: none; mask: none; }
  .rev-scroller__row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ---------- 28. Print ---------- */
@media print {
  .site-header, .mobile-cta, .drawer, .marquee, .blob, .footer__social { display:none !important; }
  body { color:#000; background:#fff; }
  .tone-purple, .tone-ink { background:#fff !important; color:#000 !important; }
  .tone-purple *, .tone-ink * { color:#000 !important; }
}

/* =====================================================   Interactive Calendar (calendar.html) — scoped under #mgcal
   ============================================================ */
#mgcal{ --c-closed:#F98A8F; --c-daycamp:var(--blue); --c-summer:var(--orange); --c-summer-ink:#7A3D00;
        --c-preschool:#5FC98A; --c-preschool-ink:#22492F; --c-flicks:#12B5C6; --c-adult:var(--purple); --c-billing:var(--purple); }
#mgcal *{ box-sizing:border-box; }

/* language toggle */
/* Language dropdown (upper-right, matches the site-wide switcher) */
.mgcal-langsel{ position:relative; display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 38px 0 15px; background:var(--white); border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-sm); flex:0 0 auto; transition:border-color .15s var(--ease),box-shadow .15s var(--ease); }
.mgcal-langsel:hover{ border-color:#d9cff2; box-shadow:var(--sh-md); }
.mgcal-langsel:focus-within{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(94,23,235,.18); }
.mgcal-langsel__globe{ color:var(--purple); flex:0 0 auto; }
.mgcal-langsel select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; border:0; background:transparent; font:inherit; font-weight:800; font-size:.94rem; color:var(--ink); padding:0; margin:0; cursor:pointer; outline:none; }
.mgcal-langsel__chev{ position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--slate); pointer-events:none; }
.mgcal-toolbar{ display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-start; justify-content:space-between; }
.mgcal-intro{ flex:1 1 420px; }
.mgcal-intro .h1{ margin-top:6px; }
.mgcal-intro .lede{ margin-top:14px; max-width:52ch; }

/* upcoming strip */
.mgcal-up-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:14px; overflow-x:auto; padding-top:6px; padding-bottom:14px; scroll-snap-type:x mandatory; }
.mgcal-up{ scroll-snap-align:start; text-align:left; background:var(--white); border:1px solid var(--line); border-left-width:5px; border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--sh-sm); cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s var(--ease); display:flex; flex-direction:column; gap:6px; }
.mgcal-up__reg{ align-self:flex-start; margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:.82rem; color:var(--purple); background:rgba(94,23,235,.08); padding:6px 12px; border-radius:999px; text-decoration:none; transition:background .15s var(--ease),transform .15s var(--ease); }
.mgcal-up__reg:hover{ background:var(--purple); color:#fff; text-decoration:none; transform:translateX(2px); }
.mgcal-up:hover{ transform:translateY(-3px); }
.mgcal-up__d{ font-weight:800; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.mgcal-up__t{ font-weight:800; font-size:1rem; line-height:1.25; color:var(--ink); }
.mgcal-up__tag{ align-self:flex-start; margin-top:5px; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; }

/* legend / filters */
.mgcal-legend{ display:flex; flex-wrap:wrap; gap:10px; }
.mgcal-leg{ display:inline-flex; align-items:center; gap:9px; background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:9px 16px 9px 12px; font-weight:700; font-size:.9rem; color:var(--ink); cursor:pointer; transition:all .18s var(--ease); user-select:none; }
.mgcal-leg:hover{ border-color:#d9cff2; }
.mgcal-leg[aria-pressed="false"]{ opacity:.42; }
.mgcal-leg .sw{ width:16px; height:16px; border-radius:6px; flex:0 0 auto; }
.mgcal-leg .sw.closed{ background:var(--c-closed); }
.mgcal-leg .sw.daycamp{ background:var(--c-daycamp); border-radius:999px; }
.mgcal-leg .sw.summer{ background:var(--c-summer); }
.mgcal-leg .sw.openflight{ background:var(--c-open); }
.mgcal-leg .sw.billing{ background:transparent; border:2.5px solid var(--c-billing); border-radius:5px; }

/* months grid */
.mgcal-months{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
@media(max-width:900px){ .mgcal-months{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .mgcal-months{ grid-template-columns:1fr; } }
.mgcal-mo{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.mgcal-mo__hd{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:var(--white); text-align:center; font-weight:800; letter-spacing:.02em; font-size:.98rem; padding:12px; }
.mgcal-mo__grid{ padding:12px; }
.mgcal-dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.mgcal-dow span{ text-align:center; font-weight:800; font-size:.72rem; color:var(--slate); }
.mgcal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mgcal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.86rem; font-weight:600; color:var(--ink); border-radius:9px; position:relative; }
.mgcal-empty{ visibility:hidden; }
.mgcal-has{ cursor:pointer; font-weight:700; transition:transform .12s var(--ease); }
.mgcal-has:hover{ transform:scale(1.12); }
.mgcal-day.closed{ background:var(--c-closed); color:#fff; }
.mgcal-day.daycamp{ background:var(--c-daycamp); color:#fff; border-radius:999px; }
.mgcal-day.summer{ background:var(--c-summer); color:#fff; }
.mgcal-day.preschoolgym{ background:var(--c-preschool); color:#fff; }
.mgcal-day.flicks{ background:var(--c-flicks); color:#fff; }
.mgcal-day.adultgym{ background:var(--c-adult); color:#fff; }
.mgcal-day.billing{ box-shadow:inset 0 0 0 2.5px var(--c-billing); }
.mgcal-day.billing.closed, .mgcal-day.billing.daycamp, .mgcal-day.billing.summer, .mgcal-day.billing.preschoolgym, .mgcal-day.billing.flicks{ box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.9); }
.mgcal-dim{ opacity:.16; pointer-events:none; }

/* popover */
.mgcal-back{ position:fixed; inset:0; background:rgba(32,27,51,.42); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .2s var(--ease); z-index:1200; }
.mgcal-back.on{ opacity:1; pointer-events:auto; }
.mgcal-pop{ position:fixed; z-index:1210; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:min(400px,92vw); background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); overflow:hidden auto; max-height:calc(100dvh - 44px); overscroll-behavior:contain; }
/* multi-event days can outgrow the screen — the popup caps just short of the
   viewport and scrolls inside, on the same thin brand scrollbar as the cmodal */
.mgcal-pop::-webkit-scrollbar{ width:5px; }
.mgcal-pop::-webkit-scrollbar-track{ background:transparent; }
.mgcal-pop::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--purple),#2F86E0); border-radius:99px; }
.mgcal-pop.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.mgcal-pop__hd{ padding:20px 64px 16px 22px; color:#fff; position:relative; }
.mgcal-pop__hd.closed{ background:linear-gradient(135deg,#F98A8F,#e5626a); }
.mgcal-pop__hd.daycamp{ background:linear-gradient(135deg,#4cc0ff,#1f95dc); }
.mgcal-pop__hd.summer{ background:linear-gradient(135deg,#FFB25A,#f2861f); color:#fff; }
.mgcal-pop__hd.preschoolgym{ background:linear-gradient(135deg,#78D9A0,#3FB878); color:#fff; }
.mgcal-pop__hd.flicks{ background:linear-gradient(135deg,#3AC9D8,#0E9FB0); color:#fff; }
.mgcal-pop__hd.billing{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); }
.mgcal-pop__specs{ font-weight:800; color:var(--ink); font-size:.95rem; margin:0 0 8px; letter-spacing:.01em; }
.mgcal-pop__tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:.92; }
.mgcal-pop__title{ font-size:1.32rem; font-weight:900; line-height:1.15; margin-top:6px; }
.mgcal-pop__date{ font-weight:700; margin-top:6px; opacity:.95; }
.mgcal-pop__bd{ padding:10px 22px 20px; }
.mgcal-pop__desc{ color:var(--slate); font-size:.98rem; }
.mgcal-pop__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mgcal-pop__meta span{ background:var(--cloud); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.8rem; font-weight:700; color:var(--ink); }
.mgcal-pop__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mgcal-pop__x{ position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.28); color:#fff; font-size:1.7rem; cursor:pointer; display:grid; place-items:center; line-height:1; padding:0; transition:background .15s var(--ease),transform .12s var(--ease); z-index:3; }
.mgcal-pop__x:hover{ background:rgba(255,255,255,.5); transform:scale(1.06); }
.mgcal-pop__hd.openflight .mgcal-pop__x{ background:rgba(65,78,21,.16); color:var(--c-open-ink); }
.mgcal-pop__hd.openflight .mgcal-pop__x:hover{ background:rgba(65,78,21,.28); }
.mgcal-btn{ border:0; border-radius:999px; padding:11px 17px; font-weight:800; font-size:.88rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:transform .15s var(--ease); max-width:100%; }
.mgcal-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.mgcal-btn--g{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; box-shadow:0 8px 20px rgba(94,23,235,.28); }
.mgcal-btn--o{ background:var(--white); color:var(--purple); box-shadow:inset 0 0 0 2px var(--purple); }
.mgcal-btn--lime{ background:var(--lime); color:var(--ink); }

/* subscribe / download bar */
.mgcal-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mgcal-actions .mgcal-sub{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; box-shadow:0 8px 20px rgba(94,23,235,.28); }
.mgcal-actions .mgcal-dl{ background:var(--white); color:var(--purple); box-shadow:inset 0 0 0 2px var(--purple); }
.mgcal-hint{ color:var(--slate); font-size:.86rem; margin-top:10px; }

/* calendar top "Add to My Calendar" CTA */
.mgcal-topcta{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:28px; }
.mgcal-topcta--center{ justify-content:center; text-align:left; }
.mgcal-btn.mgcal-sub{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; box-shadow:0 8px 20px rgba(94,23,235,.28); font-size:.98rem; padding:13px 22px; flex:0 0 auto; }
.mgcal-subcap{ color:#9A97A6; font-size:.72rem; margin-top:6px; max-width:88ch; line-height:1.45; }
/* hero caption stays narrow (3 lines) so it clears the green blob; bottom caption breaks at its <br> */
.mgcal-hero .mgcal-subcap{ max-width:52ch; }
.mgcal-bottom .mgcal-subcap{ max-width:none; }
.mgcal-subcap b{ color:#9A97A6; font-weight:700; }
.mgcal-subcap b{ color:var(--ink); }

/* "Coming up next" heading — sized up */
.mgcal-uphead{ font-size:clamp(1.15rem,1rem+.6vw,1.45rem); font-weight:900; letter-spacing:-.01em; color:var(--ink); margin-bottom:16px; }
/* register call-to-action between the Upcoming slider and the color key —
   same size as the Upcoming Dates heading */
.stepper--locked{ opacity:.45; pointer-events:none; }
.calc__fixed{ font-weight:700; color:var(--ink); padding:10px 0 2px; }
.mgcal-cta{ font-size:1.5rem; font-weight:900; letter-spacing:-.01em; line-height:1.22; color:#fff; text-align:center;
  background:linear-gradient(135deg,#5BC8FF,#1E9AE8); border-radius:var(--r-md); padding:13px 22px; margin:-40px 0 58px; }

/* Read-only key (legend) */
.mgcal-key__lead{ font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:12px; }
.mgcal-key{ display:flex; flex-wrap:wrap; gap:12px 26px; list-style:none; padding:0; margin:0; }
.mgcal-key-item{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.94rem; color:var(--ink); }
.mgcal-key-item .sw{ width:18px; height:18px; border-radius:6px; flex:0 0 auto; }
.mgcal-key-item .sw.daycamp{ background:var(--c-daycamp); border-radius:999px; }
.mgcal-key-item .sw.summer{ background:var(--c-summer); }
.mgcal-key-item .sw.preschoolgym{ background:var(--c-preschool); }
.mgcal-key-item .sw.flicks{ background:var(--c-flicks); }
.mgcal-key-item .sw.closed{ background:var(--c-closed); }
.mgcal-key-item .sw.billing{ background:transparent; border:2.5px solid var(--c-billing); border-radius:5px; }

/* Bottom CTA + weather note */
.mgcal-bottom{ margin-top:0; }
.mgcal-note{ display:flex; gap:14px; align-items:flex-start; max-width:760px; margin:28px auto 0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sh-sm); }
.mgcal-note__ic{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(56,182,255,.16),rgba(94,23,235,.12)); color:var(--blue); }
.mgcal-note p{ color:var(--ink); font-size:.96rem; line-height:1.55; }
.mgcal-note b{ color:var(--purple); }

/* =====================================================   Journey one-screen fit — MUST STAY LAST so it outranks the
   base journey/levels rules defined earlier in this file.
   Title/age/desc keep their original sizes; the level cards are
   the compact part (Andy approved that size), and the section is
   hard-capped at one screen.
   ============================================================ */
@media (min-width: 861px) {
  /* the section is exactly one screen; panels share this height */
  .journey { height: calc(100dvh - var(--header-h)); min-height: 0; }
  /* no overflow container here — a scroll box would clip the arrows' pulse glow */

  /* modest spacing trims (fonts untouched up top) */
  .journey__num { margin-bottom: 8px; }
  .journey__age, .journey__stop .journey__age { margin-top: 14px; }
  .journey__desc { margin-top: 10px; font-size: 1rem; line-height: 1.5; }

  /* compact level cards — the size Andy liked */
  .levels__hint { display: none; }
  .levels__cards { margin-top: 10px; }
  .levels__card { padding: clamp(12px, 2vh, 18px) 18px; }
  .levels__name { font-size: clamp(.95rem, 2.2vh, 1.1rem); }
  .levels__tagline { margin-top: 2px; font-size: clamp(.8rem, 1.8vh, .9rem); }
  .levels__chip { font-size: 11.5px; padding: 6px 11px; }
  .levels__card p, .levels__card li { font-size: clamp(.8rem, 1.8vh, .9rem); line-height: 1.4; }
  .levels__more { margin-top: 8px; font-size: .85rem; }

  /* arrows sit lower, full size, never clipped */
  .journey__step, .journey__stop .journey__step { margin-top: clamp(12px, 2.6vh, 24px); }
}

/* ---------- calendar polish (2026-08-03) ---------- */
/* multi-day events read as one continuous rounded block per week row */
.mgcal-day.sp-l{ border-top-left-radius:0; border-bottom-left-radius:0; }
.mgcal-day.sp-r{ border-top-right-radius:0; border-bottom-right-radius:0; }
.mgcal-day.sp-l::before{ content:""; position:absolute; left:-3px; top:0; bottom:0; width:3px; background:inherit; }
.mgcal-day.sp-l.mgcal-has:hover, .mgcal-day.sp-r.mgcal-has:hover{ transform:none; filter:brightness(1.06); }
/* one-line color key */
.mgcal-keyrow{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.mgcal-keyrow .mgcal-key + .mgcal-key{ margin-top:-1px; }
.mgcal-keyrow .mgcal-key__lead{ margin-bottom:0; white-space:nowrap; text-align:center; }
.mgcal-keyrow .mgcal-key{ flex-wrap:wrap; overflow:visible; justify-content:center; max-width:100%; gap:8px 16px; font-size:.84rem; }
.mgcal-keyrow .mgcal-key-item{ white-space:nowrap; flex:0 0 auto; }
/* calendar hero: angled gradient calendar art, right side, behind the text */
/* real gym photo behind the calendar hero, under a near-solid white wash —
   it should only whisper through; the heroart calendar icon rides above it */
.mgcal-hero{ position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)),
    url("photos/calendar-hero.webp") center 42% / cover no-repeat; }
.mgcal-hero .container{ position:relative; z-index:1; }
.mgcal-hero .mgcal-intro{ max-width:620px; }
.mgcal-heroart{ position:absolute; z-index:0; right:clamp(-150px,-5vw,-40px); top:50%; transform:translateY(-47%); width:clamp(400px,56vw,800px); pointer-events:none; opacity:.97; }
.mgcal-heroart svg{ width:100%; height:auto; display:block; }
@media (max-width:900px){
  .mgcal-heroart{ opacity:1; width:200px; right:-60px; top:14px; transform:none; }
  .mgcal-hero .mgcal-intro{ margin-top: 28px; } /* title + subtext sit just below the corner art */
}
@media (max-width:360px){ .mgcal-heroart{ width:110px; right:-34px; top:6px; } }
/* the card itself sits still; the day squares bob gently on staggered delays */
.mgch-day{ transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference){
  .mgch-day{ animation: mgchDay 4.6s ease-in-out infinite; }
}
@keyframes mgchDay{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
/* scroll cue variant for white page-top headers */
.faq-top{ position:relative; }
.scrollcue--ink{ color:var(--slate); }

/* journey level cards: Check-In gradient top bar (replaces the flat border-top) */
.levels__card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg, var(--lvl) 0%, var(--lvlmid, var(--lvl)) 46%, var(--lvl2, var(--lvl)) 100%); }
/* gold skill icons (journey + class lightboxes) + level-colored skill bullets */
.skico{ vertical-align:-3px; margin-right:6px; flex:none; }
.levels__h .skico{ margin-right:0; width:20px; height:20px; }
.opt__skills ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.opt__skillcol li{ position:relative; padding-left:16px; }
.opt__skillcol li::before{ content:""; position:absolute; left:0; top:.48em; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg, var(--lvl, var(--purple)) 0%, var(--lvlmid, var(--lvl, var(--purple))) 46%, var(--lvl2, var(--lvl, var(--purple))) 100%);
  box-shadow:0 0 0 1px rgba(32,27,51,.06); }

/* live gym hours list (Google Business Profile) on the location cards */
.loc__hours{ flex:1; min-width:0; }
.loc__hlist{ list-style:none; margin:1px 0 0; padding:0; display:grid; gap:3px; width:100%; }
.loc__hlist li{ display:flex; justify-content:space-between; gap:14px; font-size:.9rem; color:var(--slate); font-weight:500; }
.loc__hlist li span:first-child{ font-weight:700; color:var(--ink); }
.loc__hlist li.is-today, .loc__hlist li.is-today span{ color:var(--purple); font-weight:800; }
/* billing on top of another event (e.g. the 1st inside a closure span): keep the
   event block's shape and float the rounded purple outline box over it, so the
   cell reads as both at once */
.mgcal-day.billing.closed, .mgcal-day.billing.summer, .mgcal-day.billing.daycamp,
.mgcal-day.billing.preschoolgym, .mgcal-day.billing.flicks, .mgcal-day.billing.adultgym { box-shadow: none; }
.mgcal-day.billing.closed::after, .mgcal-day.billing.summer::after, .mgcal-day.billing.daycamp::after,
.mgcal-day.billing.preschoolgym::after, .mgcal-day.billing.flicks::after, .mgcal-day.billing.adultgym::after {
  content: ""; position: absolute; inset: 4px; border: 2.5px solid var(--c-billing);
  border-radius: 8px; pointer-events: none;
}

/* calendar register CTAs: the site's purple gradient motif */
.mgcal-btn--reg, .mgcal-up__reg{
  background: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d));
  color: #fff; text-decoration: none;
}
.mgcal-btn--reg:hover, .mgcal-up__reg:hover{
  background: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d));
  color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(94,23,235,.32);
}
/* Upcoming slider scrollbar: thin, purple-to-blue. The standard
   scrollbar-* properties make Chrome DISCARD the slim ::-webkit-scrollbar
   styling and paint its fat native track instead — so they apply only
   where the webkit pseudo doesn't exist (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  .mgcal-up-row{ scrollbar-width: thin; scrollbar-color: var(--purple) rgba(94,23,235,.08); }
}
.mgcal-up-row::-webkit-scrollbar{ height: 4px; }
.mgcal-up-row::-webkit-scrollbar-track{ background: rgba(94,23,235,.08); border-radius: 999px; }
.mgcal-up-row::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, var(--purple-2), var(--purple) 45%, var(--blue)); border-radius: 999px; }

.mgcal-keyrow .mgcal-key .sw{ width:13px; height:13px; }
/* closure cards: Add-to-calendar in the closure color */
.mgcal-up__add{ background: var(--c-closed); color: #fff; }
.mgcal-up__add:hover{ background: var(--c-closed); color: #fff; filter: brightness(.95); }
/* printable PDF button: quiet outline next to the gradient subscribe button */
.mgcal-btn--pdf{ background:#fff; color:var(--purple); border:2px solid var(--purple); }
.mgcal-btn--pdf:hover{ background:var(--purple); color:#fff; }
/* subscribe + printable PDF side by side, caption beneath both */
.mgcal-btnrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* bad-weather note: light-blue gradient circle badge overlapping the left edge,
   taller than the card so it pops out top and bottom */
/* snow circle sits centered ABOVE the note, just dipping into its top edge,
   so the text runs the full card width and the card stays shorter */
.mgcal-note--weather{ position:relative; margin-top:150px; margin-bottom:24px; padding-top:44px; overflow:visible; }
.mgcal-note__badge{ position:absolute; left:50%; top:0; transform:translate(-50%,-78%) rotate(-8deg);
  width:156px; height:156px; border-radius:50%; background:linear-gradient(135deg,#5BC8FF,#1E9AE8);
  color:#fff; font-weight:900; font-size:1rem; line-height:1.12; text-align:center;
  display:grid; place-items:center; padding:14px; box-shadow:0 12px 26px rgba(30,154,232,.38); }
@media (max-width:640px){
  .mgcal-note--weather{ margin-top:124px; padding-top:38px; }
  .mgcal-note__badge{ width:124px; height:124px; font-size:.86rem; }
}
/* upcoming cards: ages/location line under the title */
.mgcal-up__sub{ font-size:.78rem; color:var(--slate); font-weight:600; margin-top:-2px; }
/* bottom buttons align with (and sit right above) the weather card's column */
.mgcal-bottom .mgcal-topcta{ max-width:760px; margin:0 auto 20px; align-items:center; text-align:center; }
.mgcal-bottom .mgcal-btnrow{ justify-content:center; }
/* snow globe: flakes drift down inside the clipped circle and a mound
   slowly settles at the bottom */
.mgcal-note__badge{ overflow:hidden; }
.snowglobe{ position:absolute; inset:0; border-radius:50%; }
.snowglobe i{ position:absolute; top:-12px; left:var(--x); width:var(--s); height:var(--s);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><path d='M12 2v20M3.3 7l17.4 10M20.7 7L3.3 17'/></svg>") center/contain no-repeat;
  opacity:0;
  animation: sgFall var(--d) linear var(--dl) infinite; }
.snowglobe i:nth-child(1){ --x:16%; --s:10px; --d:6.5s; --dl:0s;    --sway:14px;  --rot:200deg; }
.snowglobe i:nth-child(2){ --x:34%; --s:8px;  --d:8.5s; --dl:2.1s;  --sway:-12px; --rot:-160deg; }
.snowglobe i:nth-child(3){ --x:52%; --s:10px; --d:7.2s; --dl:4.4s;  --sway:10px;  --rot:180deg; }
.snowglobe i:nth-child(4){ --x:68%; --s:7px;  --d:9.5s; --dl:1.2s;  --sway:-16px; --rot:-220deg; }
.snowglobe i:nth-child(5){ --x:82%; --s:8px;  --d:7.8s; --dl:3.3s;  --sway:12px;  --rot:160deg; }
.snowglobe i:nth-child(6){ --x:26%; --s:7px;  --d:10s;  --dl:5.6s;  --sway:16px;  --rot:240deg; }
.snowglobe i:nth-child(7){ --x:60%; --s:8px;  --d:8.8s; --dl:6.8s;  --sway:-10px; --rot:-180deg; }
.snowglobe i:nth-child(8){ --x:44%; --s:7px;  --d:11s;  --dl:0.6s;  --sway:8px;   --rot:140deg; }
.snowglobe i:nth-child(9){  --x:8%;  --s:8px;  --d:5.4s; --dl:1.7s;  --sway:12px;  --rot:190deg; }
.snowglobe i:nth-child(10){ --x:22%; --s:6px;  --d:6.8s; --dl:3.9s;  --sway:-14px; --rot:-170deg; }
.snowglobe i:nth-child(11){ --x:40%; --s:9px;  --d:5.8s; --dl:5.1s;  --sway:10px;  --rot:210deg; }
.snowglobe i:nth-child(12){ --x:56%; --s:6px;  --d:7.4s; --dl:2.6s;  --sway:-8px;  --rot:-190deg; }
.snowglobe i:nth-child(13){ --x:72%; --s:8px;  --d:6.2s; --dl:4.8s;  --sway:14px;  --rot:170deg; }
.snowglobe i:nth-child(14){ --x:88%; --s:6px;  --d:8.2s; --dl:0.9s;  --sway:-12px; --rot:-150deg; }
.snowglobe i:nth-child(15){ --x:48%; --s:7px;  --d:5s;   --dl:6.2s;  --sway:9px;   --rot:230deg; }
.snowglobe i:nth-child(16){ --x:12%; --s:6px;  --d:7s;   --dl:7.4s;  --sway:-10px; --rot:-210deg; }
@keyframes sgFall{
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  55%  { transform: translate(var(--sway), 92px) rotate(calc(var(--rot) * .55)); }
  96%  { opacity: .95; }
  100% { transform: translate(calc(var(--sway) * .35), 172px) rotate(var(--rot)); opacity: 0; }
}
/* accumulates once per page load up to half the globe, then holds */
.snowpile{ position:absolute; left:-12%; right:-12%; bottom:-20px; height:108px; background:#fff; opacity:.95;
  border-radius:50% 50% 0 0 / 100% 100% 0 0; transform-origin:bottom;
  /* holds at zero until the first flake lands (~5.8s), then builds */
  animation: sgPile 50s ease-out 5.8s both; }
@keyframes sgPile{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@media (max-width:640px){ .snowpile{ height:82px; } }
@media (prefers-reduced-motion: reduce){
  .snowglobe i{ animation:none; opacity:.9; top:auto; }
  .snowglobe i:nth-child(odd){ bottom:60px; } .snowglobe i:nth-child(even){ bottom:80px; }
  .snowpile{ animation:none; }
}

.mgcal-keyrow .sw.adultgym{ background:var(--c-adult); }
.mgcal-leg .sw.adultgym{ background:var(--c-adult); }
/* close-button icons must not swallow clicks: the handlers check e.target for
   data-close / data-popup-close on the BUTTON */
.cmodal__close svg, .popup__close svg, .mgcal-pop__x svg, .cn-teaser-x svg { pointer-events: none; }

/* weather card bold text ("Bad weather?", "Class status"): light-blue gradient */
.mgcal-note--weather p b{ background:linear-gradient(135deg,#5BC8FF,#1E9AE8);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
/* weather card: blue gradient outline, same 5px weight as the hero calendar art */
.mgcal-note--weather{ border:5px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #5BC8FF, #1E9AE8) border-box; }
/* multi-event days: diagonal split square + stacked popover sections */
.mgcal-day.multi{ color:#fff; }
.mgcal-pop__sec{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.mgcal-pop__sechd{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:#fff; font-size:.95rem; padding:9px 14px; border-radius:12px; margin-bottom:10px; }
.mgcal-pop__sechd b{ font-weight:900; }
.mgcal-pop__sechd span{ font-size:.78rem; font-weight:700; opacity:.92; white-space:nowrap; }
/* hero headers: no eyebrow labels (the lime-dot subtext) — page titles stand alone */
.hero .eyebrow, .phero .eyebrow, .mgcal-hero .eyebrow, .faq-top .eyebrow { display: none; }

/* "Our Class Lineup" subtext: width tuned so it falls on 3 lines, the third
   beginning at "Scroll..." (measured: 800-840px window, 820 chosen) */
#lineup .section-head{ max-width:880px; }
.lineup-lede{ max-width:820px; margin-inline:auto; }
/* site-wide typography hygiene: no lonely words on a paragraph's last line,
   headings balance their lines (progressive enhancement, no-op where unsupported) */
p, .lede, li{ text-wrap: pretty; }
.h1, .h2, .h3, h1, h2, h3{ text-wrap: balance; }
/* summer camp dates & themes list */
.themelist{ max-width:640px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.themerow{ display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:12px 22px; box-shadow:var(--sh-sm); }
.themerow b{ flex:0 0 132px; color:var(--purple-d); font-size:.92rem; }
.themerow span{ font-weight:700; }
.themerow__full{ margin-left:auto; font-style:normal; background:var(--purple); color:#fff; font-size:.66rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.themerow--off{ opacity:.55; }
.themerow--off b{ color:var(--slate); }
@media (max-width:520px){ .themerow{ flex-wrap:wrap; row-gap:2px; } .themerow b{ flex-basis:100%; } }
/* birthday party packing lists: gradient-ring checkboxes whose checks
   "write themselves in" when the section scrolls into view */
.pchecks{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:934px; margin-inline:auto; margin-top:36px; }
@media (max-width:760px){ .pchecks{ grid-template-columns:1fr; } }
.pcheck{ position:relative; border:2.5px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#5BC8FF,#1E9AE8) border-box; border-radius:var(--r-md); padding:24px 26px; box-shadow:0 10px 28px rgba(32,27,51,.16); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pcheck--bring{ background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#FFB460,#FF7A00) border-box; }
/* hover explosion: illustrated chips burst out of the panel's free side with
   a springy stagger, and gather back in when the cursor leaves */
/* anchored at the vertical middle of each panel's OUTER edge — stickers
   emerge from the box's side, never from behind the text */
.pfly{ position:absolute; top:50%; width:0; height:0; pointer-events:none; z-index:2; }
.pfly--left{ left:0; }
.pfly--right{ right:0; }
.pitem{ position:absolute; left:-44px; top:-44px; width:88px; height:88px; display:block; opacity:0; transform: translate(0,0) scale(.15) rotate(0deg); transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .32s var(--ease); transition-delay: var(--d, 0s); }
/* die-cut sticker look: stacked drop-shadows draw the white halo around the
   artwork's silhouette, plus a soft floor shadow */
.pitem svg{ width:100%; height:100%; filter: drop-shadow(2.6px 0 0 #fff) drop-shadow(-2.6px 0 0 #fff) drop-shadow(0 2.6px 0 #fff) drop-shadow(0 -2.6px 0 #fff) drop-shadow(0 12px 16px rgba(32,27,51,.32)); }
.pcheck:hover .pitem, .pcheck--anim .pitem{ opacity:1; transform: var(--fly) scale(1); }
.pcheck.pcheck--reset .pitem{ transition:none !important; opacity:0 !important; transform: translate(0,0) scale(.15) rotate(0deg) !important; }
/* once out, they keep hovering — a gentle bob on the inner art so it never
   fights the fly-out transform */
.pcheck:hover .pitem svg{ animation: pfloat 2.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + .6s); }
.pcheck:hover .pitem:nth-of-type(1) svg{ animation: pfloatA 2.35s ease-in-out infinite .55s; }
.pcheck:hover .pitem:nth-of-type(2) svg{ animation: pfloatC 3.05s ease-in-out infinite .8s; }
.pcheck:hover .pitem:nth-of-type(3) svg{ animation: pfloatB 2.7s ease-in-out infinite 1.05s; }
.pcheck:hover .pitem:nth-of-type(4) svg{ animation: pfloatD 3.4s ease-in-out infinite .7s; }
.pcheck:hover .pitem:nth-of-type(5) svg{ animation: pfloatA 2.95s ease-in-out infinite .9s; }
@keyframes pfloat{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(4px,-15px) rotate(5deg); } }
@keyframes pfloatA{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 33%{ transform: translate(8px,-9px) rotate(4deg); } 66%{ transform: translate(-5px,-14px) rotate(-2.5deg); } }
@keyframes pfloatB{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 33%{ transform: translate(-9px,-7px) rotate(-4.5deg); } 66%{ transform: translate(5px,-13px) rotate(3deg); } }
@keyframes pfloatC{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 33%{ transform: translate(7px,10px) rotate(-3.5deg); } 66%{ transform: translate(-6px,13px) rotate(4deg); } }
@keyframes pfloatD{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 33%{ transform: translate(-8px,11px) rotate(4.5deg); } 66%{ transform: translate(6px,8px) rotate(-4deg); } }
@media (max-width:1100px), (hover:none){ .pfly{ display:none; } }

.pcheck:hover, .js .pcheck.reveal.is-in:hover{ transform: scale(1.1); box-shadow:0 30px 62px rgba(32,27,51,.28); }
.pcheck .pcheck__h{ color:var(--ink); font-weight:900; font-size:1.06rem; margin:0 0 16px; }
.pcheck__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pcheck__list li{ display:flex; align-items:flex-start; gap:12px; color:var(--slate); font-size:.95rem; line-height:1.45; }
.pcheck__list b{ color:var(--ink); }
.pdl-corner{ position:absolute; right:22px; bottom:-19px; z-index:3; }
.pdl-corner .pcheck__dl{ box-shadow:0 10px 24px rgba(32,27,51,.28); }
.pcheck__dl:focus:not(:focus-visible){ outline:none; }
.pcheck__dl{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem; color:#fff; position:relative; isolation:isolate; background:transparent; border:0; border-radius:999px; padding:10px 18px; text-decoration:none; transition: color .2s var(--ease); }
/* gradient + white fills live on stacked pseudo-layers so hover crossfades
   instead of swapping a background image (which flashes transparent) */
.pcheck__dl::before, .pcheck__dl::after{ content:""; position:absolute; inset:0; border-radius:999px; z-index:-1; transition: opacity .2s var(--ease); }
.pcheck__dl::before{ background:linear-gradient(135deg,#FFB460,#FF7A00); }
.pcheck__dl::after{ background:#fff; opacity:0; box-shadow: inset 0 0 0 2.5px #E06B00; }
.pcheck__dl:hover{ color:#E06B00; text-decoration:none; }
.pcheck__dl:hover::after{ opacity:1; }
.pcheck__dot{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  border:2.5px solid var(--purple); background:transparent; }
.pcheck__dot svg{ width:22px; height:22px; overflow:visible; transform: translate(1.5px,-2.5px); }
.pcheck--bring .pcheck__dot{ border-color:transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, #FFB460, #FF7A00) border-box; }
/* bring-side items aren't provided by us — the boxes stay unchecked */
.pcheck--bring .pcheck__dot svg{ display:none; }
.pcheck__dot svg path{ stroke-dasharray:42; stroke-dashoffset:42; }
.pcheck.is-in .pcheck__dot svg path{ animation: pcheckDraw .7s ease-out forwards; }
.pcheck.is-in li:nth-child(1) .pcheck__dot svg path{ animation-delay:.3s; }
.pcheck.is-in li:nth-child(2) .pcheck__dot svg path{ animation-delay:.75s; }
.pcheck.is-in li:nth-child(3) .pcheck__dot svg path{ animation-delay:1.2s; }
.pcheck.is-in li:nth-child(4) .pcheck__dot svg path{ animation-delay:1.65s; }
.pcheck.is-in li:nth-child(5) .pcheck__dot svg path{ animation-delay:2.1s; }
.pcheck.is-in li:nth-child(6) .pcheck__dot svg path{ animation-delay:2.55s; }
@keyframes pcheckDraw{ to{ stroke-dashoffset:0; } }
/* Birthday joy steps: clock faces with the step's time filled — full hour
   (purple) and half hour (light blue) pies inside a ticked purple ring */
.steps--clocks .step__n { background: transparent; border: 0; animation: none !important; }
.steps--clocks .step__n::before { content: none; }
.steps--clocks .step__n svg { width: 46px; height: 46px; display: block; }
/* pies sweep in clockwise from empty, in sequence top to bottom (same
   scroll-triggered cascade as the marker checks) */
.steps--clocks .clockfill { stroke-dasharray: 42.4; stroke-dashoffset: 42.4; }
.steps--clocks .clockhand { transform-origin: 23px 23px; }
/* PNO sequence: clock (reuses the birthday sweep), then the clapper snaps
   shut/open, then the SUV's motion lines streak in and fade — top to bottom
   at the birthday page's pace */
.steps--pno .clapper-arm { transform-box: fill-box; transform-origin: 6% 92%; }
.reveal.is-in .steps--pno .step:nth-child(2) .clapper-arm { animation: pnoClap 1.05s ease-in-out 2.15s both; }
.steps--pno .suv-lines { opacity: 0; }
.reveal.is-in .steps--pno .step:nth-child(3) .suv-lines { animation: pnoZoom 1.1s ease-out 3.5s both; }
@keyframes pnoClap { 0%, 100% { transform: rotate(0deg); } 28% { transform: rotate(-32deg); } 55% { transform: rotate(0deg); } 78% { transform: rotate(-16deg); } }
@keyframes pnoZoom { 0% { opacity: 0; transform: translateX(6px); } 25% { opacity: 1; } 75% { opacity: 1; transform: translateX(-1px); } 100% { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .steps--pno .clapper-arm { animation: none !important; }
  .steps--pno .suv-lines { opacity: 1; animation: none !important; }
}
/* lime minute hand leads the fill: identical clock, so it rides the sweep's
   leading edge the whole way around */
.reveal.is-in .steps--clocks .step:nth-child(1) .clockfill { animation: clocksweep60 1.5s ease-out .35s forwards; }
.reveal.is-in .steps--clocks .step:nth-child(1) .clockhand { animation: handsweep360 1.5s ease-out .35s forwards; }
.reveal.is-in .steps--clocks .step:nth-child(2) .clockfill { animation: clocksweep30 1.05s ease-out 2.15s forwards; }
.reveal.is-in .steps--clocks .step:nth-child(2) .clockhand { animation: handsweep180 1.05s ease-out 2.15s forwards; }
@keyframes clocksweep60 { to { stroke-dashoffset: 0; } }
@keyframes clocksweep30 { to { stroke-dashoffset: 21.2; } }
@keyframes handsweep360 { to { transform: rotate(360deg); } }
@keyframes handsweep180 { to { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .steps--clocks .step:nth-child(1) .clockfill { stroke-dashoffset: 0; animation: none !important; }
  .steps--clocks .step:nth-child(2) .clockfill { stroke-dashoffset: 21.2; animation: none !important; }
  .steps--clocks .step:nth-child(2) .clockhand { transform: rotate(180deg); animation: none !important; }
  .steps--clocks .step:nth-child(1) .clockhand { animation: none !important; }
}
/* Private Events "celebrating" list: empty purple rings, checked off with a
   hand-drawn light-blue marker stroke that draws in on scroll (staggered) */
.steps--checks .step__n { background: transparent; border: 2.5px solid var(--purple); animation: none !important; }
.steps--checks .step__n::before { content: none; }
.steps--checks .step__n svg { width: 34px; height: 34px; overflow: visible; transform: translate(2px, -3px); }
.steps--checks .step__n svg path { stroke-dasharray: 42; stroke-dashoffset: 42; }
.reveal.is-in .steps--checks .step:nth-child(1) .step__n svg path { animation: pcheckDraw .95s ease-out .35s forwards; }
.reveal.is-in .steps--checks .step:nth-child(2) .step__n svg path { animation: pcheckDraw .95s ease-out 1.55s forwards; }
.reveal.is-in .steps--checks .step:nth-child(3) .step__n svg path { animation: pcheckDraw .95s ease-out 2.75s forwards; }
@media (prefers-reduced-motion: reduce){ .steps--checks .step__n svg path { stroke-dashoffset: 0; animation: none !important; } }
@media (prefers-reduced-motion: reduce){
  .pcheck__dot svg path{ stroke-dasharray:none; stroke-dashoffset:0; }
  .pcheck.is-in .pcheck__dot svg path{ animation:none; }
}
.badge-note--light{ color:rgba(255,255,255,.85); }

/* pricing page: the scroll cue hovered over the jump-nav text — off here only */
.faq-top--nocue .scrollcue{ display:none; }
/* pricing hero: the 30-minute card's light-blue gradient, white text, purple period.
   The gradient runs at 90deg (y-invariant) so the sticky jump-button bar below can
   wear the exact same background and the two read as one continuous band. */
.pricing-hero{ background: linear-gradient(90deg, #5BC8FF, #1E9AE8); padding-block: clamp(34px, 5vw, 60px) clamp(14px, 2.5vw, 26px); }
.pricing-hero .faq-head__title, .pricing-hero .faq-head__sub{ color:#fff; }
.pricing-hero .faq-head__title .dot--purple{ color: var(--purple); }
.pricing-hero ~ .price-nav, .price-nav{ background: linear-gradient(90deg, #5BC8FF, #1E9AE8); border-bottom: 0; }

/* FAQ hero: brand orange gradient, white heading + subtext. 90deg so the sticky
   topic band below shares the exact background and the two read as one band. */
.faq-hero{ background: linear-gradient(90deg, #FFB460, #FF7A00); min-height: 0; padding-block: clamp(34px, 5vw, 60px) clamp(8px, 1.5vw, 16px); }
.faq-hero .scrollcue{ display: none; }
.faq-hero .faq-head__title, .faq-hero .faq-head__sub{ color:#fff; }
.faq-navband{ position: sticky; top: var(--header-h); z-index: 20; background: linear-gradient(90deg, #FFB460, #FF7A00); }
/* phones: the badge hangs ~33px below the header — the sticky section
   nav bands on pricing/FAQ pad their tops so their buttons never sit
   under the overhang */
@media (max-width: 720px){
  .price-nav__inner { padding-top: 46px; }
  .faq-navband .faq-nav { padding-top: 46px; }
  /* the taller bands need matching anchor offsets */
  .price-nav ~ #monthly, .price-nav ~ #estimator, .price-nav ~ #camps,
  .price-nav ~ #opengyms, .price-nav ~ #adult, .price-nav ~ #parties { scroll-margin-top: 70px; }
  .faq-cat { scroll-margin-top: 98px; }
}
.faq-navband .faq-navwrap{ position: static; margin: 0; background: transparent; border-bottom: 0; padding: 6px 0 10px; }
.faq-navband .faq-nav{ background: transparent; }
/* the topic rail scrolls on the site-standard purple-gradient slide bar — no arrows.
   Standard scrollbar-* props ONLY under the Firefox guard: setting them in Chrome
   discards the ::-webkit-scrollbar styling (same gotcha as the calendar rail). */
.faq-navband .faq-nav__arrow{ display: none; }
.faq-navband .faq-nav{ overflow-x: auto; padding-bottom: 10px; }
@supports not selector(::-webkit-scrollbar) {
  .faq-navband .faq-nav{ scrollbar-width: thin; scrollbar-color: var(--purple) rgba(255,255,255,.35); }
}
.faq-navband .faq-nav::-webkit-scrollbar{ display: block; height: 4px; }
.faq-navband .faq-nav::-webkit-scrollbar-track{ background: rgba(255,255,255,.35); border-radius: 999px; }
.faq-navband .faq-nav::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, var(--purple-2), var(--purple) 45%, var(--blue)); border-radius: 999px; }
.faq-body{ padding-top: clamp(26px, 4vw, 44px); }

/* ---------- Snapshot collage band (home): frames straddling the journey -> purple seam.
   Purely decorative — no hover states, no pointer events. Edge frames poke past the
   viewport; the global overflow-x:hidden swallows the spill. ---------- */
/* Welcome band: the snapshot frames slide through the welcome section's center,
   fading out under the text block and reappearing on the far side */
.welcome-sec { position: relative; overflow: hidden; padding-block: clamp(96px, 13vh, 160px); }
.welcome-sec .container { position: relative; z-index: 2; }
.welcomeband {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  display: flex; align-items: center; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 560px), transparent calc(50% - 430px), transparent calc(50% + 430px), #000 calc(50% + 560px), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 560px), transparent calc(50% - 430px), transparent calc(50% + 430px), #000 calc(50% + 560px), #000 100%);
}
.welcomeband__track { display: flex; align-items: center; flex: none; animation: welcomeband-slide 130s linear infinite; }
@keyframes welcomeband-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .welcomeband__track { animation: none; } }
/* welcome head appears like every other block: rise only, no tip */
.js .welcome-sec .section-head.reveal { transform: translateY(30px); }
/* a touch more air between the welcome heading and its subtext */
.welcome-sec .section-head .lede { margin-top: 30px; }
.snapband {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin: -100px 0 -100px; padding: 0;
  pointer-events: none;
}
.snapband__it {
  flex: none; width: clamp(116px, 11vw, 165px); margin-inline: -12px;
  background: #fff; border-radius: 12px; padding: 7px 7px 18px;
  box-shadow: 0 16px 36px rgba(32,27,51,.22);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
}
.snapband__it--l { width: clamp(152px, 15vw, 215px); }
.snapband__it:nth-child(even) { z-index: 2; }
.snapband__it img { display: block; width: 100%; border-radius: 7px; aspect-ratio: 3/4; object-fit: cover; }
.snapband__it--l img { aspect-ratio: 4/3; }
@media (max-width: 760px) {
  /* Welcome band: the snapshot frames slide through the welcome section's center,
   fading out under the text block and reappearing on the far side */
.welcome-sec { position: relative; overflow: hidden; padding-block: clamp(96px, 13vh, 160px); }
.welcome-sec .container { position: relative; z-index: 2; }
.welcomeband {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  display: flex; align-items: center; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 560px), transparent calc(50% - 430px), transparent calc(50% + 430px), #000 calc(50% + 560px), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 560px), transparent calc(50% - 430px), transparent calc(50% + 430px), #000 calc(50% + 560px), #000 100%);
}
.welcomeband__track { display: flex; align-items: center; flex: none; animation: welcomeband-slide 130s linear infinite; }
@keyframes welcomeband-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .welcomeband__track { animation: none; } }
/* welcome head appears like every other block: rise only, no tip */
.js .welcome-sec .section-head.reveal { transform: translateY(30px); }
/* a touch more air between the welcome heading and its subtext */
.welcome-sec .section-head .lede { margin-top: 30px; }
.snapband { margin: -64px 0 -64px; }
  .snapband__it:nth-child(1), .snapband__it:nth-child(10) { display: none; }
  .snapband__it { width: 116px; padding: 5px 5px 13px; margin-inline: -9px; }
  .snapband__it--l { width: 156px; }
}

/* day-popup CTA row: Register Now button + Learn-more arrow link (progsq flow) */
.mgcal-pop__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.mgcal-pop__row .mgcal-btn--reg { margin: 0; }
.mgcal-pop__more { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 800; font-size: .95rem; text-decoration: none; }
.mgcal-pop__more:hover { text-decoration: none; color: var(--purple-d, var(--purple)); }
.mgcal-pop__more svg { display: inline; }

/* "They come to have fun." — smaller photo (the old collage-band headroom is gone with the band) */
.fun-sec .split__media .ph--hero { width: min(84%, 430px); margin-inline: auto; min-height: 0; }
/* slight clockwise tilt: top-left corner rides higher than top-right */
.ph--tilt-l { transform: rotate(2deg); }

/* keep "…so much more." on one line at desktop widths */
.nowrap-d { white-space: nowrap; }
@media (max-width: 700px) { .nowrap-d { white-space: normal; } }

/* review cards: Google stamp bottom-right (orange = parent, purple = student),
   attribution reads as a quote credit — no avatar circle */
.quote--scroll { position: relative; }
.quote--scroll .quote__who b::before { content: "- "; }
.quote__stamp { position: absolute; right: 15px; bottom: 13px; width: 36px; height: 36px; pointer-events: none; }
.quote__stamp svg { width: 100%; height: 100%; display: block; }
.quote__stamp--p { color: var(--orange); }
.quote__stamp--s { color: var(--purple); }

/* closing quote bar above the footer */
.citybar { background: linear-gradient(90deg, var(--purple-2), var(--purple) 55%, #2E9BE0); padding: 14px 20px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; }
.citybar p { color: #fff; font-weight: 800; font-size: clamp(15px, 1.5vw, 18px); letter-spacing: -0.01em; margin: 0; }
.citybar__who { color: rgba(255,255,255,.82); font-weight: 600; font-size: clamp(13px, 1.2vw, 15px); font-style: italic; }

/* live Google rating badge under the review rail */
.gstars { display: flex; width: max-content; max-width: 94%; margin: 30px auto 0; align-items: center; gap: 9px; padding: 7px 15px; border: 2px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.gstars:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(105,105,120,.22); text-decoration: none; color: var(--ink); }
.gstars__num { font-weight: 900; font-size: 1rem; }
.gstars__stars { position: relative; display: inline-flex; }
.gstars__row { display: flex; gap: 2px; color: #DDDDE6; width: max-content; }
.gstars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; width: 0; }
.gstars__fill .gstars__row { color: var(--orange); }
.gstars__sub { color: var(--slate); font-weight: 600; font-size: .72rem; }
@media (max-width: 560px) { .gstars { flex-wrap: wrap; justify-content: center; row-gap: 6px; } }

.gstars__row svg { width: 13px; height: 13px; }

/* About letter: big blue opening quote mark floating top-left of the title */
.letterbox { position: relative; }
.letterbox::before {
  content: ""; position: absolute; top: -14px; left: -92px; width: 72px; height: 51px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 186 130'><path fill='%2338B6FF' d='M66 0C30 22 6 58 6 88c0 24 18 42 40 42s38-16 38-38c0-20-12-34-32-34 4-22 8-40 14-58Z'/><path fill='%2338B6FF' d='M162 0c-36 22-60 58-60 88 0 24 18 42 40 42s38-16 38-38c0-20-12-34-32-34 4-22 8-40 14-58Z'/></svg>") no-repeat center / contain; pointer-events: none;
}
@media (max-width: 1180px) { .letterbox::before { left: -66px; width: 56px; height: 40px; } }
@media (max-width: 760px) { .letterbox::before { top: -48px; left: 0; width: 56px; height: 40px; } }

/* About letter: four hand-signed marker signatures under the sign-off */
.signatures { margin-top: 8px; color: #16121F; font-size: 34px; line-height: 1.3; letter-spacing: 0; }
.signatures .sig { display: inline-block; font-family: 'Mr De Haviland', cursive; }
.sig--jess   { transform: rotate(-2.5deg); }
.sig--andy   { transform: rotate(1.5deg); }
.sig--nicole { transform: rotate(-1deg); }
.sig--jonah  { transform: rotate(2deg); }
.signatures .sig-sep { font-family: inherit; font-size: .55em; color: var(--slate); }

/* About: white hero with the family photo at natural size, lime blob behind */
.about-hero { background: #fff; padding: 52px 20px 58px; display: grid; place-items: center; overflow: clip; }
.about-hero__wrap { position: relative; width: min(760px, 94%); }
.about-hero__wrap img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md, 0 18px 40px rgba(32,27,51,.16)); }
.about-blob { width: 126%; height: 116%; top: -7%; right: -14%; z-index: 0; filter: none; opacity: 1;
  animation: none; border-radius: 62% 38% 55% 45% / 44% 64% 36% 56%; }
/* letter fills the container; sign-off and signatures sit right */
.letter-body p { max-width: none; }
.sign-off { text-align: right; margin-top: 18px; }
.sign-off .signatures { margin-top: 18px; }

/* real drawn signature images (owners supply their own over time) */
.signatures .sig-img { height: 46px; width: auto; vertical-align: -12px; }
.signatures .sig--andy.sig-img, .signatures .sig--jonah.sig-img { height: 54px; }

/* ---------- Pro Shop ---------- */
.shop-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.shop-chip { padding: 9px 20px; border-radius: var(--r-pill); border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: .95rem; color: var(--ink); cursor: pointer; transition: all .18s var(--ease); }
.shop-chip:hover { border-color: var(--purple); color: var(--purple); }
.shop-chip.is-on { background: linear-gradient(90deg, var(--purple-2), var(--purple) 50%, var(--purple-d)); background-origin: border-box; background-clip: border-box; border-color: transparent; color: #fff; }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; align-content: start;
  /* keep the page tall enough that filtering to a small category never lets the
     scroll position clamp — the chips bar must stay put when any chip is tapped */
  min-height: calc(100vh - 220px); min-height: calc(100dvh - 220px); }
@media (max-width: 720px){
  .shopgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shopcard__body { padding: 12px 12px 14px; }
  .shopcard__body h3 { font-size: .95rem; }
}
.shopcard { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow .2s var(--ease); }
.shopcard:hover { box-shadow: 0 20px 44px rgba(105,105,120,.26); }
.shopcard__ph { display: block; background: #fff; border-bottom: 2px solid var(--line); padding: 18px; }
.shopcard__ph img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.shopcard__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.shopcard__body h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.shopcard__price { font-weight: 900; font-size: 1.15rem; color: var(--purple); margin-top: 3px; }
.shopcard__dots { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.shopcard__dot { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; transition: transform .15s var(--ease); }
.shopcard__dot:hover { transform: scale(1.18); }
.shopcard__dot.is-on { border: 2px solid var(--purple); }
.shopcard__go { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; font-weight: 800; font-size: .9rem; color: var(--purple); text-decoration: none; }
.shopcard__go:hover { text-decoration: none; color: var(--purple-d, var(--purple)); }
.shopcard[hidden] { display: none; }
.shop-note { max-width: 1020px; margin: 34px auto 0; padding: 16px 26px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 24px; }
.shop-note__row { flex: 1 1 520px; display: flex; gap: 11px; align-items: center; text-align: left; margin: 0; font-size: .95rem; line-height: 1.5; }
.shop-note__row svg { flex: none; color: var(--purple); }
.shop-note > .btn { flex: none; white-space: nowrap; }

/* Shop hero: merch banner with the title on the white center */
.shop-hero { background: url('/assets/photos/shop-hero.webp') center / cover no-repeat, #F4F4F6; aspect-ratio: 3374 / 856; min-height: 240px; display: grid; place-items: center; padding: 20px; }
.shop-hero .h1 { color: var(--ink); text-align: center; font-size: clamp(22px, 3.3vw, 48px); max-width: 46%; margin-inline: auto; line-height: 1.08; }
/* below 946px the 3374/856 ratio + min-height 240 would imply a width wider
   than the viewport (min-height x ratio), overflowing the hero sideways */
@media (max-width: 945px) { .shop-hero { min-height: 240px; aspect-ratio: auto; } }
@media (max-width: 700px) {
  .shop-hero { min-height: 210px; background-size: auto 72%; background-position: center; }
  .shop-hero .h1 { max-width: 60%; }
}

/* per-product zoom corrections for Bonfire source-photo whitespace */
.shopcard[data-id="racerback"] .shopcard__ph img { transform: scale(1.14); }
.shopcard[data-id="baby-onesie"] .shopcard__ph img { transform: scale(0.86); }

/* shop hero: "proudly." on its own line, scaled to match the line above */
.shop-hero__l2 { position: relative; display: inline-block; font-size: 1.779em; line-height: 1.02; letter-spacing: -0.02em; }
.shop-hero__l2 .dot { position: absolute; left: 100%; bottom: 0; }

/* Developmental Team split cards: white cards, silver star clusters top-right + bottom-left
   (out of the text's way, same treatment on both DT containers) */
.opt-card--stars { position: relative; }
.opt-card--stars::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path transform='translate(80 70) rotate(12)' d='M0,-25 C4.0,-4.0 4.0,-4.0 25,0 C4.0,4.0 4.0,4.0 0,25 C-4.0,4.0 -4.0,4.0 -25,0 C-4.0,-4.0 -4.0,-4.0 0,-25 Z' fill='rgba(148,158,175,0.3)'/><path transform='translate(36 44) rotate(-8)' d='M0,-17 C2.7,-2.7 2.7,-2.7 17,0 C2.7,2.7 2.7,2.7 0,17 C-2.7,2.7 -2.7,2.7 -17,0 C-2.7,-2.7 -2.7,-2.7 0,-17 Z' fill='rgba(148,158,175,0.22)'/><path transform='translate(88 24) rotate(20)' d='M0,-12 C1.9,-1.9 1.9,-1.9 12,0 C1.9,1.9 1.9,1.9 0,12 C-1.9,1.9 -1.9,1.9 -12,0 C-1.9,-1.9 -1.9,-1.9 0,-12 Z' fill='rgba(148,158,175,0.26)'/><path transform='translate(54 96) rotate(-15)' d='M0,-8 C1.3,-1.3 1.3,-1.3 8,0 C1.3,1.3 1.3,1.3 0,8 C-1.3,1.3 -1.3,1.3 -8,0 C-1.3,-1.3 -1.3,-1.3 0,-8 Z' fill='rgba(148,158,175,0.18)'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path transform='translate(80 70) rotate(12)' d='M0,-25 C4.0,-4.0 4.0,-4.0 25,0 C4.0,4.0 4.0,4.0 0,25 C-4.0,4.0 -4.0,4.0 -25,0 C-4.0,-4.0 -4.0,-4.0 0,-25 Z' fill='rgba(148,158,175,0.3)'/><path transform='translate(36 44) rotate(-8)' d='M0,-17 C2.7,-2.7 2.7,-2.7 17,0 C2.7,2.7 2.7,2.7 0,17 C-2.7,2.7 -2.7,2.7 -17,0 C-2.7,-2.7 -2.7,-2.7 0,-17 Z' fill='rgba(148,158,175,0.22)'/><path transform='translate(88 24) rotate(20)' d='M0,-12 C1.9,-1.9 1.9,-1.9 12,0 C1.9,1.9 1.9,1.9 0,12 C-1.9,1.9 -1.9,1.9 -12,0 C-1.9,-1.9 -1.9,-1.9 0,-12 Z' fill='rgba(148,158,175,0.26)'/><path transform='translate(54 96) rotate(-15)' d='M0,-8 C1.3,-1.3 1.3,-1.3 8,0 C1.3,1.3 1.3,1.3 0,8 C-1.3,1.3 -1.3,1.3 -8,0 C-1.3,-1.3 -1.3,-1.3 0,-8 Z' fill='rgba(148,158,175,0.18)'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: top 12px right 12px, bottom 12px left 12px;
  background-size: 118px 118px, 92px 92px;
}
.opt-card--stars > * { position: relative; z-index: 1; }

/* team registration deadlines: bold ink line inside the card body / lightbox */
.opt__deadline { display: block; margin-top: 9px; font-weight: 800; color: var(--ink); }
.opt__deadline-line { font-weight: 800; color: var(--ink); }

/* DT titles: "Developmental Team:" must hold one line — the <br> handles the only break */
.opt-card--stars .card__title { white-space: nowrap; }

/* home journey: Developmental Team levels carry the same sparkle motif */
.levels__card--stars::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path transform='translate(80 70) rotate(12)' d='M0,-25 C4.0,-4.0 4.0,-4.0 25,0 C4.0,4.0 4.0,4.0 0,25 C-4.0,4.0 -4.0,4.0 -25,0 C-4.0,-4.0 -4.0,-4.0 0,-25 Z' fill='rgba(148,158,175,0.3)'/><path transform='translate(36 44) rotate(-8)' d='M0,-17 C2.7,-2.7 2.7,-2.7 17,0 C2.7,2.7 2.7,2.7 0,17 C-2.7,2.7 -2.7,2.7 -17,0 C-2.7,-2.7 -2.7,-2.7 0,-17 Z' fill='rgba(148,158,175,0.22)'/><path transform='translate(88 24) rotate(20)' d='M0,-12 C1.9,-1.9 1.9,-1.9 12,0 C1.9,1.9 1.9,1.9 0,12 C-1.9,1.9 -1.9,1.9 -12,0 C-1.9,-1.9 -1.9,-1.9 0,-12 Z' fill='rgba(148,158,175,0.26)'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path transform='translate(36 84) rotate(-8)' d='M0,-17 C2.7,-2.7 2.7,-2.7 17,0 C2.7,2.7 2.7,2.7 0,17 C-2.7,2.7 -2.7,2.7 -17,0 C-2.7,-2.7 -2.7,-2.7 0,-17 Z' fill='rgba(148,158,175,0.22)'/><path transform='translate(84 40) rotate(15)' d='M0,-10 C1.6,-1.6 1.6,-1.6 10,0 C1.6,1.6 1.6,1.6 0,10 C-1.6,1.6 -1.6,1.6 -10,0 C-1.6,-1.6 -1.6,-1.6 0,-10 Z' fill='rgba(148,158,175,0.2)'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: top 14px right 14px, bottom 14px left 14px;
  background-size: 108px 108px, 84px 84px;
}
.levels__card--stars > * { position: relative; z-index: 1; }

/* team pricing caps: same sparkle motif as the team cards on the classes page */
.pcap--stars { position: relative; }
.pcap--stars::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><path transform='translate(84 30) rotate(12)' d='M0,-20 C3.2,-3.2 3.2,-3.2 20,0 C3.2,3.2 3.2,3.2 0,20 C-3.2,3.2 -3.2,3.2 -20,0 C-3.2,-3.2 -3.2,-3.2 0,-20 Z' fill='rgba(255,255,255,0.22)'/><path transform='translate(30 62) rotate(-10)' d='M0,-13 C2.1,-2.1 2.1,-2.1 13,0 C2.1,2.1 2.1,2.1 0,13 C-2.1,2.1 -2.1,2.1 -13,0 C-2.1,-2.1 -2.1,-2.1 0,-13 Z' fill='rgba(255,255,255,0.16)'/><path transform='translate(66 92) rotate(18)' d='M0,-9 C1.4,-1.4 1.4,-1.4 9,0 C1.4,1.4 1.4,1.4 0,9 C-1.4,1.4 -1.4,1.4 -9,0 C-1.4,-1.4 -1.4,-1.4 0,-9 Z' fill='rgba(255,255,255,0.18)'/></svg>"); background-size: 110px 110px; border-radius: inherit; }
.pcap--stars > * { position: relative; z-index: 1; }

/* contact form: the success card that replaces the form after sending */
/* success note lives INSIDE the form card — no chrome of its own (single box) */
.form-sent { text-align: center; background: none; border: 0; box-shadow: none; padding: 30px 20px 22px; margin-top: 0; }
/* after sending, the thank-you group centers in the card instead of
   hugging the top of the now-empty form */
.form-card.is-sent { display: grid; place-items: center; min-height: 360px; }
.form-sent__title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  background: linear-gradient(135deg, #9A66FF, #5E17EB);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  display: inline-block; }
.form-sent__again { margin-top: 18px; }
.form-sent__sub { color: var(--slate); font-weight: 600; font-size: var(--step--1); margin-top: 10px; }

/* Brand-color hero: a fun composition of the palette, replacing autogenerated
   non-gym photo banners. White text stays legible over the darker purple left. */
.phero--brand {
  background:
    radial-gradient(115% 95% at 92% 12%, rgba(228,255,98,.85), transparent 46%),
    radial-gradient(95% 100% at 102% 82%, rgba(56,182,255,.92), transparent 52%),
    radial-gradient(75% 85% at 74% 104%, rgba(255,157,56,.8), transparent 56%),
    linear-gradient(118deg, #5E17EB 0%, #4310B0 46%, #6A1FD6 100%);
}
.phero--brand::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMaxYMid slice'><path d='M940 92C950.4 139.6 950.4 139.6 998 150C950.4 160.4 950.4 160.4 940 208C929.6 160.4 929.6 160.4 882 150C929.6 139.6 929.6 139.6 940 92Z' fill='%23E4FF62' opacity='1'/><path d='M1080 316C1087.9 352.1 1087.9 352.1 1124 360C1087.9 367.9 1087.9 367.9 1080 404C1072.1 367.9 1072.1 367.9 1036 360C1072.1 352.1 1072.1 352.1 1080 316Z' fill='%23FFFFFF' opacity='0.95'/><path d='M760 266C766.1 293.9 766.1 293.9 794 300C766.1 306.1 766.1 306.1 760 334C753.9 306.1 753.9 306.1 726 300C753.9 293.9 753.9 293.9 760 266Z' fill='%23FFFFFF' opacity='0.55'/><path d='M1010 470C1015.4 494.6 1015.4 494.6 1040 500C1015.4 505.4 1015.4 505.4 1010 530C1004.6 505.4 1004.6 505.4 980 500C1004.6 494.6 1004.6 494.6 1010 470Z' fill='%23E4FF62' opacity='0.8'/><path d='M680 98C684.0 116.0 684.0 116.0 702 120C684.0 124.0 684.0 124.0 680 142C676.0 124.0 676.0 124.0 658 120C676.0 116.0 676.0 116.0 680 98Z' fill='%23FFFFFF' opacity='0.6'/><path d='M1140 70C1143.6 86.4 1143.6 86.4 1160 90C1143.6 93.6 1143.6 93.6 1140 110C1136.4 93.6 1136.4 93.6 1120 90C1136.4 86.4 1136.4 86.4 1140 70Z' fill='%23FFFFFF' opacity='0.7'/><path d='M860 452C863.2 466.8 863.2 466.8 878 470C863.2 473.2 863.2 473.2 860 488C856.8 473.2 856.8 473.2 842 470C856.8 466.8 856.8 466.8 860 452Z' fill='%23FFFFFF' opacity='0.5'/><circle cx='720' cy='420' r='10' fill='%2338B6FF' opacity='0.85'/><circle cx='900' cy='90' r='8' fill='%23FF9D38' opacity='0.9'/><circle cx='1130' cy='250' r='12' fill='%23FF9D38' opacity='0.75'/><circle cx='640' cy='260' r='7' fill='%23E4FF62' opacity='0.8'/><circle cx='980' cy='250' r='7' fill='%23FFFFFF' opacity='0.7'/><circle cx='1090' cy='470' r='9' fill='%2338B6FF' opacity='0.7'/><circle cx='820' cy='180' r='6' fill='%23FF9D38' opacity='0.85'/><circle cx='700' cy='520' r='8' fill='%23FFFFFF' opacity='0.55'/><circle cx='1160' cy='400' r='7' fill='%23E4FF62' opacity='0.7'/></svg>");
  background-repeat:no-repeat; background-position:right center; background-size:auto 100%;
}
.phero--brand::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(90deg, rgba(67,16,176,.62) 0%, rgba(67,16,176,.2) 34%, transparent 58%);
}
.phero--brand .phero__inner { position:relative; z-index:2; }
.phero--brand .h1, .phero--brand .eyebrow, .phero--brand .lede { color:#fff; }
.phero--brand .lede { color: rgba(255,255,255,.9); }
.phero--brand .h1 .dot { color: var(--lime); }
/* Orange brand hero — same composition, sunny summer-camp palette */
/* Camp color-run photo sits under the orange gradient — translucent enough to
   read the scene, opaque enough that the white headline keeps its contrast. */
.phero--brand--orange {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(255,196,110,.42), transparent 58%),
    linear-gradient(90deg, rgba(194,72,0,.93) 0%, rgba(232,93,0,.86) 38%, rgba(255,131,20,.76) 70%, rgba(255,157,56,.7) 100%),
    url("photos/summer-camps-03.webp") center 34% / cover no-repeat,
    #C24800;
}
.phero--brand--orange::after {
  background: linear-gradient(90deg, rgba(120,42,0,.66) 0%, rgba(140,50,0,.3) 42%, rgba(150,54,0,.06) 64%, transparent 78%);
}
.phero--brand--orange .h1 .dot { color: var(--lime); }
/* Camps & Events hero: the pricing hero's light blue (#5BC8FF -> #1E9AE8)
   washed over the parachute photo; slightly deeper left side so the
   white headline stays readable */
.phero--brand--campsblue {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(91,200,255,.42), transparent 58%),
    linear-gradient(90deg, rgba(20,116,190,.9) 0%, rgba(30,154,232,.8) 38%, rgba(66,185,250,.66) 70%, rgba(91,200,255,.6) 100%),
    url("photos/camps-parachute.jpg") center 42% / cover no-repeat,
    #1E9AE8;
}
.phero--brand--campsblue::before { display: none; }
.phero--brand--campsblue::after {
  background: linear-gradient(90deg, rgba(9,64,110,.55) 0%, rgba(9,64,110,.26) 42%, rgba(9,64,110,.05) 64%, transparent 78%);
}
.phero--brand--campsblue .h1 .dot { color: var(--lime); }
/* Lime brand hero — Skills Camps (green gradient over the skills photo) */
.phero--brand--lime {
  background:
    radial-gradient(85% 115% at 100% 8%, rgba(198,238,46,.4), transparent 60%),
    linear-gradient(90deg, rgba(56,66,7,.93) 0%, rgba(110,128,14,.86) 38%, rgba(157,180,20,.76) 70%, rgba(198,238,46,.7) 100%),
    url("photos/skills-handstand.webp") center 35% / cover no-repeat,
    #384207;
}
.phero--brand--lime::before { display: none; }
.phero--brand--lime::after {
  background: linear-gradient(90deg, rgba(40,47,5,.55) 0%, rgba(40,47,5,.18) 40%, transparent 62%);
}
.phero--brand--lime .h1 .dot { color: #fff; }
/* Teal brand hero — Jobs (gradient over the coach photo) */
.phero--brand--teal {
  background:
    radial-gradient(85% 115% at 100% 8%, rgba(18,181,198,.42), transparent 60%),
    linear-gradient(90deg, rgba(6,58,66,.93) 0%, rgba(10,106,118,.86) 38%, rgba(15,157,172,.76) 70%, rgba(18,181,198,.7) 100%),
    url("heroes/about.webp") center 30% / cover no-repeat,
    #063A42;
}
.phero--brand--teal::before { display: none; }
.phero--brand--teal::after {
  background: linear-gradient(90deg, rgba(4,40,46,.55) 0%, rgba(4,40,46,.18) 40%, transparent 62%);
}
.phero--brand--teal .h1 .dot { color: var(--lime); }
/* Slideshow flavor: photos crossfade under the gradient (gradient moves to ::before) */
.phero__slides { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; }
/* multi-column wall: narrow photos get their own column, fades ripple left to right */
.phero__slides--cols { display: flex; background: none; }
.phero__col { position: relative; flex: 1 1 0; overflow: hidden; background-position: center; background-size: cover; }
.phero__col .phero__slide { position: absolute; inset: 0; }
.phero__slide { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transition: opacity 1.2s ease; }
.phero__slide.is-on { opacity: 1; }
/* Home hero photo wall: crossfade columns sit under the home page's own
   purple-to-light-blue scrim (defined inline on the home page) */
.hero--wall { background: #2A0B66; }
@media (prefers-reduced-motion: reduce) { .phero__slide { transition: none; } }
/* Purple brand hero — Parents' Night Out (pricing-page purple, dark left -> light right; photo slot ready) */
/* Gym photo sits under the purple gradient — same motif as the other heroes */
.phero--brand--purple {
  background:
    radial-gradient(85% 115% at 100% 8%, rgba(154,102,255,.4), transparent 60%),
    linear-gradient(90deg, rgba(56,12,145,.95) 0%, rgba(71,16,181,.88) 32%, rgba(94,23,235,.8) 66%, rgba(154,102,255,.72) 100%),
    url("photos/pno-hero-gym.jpg") center 40% / cover no-repeat,
    #380C91;
}
.phero--brand--purple::before { display: none; }
.phero--brand--purple::after {
  background: linear-gradient(90deg, rgba(35,7,100,.55) 0%, rgba(35,7,100,.18) 40%, transparent 62%);
}
/* Light-blue brand hero — Preschool Open Gym (toddler + caregiver at the Northeast mural) */
.phero--brand--bluepre {
  background:
    radial-gradient(85% 115% at 100% 8%, rgba(56,182,255,.42), transparent 60%),
    linear-gradient(90deg, rgba(14,51,114,.94) 0%, rgba(21,82,168,.86) 38%, rgba(33,131,220,.74) 70%, rgba(56,182,255,.68) 100%),
    url("photos/herowall/img-4100-wide.webp") right 30% / cover no-repeat,
    #123E86;
}
.phero--brand--bluepre::before { display: none; }
.phero--brand--bluepre::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, transparent 64%);
}
.phero--brand--bluepre .h1 .dot { color: var(--lime); }
/* Light-blue brand hero — Jobs (two coaches in the preschool gym) */
.phero--brand--bluejobs {
  background:
    radial-gradient(85% 115% at 100% 8%, rgba(56,182,255,.42), transparent 60%),
    linear-gradient(90deg, rgba(14,51,114,.96) 0%, rgba(18,66,140,.9) 30%, rgba(21,82,168,.8) 55%, rgba(33,131,220,.62) 78%, rgba(56,182,255,.5) 100%),
    url("photos/jobs-hero-staff-wide.webp") right center / cover no-repeat,
    #123E86;
}
.phero--brand--bluejobs::before { display: none; }
.phero--brand--bluejobs::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, transparent 64%);
}
.phero--brand--bluejobs .h1 .dot { color: var(--lime); }
/* Blue brand hero — School's Out Day Camps */
/* Camp group photo sits under the blue gradient — same treatment as the
   summer-camps hero: translucent enough to read, dark enough on the left
   for the white headline. */
.phero--brand--blue {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(56,182,255,.42), transparent 58%),
    linear-gradient(90deg, rgba(14,51,114,.94) 0%, rgba(21,82,168,.86) 38%, rgba(33,131,220,.74) 70%, rgba(56,182,255,.68) 100%),
    url("photos/schoolsout-group.jpg") center 38% / cover no-repeat,
    #123E86;
}
.phero--brand--blue::before { display: none; }
.phero--brand--blue::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, rgba(10,42,92,.06) 64%, transparent 78%);
}
.phero--brand--blue .h1 .dot { color: var(--lime); }
/* Parties overview hero: party photo under the blue brand gradient */
.phero--brand--blueparty {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(56,182,255,.42), transparent 58%),
    linear-gradient(90deg, rgba(14,51,114,.94) 0%, rgba(21,82,168,.86) 38%, rgba(33,131,220,.74) 70%, rgba(56,182,255,.68) 100%),
    url("heroes/parties.webp") center 40% / cover no-repeat,
    #123E86;
}
.phero--brand--blueparty::before { display: none; }
.phero--brand--blueparty::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, rgba(10,42,92,.06) 64%, transparent 78%);
}
.phero--brand--blueparty .h1 .dot { color: var(--lime); }
/* Skills Camps hero: vault-and-tumble-track photo under the School's Out blue gradient */
.phero--brand--blueskills {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(56,182,255,.42), transparent 58%),
    linear-gradient(90deg, rgba(14,51,114,.94) 0%, rgba(21,82,168,.86) 38%, rgba(33,131,220,.74) 70%, rgba(56,182,255,.68) 100%),
    url("heroes/skills-camps.webp") center 38% / cover no-repeat,
    #123E86;
}
.phero--brand--blueskills::before { display: none; }
.phero--brand--blueskills::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, rgba(10,42,92,.06) 64%, transparent 78%);
}
.phero--brand--blueskills .h1 .dot { color: var(--lime); }
#party-types { scroll-margin-top: 96px; }
/* Birthday-parties hero: beam-cheer photo behind the green gradient,
   same motif as the camp heroes — dark left for the white headline. */
.phero--brand--green {
  background:
    radial-gradient(90% 120% at 100% 6%, rgba(56,182,255,.42), transparent 58%),
    linear-gradient(90deg, rgba(14,51,114,.94) 0%, rgba(21,82,168,.86) 38%, rgba(33,131,220,.74) 70%, rgba(56,182,255,.68) 100%),
    url("photos/parties-beam-cheer.jpg") center 78% / cover no-repeat,
    #123E86;
}
.phero--brand--green::before { display: none; }
.phero--brand--green::after {
  background: linear-gradient(90deg, rgba(8,34,76,.66) 0%, rgba(10,42,92,.3) 42%, rgba(10,42,92,.06) 64%, transparent 78%);
}
.phero--brand--green .h1 .dot { color: var(--lime); }
/* Desktop: oversize the photo and pin its LEFT edge so the image content
   slides right — the kid-packed middle of the frame fills the whole
   text-free right side instead of the empty wall/mats at the photo's edge. */
@media (min-width: 980px){
  .phero--brand--green{
    background-position: 0 0, 0 0, left 72%, 0 0;
    background-size: auto, auto, 122% auto, auto;
  }
}
/* Classes hero: kid duo pinned to the RIGHT edge (own layer on ::before, full
   height, fading in left->right) so the title text sits on clean gradient. */
.phero--brand--purpleblue { background: #380C91; }
.phero--brand--purpleblue::before {
  background: url("photos/classes-hero-duo.webp") right center / auto 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000 58%);
  mask: linear-gradient(90deg, transparent 30%, #000 58%);
}
.phero--brand--purpleblue::after {
  /* the home hero's exact scrim, laid over the photo so the purple -> light
     blue gradient reads across the WHOLE hero */
  background: linear-gradient(100deg,
    rgba(94,23,235,.95) 0%,
    rgba(88,25,225,.90) 30%,
    rgba(64,92,235,.86) 55%,
    rgba(44,140,245,.84) 78%,
    rgba(56,182,255,.82) 100%);
}
.phero--brand--purpleblue .h1 .dot { color: var(--lime); }
/* Summer-camps hero: no sparkle motif — a tilted camp logo fills the free space */
.phero--brand--orange::before { display: none; }
/* Camp at a glance: gradient label on top, info below, tilted for playfulness */
.campfacts { min-height: 0; padding-block: clamp(30px, 4vh, 50px); }
.campfacts .section-head { margin-bottom: 0; }
/* Glance header: camp logo beside a two-line title, centered as one lockup */
.glancehead { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); max-width: none; font-size: var(--step-3); }
.glancehead__logo { flex: none; height: 3.6em; width: auto; transform: rotate(-13deg); filter: drop-shadow(0 10px 22px rgba(32,27,51,.22)); }
.glancehead__txt { font-size: 1em; line-height: 1.05; margin: 0; text-align: left; }
@media (max-width: 560px) { .glancehead { flex-direction: column; gap: 12px; } .glancehead__txt { text-align: center; } }
.campfacts .campfacts__grid { margin-top: clamp(30px, 4vh, 50px); }
.campfacts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; }
.campfact { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 38px rgba(32,27,51,.14); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.campfact--where { text-decoration: none; color: inherit; }
.campfact__head { color: #fff; font-weight: 900; letter-spacing: -.01em; font-size: clamp(20px, 1.7vw, 27px); line-height: 1.05; padding: 30px 20px 20px; min-height: 84px; display: flex; align-items: center; }
.campfact__body { padding: 18px 20px 22px; color: var(--ink); flex: 1 1 auto; display: flex; flex-direction: column; }
.campfact__note { margin-top: 9px; font-size: .92rem; font-weight: 500; color: var(--slate); line-height: 1.45; }
.campfact__note a { text-decoration: underline; text-underline-offset: 2px; } /* color alone can't distinguish links in running text (WCAG 1.4.1) */
/* Where: clickable mini-map to directions, with the branded logo pin */
.campfact--where, .campfact--where:hover, .campfact--where * { text-decoration: none; }
.campfact__map { position: relative; flex: 1 1 auto; margin-top: 16px; min-height: 156px; }
.campfact__map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.campfact__mapcover { position: absolute; inset: 0; border-radius: 12px; }
.campfact__pin { --pin: var(--purple); }
.campfact--where:hover .campfact__pin { transform: translate(-50%, -94%) scale(1.07); }
.campfact__dir { position: absolute; right: 10px; bottom: 10px; background: linear-gradient(135deg, var(--purple-2), var(--purple-d)); color: #fff; font-weight: 800; font-size: .82rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(94,23,235,.42); }
.campfact--where:hover .campfact__dir { filter: brightness(1.07); }
/* Days & Times: standard core vs striped extended caps */
/* Days & Times as a stacked Google-Calendar-style day view that fills the card.
   Blocks touch, so each hour label centers exactly on the joint it marks. */
.tcal { margin-top: 16px; margin-bottom: 8px; padding-left: 42px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.tcal__ev { position: relative; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; line-height: 1.12; }
.tcal__ev b { font-weight: 900; font-size: .95rem; letter-spacing: -.01em; }
.tcal__ev small { font-weight: 700; font-size: .74rem; opacity: .9; margin-top: 2px; }
.tcal__ev--core { flex: 1 1 auto; min-height: 84px; background: linear-gradient(135deg, #58C7F5, #2F86E0); color: #fff; }
.tcal__ev--ext { flex: none; min-height: 44px; color: #1D63C0; background: #fff; border: 2px solid #1D63C0; }
/* Wide section head so a one-liner lede stays on one line */
.section-head--wide { max-width: 960px; }
/* Centered intro line above the School's Out date slider */
.center-lede { text-align: center; max-width: 720px; margin: 0 auto clamp(26px, 3.4vw, 44px); }
.mgcal--solo { margin-top: clamp(8px, 1.4vw, 16px); }
/* Solo slider: every card's left edge wears the brand orange gradient.
   Painted into the border ring itself (padding-box/border-box layering) so the
   gradient follows the card's rounded corners with no disconnect. */
.mgcal--solo .mgcal-up {
  border: 0 !important;
  border-left: 5px solid transparent !important;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(180deg, #FFB460, #FF7A00) border-box;
}
/* ...and the slider's scrollbar matches */
/* solo cards size to their content so title + button hold one line (3-4 visible, then slide) */
.mgcal--solo .mgcal-up-row { grid-auto-columns: max-content; }
.mgcal--solo .mgcal-up__t, .mgcal--solo .mgcal-up__sub { white-space: nowrap; }
@supports not selector(::-webkit-scrollbar) {
  .mgcal--solo .mgcal-up-row { scrollbar-width: thin; scrollbar-color: #FF7A00 rgba(32,27,51,.08); }
}
.mgcal--solo .mgcal-up-row::-webkit-scrollbar { height: 6px; }
.mgcal--solo .mgcal-up-row::-webkit-scrollbar-track { background: rgba(32,27,51,.08); border-radius: 999px; }
.mgcal--solo .mgcal-up-row::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #FFB460, #FF7A00); border-radius: 999px; }
/* PNO night flow: SUV bookends (drop-off / pickup) around two cards; the 12s
   loop reads left to right — car in, open gym fills, movie fills, car out. */
.nightflow { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: clamp(14px, 2.2vw, 30px); align-items: center; }
.nightflow .dayflow__card { align-self: stretch; display: flex; }
.nightflow .dayflow__card .card__body { flex: 1 1 auto; }
.nf-car { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.nf-car svg { width: clamp(72px, 8vw, 104px); height: auto; transform-origin: 50% 85%; animation: nfPulse 12s ease-in-out infinite; }
.nf-car b { font-weight: 900; color: var(--ink); font-size: .95rem; }
.nf-car small { font-weight: 700; color: var(--slate); font-size: .8rem; }
.nf-car--out svg { animation-delay: 9.5s; }  /* after the movie card's fade (ends 9.5s) so the pulse never shares a moment with a color change */
@keyframes nfPulse { 0% { transform: scale(1); } 8% { transform: scale(1.2); } 16% { transform: scale(1); } 100% { transform: scale(1); } }
/* the two middle cards fill after car one and before car two */
.nightflow .dayflow__card:nth-child(2)::before { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.nightflow .dayflow__card:nth-child(3)::before { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.nightflow .dayflow__card:nth-child(2)::before, .nightflow .dayflow__card:nth-child(2) .card__title, .nightflow .dayflow__card:nth-child(2) .card__body p { animation-delay: 2s; }
.nightflow .dayflow__card:nth-child(3)::before, .nightflow .dayflow__card:nth-child(3) .card__title, .nightflow .dayflow__card:nth-child(3) .card__body p { animation-delay: 5.5s; }
.dayflow__card--span2 { grid-column: 2 / 4; } /* lone middle card fills both center tracks */
@media (max-width: 860px) { .nightflow { grid-template-columns: 1fr; } .nf-car { flex-direction: row; justify-content: center; gap: 10px; } .dayflow__card--span2 { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .nf-car svg { animation: none; } }
/* 'Pick your Fridays' section wears the pricing page's exact purple gradient */
.tone-purplegrad-sec { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
.tone-purplegrad-sec .h2 { color: #fff; }
.tone-purplegrad-sec .lede { color: rgba(255,255,255,.94); }
/* Movie poster pinned to a PNO card's top-right corner once the film is announced */
.mgcal-up { position: relative; }
.mgcal-up-row { padding-top: 20px; }
.mgcal-up__poster {
  position: absolute; top: 50%; right: 0;
  height: min(calc(100% - 18px), 150px); aspect-ratio: 27 / 40; width: auto;
  background-size: cover; background-position: center;
  border: 3px solid #fff; border-radius: 10px;
  box-shadow: 0 10px 22px rgba(32,27,51,.35);
  /* hangs off the card's right edge — only a ~16px sliver overlaps the info */
  transform: translate(calc(100% - 16px), -50%) rotate(8deg); z-index: 2;
}
/* reserve room in the scroll row for the overhanging poster */
.mgcal-up:has(.mgcal-up__poster) { margin-right: 88px; }
/* Green flavor of the solo slider (Preschool Open Gym). Northeast cards keep the
   Register-button green; South cards wear brand light blue so families can see
   at a glance which gym they're registering for. */
.mgcal--solo--green .mgcal-up {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(180deg, #5FC98A, #3E9E68) border-box;
}
/* South cards keep the same green stripe — location shows via the label + pills */
@supports not selector(::-webkit-scrollbar) {
  .mgcal--solo--green .mgcal-up-row { scrollbar-color: #5FC98A rgba(255,255,255,.28); }
}
.mgcal--solo--green .mgcal-up-row::-webkit-scrollbar-thumb { background: #5FC98A; }
/* Purple flavor of the solo slider (Parents' Night Out) */
.mgcal--solo--purple .mgcal-up {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(180deg, #2DD4BF, #0D9488) border-box;
}
@supports not selector(::-webkit-scrollbar) {
  .mgcal--solo--purple .mgcal-up-row { scrollbar-color: #12B5C6 rgba(255,255,255,.28); }
}
.mgcal--solo--purple .mgcal-up-row::-webkit-scrollbar-thumb { background: #12B5C6; }
.mgcal--solo--purple .mgcal-up-row::-webkit-scrollbar-track { background: rgba(255,255,255,.28); }
/* Purple flavors of the day calendar + flat-rate box (Parents' Night Out) */
.tcal--purple .tcal__t--end { bottom: -10px; }
.sorate.sorate--purple { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
/* Lunch break — plain white with a solid darker-blue outline */
.tcal__ev--lunch { flex: none; min-height: 44px; color: #1D63C0; background: #fff; border: 2px solid #1D63C0; }
/* Hour labels pinned to the block edges they mark */
.tcal__t { position: absolute; left: -42px; top: -11px; width: 34px; height: 14px; line-height: 14px; text-align: right; font-size: .72rem; font-weight: 800; color: var(--slate); letter-spacing: -.01em; }
.tcal__t--end { top: auto; bottom: -17.5px; }
/* Skills Camps rate boxes: lime fill (prominent, purple badge) + lime outline */
.camprate--limefill { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.camprate--limefill .camprate__title { color: #fff; }
.camprate--limefill .camprate__badge { background: var(--purple); color: #fff; }
.camprate--limefill .camprate__list li b small { color: rgba(255,255,255,.9); }
/* doubled class so the ink color beats the later base .camprate{color:#fff} rule
   (the summer --std twin only wins by sitting after it in the file) */
.camprate.camprate--limeline {
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, #C6EE2E, #9DB414) border-box;
  border: 2.5px solid transparent; color: var(--ink);
}
.camprate--limeline .camprate__title { color: var(--ink); }
.camprate--limeline .camprate__list li { border-top-color: rgba(32,27,51,.12); }
.camprate--limeline .camprate__list li b small { color: var(--slate); }
/* Early-bird 'Save' pill — matches the pricing page discount badge */
.camprate { position: relative; }
.camprate__badge { position: absolute; top: -13px; right: -8px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; transform: rotate(5deg); box-shadow: 0 3px 10px rgba(32,27,51,.18); white-space: nowrap; z-index: 2; }
.campfact__lead { font-size: 1.16rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; }
.campfact__sub { color: var(--slate); font-weight: 600; margin-top: 5px; }
.campfact__sub--tight { margin-top: 2px; line-height: 1.25; }
.campfact__list { list-style: none; margin: 0; padding: 0; }
.campfact__list li { padding: 10px 0; border-top: 1.5px solid var(--line); font-weight: 600; color: var(--ink); font-size: .95rem; display: flex; flex-direction: column; gap: 2px; }
.campfact__list li:first-child { border-top: 0; padding-top: 0; }
.campfact__list li b { font-weight: 900; }
.campfact__list li span { color: var(--slate); font-weight: 600; font-size: .88rem; }
.campfact--purple .campfact__head { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
.campfact--blue   .campfact__head { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
.campfact--lime   .campfact__head { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.campfact--orange .campfact__head { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.campfact:nth-child(1) { transform: rotate(-2.5deg); }
.campfact:nth-child(2) { transform: rotate(1.5deg); }
.campfact:nth-child(3) { transform: rotate(-1.5deg); }
.campfact:nth-child(4) { transform: rotate(2.5deg); }
.campfact:hover { box-shadow: 0 26px 56px rgba(32,27,51,.26); }
@media (max-width: 900px) { .campfacts__grid { grid-template-columns: 1fr 1fr; } .campfact { transform: none !important; } }
@media (max-width: 520px) { .campfacts__grid { grid-template-columns: 1fr; } }
/* Two overlapping horizontal photo frames (What a camp day looks like) */
.campframes { position: relative; min-height: clamp(340px, 40vw, 520px); }
/* Gradient photo frames (PNO-style): each frame in one of the four brand gradients */
.campframes__it { position: absolute; width: 56%; padding: 9px 9px 22px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(32,27,51,.22); }
.campframes__it img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 8px; }
/* the photoduo's scroll-in unclip, on every gradient frame */
.js .reveal .campframes__it img { clip-path: inset(9% 9% 9% 9% round 8px); transition: clip-path 1.25s var(--ease); }
.js .reveal.is-in .campframes__it img { clip-path: inset(0 0 0 0 round 8px); }
.campframes--quad .campframes__it--a { background: linear-gradient(135deg, #9A66FF, #5E17EB); }
.campframes--quad .campframes__it--b { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.campframes--quad .campframes__it--c { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
.campframes--quad .campframes__it--d { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
/* Portrait frames: taller shape, narrower so the cluster keeps its footprint */
.campframes__it--port { width: 43%; }
.campframes__it--port img { aspect-ratio: 3 / 4; }
/* Clusters holding portrait frames need the extra height — tie it to the
   column width so the two rows meet the same way at every screen size. */
.campframes--tall { min-height: 0; aspect-ratio: 1 / 1.06; }
.campframes--tall .campframes__it { width: 55%; }
.campframes--tall .campframes__it--port { width: 46%; }
/* Three-frame cluster (Skills Camps): portrait beam pair up left, stretch circle
   mid right, portrait handstand spot down left — a gentle zigzag */
.campframes--trio { min-height: 0; aspect-ratio: 1 / 1.35; }
.campframes--trio .campframes__it--a { background: linear-gradient(135deg, #9A66FF, #5E17EB); top: 0; left: 0; transform: rotate(-4deg); z-index: 2; }
.campframes--trio .campframes__it--b { background: linear-gradient(135deg, #58C7F5, #2F86E0); top: 27%; right: 0; width: 60%; transform: rotate(3deg); z-index: 3; }
.campframes--trio .campframes__it--c { background: linear-gradient(135deg, #FFB460, #FF7A00); bottom: 0; left: 5%; transform: rotate(4deg); z-index: 4; }
.campframes--quad .campframes__it--a { top: 1%;   left: 1%;  transform: rotate(-5deg); z-index: 2; }
.campframes--quad .campframes__it--b { top: 0;    right: 1%; transform: rotate(4deg);  z-index: 1; }
.campframes--quad .campframes__it--c { bottom: 0; left: 0;   transform: rotate(5deg);  z-index: 3; }
.campframes--quad .campframes__it--d { bottom: 1%; right: 0; transform: rotate(-4deg); z-index: 4; }
/* Auto-height section — only as tall as its content needs */
.section--auto { min-height: 0; padding-block: clamp(30px, 4vh, 50px); }
/* Camp rate boxes: centered title instead of a pill */
.camprate__title { text-align: center; font-weight: 900; font-size: 1.55rem; letter-spacing: -.01em; margin: 0 0 10px; }
.camprate--early .camprate__title { color: #fff; }
.camprate--std .camprate__title { color: var(--ink); }
.camprate__when { text-align: center; font-weight: 700; font-size: .95rem; margin: -2px 0 14px; opacity: .95; }
.camprate--std .camprate__when { color: var(--slate); opacity: 1; }
/* Camp info cards: action graphic to the left of the title, sized down */
.infocards { margin-top: clamp(36px, 5vw, 64px); }
.infocard .card__body { padding: 16px 18px; }
.infocard__body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: left; }
/* Illustrated header art filling the space above each info-card title */
.ihero { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; padding: 4px 2px 2px; }
/* 1 — Extended hours: horizontal echo of the Days & Times timeline */
.ihero--hours { gap: 4px; }
.ihero__cap { font-size: .64rem; font-weight: 800; color: var(--slate); flex: none; }
.hseg { height: 20px; border-radius: 6px; display: grid; place-items: center; }
.hseg--ext { flex: .7; color: #1D63C0; background: #fff; border: 2px solid #1D63C0; }
.hseg--core { flex: 3.6; background: linear-gradient(135deg, #58C7F5, #2F86E0); color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .01em; }
/* 2 — Sibling discount: first camper solid, siblings discounted */
.ihero--sibs { gap: 14px; align-items: flex-end; }
.sib { position: relative; display: block; }
.sib svg { width: 30px; height: 38px; display: block; }
.sib--first { color: var(--purple); }
.sib--off { color: #C9BEE8; }
.sib__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--lime); color: var(--ink); font-size: .56rem; font-weight: 900; font-style: normal; padding: 2px 6px; border-radius: 999px; box-shadow: 0 2px 6px rgba(32,27,51,.18); white-space: nowrap; }
/* 3 — Payment plans: three payments across the season */
.ihero--pay { position: relative; gap: 26px; }
.payline { position: absolute; left: 18%; right: 18%; top: 20px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255,122,0,.55) 0 5px, transparent 5px 10px); }
.pay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1; }
.pay__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFB460, #FF7A00); color: #fff; font-size: .8rem; font-weight: 900; box-shadow: 0 3px 8px rgba(255,122,0,.32); }
.pay small { font-size: .58rem; font-weight: 800; color: var(--slate); }
/* School's Out — mini month grid showing "only the days you need" */
.ihero--days .dgrid { display: grid; grid-template-columns: repeat(5, 14px); gap: 6px; }
.ihero--days .dgrid i { width: 14px; height: 14px; border-radius: 4px; background: rgba(32,27,51,.12); }
.ihero--days .dgrid i.on { background: linear-gradient(135deg, #58C7F5, #2F86E0); box-shadow: 0 2px 6px rgba(47,134,224,.35); }
/* School's Out — single flat-rate box */
.sorate { max-width: 360px; margin: 0 auto; background: linear-gradient(135deg, #58C7F5, #2F86E0); color: #fff; border-radius: var(--r-lg); padding: 24px 28px 26px; text-align: center; box-shadow: 0 18px 40px rgba(32,27,51,.16); }
.sorate .camprate__title { color: #fff; margin-bottom: 6px; }
.sorate__amt { font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; font-size: 4.2rem; line-height: 1.04; letter-spacing: .01em; }
.sorate__unit { font-size: 1.05rem; font-weight: 800; margin-top: 2px; opacity: .95; }
/* Cost glance card numerals */
.campfact__per { font-size: .95rem; font-weight: 800; color: var(--ink); margin-left: 0; }
.campfact__tax { font-size: .68rem; font-weight: 800; color: var(--ink); margin-left: 0; }
.infocard__txt { min-width: 0; }
.infocard .card__title { font-size: 1.02rem; margin: 0 0 3px; }
.infocard p { font-size: .9rem; color: var(--slate); margin: 0; line-height: 1.4; }
.infocard__opts { display: flex; flex-direction: column; gap: 4px; }
.infocard__opts b { color: var(--ink); font-weight: 900; }
/* Extended hours: options break to full card width so each fits on one line */
.infocard--ext .infocard__body { flex-wrap: wrap; }
.infocard--ext .infocard__opts { flex-basis: 100%; margin-top: 8px; font-size: .82rem; white-space: nowrap; }
/* Helpful planning numbers — quiet supporting note under the info cards */
.planning { max-width: 760px; margin: clamp(26px, 3.4vw, 40px) auto 0; text-align: center; }
.planning__head { font-weight: 900; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.planning__sub { color: var(--slate); font-weight: 600; font-size: .9rem; margin-top: 2px; }
.planning__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.planning__list li { font-size: .92rem; font-weight: 600; color: var(--slate); }
.planning__list li b { color: var(--ink); font-weight: 900; }
.planning__hit { background: var(--lime); border-radius: 999px; padding: 5px 16px; }
/* Day-flow cards fill with their time-of-day gradient on hover */
/* Day-flow cards light up on their own, left to right, 4s each (12s loop) */
.dayflow__card { position: relative; overflow: hidden; }
.dayflow__card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; z-index: 0;
  animation: dayflowFill 12s linear infinite;
}
.dayflow__card .card__body { position: relative; z-index: 1; }
.dayflow__card .card__title { animation: dayflowTitle 12s linear infinite; }
.dayflow__card .card__body p { animation: dayflowText 12s linear infinite; }
.dayflow__card:nth-child(1)::before { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.dayflow__card:nth-child(2)::before { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.dayflow__card:nth-child(3)::before { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
.dayflow__card:nth-child(2)::before, .dayflow__card:nth-child(2) .card__title, .dayflow__card:nth-child(2) .card__body p { animation-delay: 4s; }
.dayflow__card:nth-child(3)::before, .dayflow__card:nth-child(3) .card__title, .dayflow__card:nth-child(3) .card__body p { animation-delay: 8s; }
@keyframes dayflowFill  { 0% { opacity: 0 } 3% { opacity: 1 } 30% { opacity: 1 } 33.34% { opacity: 0 } 100% { opacity: 0 } }
@keyframes dayflowTitle { 0% { color: var(--ink) } 3% { color: #fff } 30% { color: #fff } 33.34% { color: var(--ink) } 100% { color: var(--ink) } }
@keyframes dayflowText  { 0% { color: var(--slate) } 3% { color: #fff } 30% { color: #fff } 33.34% { color: var(--slate) } 100% { color: var(--slate) } }
/* Frozen at card one while the section is off-screen (see main.js) */
.dayflow--off .dayflow__card::before,
.dayflow--off .dayflow__card .card__title,
.dayflow--off .dayflow__card .card__body p,
.dayflow--off .nf-car svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .dayflow__card::before, .dayflow__card .card__title, .dayflow__card .card__body p { animation: none; }
}

/* Parents' Night Out: three framed vertical photos overlapping in a zigzag */
.pnozz { position: relative; min-height: clamp(400px, 50vw, 560px); }
.pnozz__it { position: absolute; width: 56%; background: #fff; padding: 9px 9px 22px; border-radius: 14px; box-shadow: 0 18px 40px rgba(32,27,51,.22); }
.pnozz__it img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; }
/* same scroll-in unclip as the campframes polaroids */
.js .reveal .pnozz__it img { clip-path: inset(9% 9% 9% 9% round 8px); transition: clip-path 1.25s var(--ease); }
.js .reveal.is-in .pnozz__it img { clip-path: inset(0 0 0 0 round 8px); }
.pnozz__it--a { top: 0;    left: 0;   transform: rotate(-6deg); z-index: 1; background: linear-gradient(135deg, #FFB460, #FF7A00); }
.pnozz__it--b { top: 16%;  right: 0;  transform: rotate(5deg);  z-index: 2; background: linear-gradient(135deg, #C6EE2E, #9DB414); }
@media (max-width: 760px) { .pnozz { min-height: 118vw; } .pnozz__it { width: 60%; } }

/* PNO details band: brand-purple gradient bar, the key facts side by side */
/* PNO key facts — title-weight text across the white space, cost in the pricing-page gradient */
.pnofacts { padding: clamp(30px, 5vw, 54px) 0; }
.pnofacts__row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3.5vw, 44px); flex-wrap: wrap; text-align: center; }
.pnofacts__it { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; font-size: clamp(20px, 1.5rem + 0.6vw, 30px); letter-spacing: -0.02em; color: var(--ink); }
.pnofacts__it svg { color: var(--purple); flex: none; }
.pnofacts__link { color: inherit; text-decoration: none; border-bottom: 2.5px solid rgba(94,23,235,.22); transition: border-color .15s; }
.pnofacts__link:hover { border-bottom-color: var(--purple); }
.pnofacts__div { width: 2px; align-self: stretch; min-height: 34px; border-radius: 2px; background: var(--line); }
/* Cost wears the Lilita One blue gradient from the pricing page */
.pnofacts__it--price { align-items: baseline; }
.pnofacts__amt, .pnofacts__it--price small {
  font-family: 'Lilita One', Inter, sans-serif; font-weight: 400; letter-spacing: .01em;
  background: linear-gradient(180deg, #58AEF5 0%, #4438E0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pnofacts__amt { font-size: clamp(30px, 2rem + 1vw, 42px); }
.pnofacts__it--price small { font-size: .9rem; font-weight: 800; margin-left: 2px; }
.pnofacts__tax { font-family: Inter, sans-serif; font-weight: 700; font-size: .8rem; color: var(--slate); -webkit-text-fill-color: var(--slate); margin-left: 5px; }
.pnofacts__note { text-align: center; max-width: 620px; margin: 18px auto 0; color: var(--slate); font-weight: 600; font-size: 15px; }
.pnofacts__note a { color: var(--purple); text-decoration: none; font-weight: 800; }
.pnofacts__note a:hover { color: var(--purple-d); }
@media (max-width: 620px) { .pnofacts__div { display: none; } .pnofacts__row { gap: 14px 24px; } }
/* Summer camps: two gradient weekly-rate boxes */
.camprates { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: clamp(36px, 5vh, 64px) auto 0; }
.camprate { border-radius: var(--r-lg); padding: 26px 28px 28px; color: #fff; box-shadow: 0 18px 40px rgba(32,27,51,.16); }
/* Early bird is the prominent one: filled orange gradient + light-green pill */
.camprate--early { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.camprate--early .camprate__tag { background: #8AE6A0; color: #0F5130; }
/* Standard inverts: white fill, orange-gradient outline, black text, solid orange pill */
.camprate--std {
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, #FFB460, #FF7A00) border-box;
  border: 2.5px solid transparent; color: var(--ink);
}
.camprate--std .camprate__tag { background: linear-gradient(135deg, #FFB460, #FF7A00); color: #fff; }
.camprate--std .camprate__list li { border-top-color: rgba(32,27,51,.12); }
.camprate__tag { display: inline-block; background: rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 4px 14px; font-weight: 900; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.camprate__save { font-weight: 800; font-size: 1.05rem; margin: 12px 0 4px; }
.camprate__list { list-style: none; margin: 14px 0 0; padding: 0; }
.camprate__list li { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1.5px solid rgba(255,255,255,.28); font-weight: 600; }
/* Rate numerals wear the pricing page's Lilita One — white on the filled box, ink on the outlined one */
.camprate__list li b { font-family: 'Lilita One', Inter, sans-serif; font-size: 1.7rem; font-weight: 400; letter-spacing: .01em; }
.camprate__list li b small, .camprate__list li b .camprate__tax { font-family: Inter, sans-serif; }
.camprate__list li b small { font-size: .8rem; font-weight: 800; opacity: 1; margin-left: 1px; }
.camprate__tax { font-size: .62rem; font-weight: 800; opacity: 1; margin-left: 0; letter-spacing: 0; }
/* '/week+tax' reads as one connected suffix in a single tone */
.camprate--std .camprate__list li b small, .camprate--std .camprate__tax { color: var(--slate); }
.camprate--early .camprate__list li b small, .camprate--early .camprate__tax { color: rgba(255,255,255,.9); }
@media (max-width: 620px) { .camprates { grid-template-columns: 1fr; } }
/* Stay-tuned block */
.staytuned { text-align: center; max-width: 620px; margin: 0 auto; }
.staytuned__msg { font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.staytuned__sub { color: var(--slate); font-weight: 500; margin-top: 8px; }
/* Camp help bar */
/* Camp help — full-width bar across the bottom, no container box */
.camphelp-bar { background: #fff; border-top: 1px solid var(--line); padding: clamp(18px, 2.6vw, 26px) 20px; }
.camphelp-bar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px 20px; flex-wrap: wrap; }
.camphelp-bar__text { font-size: var(--step-0); font-weight: 800; color: var(--ink); }
.camphelp-bar .btn { text-decoration: none; }
/* inline variant: rides inside a page section (classes-page Adult Program) */
.camphelp-bar--inline { border-top: 0; margin-top: 20px; padding: clamp(14px, 2vw, 20px) 10px 0; background: transparent; }
/* Summer camp FAQ accordion width */
.campfaq { max-width: 760px; margin: clamp(6px, 1.5vh, 18px) auto 0; }

/* Contact page: inverse purple-gradient mail icon with the address centered to it */
.contact-email { display: flex; align-items: center; gap: 14px; }
.contact-email__ico { flex: none; width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg, var(--purple-2), var(--purple-d)); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(94,23,235,.24); }
.contact-email__ico svg { width: 26px; height: 26px; }
.contact-email a { font-weight: 800; font-size: 1.06rem; color: var(--purple); text-decoration: none; }
.contact-email a:hover { text-decoration: none; color: var(--purple-d); }

/* Full-bleed gradient section tones (camp pages) — white type, orange period */
.tone-greengrad { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.tone-bluegrad-sec { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
.tone-greengrad .h2, .tone-bluegrad-sec .h2 { color: #fff; }
.tone-greengrad .lede, .tone-bluegrad-sec .lede,
.tone-greengrad .staytuned__sub, .tone-bluegrad-sec .staytuned__sub { color: rgba(255,255,255,.95); }
.dot--tangerine { color: #FF7A00; }

/* Calendar page (non-solo rows): PNO cards with a poster act like the PNO-page
   slider — the card sizes to its one-line text and the poster hangs off the
   right edge with only a small overlap, never dictating the card's size */
.mgcal-up-row:not(.mgcal--solo .mgcal-up-row):has(.mgcal-up__poster) { display: flex; }
.mgcal-up-row:not(.mgcal--solo .mgcal-up-row):has(.mgcal-up__poster) > .mgcal-up { flex: 0 0 auto; width: 238px; }
.mgcal-up-row:not(.mgcal--solo .mgcal-up-row) > .mgcal-up:has(.mgcal-up__poster) { width: auto; padding-right: 30px; }
.mgcal-up-row:not(.mgcal--solo .mgcal-up-row) > .mgcal-up:has(.mgcal-up__poster) .mgcal-up__t,
.mgcal-up-row:not(.mgcal--solo .mgcal-up-row) > .mgcal-up:has(.mgcal-up__poster) .mgcal-up__sub { white-space: nowrap; }
/* Location names wear their gym's color everywhere they appear in calendar UI */
.mg-locc { font-weight: 800; }
/* in the day-popup meta line the location is plain colored text, not a chip */
.mgcal-pop__meta span.mg-locc, .mgcal-pop__specs .mg-locc {
  background: none; border: 0; padding: 0; font-size: inherit; font-weight: 800;
}
.mgcal-pop__meta span.mg-locc--ne, .mgcal-pop__specs .mg-locc--ne { color: var(--purple); }
.mgcal-pop__meta span.mg-locc--s, .mgcal-pop__specs .mg-locc--s { color: #1E9AE8; }
.mg-locc--ne { color: var(--purple); }
.mg-locc--s { color: #1E9AE8; }
/* Upcoming rail location filter pills */
.mgcal-locfilter { display: flex; gap: 10px; margin: 2px 0 6px; }
.mgcal-locfilter--center { justify-content: center; margin-bottom: 18px; }
/* on the preschool page's colored band the active pill wears a white ring so it pops */
.mgcal-locfilter--center button[data-uploc].is-on { border-color: #fff; }
.mgcal-locfilter button {
  font: inherit; font-weight: 800; font-size: .86rem; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; background: #fff; transition: all .18s var(--ease);
}
.mgcal-locfilter [data-uploc="Northeast"] { border: 2.5px solid var(--purple); color: var(--purple); }
.mgcal-locfilter [data-uploc="South"] { border: 2.5px solid #1E9AE8; color: #1E9AE8; }
.mgcal-locfilter [data-uploc="Northeast"].is-on { background: var(--purple); color: #fff; }
.mgcal-locfilter [data-uploc="South"].is-on { background: #1E9AE8; color: #fff; }

/* What matters to us: gradient title bands (no icons) */
.promisecard { overflow: hidden; display: flex; flex-direction: column; }
.promise__head { padding: 20px 22px 16px; display: flex; align-items: center; min-height: 74px; }
.promise__head h3 { color: #fff; font-weight: 900; letter-spacing: -.01em; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.1; margin: 0; }
.promise__head--blue   { background: linear-gradient(135deg, #5BC8FF, #1E9AE8); }
.promise__head--orange { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.promise__head--green  { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.promise__head--purple { background: linear-gradient(135deg, #9A66FF, #7B3CF5); }

/* Fun section: coach photo wears the orange gradient frame and a slight tilt
   (rotation lives on the media wrapper — the ph itself carries the parallax) */
.fun-sec .split__media.is-in { transform: rotate(2deg); }
.fun-sec .ph--img { background: linear-gradient(135deg, #FFB460, #FF9127); }
.fun-sec .ph--img img { inset: 10px 10px 22px; width: calc(100% - 20px); height: calc(100% - 32px); border-radius: 12px; }
/* What-matters cards: white band titles, no outline — matching More ways to play,
   including its hover lift + shadow. The high-specificity selectors below beat
   .js .reveal.is-in's transform:none (which had been silently flattening the
   progsq cards' own authored lift); the hover-scoped durations make the lift
   snappy on the way in without touching the slow reveal entrance. */
.promisecard { border: 0; }
.promisecard:hover { box-shadow: 0 20px 44px rgba(105,105,120,.26); }
.js .reveal.is-in.progsq__card:hover,
.js .card.promisecard.reveal.is-in:hover {
  transform: translateY(-4px);
  transition-duration: .2s, .2s, .2s;
}
.promisecard .promise__head h3 { color: #fff; }

/* School's Out day flow: cars bookend three cards (morning/midday/afternoon) */
.nightflow--day { grid-template-columns: auto 1fr 1fr 1fr auto; }
.nightflow--day .dayflow__card:nth-child(2)::before { background: linear-gradient(135deg, #FFB460, #FF7A00); }
.nightflow--day .dayflow__card:nth-child(3)::before { background: linear-gradient(135deg, #C6EE2E, #9DB414); }
.nightflow--day .dayflow__card:nth-child(4)::before { background: linear-gradient(135deg, #58C7F5, #2F86E0); }
/* strict sequence on a 14s loop: the drop-off car pulses FIRST (0–2.24s), then
   morning → midday → afternoon light up in turn (3.6s windows: .5s ramp, 2.6s
   hold, .5s fade — 3.571%/22.143%/25.714% of 14s). The pickup car pulses while
   the afternoon card HOLDS its color (10.2–12.44s inside the 10s–12.6s hold),
   and the fade waits for it to settle — a color change never shares a moment
   with a car growing or shrinking. */
@keyframes daySeqFill  { 0% { opacity: 0 } 3.571% { opacity: 1 } 22.143% { opacity: 1 } 25.714% { opacity: 0 } 100% { opacity: 0 } }
@keyframes daySeqTitle { 0% { color: var(--ink) } 3.571% { color: #fff } 22.143% { color: #fff } 25.714% { color: var(--ink) } 100% { color: var(--ink) } }
@keyframes daySeqText  { 0% { color: var(--slate) } 3.571% { color: #fff } 22.143% { color: #fff } 25.714% { color: var(--slate) } 100% { color: var(--slate) } }
.nightflow--day .nf-car svg { animation-duration: 14s; }
.nightflow--day .dayflow__card::before { animation-name: daySeqFill; animation-duration: 14s; }
.nightflow--day .dayflow__card .card__title { animation-name: daySeqTitle; animation-duration: 14s; }
.nightflow--day .dayflow__card .card__body p { animation-name: daySeqText; animation-duration: 14s; }
.nightflow--day .dayflow__card:nth-child(2)::before, .nightflow--day .dayflow__card:nth-child(2) .card__title, .nightflow--day .dayflow__card:nth-child(2) .card__body p { animation-delay: 2.3s; }
.nightflow--day .dayflow__card:nth-child(3)::before, .nightflow--day .dayflow__card:nth-child(3) .card__title, .nightflow--day .dayflow__card:nth-child(3) .card__body p { animation-delay: 5.9s; }
.nightflow--day .dayflow__card:nth-child(4)::before, .nightflow--day .dayflow__card:nth-child(4) .card__title, .nightflow--day .dayflow__card:nth-child(4) .card__body p { animation-delay: 9.5s; }
.nightflow--day .nf-car--out svg { animation-delay: 10.2s; }
/* the off-screen freeze and reduced-motion opt-out must still beat the --day
   animation-name overrides above (they outrank the generic rules by order) */
.nightflow--day.dayflow--off .dayflow__card::before,
.nightflow--day.dayflow--off .dayflow__card .card__title,
.nightflow--day.dayflow--off .dayflow__card .card__body p { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nightflow--day .dayflow__card::before, .nightflow--day .dayflow__card .card__title, .nightflow--day .dayflow__card .card__body p { animation: none; }
}
@media (max-width: 860px) { .nightflow--day { grid-template-columns: 1fr; } }

/* phones: once the road fades after landing, the stop's own rule element
   becomes the persistent underline (road's final segment played that role) */
@media (max-width: 720px){
  .journey__stop .journey__rule { transition: background .4s ease; }
  .journey__stop.jrule-on .journey__rule { background: var(--purple); }
  .stop--2.jrule-on .journey__rule { background: var(--blue); }
  .stop--3.jrule-on .journey__rule { background: var(--orange); }
  .stop--4.jrule-on .journey__rule { background: #C6EE2E; }
  .journey__stop.jrule-on .journey__rule::after { opacity: 1; }
}

/* ---- Journey on phones: one viewport per stop, no vertical scrolling ----
   Subtext drops to card-text size and the two skills lists collapse into
   tap-to-open dropdowns (initialized in main.js; desktop unchanged). */
@media (max-width: 720px){
  /* end above the fixed tool bar so the nav arrows stay reachable */
  .journey { height: auto; min-height: calc(100dvh - var(--header-h) - 60px); }
  .journey__desc { font-size: .9rem; line-height: 1.42; margin-block: 8px 10px; }
  .journey__panel .btn--lg { margin-top: 6px; } /* intro/finale CTA breathes like the title-subtext gap */
  .journey__inner { padding-block: 12px; }
  .journey__num { font-size: .72rem; }
  .journey__title { font-size: 1.5rem; }
  .journey__age { font-size: .8rem; }
  .levels__name { font-size: 1.05rem; }
  .levels__tagline { font-size: .8rem; }
  .levels__chip { font-size: .7rem; padding: 4px 9px; }
  .levels__lbl { font-size: .68rem; }
  .levels__more { font-size: .85rem; margin-top: 6px; }
  .journey__step { margin-top: 8px; }
  .journey__nav { width: 44px; height: 44px; }
  .levels__card { padding: 12px 14px; }
  .levels__cols { gap: 8px; margin-top: 8px; }
  .levels__col.is-collapsed .levels__h { display: flex; align-items: center; justify-content: flex-start; gap: 7px; cursor: pointer; margin: 0; padding: 7px 0; text-align: left; }
  .levels__col.is-collapsed .levels__h::after { content: ""; width: 13px; height: 13px; flex: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E17EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
    transition: transform .2s var(--ease); }
  .levels__col.is-collapsed.is-open .levels__h::after { transform: rotate(180deg); }
  .levels__col.is-collapsed ul { display: none; }
  .levels__col.is-collapsed.is-open ul { display: block; margin-top: 4px; }
}

/* ---- Touch devices: hover states must equal rest states -----------------
   iOS withholds the click ("takes two taps") on any element whose :hover
   changes content visibility. Every hover face-swap below is neutralized
   where hover isn't real; desktop pointers keep the full effect. */
@media (hover: none) {
  .btn--primary:hover::after, .btn--accent:hover::after,
  .btn--cap-orange:hover::after, .btn--cap-blue:hover::after, .btn--cap-lime:hover::after,
  .btn--white-grad:hover::before, .pcheck__dl:hover::after { opacity: 0; }
  .btn--primary:hover, .btn--primary:hover svg,
  .btn--accent:hover, .btn--accent:hover svg { color: #fff; background-image: none; -webkit-text-fill-color: currentColor; }
  .phero--dualgym .btn--primary:hover { color: #fff; }
  .btn--cap-orange:hover { color: #fff; }
  .btn--cap-blue:hover { color: #fff; }
  .btn--cap-lime:hover { color: #fff; }
  .progsq__more:hover { opacity: .92; }
}

/* ---- Phones: bottom toolbar slides away while the journey section is on
   screen (class set by main.js), giving its one-viewport stops full height */
@media (max-width: 720px) {
  .mg-toolbar { transition: transform .3s var(--ease); }
  body.mg-journey-hidebar .mg-toolbar { transform: translateY(130%); }
}

/* ---- Journey card "Skills & class details" dropdown (phones only) ---- */
.levels__skillstog { display: none; }
@media (max-width: 720px) {
  .levels__skillstog { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font: inherit; font-weight: 800; font-size: .92rem; color: var(--purple);
    background: none; border: 0; padding: 6px 0; cursor: pointer; }
  .levels__skillstog svg { transition: transform .2s var(--ease); }
  .levels__card.is-skills-open .levels__skillstog svg { transform: rotate(180deg); }
  .levels__card:not(.is-skills-open) .levels__cols,
  .levels__card:not(.is-skills-open) .levels__more { display: none; }
  .levels__card .levels__cols { margin-top: 6px; }
}