/* GENERATED by scripts/build-pages.py from the <style> block in
   src/index.html. Do not edit by hand. */
/* ============================================================
   Precision Gymnastics — marketing site
   Built on the Precision design system (styles.css + tokens/).
   Content sourced from precision-gym.net, 2026-08-15.
   ============================================================ */
/* ---- Readability override ----
   The design system's scale runs small for a marketing site read by parents on
   phones: body copy landed at 14px and secondary text at 12px. This raises the
   whole ramp locally — the shared tokens/typography.css is untouched, so the
   design system keeps its own values. Because most card copy is set with
   var(--text-sm), lifting that one step from 14px to 16px does most of the work.
   ---------------------------------------------------------------- */
:root {
  --text-xs:   0.8125rem; /* 13 — was 12 */
  --text-sm:   1rem;      /* 16 — was 14 */
  --text-base: 1.125rem;  /* 18 — was 16 */
  --text-lg:   1.3125rem; /* 21 — was 18 */
  --text-xl:   1.5rem;    /* 24 — was 22 */
  --text-2xl:  1.875rem;  /* 30 — was 28 */
  --text-3xl:  2.5rem;    /* 40 — was 36 */
  --text-4xl:  3.25rem;   /* 52 — was 48 */
  --text-5xl:  4.25rem;   /* 68 — was 64 */
  --text-6xl:  5.75rem;   /* 92 — was 88 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--text-link); }

/* ---- Type primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.d1 { font-size: clamp(2.75rem, 8vw, var(--text-6xl)); }
.d2 { font-size: clamp(2rem, 5.5vw, var(--text-4xl)); }
.d3 { font-size: clamp(1.5rem, 4vw, var(--text-3xl)); }
.d4 { font-size: var(--text-2xl); }
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}
.eyebrow.on-dark { color: var(--gold-300); }
.lede { font-size: var(--text-lg); color: var(--text-muted); max-width: 62ch; }
.muted { color: var(--text-muted); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-xl { max-width: var(--container-xl); }
.section { padding: var(--space-10) 0; }
.section-sm { padding: var(--space-8) 0; }
.section-head { max-width: 70ch; margin-bottom: var(--space-7); }
.grid { display: grid; gap: var(--space-5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Buttons (Button.jsx idiom) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  font-family: var(--font-ui); font-weight: 700; font-style: italic;
  font-size: var(--text-base); text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
  border-radius: var(--radius-md); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-lg { height: 56px; padding: 0 30px; font-size: var(--text-lg); }
.btn-sm { height: 38px; padding: 0 16px; font-size: var(--text-sm); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); box-shadow: var(--shadow-brand); }
.btn-accent  { background: var(--color-accent);  color: var(--color-on-accent);  border-color: var(--color-accent);  box-shadow: var(--shadow-accent); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--border-default); }
.btn-ghost   { background: transparent; color: var(--color-primary); }
.btn-on-dark { background: var(--white); color: var(--blue-700); border-color: var(--white); box-shadow: var(--shadow-lg); }
.btn-outline-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); box-shadow: none; }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--radius-pill); }

/* ---- Badge (Badge.jsx idiom) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
  border-radius: var(--radius-pill); white-space: nowrap;
  color: var(--blue-700); background: var(--blue-50);
}
.badge-accent  { color: var(--red-700);   background: var(--red-50); }
.badge-gold    { color: var(--gold-700);  background: var(--gold-100); }
.badge-neutral { color: var(--slate-600); background: var(--slate-100); }
.badge-solid-accent { color: #fff; background: var(--red-500); }
.badge-solid-gold   { color: var(--ink-900); background: var(--gold-500); }

/* ---- Card (Card.jsx idiom) ---- */
.card {
  position: relative;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-pad-md { padding: var(--space-5); }
/* Cards in a row whose CTA should share one baseline regardless of how much
   copy sits above it. Beats .mt-4 on specificity, so the button still clears
   the text above by the paragraph's own bottom margin. */
.card-btm { display: flex; flex-direction: column; align-items: stretch; }
.card-btm > .btn { margin-top: auto; }
/* Grid stretches these to equal height; the inner block must fill that height
   so `.dev { margin-top: auto }` can bottom-align the CTA across every card. */
.card-flush { padding: 0; display: flex; flex-direction: column; }
.card-flush > .card-bar { flex: none; }
.card-flush > .card, .card-flush > div:not(.card-bar) { flex: 1; }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-rail-blue { border-top: 4px solid var(--blue-500); }
.card-rail-red  { border-top: 4px solid var(--red-500); }
.card-rail-gold { border-top: 4px solid var(--gold-500); }
.card-bar { height: 8px; }
.bar-blue { background: var(--blue-500); }
.bar-red  { background: var(--red-500); }
.bar-gold { background: var(--gold-500); }

/* ---- Header ---- */
/* ---- Utility bar ----
   Deliberately NOT sticky. The masthead below it is, so the bar scrolls away
   and the visitor keeps the nav without losing screen to a contact strip they
   have already read.

   blue-700 rather than the brand blue-500 so the white masthead reads as
   separate rather than as a continuation of the same band. Measured against
   blue-700: white text 11.4:1 (AA needs 4.5), gold icons 6.3:1 (non-text
   needs 3), gold-300 on hover 8.1:1. */
.topbar { background: var(--blue-700); color: #fff; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 38px;
}
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
.topbar-item, .topbar-social {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: #fff; text-decoration: none;
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
  /* Fill the bar vertically so the whole strip is tappable, not just the
     text's own line box — the number sat at 26px against 38px of bar. */
  min-height: 38px;
}
.topbar-item:hover, .topbar-social:hover { color: var(--gold-300); }
.topbar-item:hover .topbar-icon, .topbar-social:hover .topbar-icon { fill: var(--gold-300); }
.topbar-icon { width: 17px; height: 17px; fill: var(--gold-500); flex: none; }
/* Social links are icon-only, so give them a bigger hit area than the glyph —
   44px is the WCAG target size and roughly a fingertip. */
.topbar-social { min-width: 44px; min-height: 38px; justify-content: center; }
.topbar-item:focus-visible, .topbar-social:focus-visible {
  outline: 2px solid var(--gold-300); outline-offset: 2px; border-radius: 4px;
}

/* The three icons sit closer together on a phone so the number keeps the room
   it needs — it is the only text in the bar and the thing most likely to be
   tapped. */
@media (max-width: 620px) {
  .topbar-right { gap: var(--space-2); }
}
@media (max-width: 380px) {
  .topbar-item span { font-size: var(--text-xs); }
}

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--border-subtle);
}
.masthead-inner { display: flex; align-items: center; gap: var(--space-4); height: 76px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* The real wordmark ships on a white ground (no alpha), so it sits directly
   on the light masthead and on a white chip in the dark footer. */
.wordmark { display: block; height: 42px; width: auto; flex: none; }
/* The footer runs on brand blue, so the wordmark ships as a white,
   transparent-ground variant and sits directly on it — no white chip. */
.foot-logo { display: inline-block; }
.foot-logo img { display: block; height: 44px; width: auto; }
/* Nav mirrors precision-gym.net: Home · Programs▾ · Team · Parties & Events▾ ·
   About Us▾. Items stretch to full masthead height so there is no dead gap
   between a trigger and its panel on hover. */
.nav { display: flex; gap: 2px; align-items: stretch; }
.nav > a, .navtop {
  display: flex; align-items: center;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-body); text-decoration: none; white-space: nowrap;
  padding: 8px 10px; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navtop { appearance: none; border: 0; background: transparent; cursor: pointer; gap: 6px; line-height: 1; }
.navtop::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav > a:hover, .navtop:hover { background: var(--blue-50); color: var(--blue-600); }
.nav > a.active, .navtop.active { color: var(--blue-600); background: var(--blue-50); }
.navitem { position: relative; display: flex; align-items: stretch; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 232px; z-index: 60;
  background: var(--white); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 6px; display: none;
}
@media (hover: hover) { .navitem:hover .dropdown { display: block; } }
.navitem:focus-within .dropdown,
.navitem.open .dropdown { display: block; }
.navitem.open > .navtop::after { transform: rotate(-135deg); margin-top: 2px; }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  color: var(--text-body); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown a:hover { background: var(--blue-50); color: var(--blue-600); }
.dropdown a.active { background: var(--blue-50); color: var(--blue-600); }
.dropdown hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 6px 8px; }
.nav-toggle { display: none; }
@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .masthead.open .nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 76px;
    max-height: calc(100vh - 76px); overflow-y: auto;
    background: var(--white); border-bottom: 1.5px solid var(--border-subtle);
    padding: var(--space-4) var(--gutter) var(--space-5); gap: 2px;
    box-shadow: var(--shadow-lg);
  }
  /* Groups become click-to-expand accordions rather than floating panels. */
  .masthead.open .navitem { display: block; }
  .masthead.open .navtop { width: 100%; justify-content: space-between; padding: 12px; font-size: var(--text-base); }
  .masthead.open .nav > a { padding: 12px; font-size: var(--text-base); }
  .masthead.open .dropdown {
    position: static; min-width: 0; display: none;
    border: 0; box-shadow: none; border-radius: 0;
    padding: 0 0 var(--space-2) var(--space-4);
    border-left: 2px solid var(--border-subtle); margin-left: 12px;
  }
  .masthead.open .navitem.open .dropdown { display: block; }
  .masthead.open .dropdown a { padding: 10px 12px; }
}
.hdr-cta { display: flex; gap: var(--space-2); }
@media (max-width: 620px) { .hdr-cta .btn.desk-only { display: none; } }
@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-4); }
  .masthead-inner { gap: var(--space-3); }
  .wordmark { height: 34px; }
  .hdr-cta { gap: 6px; }
  .hdr-cta .btn { padding: 0 12px; font-size: var(--text-xs); }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  /* All three stops are the logo blue #1850a0 — only the alpha varies, so the
     wash never drifts toward navy. */
  background:
    linear-gradient(150deg, rgba(24,80,160,0.60) 0%, rgba(24,80,160,0.52) 55%, rgba(24,80,160,0.66) 100%),
    url('assets/photos/home-2.webp') center / cover no-repeat;
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -14%; top: -34%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,40,40,0.22), transparent 66%);
  pointer-events: none;
}
/* Scrim under the copy column only — keeps the headline and body legible
   while the gym photo stays open on the right. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(24,80,160,0.72) 0%, rgba(24,80,160,0.50) 34%, rgba(24,80,160,0.12) 62%, transparent 78%);
}
.hero .hero-sub { text-shadow: 0 1px 3px rgba(10,34,67,0.50); }
.hero .display { text-shadow: 0 2px 10px rgba(10,34,67,0.38); }
/* Vertical only — the shared .wrap rule owns the horizontal padding, and a
   `padding` shorthand here would zero it out and jam the copy against the edge. */
