/* ==========================================================================
   Acellus CyberSchool — site stylesheet
   Tokens, rules, and the reasoning behind them live in /DESIGN.md.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Ink: type and borders */
  --navy: #0B1D45;        /* the one dark blue: header, dark bands, headings on light grounds */
  --navy-raised: #10244F; /* panels that sit on a navy band; the hairline border sets them apart */
  --ink: #1B2440;         /* strong text */
  --body: #5B6473;        /* body text */
  --slate: #62748A;       /* secondary / small text on white or cloud only */

  /* Action */
  --blue: #0C71C3;        /* District Blue: buttons, links */
  --blue-press: #0A5EA3;  /* hover/active on District Blue */
  --sky-light: #99D5FC;   /* text and icons on navy */

  /* Light grounds */
  --white: #FFFFFF;
  --cloud: #F4F9FE;
  --sky-wash: #EDF4FB;
  --sky-tint: #E3F0FB;
  --line: #DCE2EA;        /* hairlines (decorative only) */
  --field: #8593A8;       /* form control edges: 3:1 on white */

  /* Closing ground */
  --ground: #050F23;      /* footer only */

  /* Gold: achievement accent only */
  --gold: #BC9E27;
  --gold-deep: #8A6D12;
  --gold-light: #FDBA5F;
  --gold-wash: #F7F0D5;   /* icon tiles in the Acellus Gold section */

  --error: #B42318;

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1200px;
  --wrap-hero: 1520px;     /* the header and both heroes run wider than the page, so the first screen lines up edge to edge */
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 9vw, 112px);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-btn: 8px;
  --shadow: 0 1px 2px rgba(0, 24, 86, .05), 0 12px 28px -16px rgba(0, 24, 86, .18);
  --shadow-lg: 0 2px 4px rgba(0, 24, 86, .04), 0 24px 48px -24px rgba(0, 24, 86, .28);
  --shadow-photo: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 40px 80px -40px rgba(0, 24, 86, .5);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 80px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-press); }
strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--radius-btn);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; /* stops looping animations (the hero glow) from flickering */
  }
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- Grounds ----------
   Light (white, cloud): reading.   Tint: choosing (courses).
   Navy: showcasing, proof, and joining.   Ground: footer.            */
.ground-cloud { background: var(--cloud); }
.ground-tint { background: var(--sky-tint); }
.ground-navy { background: var(--navy); }

.dark { color: rgba(255, 255, 255, .86); }
.dark h1, .dark h2, .dark h3, .dark strong { color: #fff; }
.dark .eyebrow { color: var(--sky-light); }
.dark a:not(.btn) { color: var(--sky-light); }
.dark a:not(.btn):hover { color: #fff; }
.dark :focus-visible { outline-color: var(--sky-light); }
/* Light cards inside dark sections return to light-ground rules */
.dark .cta-card { color: var(--body); }
.dark .cta-card h3, .dark .cta-card strong { color: var(--navy); }
.dark .cta-card a:not(.btn) { color: var(--blue); }
.dark .cta-card :focus-visible { outline-color: var(--blue); }
.dark .cta-card .eyebrow { color: var(--navy); }
.dark .cta-card .icon-tile { background: var(--sky-tint); color: var(--blue); }

/* ---------- Type ---------- */
.display {
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.display .display-light { display: block; font-weight: 300; }
.h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
.h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; }
.lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; margin-top: 20px; }
.section-head .lede { margin-top: 16px; }
.small { font-size: 14px; line-height: 1.6; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--navy);
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 3px; background: var(--gold); }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--sky-tint); color: var(--blue);
}
.icon-tile--gold { background: var(--gold-wash); color: var(--gold-deep); }
/* A larger tile where a panel has room for it (the Teacher Tools panels). The stroke is thinned
   so it renders about as heavy as the standard set at this size. */
.icon-tile--lg { width: 72px; height: 72px; border-radius: 18px; }
.icon-tile--lg .icon { width: 36px; height: 36px; stroke-width: 1.35; }
.dark .icon-tile { background: rgba(255, 255, 255, .1); color: var(--sky-light); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 26px;
  border: 1.5px solid transparent; border-radius: var(--radius-btn);
  font: 600 15px/1.25 var(--font);
  letter-spacing: 0; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -10px rgba(12, 113, 195, .6); }
