/* Next Generation Learning Center: "bright future". Royal blue and sunburst
   gold from the emblem, Montserrat to match the wordmark, a serif body for a
   school-ready feel, crisp grid and gold rules. */
:root {
  --royal: #1E3FA0; --royal-dk: #152E7A; --ink-d: #0E1B45; --gold: #F6A623; --gold-dk: #B8760A; --sky: #EEF2FC;
  --bg: #fff; --surface: var(--sky); --ink: var(--ink-d); --muted: #46506E; --line: #DCE3F5;
  --brand: var(--royal); --brand-ink: #fff; --accent: var(--gold); --kicker: var(--royal); --focus: var(--gold);
  --font-d: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-b: "Source Serif 4", Georgia, serif;
  --font-btn: "Montserrat", Arial, sans-serif;
  --btn-r: 6px; --card-r: 8px; --photo-r: 6px; --field-r: 6px;
  --dur: 160ms; --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --foot-bg: var(--ink-d); --foot-ink: #fff; --cta-bg: var(--royal); --ring: rgba(30, 63, 160, 0.2);
  --chip-bg: var(--sky); --chip-ink: var(--royal-dk); --nav-active: var(--sky); --nav-active-ink: var(--royal);
  --foot-btn-bg: var(--gold); --foot-btn-ink: var(--ink-d);
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }
.btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.88rem; }
.hdr-call { font-family: var(--font-d); font-size: 0.9rem; }
.hdr-nav a { font-family: var(--font-d); font-size: 0.92rem; border-radius: 6px; }
.hdr-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
.brand-name { color: var(--royal); text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.02em; font-weight: 800; }
.kicker { font-family: var(--font-d); }
.section h2::after { content: ""; display: block; width: 64px; height: 5px; background: var(--gold); margin-top: 0.4em; }

/* Hero: full-bleed video, blue tint, slow gold sunburst */
.hero { min-height: min(88vh, 820px); display: grid; align-items: end; color: #fff; background: var(--ink-d); }
.hero-media { position: absolute; inset: -8% 0; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(14, 27, 69, 0.94) 0%, rgba(21, 46, 122, 0.78) 45%, rgba(30, 63, 160, 0.25) 100%); }
.rays {
  position: absolute; width: 1400px; aspect-ratio: 1; right: -520px; top: -640px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(246, 166, 35, 0.22) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: spin 120s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.hero-in { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 3.5rem); }
.hero .kicker { color: var(--gold); }
.hero h1 { color: #fff; font-size: clamp(2.7rem, 1.2rem + 5.4vw, 5.8rem); line-height: 0.98; max-width: 14ch; text-transform: uppercase; }
.hero h1 .hl { color: var(--gold); }
.hero-sub { color: rgba(255, 255, 255, 0.86); }
.hero .btn-main { background: var(--gold); color: var(--ink-d); }
.hero .btn-ghost { color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: clamp(2.5rem, 6vw, 4rem) 0 0; max-width: 720px; }
.hero-stats div { border-top: 3px solid var(--gold); padding-top: 0.75rem; }
.hero-stats dt { font-family: var(--font-d); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.hero-stats dd { margin: 0.2rem 0 0; font-family: var(--font-d); font-weight: 800; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); }

/* Photos with a gold offset frame */
.strip { padding-top: clamp(3rem, 6vw, 5rem); }
.strip-item img { border-radius: 6px; box-shadow: 10px 10px 0 var(--gold); }
.strip-item:nth-child(even) img { box-shadow: 10px 10px 0 var(--royal); }
.day-photo img, .about-photos img { box-shadow: 14px 14px 0 var(--gold); }

.facts li { font-family: var(--font-d); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; }

/* Age cards: report-card grid with blue caps */
.ages { gap: 0; border: 2px solid var(--royal); border-radius: 8px; overflow: hidden; }
.age { background: #fff; border-radius: 0; border-right: 2px solid var(--line); transition: background-color var(--dur); }
.age:last-child { border-right: 0; }
.age:hover { background: var(--sky); }
.age-range { font-family: var(--font-d); color: var(--gold-dk); }
.age h3 { color: var(--royal); text-transform: uppercase; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); }
.svc { border-top: 2px solid var(--line); }
.svc-num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gold); color: var(--ink-d); font-size: 0.85rem; }
.svc h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; }

.cta-band .rays, .cta-band::before {
  content: ""; position: absolute; width: 900px; aspect-ratio: 1; left: -420px; top: -450px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246, 166, 35, 0.2) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%);
}
.cta-band h2 { text-transform: uppercase; }
.cta-band .btn-main { background: var(--gold); color: var(--ink-d); }
.cta-band .btn-ghost { color: #fff; }
.foot-logo { border-radius: 8px; }

.page-hero { background: var(--ink-d); color: #fff; }
.page-hero h1 { color: #fff; text-transform: uppercase; }
.page-hero .kicker { color: var(--gold); }
.page-hero .lede { color: rgba(255, 255, 255, 0.82); }
.page-hero::after {
  content: ""; position: absolute; width: 1000px; aspect-ratio: 1; right: -420px; top: -520px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246, 166, 35, 0.22) 0deg 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.place { border-top: 5px solid var(--gold); }

@media (max-width: 1000px) {
  .age:nth-child(2) { border-right: 0; }
  .age:nth-child(-n+2) { border-bottom: 2px solid var(--line); }
}
@media (max-width: 560px) {
  .age { border-right: 0; border-bottom: 2px solid var(--line); }
  .age:last-child { border-bottom: 0; }
  .hero-stats { gap: 0.75rem; }
  .rays { right: -900px; }
}