.hero-inner { position: relative; z-index: 1; padding-top: var(--space-10); padding-bottom: var(--space-9); }
.hero .display { color: var(--white); }
.hero-sub { font-size: var(--text-lg); color: rgba(255,255,255,0.9); max-width: 56ch; margin-top: var(--space-4); }
.hero-cta { margin-top: var(--space-6); }

/* ---- Page banner (interior pages) ---- */
.banner {
  background: linear-gradient(150deg, var(--blue-500), var(--blue-600));
  background-size: cover; background-position: center;
  color: var(--white); padding: var(--space-9) 0 var(--space-8);
}
.banner-short { padding: var(--space-8) 0 var(--space-7); }
.banner .display { color: var(--white); }
.banner p { color: rgba(255,255,255,0.88); max-width: 62ch; margin-top: var(--space-4); }

/* ---- Developmental callouts ----
   A "what this builds" block appears on every class card and program page so
   the developmental case is attached to a specific age, not just asserted. */
.dev {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px dashed var(--border-default);
}
.dev-label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
}
.dev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-chips span {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs);
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--blue-50); color: var(--blue-700); white-space: nowrap;
}
.dev-chips.on-dark span { background: rgba(255,255,255,0.16); color: #fff; }
.dev-label.on-dark { color: var(--gold-300); }

/* Domain cards — the three developmental domains on the home page */
.domain { display: flex; flex-direction: column; gap: var(--space-3); }
.domain-n {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: var(--text-3xl); line-height: 1; color: var(--blue-400);
}
/* Age-stage ladder */
.stage {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; border-top: 1.5px solid var(--border-subtle);
  align-items: start;
}
.stage:last-child { border-bottom: 1.5px solid var(--border-subtle); }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: var(--space-3); } }
.stage-age {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: var(--text-xl); line-height: 1.05;
  color: var(--color-accent);
}
.stage-age small {
  display: block; font-family: var(--font-ui); font-style: normal;
  font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-wider);
  color: var(--text-faint); margin-top: 4px;
}