.btn-primary:hover { background: var(--blue-press); color: #fff; }
.btn-secondary { background: transparent; color: var(--navy); border-color: rgba(11, 29, 69, .35); }
.btn-secondary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* On navy: a blue button would vanish, so the primary goes white and the secondary goes ghost */
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--sky-tint); color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.btn-sm { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--blue);
}
.link-arrow::after { content: "\2192"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

@media (max-width: 479px) {
  .btn-row .btn { width: 100%; }
}

/* ---------- Header (navy) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55); }
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); max-width: var(--wrap-hero); }
.header-inner :focus-visible { outline-color: #fff; }
/* The gold Acellus emblem with the name typed beside it in white Montserrat (the footer's logo too) */
.brand, .footer-logo {
  display: flex; flex: none; align-items: center; gap: 12px;
  color: #fff; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
}
.brand:hover { color: #fff; }
.brand img, .footer-logo img { width: 40px; height: 40px; object-fit: contain; }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: 28px; }
.primary-nav a {
  position: relative; display: block; padding: 6px 0;
  color: rgba(255, 255, 255, .86); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color .18s var(--ease);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--ease);
}
.primary-nav a:hover { color: #fff; }
.primary-nav a:hover::after { transform: scaleX(1); }
/* Links that leave the site (In-Person Learning) carry a small up-right arrow */
.out-icon {
  display: inline-block; width: 1.05em; height: 1.05em; margin-left: .25em; vertical-align: -.16em;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
a:hover > .out-icon { transform: translate(2px, -2px); }

.menu-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-btn); background: transparent;
  cursor: pointer; color: #fff;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 2px; margin: 0 auto; background: currentColor; border-radius: 1px;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -20px rgba(0, 24, 86, .35);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer .wrap { padding-block: 8px 24px; }
.nav-drawer ul a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  color: var(--navy); font-size: 18px; font-weight: 500; text-decoration: none;
}
.nav-drawer .btn { display: flex; width: 100%; margin-top: 16px; }

@media (max-width: 1179px) {
  .primary-nav, .header-inner > .btn { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 480px) {
  :root { --header-h: 68px; }
  .header-inner { gap: 16px; }
  /* The name runs about 12em wide in Montserrat Bold: sized to fit beside the emblem and the menu button, down to 320px */
  .brand { gap: 8px; font-size: clamp(15px, calc((100vw - 136px) / 12), 20px); }
  .brand img { width: 32px; height: 32px; }
}

/* ---------- Hero: shared ---------- */
.hero .lede { max-width: 34em; }

/* ---------- Parents hero: copy beside the photo at its native crop, on a wider container ---------- */
.hero--photo {
  background: linear-gradient(180deg, var(--white) 0%, var(--cloud) 100%);
  padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 72px);
}
.hero--photo > .wrap { max-width: var(--wrap-hero); }
.hero--photo .display { font-size: clamp(36px, 4.2vw, 54px); }
.hero-grid--photo {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(40px, 4vw, 64px);
}
.hero-photo {
  margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-photo);
}
.hero-photo img { width: 100%; aspect-ratio: 1792 / 1104; object-fit: cover; object-position: 52% 40%; }
@media (max-width: 959px) {
  .hero-grid--photo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-grid--photo .hero-photo { order: -1; }
}

/* Fact bar: four plain facts, laid out across */
.fact-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 4vw, 56px);
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.fact-bar li {
  display: flex; align-items: center; gap: 14px;
  padding: 22px clamp(16px, 2vw, 28px);
  color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.35;
}
.fact-bar li + li { border-left: 1px solid var(--line); }
.fact-bar .icon-tile { width: 44px; height: 44px; border-radius: 11px; }
@media (max-width: 1023px) {
  .fact-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-bar li:nth-child(3) { border-left: 0; }
  .fact-bar li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 559px) {
  .fact-bar { grid-template-columns: minmax(0, 1fr); }
  .fact-bar li + li { border-left: 0; border-top: 1px solid var(--line); }
  .fact-bar li { padding-block: 16px; }
}

/* ---------- Schools hero: navy. The national map on the right, with the Acellus emblem at its heart
   (the map drawn on the hero canvases by site.js from us-map.js; the emblem seated by site.js) ---------- */