/* ---- Schedule page ----
   Mirrors techniquegym.com/schedule: a status bar, jump chips, info notes, then
   one card per program holding class rows — facts on the left, day columns of
   individual time chips on the right. */
/* Two-column shell: a sticky rail of section links beside the schedule cards.
   Collapses to a normal stacked block below 1000px. */
.sched-layout {
  display: grid; grid-template-columns: 248px 1fr;
  gap: var(--space-7); align-items: start;
  padding-top: var(--space-5);
}
.sched-rail { position: sticky; top: 96px; }
@media (max-width: 1000px) {
  .sched-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .sched-rail { position: static; }
}
.rail-card {
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.rail-note {
  font-size: var(--text-sm); color: var(--text-muted);
  margin: var(--space-3) 0 var(--space-4);
}
/* The rail is narrower than this label, and .btn is nowrap by default at
   desktop widths — let it wrap rather than spill past the rounded edges. */
.rail-card .btn {
  white-space: normal; text-align: center; line-height: 1.2;
  height: auto; min-height: 38px; padding-top: 10px; padding-bottom: 10px;
}
.jumpnav {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.jumpnav .jump {
  width: 100%; text-align: left; border: 0; background: transparent;
  border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
}
.jumpnav .jump:hover { background: var(--blue-50); color: var(--blue-600); }
.jumpnav .jump.active {
  background: var(--blue-50); color: var(--blue-600);
  border-left-color: var(--blue-500);
}
@media (max-width: 1000px) {
  .jumpnav { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .jumpnav .jump {
    width: auto; border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill); padding: 9px 17px;
  }
  .jumpnav .jump.active { border-color: var(--blue-200); }
}

.sched-bar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5) 0;
}
.sched-updated {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--success-bg); color: #14724f;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.sched-bar .bar-note { color: var(--text-muted); font-size: var(--text-sm); }
.sched-bar .btn { margin-left: auto; }
@media (max-width: 700px) { .sched-bar .btn { margin-left: 0; width: 100%; } }

.jumpbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-5); }
.jump {
  appearance: none; cursor: pointer;
  padding: 9px 17px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-subtle); background: var(--surface-card);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  color: var(--text-body); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.jump:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-200); }

.infonotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.infonote {
  display: flex; gap: var(--space-3);
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
  font-size: var(--text-sm); color: var(--text-body);
}
.infonote .ico {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--slate-400); color: var(--slate-500);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; line-height: 1;
}

.schedcard {
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: var(--space-7);
  scroll-margin-top: 96px;
}
.schedcard.acc-blue { border-top: 4px solid var(--blue-500); }
.schedcard.acc-red  { border-top: 4px solid var(--red-500); }
.schedcard.acc-gold { border-top: 4px solid var(--gold-500); }
.schedcard-head {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
}
.schedcard-head h2 { margin: 0; }
.schedcard-sub {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}
.schedcard-count {
  margin-left: auto;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  color: var(--text-faint);
}
.portal-strip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-6);
  background: var(--red-50);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  color: var(--red-700); text-decoration: none;
}
.portal-strip:hover { background: var(--red-100); }
.portal-strip .arrow { margin-left: auto; }

.srow {
  display: grid; grid-template-columns: 268px 1fr; gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.srow:first-of-type { border-top: 0; }
@media (max-width: 820px) { .srow { grid-template-columns: 1fr; gap: var(--space-4); } }
.sname {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: var(--text-xl); line-height: 1.05;
  color: var(--text-strong); margin: 0;
}
.sbadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.smeta {
  margin-top: 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  color: var(--text-muted);
}
/* Scoped name on purpose: a bare `.price` collides with the large display-type
   rule used by the party pricing cards. */
.sclass-price { color: var(--color-accent); }

.days { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.day { min-width: 82px; }
.day-label {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--color-accent); margin-bottom: 9px;
}
.chips-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.timechip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 13px; white-space: nowrap;
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); box-shadow: var(--shadow-xs);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  color: var(--text-strong);
}
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rate-table th, .rate-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
}
.rate-table th {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--text-faint);
}
.rate-table td { font-weight: 600; }
.rate-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---- Media ---- */
.media {
  display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--surface-sunken);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r43  { aspect-ratio: 4 / 3; }
.r169 { aspect-ratio: 16 / 9; }
.r11  { aspect-ratio: 1 / 1; }
.r32  { aspect-ratio: 3 / 2; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

/* ---- Looping clips ("See it in action") ----
   Mostly portrait phone video, so the frame is 9:16. Card width comes from the
   container, capped at 262px: four across must fit the container's content
   width (1072px at desktop), and a fixed 262px card needed 1120px, so the
   fourth wrapped onto a second row below the fold and never played. Fewer
   cards stay the same width and sit centred, because three portrait clips
   stretched across a full row would be 350px wide and 620px tall. A landscape
   clip (.wide) takes two columns' worth. */
.clips { --clip-w: min(262px, calc((100% - 3 * var(--space-5)) / 4)); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-5); }
.clip { margin: 0; width: var(--clip-w); }
.clip.wide { width: calc(var(--clip-w) * 2 + var(--space-5)); }
.clip-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
.clip.wide .clip-frame { aspect-ratio: 16 / 9; }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
/* Always visible, never hover-only: touch and keyboard users have no hover,
   and an auto-moving clip needs a stop control that can actually be found. */