.hero--dark {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy);
  /* Top padding follows the viewport height, so the results panel lands in the first view */
  padding-block: clamp(24px, 5svh, 72px) clamp(56px, 7vw, 96px);
}
.hero--dark > .wrap { max-width: var(--wrap-hero); }
.hero-texture { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The gold Acellus emblem at the map's heart. site.js sizes and seats it and drives the blur-in. */
.hero-logo { position: absolute; left: 0; top: 0; max-width: none; opacity: 0; will-change: filter, opacity, transform; }
.hero-glow {
  position: absolute; right: -12%; top: -35%; width: min(64vw, 900px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 113, 195, .42) 0%, rgba(12, 113, 195, .12) 40%, transparent 68%);
  animation: hero-glow 24s ease-in-out infinite alternate;
}
@keyframes hero-glow { to { transform: translate(-8%, 14%); } }

.hero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
}
/* The map's stage: open space the canvases seat the country (and the emblem at its heart) in. It
   stretches to the copy's height rather than setting its own, so the map never makes the hero taller. */
.hero-stage { align-self: stretch; width: 100%; min-height: 320px; }
/* On phones and tablets the country sits above the headline, aligned with the copy: the stage
   takes the map's shape (1000 : 632.4, up to 560 wide), with the emblem inside it */
@media (max-width: 899px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 3vw, 20px); }
  .hero-stage { order: -1; align-self: auto; min-height: 0; height: min(calc((100vw - 2 * var(--gutter)) * .6324), 354px); margin-bottom: 8px; }
}

/* ---------- District results: dark frosted glass, figures that count up ---------- */
.ledger {
  position: relative; isolation: isolate;
  margin-top: clamp(20px, 3.5svh, 48px);
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3.5vw, 48px);
  border-radius: var(--radius-lg);
  /* A light navy tint keeps the figures crisp; the glass stays fairly clear, so the map's
     light carries through it */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 55%, rgba(71, 165, 224, .05) 100%),
    rgba(11, 29, 69, .22);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 40px 80px -40px rgba(0, 0, 0, .75),
    0 0 70px -24px rgba(71, 165, 224, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ledger { background: rgba(22, 44, 92, .92); }
}
/* The edge: a fine lit rim, brightest at the top-left and bottom-right. It stays still:
   the map and the counting figures carry the motion in this section. */