.clip-toggle { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(13,46,89,.84); color: #fff; }
.clip-toggle:hover { background: var(--blue-500); }
.clip-toggle:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; }
.clip-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.clip-toggle .i-pause { display: none; }
.clip.is-playing .clip-toggle .i-play { display: none; }
.clip.is-playing .clip-toggle .i-pause { display: block; }
/* Two across from tablet down. Four 145px-wide cards in a 650px column is
   too small to read what the clip shows. */
@media (max-width: 860px) {
  .clips { gap: var(--space-3); }
  .clip { width: calc(50% - var(--space-3) / 2); }
  .clip.wide { width: 100%; }
}
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery .media { box-shadow: var(--shadow-sm); }
.card-photo { display: block; aspect-ratio: 16 / 10; background: var(--surface-sunken); overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Front doors ---- */
.door {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.door:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.door:hover img { transform: scale(1.04); }
.door .card-photo img { transition: transform var(--dur-slow) var(--ease-out); }
.door-body { padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); flex: 1; }
.door-top { display: block; height: 6px; border-radius: var(--radius-pill); width: 56px; flex: none; }

/* ---- Class list ---- */
.klass { display: flex; flex-direction: column; gap: var(--space-3); }
/* Top slot holds the age badge alone, so the class name sits at the same
   height on every tile in a row. Secondary descriptors move to .klass-tags,
   directly beneath the class length. */
.klass-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.klass-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.klass-meta {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.meta-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--border-subtle); padding-top: 6px;
  font-size: var(--text-sm); font-weight: 600;
}
.meta-row dt {
  color: var(--text-faint); text-transform: uppercase;
  font-size: var(--text-xs); letter-spacing: 0.06em; font-family: var(--font-ui);
  margin: 0;
}
.meta-row dd { margin: 0; color: var(--text-body); text-align: right; }

/* ---- Price card ---- */
.price {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: var(--text-4xl); line-height: 1; color: var(--blue-500);
}
.price-note { font-size: var(--text-sm); color: var(--text-muted); }
.tick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tick li { position: relative; padding-left: 26px; font-size: var(--text-sm); }
.tick li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 8px; border-left: 2.5px solid var(--green-500);
  border-bottom: 2.5px solid var(--green-500); transform: rotate(-45deg);
}
.popular { outline: 3px solid var(--gold-500); outline-offset: -3px; }

/* ---- Split feature ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }
.slab {
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--blue-500), var(--blue-600));
  color: var(--white); padding: var(--space-8);
  box-shadow: var(--shadow-brand);
}
.slab .display { color: var(--white); }
.slab-alt { background: linear-gradient(145deg, var(--red-500), var(--red-700)); box-shadow: var(--shadow-accent); }

/* ---- Facility chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  color: var(--text-body);
}
/* Darkens rather than lightens its ground. These sit on the red slab, where a
   white wash lifted the background to 4.28:1 behind white text; tinting down
   takes it to 5.7:1 and the border still reads the chip as a pill. */
.chip-dark { background: rgba(0,0,0,0.10); border-color: rgba(255,255,255,0.32); color: #fff; }

/* ---- FAQ ---- */
details.faq {
  background: var(--surface-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
details.faq + details.faq { margin-top: var(--space-3); }
details.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-base);
  color: var(--text-strong); display: flex; justify-content: space-between; gap: var(--space-4);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--color-accent); font-size: var(--text-xl); line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }

/* ---- CTA band ---- */
.band {
  background: var(--surface-inverse); color: var(--white);
  border-radius: var(--radius-xl); padding: var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  align-items: center; justify-content: space-between;
}
.band .display { color: var(--white); }