.ledger::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(153, 213, 252, .55) 0%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, .06) 62%, rgba(71, 165, 224, .4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Three results across; they stack once the columns get too narrow for the figures */
.ledger-rows {
  --col-gap: clamp(28px, 3.5vw, 56px);
  --row-gap: 32px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--row-gap) var(--col-gap);
}
/* Light dividers centered in the gaps: vertical between the three across, horizontal once they stack */
.ledger-row { position: relative; }
.ledger-row + .ledger-row::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: calc(var(--col-gap) / -2);
  width: 1px; background: rgba(255, 255, 255, .16);
}
@media (max-width: 999px) {
  .ledger-rows { grid-template-columns: minmax(0, 1fr); }
  .ledger-row + .ledger-row::before { top: calc(var(--row-gap) / -2); bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}
.ledger-figure {
  display: block; color: #fff; font-size: clamp(32px, 3vw, 44px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ledger-figure .arrow { font-weight: 300; color: var(--sky-light); margin-inline: .12em; }
.fig-to { display: inline-block; }
.ledger-text { margin: 6px 0 2px; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.5; }
.ledger-source { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .64); }

/* Short laptop screens: the whole hero, stats panel included, should fit the first view. With
   the panel three across, the headline scales with the screen's height and the copy and its
   spacing tighten a little; the panel keeps its own padding and gap. */
@media (min-width: 1000px) and (max-height: 920px) {
  .hero--dark { padding-top: clamp(20px, 4svh, 48px); }
  .hero--dark .eyebrow { margin-bottom: clamp(12px, 2svh, 20px); }
  .hero--dark .display { font-size: clamp(40px, 6.4svh, 56px); }
  .hero--dark .lede { font-size: clamp(16px, 2.2svh, 19px); line-height: 1.55; margin-top: clamp(12px, 2svh, 20px); }
  .hero--dark .btn-row { margin-top: clamp(18px, 3svh, 32px); }
}

/* Motion only when JS runs and the visitor hasn't asked for less of it.
   Without either, the panel shows its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .js .ledger { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js .ledger.is-in { opacity: 1; transform: none; }

  .js .ledger-row { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .ledger-row.is-in { opacity: 1; transform: none; }

  .js .fig-to { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .is-counting .fig-to, .js .is-done .fig-to { opacity: 1; transform: none; }

  .js .is-done .ledger-figure { animation: figure-land 1.1s var(--ease); }
}
@keyframes figure-land {
  0%   { text-shadow: 0 0 0 rgba(153, 213, 252, 0); }
  30%  { text-shadow: 0 0 22px rgba(153, 213, 252, .75); }
  100% { text-shadow: 0 0 0 rgba(153, 213, 252, 0); }
}

/* ---------- Halves (signature): at home and with the district, one school ---------- */

.halves-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.half { padding: clamp(32px, 5vw, 64px); }
.half--home { background: var(--sky-tint); }
.half--district { background: var(--navy); color: rgba(255, 255, 255, .86); }
.half-label {
  margin-bottom: clamp(20px, 2.5vw, 32px);
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2;
}
.half--district .half-label { color: #fff; }
.half-list li { padding-block: 18px; border-top: 1px solid rgba(0, 24, 86, .12); }
.half-list li:last-child { padding-bottom: 0; }
.half-list strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 17px; line-height: 1.4; }
.half-list span { display: block; font-size: 15.5px; line-height: 1.6; }
.half--district .half-list li { border-color: rgba(255, 255, 255, .14); }
.half--district .half-list strong { color: #fff; }

@media (max-width: 859px) {
  .halves-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Icon rows: short lists, laid out across ---------- */
.icon-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.dark .icon-row { border-top-color: rgba(255, 255, 255, .14); }
.icon-row strong { display: block; margin: 18px 0 6px; color: var(--navy); font-size: 17px; line-height: 1.4; }
.icon-row p { font-size: 15.5px; line-height: 1.6; }
.dark .icon-row strong { color: #fff; }
@media (max-width: 767px) {
  .icon-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .icon-row li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .icon-row strong { margin-top: 2px; }
  .icon-row .icon-tile { grid-row: span 2; }
}

/* ---------- Feature panels: one enclosed panel, photo inset on one side, copy on the other ---------- */
.feature-stack { display: grid; gap: clamp(24px, 3vw, 32px); }
.feature {
  --inset: clamp(10px, 1.2vw, 14px);
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding: var(--inset);
  border-radius: calc(var(--radius) + var(--inset)); overflow: hidden;
  /* A hairline in Sky Light, lit at two corners and quiet along the sides */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--navy-raised), var(--navy-raised)) padding-box,
    linear-gradient(135deg, rgba(153, 213, 252, .8), rgba(153, 213, 252, .24) 30%, rgba(153, 213, 252, .24) 70%, rgba(153, 213, 252, .6)) border-box;
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .8);
}
/* The photo fills its column whatever the copy's height. An aspect-ratio on a stretched
   grid item would size the figure from the row height instead, so the image is absolute. */
.feature-media {
  position: relative; margin: 0; min-width: 0; min-height: clamp(240px, 24vw, 360px);
  border-radius: var(--radius); overflow: hidden;
}
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
/* Framing classes stand in for style="": the CSP (style-src 'self') blocks inline styles */
.pos-stacked-top { --pos-stacked: 50% 0%; }
.feature--flip .feature-media { order: 2; }
.feature-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 40px);
}
.feature-body > .icon-tile { margin-bottom: 24px; }
.feature-body .h3 { margin-bottom: 16px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; }
.feature-body .h2 { margin-bottom: 0; }
.feature-body .lede { margin-top: 16px; }
/* On a light ground the dark panel is the offer on show: a softer, navy-tinted shadow */
.ground-cloud .feature { box-shadow: 0 32px 64px -32px rgba(0, 24, 86, .5); }
@media (max-width: 899px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature-media { order: 0; }
  .feature-media { min-height: 0; aspect-ratio: 16 / 10; }
  .feature-media img { object-position: var(--pos-stacked, var(--pos, center)); }
}