/* ---- Footer ---- */
.foot { background: var(--blue-500); color: rgba(255,255,255,0.82); margin-top: var(--space-10); }
/* Five columns: brand, Programs, More, Enroll, Areas we serve. The brand
   column is widest because it carries the logo, address and phone. */
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--space-6); padding: var(--space-9) 0 var(--space-7); }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot h4 {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--gold-300); margin: 0 0 var(--space-4);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { color: rgba(255,255,255,0.82); text-decoration: none; font-size: var(--text-sm); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-base {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: var(--space-5) 0; font-size: var(--text-xs);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}

/* ---- Utility ---- */
.page { display: none; }
.page.active { display: block; }
.center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.note {
  background: var(--blue-50); border-left: 4px solid var(--blue-500);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm); color: var(--ink-700);
}
.note-gold { background: var(--gold-100); border-left-color: var(--gold-500); }
/* Grid/flex children default to min-width:auto, so a nowrap button can push a
   column wider than the viewport. */
.grid > *, .split > *, .sched-layout > *, .srow > * { min-width: 0; }

/* Narrow screens: let the long CTA labels wrap instead of forcing overflow. */
@media (max-width: 560px) {
  .btn {
    white-space: normal; text-align: center; line-height: 1.2;
    height: auto; min-height: 46px;
    padding-top: 11px; padding-bottom: 11px;
  }
  .btn-lg { min-height: 56px; font-size: var(--text-base); }
  .btn-sm { min-height: 38px; }
  .slab { padding: var(--space-6); }
  .band { padding: var(--space-6); }
  .card { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Charter — the acknowledgement block that separates identity fields from
   the ten policies a parent has to initial. */
.ackhead { border-top: 1px solid var(--color-border); margin: var(--space-7) 0 var(--space-5); padding-top: var(--space-5); }
.ackhead h3 { margin-bottom: var(--space-2); }
.policygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.policygrid > * { min-width: 0; }

/* Long-form legal / policy copy. */
.prose { max-width: 68ch; }
.prose h3 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--text-2xl); margin: var(--space-8) 0 var(--space-3); }
.prose h4 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose li { font-size: var(--text-base); line-height: 1.7; }
.prose ul { padding-left: 1.25rem; margin: var(--space-3) 0; }
.prose li { margin-bottom: var(--space-2); }
.prose .updated { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); }
.joblist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.joblist > * { min-width: 0; }
.jobrole { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-surface); }
.jobrole h4 { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.jobrole p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* Forms: waivers and the employment application. */
.formcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); max-width: 760px; }
.fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); }
.fieldgrid > * { min-width: 0; }
.field { display: flex; flex-direction: column; margin-bottom: var(--space-5); }
.field > label { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); margin-bottom: 6px; }
.field .hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text);
  background: var(--white); border: 2px solid var(--color-border); border-radius: var(--radius-md);
  padding: 11px 13px; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); }

/* One visible focus indicator for everything keyboard-reachable. Border colour
   alone is not enough — it is a colour-only cue and it disappears entirely on
   links and buttons. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the blue bands and photo banners a blue ring would vanish. */
.banner a:focus-visible, .banner button:focus-visible,
.slab a:focus-visible, .slab button:focus-visible,
.hero a:focus-visible, .hero button:focus-visible,
.foot a:focus-visible {
  outline-color: var(--white);
}

/* Bypass block: first tab stop on every page, visible only once focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--color-primary);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
.field .req { color: var(--color-accent); }
.legalbox { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); padding: var(--space-5); max-height: 340px; overflow-y: auto; margin-bottom: var(--space-5); }
.legalbox h4 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.03em; margin: var(--space-4) 0 var(--space-2); }
.legalbox h4:first-child { margin-top: 0; }
.legalbox p { font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-3); }
.checkrow { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--space-5); }
.checkrow input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--blue-500); }
.checkrow label { font-size: var(--text-sm); line-height: 1.6; }
.formstatus { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); display: none; }
.formstatus.ok { display: block; background: #e8f5ec; border-left: 4px solid #1c8b4b; color: #14532d; }
.formstatus.err { display: block; background: #fdecec; border-left: 4px solid var(--color-accent); color: #7a1414; }
.formnote { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }

/* Numbered enrollment steps. The sequence is real — the portal account has to
   exist before a trial can be requested — so the numbering carries meaning. */
.steps { display: grid; gap: var(--space-5); counter-reset: estep; }
.steps > li { counter-increment: estep; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 var(--space-4); }
.steps > li::before {
  content: counter(estep); grid-row: span 2;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: var(--text-2xl); line-height: 1; color: var(--blue-400);
}
.steps h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.steps p, .steps li { font-size: var(--text-sm); }
.steps ul { margin: var(--space-3) 0 0; padding-left: 1.1rem; }
.steps ul li { margin-bottom: 4px; color: var(--text-muted); }