/* ---------- Acellus Gold ---------- */
.gold-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
}
.screen-card {
  margin: 0; padding: 10px; border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.screen-card img { width: 100%; border-radius: 12px; }
.screen-card figcaption { padding: 12px 6px 4px; font-size: 13px; line-height: 1.5; color: var(--slate); }
@media (max-width: 899px) {
  .gold-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.card .h3 { margin-bottom: 10px; }
.card > .icon-tile { margin-bottom: 22px; }
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .card-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Course reel: four frames from the course preview across the full width at the top of the
   section. Decorative only; the preview link sits with the copy below. */
.section--reel {
  --reel-gap: clamp(8px, 1vw, 14px);
  --reel-edge: clamp(16px, 3vw, 48px);
  padding-top: var(--reel-edge);
}
.reel-band { padding-inline: var(--reel-edge); margin-bottom: clamp(48px, 6vw, 80px); }
.reel-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--reel-gap); }
.reel-frames img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--pos, center);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* On laptops and tablets the four frames sit a little taller (3:2), trimmed at the sides;
   --pos on a frame keeps its subject in view. Phones (two columns) and wide screens keep 16:9. */
.reel-frames .pos-right { --pos: 75% 50%; }
.reel-frames .pos-left { --pos: 0% 50%; }
@media (min-width: 768px) and (max-width: 1599px) {
  .reel-frames img { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .reel-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Under the reel: the copy and the preview button, beside a stack of grade-band links */
.courses-grid {
  display: grid; align-items: center; gap: clamp(40px, 6vw, 96px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.courses-grid .section-head { margin-bottom: 0; }
.play-icon { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* The video player: a dialog over a dimmed navy page, the video at 16:9 as large as fits */
html.has-dialog { overflow: hidden; }
.video-dialog {
  width: min(1200px, 100vw - 32px, (100vh - 136px) * 16 / 9); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; overflow: visible; color: #fff;
}
.video-dialog::backdrop { background: rgba(6, 16, 40, .88); }
.video-frame { border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-close {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.video-close:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.video-close:focus-visible { outline-color: var(--sky-light); }
.video-close span, .video-close span::before { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; background: currentColor; }
.video-close span { transform: rotate(45deg); }
.video-close span::before { content: ""; left: 0; margin: -1px 0 0; transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  .video-dialog[open] { animation: video-in .28s var(--ease); }
  .video-dialog[open]::backdrop { animation: video-fade .28s var(--ease); }
}
@keyframes video-in { from { opacity: 0; transform: scale(.97); } }
@keyframes video-fade { from { opacity: 0; } }
.btn-note { margin-top: 12px; }
.course-samples > .h3 { font-size: 20px; }
.course-samples > .small { margin: 4px 0 20px; }
@media (max-width: 899px) { .courses-grid { grid-template-columns: minmax(0, 1fr); } }

/* Grade-band links to the matching section on schools.acellus.com (both pages) */
.grade-links { display: grid; gap: 12px; }
.grade-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  text-decoration: none; color: var(--navy);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.grade-link strong { color: var(--navy); font-size: 18px; }
.grade-link span { font-size: 14px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.grade-link span::after { content: " \2192"; }
.grade-link:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--navy); }
.ground-tint .grade-link { border-color: transparent; box-shadow: var(--shadow); }
.ground-tint .grade-link:hover { border-color: var(--blue); }

.quality {
  margin-top: clamp(56px, 7vw, 88px); padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow);
}
.quality > .h3 { margin-bottom: 28px; }
.quality-list { display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quality-list li { font-size: 14.5px; line-height: 1.55; }
.quality-list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.quality-list strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 16px; line-height: 1.35; }
@media (max-width: 1023px) {
  .quality-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-list li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 559px) {
  .quality-list { grid-template-columns: minmax(0, 1fr); }
  .quality-list li + li { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
}

/* ---------- Proof (navy) ---------- */
.proof-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
}
.quote { margin: 0; }
.quote blockquote { margin: 0; position: relative; }
.quote blockquote::before {
  content: "\201C"; display: block; height: .55em; margin-bottom: 8px;
  font-size: 96px; line-height: 1; font-weight: 600; color: var(--gold-light);
}
.quote blockquote p {
  color: #fff; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; font-weight: 400; letter-spacing: -.01em;
}
.quote figcaption { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--sky-light); }
.quote figcaption strong { color: #fff; display: block; }
.proof-stats > li { padding-block: 22px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.proof-stats > li:first-child { padding-top: 0; }
.proof-stats .figure { display: block; color: #fff; font-size: clamp(34px, 4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.proof-stats .figure .arrow { font-weight: 300; color: var(--sky-light); margin-inline: .12em; }
.proof-stats .label { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sky-light); }
.proof-source { margin: 20px 0 16px; font-size: 14px; line-height: 1.6; }
@media (max-width: 899px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
/* A parent's words closing a navy band, centered under its panels */
.quote--closing { max-width: 860px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; }
.quote--closing blockquote::before { margin-inline: auto; }

/* Result stories (schools) */
.stories { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; }
.story { display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 44px); }
.story .h3 { margin-bottom: 16px; }
.story-figure { margin: 8px 0 24px; }
.story-figure b { display: block; color: var(--navy); font-size: clamp(48px, 6vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.story-figure span { display: block; margin-top: 10px; color: var(--ink); font-weight: 500; line-height: 1.5; }
.story .link-arrow { margin-top: auto; padding-top: 16px; }
.story--light { background: var(--white); box-shadow: var(--shadow); }
.story--dark { background: var(--navy); }
.story--dark .quote blockquote p { font-size: clamp(20px, 2.1vw, 25px); }
.story--dark .quote blockquote::before { font-size: 72px; }
/* A parent's quote in the bottom half of a light story card, under a hairline */
.story:has(.story-quote) .link-arrow { margin-top: 0; margin-bottom: 28px; }
.story-quote { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); }
.story--light .quote blockquote p { color: var(--navy); font-size: clamp(18px, 1.7vw, 21px); }
.story--light .quote blockquote::before { font-size: 64px; color: var(--gold); }
.story--light .quote figcaption { margin-top: 16px; color: var(--slate); }
.story--light .quote figcaption strong { color: var(--navy); }
.story-lead { margin-top: 24px; }
.story-stats + .link-arrow { padding-top: 28px; }
/* Stacked rows: figure left, label right, the labels sharing one left edge (subgrid) */
.story-stats {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(20px, 2.5vw, 32px);
  margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.story-stats > div {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline;
  padding-block: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.story-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
.story-stats b { color: #fff; font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.15; white-space: nowrap; }
.story-stats > div > span { font-size: 15px; line-height: 1.5; color: var(--sky-light); }
@media (max-width: 959px) { .stories { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) {
  .story-stats { grid-template-columns: minmax(0, 1fr); }
  .story-stats > div > span { margin-top: 4px; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid .section-head { margin-bottom: 0; }
@media (min-width: 900px) { .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  color: var(--navy); font-size: 18px; font-weight: 600; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq .answer { padding: 0 40px 24px 0; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Join bands: copy beside a white action card ---------- */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 899px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }
.next-steps { margin-top: 36px; }
.next-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.next-steps li + li { margin-top: 20px; }
.next-steps .step {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 14px; font-weight: 600; line-height: 1;
}
.next-steps p { padding-top: 3px; }
.aside-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 15.5px; }

.cta-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
  padding: clamp(28px, 4vw, 44px);
}
.cta-card .icon-tile { margin-bottom: 22px; }
.cta-card .h3 { margin-bottom: 10px; font-size: clamp(22px, 2.2vw, 26px); }
.cta-card .btn { width: 100%; margin-top: 24px; }
.cta-card .small { margin-top: 14px; color: var(--slate); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ground); color: rgba(255, 255, 255, .72); padding-block: clamp(56px, 7vw, 88px) 32px; font-size: 15px; }
.site-footer :focus-visible { outline-color: var(--sky-light); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
/* Header size; the name runs about 12em wide, so below ~350px it scales to fit the column */
.footer-logo { margin-bottom: 20px; font-size: clamp(15px, calc((100vw - 2 * var(--gutter) - 52px) / 12), 22px); }
.footer-brand p { max-width: 30em; line-height: 1.65; }
.site-footer h2 { margin-bottom: 16px; font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-light); }
.site-footer li + li { margin-top: 10px; }
.site-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; color: rgba(255, 255, 255, .6);
}
/* The © line on the left; the legal and privacy links on the right, before the domain */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.site-footer .footer-legal li + li { margin-top: 0; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Scroll reveal (quiet) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
}