/* ===========================================
   SCHOOL — Style
   Modern, optimistic private-school design system: deep blue / bright
   blue / sky blue / warm yellow / fresh green / white / light gray,
   Poppins (friendly rounded display, loaded into the --font-fraunces
   var) + Inter (body). Organic blobs, wave dividers between color
   bands, generous rounded corners everywhere — the "alive campus tour"
   register, not a flat corporate template. Scoped under .sch-scope so
   it never leaks into other tenants/templates or the admin/dashboard
   UI. */

.sch-scope,
.sch-scope *,
.sch-scope *::before,
.sch-scope *::after {
  box-sizing: border-box;
}
.sch-scope ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sch-scope a {
  text-decoration: none;
  color: inherit;
}
.sch-scope img {
  max-width: 100%;
  display: block;
}
.sch-scope button {
  font-family: inherit;
}

.sch-scope {
  /* Deep Blue */
  --sch-navy: #142a52;
  --sch-navy-deep: #0b1b38;
  --sch-navy-soft: #1e3a6e;
  /* Bright Blue */
  --sch-royal: #2f6fed;
  --sch-royal-deep: #1d54c7;
  /* Sky Blue */
  --sch-sky: #eaf4ff;
  /* Fresh Green */
  --sch-green: #34c77b;
  --sch-green-deep: #1c9d5f;
  /* Warm Yellow — kept on the --sch-gold var name so every existing
     rule below (buttons, kickers, numerals, accents...) picks it up
     automatically. */
  --sch-gold: #ffc94d;
  --sch-gold-light: #ffe1a0;
  --sch-white: #ffffff;
  --sch-ivory: #fbf9f5;
  /* Light Gray */
  --sch-gray: #f2f4f8;
  --sch-text: #16233f;
  --sch-muted: #5b6b80;
  --sch-border: #e3e7ee;
  --sch-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* A tiny fractal-noise tile — a very low-opacity grain overlay used on
     a couple of the richer sections (hero, CTA) for tactile depth, the
     detail that keeps a flat gradient from reading as sterile/synthetic. */
  --sch-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Extended palette — a violet + coral pair that never appears on a
     button or as a primary color (brand identity stays navy/royal/gold/
     green), reserved purely for mesh-gradient backdrops, glows and
     accent-text moments, so the richer sections don't all reuse the same
     four hues. ─────────────────────────────────────────────────────── */
  --sch-violet: #7c6cf0;
  --sch-coral: #ff7a6e;
  --sch-teal: #1fb6b0;

  /* Soft colored "glow" shadows — replace flat black/navy box-shadows on
     the richer surfaces (hero cards, feature panels) so depth reads as
     light, not just darkness. */
  --sch-glow-royal: 0 24px 60px -12px rgba(47, 111, 237, 0.45);
  --sch-glow-gold: 0 24px 60px -12px rgba(255, 201, 77, 0.4);
  --sch-glow-green: 0 24px 60px -12px rgba(52, 199, 123, 0.4);
  --sch-glow-violet: 0 24px 60px -12px rgba(124, 108, 240, 0.4);

  /* Glass-panel surface, tuned for use on both light and dark backgrounds
     via the two variants below. */
  --sch-glass-bg: rgba(255, 255, 255, 0.62);
  --sch-glass-border: rgba(255, 255, 255, 0.7);
  --sch-glass-bg-dark: rgba(255, 255, 255, 0.08);
  --sch-glass-border-dark: rgba(255, 255, 255, 0.18);

  /* Layered mesh-gradient backdrops — several soft radial blooms over a
     base tone, the "premium SaaS hero" background instead of a flat
     linear gradient. Each section that uses one composites it with its
     own base color as the final background-image layer. */
  --sch-mesh-light:
    radial-gradient(38% 45% at 14% 18%, color-mix(in srgb, var(--sch-royal) 30%, transparent) 0%, transparent 100%),
    radial-gradient(32% 40% at 88% 12%, color-mix(in srgb, var(--sch-gold) 32%, transparent) 0%, transparent 100%),
    radial-gradient(45% 50% at 82% 92%, color-mix(in srgb, var(--sch-green) 26%, transparent) 0%, transparent 100%),
    radial-gradient(30% 35% at 8% 88%, color-mix(in srgb, var(--sch-violet) 22%, transparent) 0%, transparent 100%);
  --sch-mesh-dark:
    radial-gradient(40% 50% at 12% 10%, color-mix(in srgb, var(--sch-royal) 55%, transparent) 0%, transparent 100%),
    radial-gradient(35% 42% at 92% 18%, color-mix(in srgb, var(--sch-violet) 42%, transparent) 0%, transparent 100%),
    radial-gradient(50% 55% at 85% 95%, color-mix(in srgb, var(--sch-green) 34%, transparent) 0%, transparent 100%),
    radial-gradient(28% 32% at 4% 90%, color-mix(in srgb, var(--sch-gold) 28%, transparent) 0%, transparent 100%);

  font-family: var(--font-inter-sch), "Inter", system-ui, sans-serif;
  font-weight: 400;
  background: var(--sch-white);
  color: var(--sch-text);
  overflow-x: hidden;
  overflow-y: clip;
  scroll-behavior: smooth;
}
/* A palette an accent index can cycle through — used by sections that
   repeat a card/step/stat N times (journey stages, activities, admission
   steps, stats) so each one reads as its own little "atmosphere" instead
   of one flat repeated color. */
.sch-scope {
  --sch-accent-0: var(--sch-royal);
  --sch-accent-1: var(--sch-green-deep);
  --sch-accent-2: var(--sch-gold);
  --sch-accent-3: var(--sch-royal-deep);
  --sch-accent-4: var(--sch-green);
}
/* Same idea, but every color is checked to stay legible sitting directly
   on the navy band — used by sections with a dark background instead of
   the light-background accent cycle above. */
.sch-scope {
  --sch-accent-dark-0: var(--sch-royal);
  --sch-accent-dark-1: var(--sch-green);
  --sch-accent-dark-2: var(--sch-gold-light);
  --sch-accent-dark-3: var(--sch-sky);
}
.sch-scope ::selection {
  background: var(--sch-gold);
  color: var(--sch-white);
}
.sch-scope h1,
.sch-scope h2,
.sch-scope h3,
.sch-scope h4 {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-weight: 600;
  margin: 0;
  color: var(--sch-navy);
  letter-spacing: -0.01em;
}
.sch-scope p {
  margin: 0;
  line-height: 1.7;
  color: var(--sch-muted);
}
.sch-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Kicker — a rounded chip/badge, not a thin serif rule label; reads
   as a modern product-tour label rather than an editorial mark. ─────── */
.sch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--sch-sky);
  font-size: 12.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sch-royal-deep);
  font-weight: 700;
  margin-bottom: 20px;
}
.sch-kicker:before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: sch-dot-pulse-solid 2.2s ease-in-out infinite;
}
@keyframes sch-dot-pulse-solid {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-kicker:before { animation: none; }
}
.sch-kicker--light {
  background: rgba(255, 255, 255, 0.16);
  color: var(--sch-white);
}
.sch-section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 52px;
}
.sch-section-head h2 {
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
}
.sch-section-head p {
  margin-top: 14px;
  font-size: 17px;
}
.sch-section-head--light h2 {
  color: var(--sch-white);
}
.sch-section-head--light .sch-kicker {
  background: rgba(255, 255, 255, 0.16);
  color: var(--sch-white);
}
.sch-section-head--left {
  text-align: left;
  max-width: none;
  margin: 0 0 60px;
}
.sch-section-head--left p {
  max-width: 560px;
}

/* ── Buttons — rounded, friendly pills (not sharp minimal-luxury boxes).
   Bright blue is the primary action color; yellow/green are reserved as
   accent highlights elsewhere rather than crammed onto buttons too. */
.sch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: border-color 0.35s var(--sch-ease), background-color 0.35s var(--sch-ease),
    color 0.35s var(--sch-ease), transform 0.35s var(--sch-ease), box-shadow 0.35s var(--sch-ease), gap 0.35s var(--sch-ease);
}
.sch-btn:after {
  content: "→";
  font-size: 15px;
  transition: transform 0.35s var(--sch-ease);
}
.sch-btn--gold {
  padding: 16px 30px;
  border: 1.5px solid var(--sch-royal);
  background: var(--sch-royal);
  color: var(--sch-white);
  box-shadow: 0 10px 24px rgba(47, 111, 237, 0.24);
}
.sch-btn--gold:hover {
  background: var(--sch-royal-deep);
  border-color: var(--sch-royal-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(47, 111, 237, 0.32);
}
.sch-btn--gold:hover:after {
  transform: translateX(3px);
}
.sch-btn--outline,
.sch-btn--outline-light {
  padding: 14.5px 28px;
  background: var(--sch-white);
  border: 1.5px solid var(--sch-border);
  color: var(--sch-navy);
}
.sch-btn--outline-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--sch-white);
}
.sch-btn--outline:hover {
  border-color: var(--sch-royal);
  color: var(--sch-royal);
  background: var(--sch-sky);
}
.sch-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--sch-white);
}
.sch-btn--outline:hover:after,
.sch-btn--outline-light:hover:after {
  transform: translateX(3px);
}
.sch-btn--dark {
  padding: 12px 22px;
  border: 1.5px solid var(--sch-navy);
  background: var(--sch-navy);
  color: var(--sch-white);
}
.sch-btn--dark:after {
  content: none;
}
/* The one primary-button color for a section whose own background is
   already blue (the CTA band) — .sch-btn--gold would blend straight
   into it otherwise. */
.sch-btn--white {
  padding: 16px 30px;
  border: 1.5px solid var(--sch-white);
  background: var(--sch-white);
  color: var(--sch-royal-deep);
  box-shadow: 0 10px 24px rgba(9, 26, 48, 0.18);
}
.sch-btn--white:hover {
  background: var(--sch-gold);
  border-color: var(--sch-gold);
  color: var(--sch-navy);
  transform: translateY(-2px);
}
.sch-btn--white:hover:after {
  transform: translateX(3px);
}
.sch-btn--sm {
  font-size: 13px;
}
.sch-btn--gold.sch-btn--sm,
.sch-btn--outline.sch-btn--sm,
.sch-btn--outline-light.sch-btn--sm {
  padding: 11px 20px;
}
/* Every `.sch-btn--*` variant's `color` above is a bare single class,
   which loses its `color` to the `.sch-scope a { color: inherit }`
   reset (a class+type selector, higher specificity) whenever the
   button is rendered as a link rather than a <button> — e.g. the
   navbar's "Demander une admission" was inheriting the ambient nav
   text color instead of showing white. Buttons rendered as <button>
   aren't affected (no competing reset targets button color) so the
   rules above still cover that case; these just add the missing
   coverage for the <a> case at matching specificity. */
a.sch-btn--gold {
  color: var(--sch-white);
}
a.sch-btn--white {
  color: var(--sch-royal-deep);
}
a.sch-btn--dark {
  color: var(--sch-white);
}
a.sch-btn--outline {
  color: var(--sch-navy);
}
a.sch-btn--outline-light {
  color: var(--sch-white);
}

/* ── Reveal-on-scroll stagger (paired with useSchoolReveal) ──────────── */
.sch-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--sch-ease), transform 0.7s var(--sch-ease);
}
.sch-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.sch-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.sch-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.sch-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.sch-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.sch-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.sch-stagger.is-visible > *:nth-child(n+6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .sch-stagger > * { transition: none; opacity: 1; transform: none; }
}

/* ── Decorative blobs — the "alive" layer: soft floating color shapes
   behind a section's content, so colored bands read as one continuous,
   breathing campus tour rather than flat rectangles. Combined with the
   soft gradient backgrounds each section defines for itself, this is
   what carries the "organic transition" between color bands — every
   section that uses `.sch-blob` positions it via a local `--x`/`--y`/
   `--size` on the element itself; the class only supplies shape/color/
   motion. */
.sch-blob {
  position: absolute;
  z-index: 0;
  width: var(--size, 300px);
  height: var(--size, 300px);
  left: var(--x, auto);
  right: var(--r-x, auto);
  top: var(--y, auto);
  bottom: var(--b-y, auto);
  border-radius: 50%;
  /* A radial-gradient fade gives a naturally soft edge at any size, so
     unlike the old `filter: blur()` approach it never gets rasterized
     at a fixed resolution and re-scaled — which is what made the
     blobs look pixelated once the float animation's `scale()` kicked
     in. will-change hints the browser to keep the transform on its
     own compositor layer instead of repainting it. */
  background: radial-gradient(circle at 50% 50%, var(--tint, var(--sch-sky)) 0%, color-mix(in srgb, var(--tint, var(--sch-sky)) 55%, transparent) 55%, transparent 72%);
  opacity: 0.7;
  pointer-events: none;
  will-change: transform;
  animation: sch-float 9s ease-in-out infinite;
}
.sch-blob--slow {
  animation-duration: 14s;
  animation-delay: -4s;
}
@keyframes sch-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-blob { animation: none; }
}

/* ── Wave divider — a curved seam between two color bands (see
   SchoolWave.tsx / SchoolPageRenderer's SECTION_BG map). Its own
   normal-flow band between the two sections (background = the section
   above, so the flat area behind the curve reads as a seamless
   continuation of it) — not overlapping either section's own content,
   which is what a negative-margin pull-up used to risk. */
.sch-wave-wrap {
  position: relative;
  z-index: 2;
  line-height: 0;
  overflow: hidden;
}
.sch-wave {
  display: block;
  width: 100%;
  height: 72px;
}
@media (max-width: 640px) {
  .sch-wave {
    height: 40px;
  }
}

/* ===========================================
   NAVBAR
   =========================================== */
.sch-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--sch-ease), border-color 0.35s var(--sch-ease), box-shadow 0.35s var(--sch-ease);
}
.sch-nav.is-scrolled {
  border-bottom-color: var(--sch-border);
  box-shadow: 0 4px 24px rgba(15, 29, 51, 0.05);
}
.sch-nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2.5px;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--sch-royal), var(--sch-gold), var(--sch-green));
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .sch-nav__progress { transition: none; }
}
.sch-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sch-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sch-logo img {
  height: 44px;
  width: auto;
}
.sch-logo__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sch-gold);
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--sch-gold);
}
.sch-logo__word {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--sch-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sch-nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.sch-nav__links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sch-text);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s var(--sch-ease);
}
.sch-nav__links a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--sch-gold);
  transition: right 0.35s var(--sch-ease);
}
.sch-nav__links a:hover,
.sch-nav__links a.active {
  color: var(--sch-navy);
}
.sch-nav__links a:hover:after,
.sch-nav__links a.active:after {
  right: 0;
}
.sch-nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.sch-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.sch-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--sch-navy);
  transition: transform 0.3s var(--sch-ease), opacity 0.3s var(--sch-ease);
}
.sch-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sch-burger.is-open span:nth-child(2) { opacity: 0; }
.sch-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .sch-nav__links {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    background: var(--sch-white);
    padding: 28px 24px;
    transform: translateX(100%);
    transition: transform 0.4s var(--sch-ease);
    overflow-y: auto;
  }
  .sch-nav__links.is-open {
    transform: translateX(0);
  }
  .sch-nav__links li {
    width: 100%;
    border-bottom: 1px solid var(--sch-border);
  }
  .sch-nav__links a {
    display: block;
    padding: 16px 4px;
    font-size: 17px;
  }
  .sch-burger {
    display: flex;
  }
  .sch-nav__actions .sch-btn--gold.sch-btn--sm {
    display: none;
  }
  .menu-open .sch-nav__actions .sch-btn--gold.sch-btn--sm { display: none; }
}

/* ===========================================
   HERO — full home hero + compact inner-page banner (same component,
   driven by `heightMode`)
   =========================================== */
.sch-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--sch-white);
}
.sch-hero--medium {
  min-height: 52vh;
  padding: 140px 0 64px;
}
.sch-hero--large {
  min-height: 92vh;
  padding: 160px 0 0;
}
.sch-hero--fullscreen {
  min-height: 100vh;
  padding: 160px 0 0;
}
.sch-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sch-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: sch-kenburns 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero__media img { animation: none; }
}
@keyframes sch-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.sch-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 21, 36, 0.55) 0%, rgba(10, 21, 36, 0.35) 40%, rgba(10, 21, 36, 0.88) 100%);
}
.sch-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: 96px;
  max-width: 780px;
  opacity: 0;
  animation: sch-fade-up 0.9s var(--sch-ease) forwards;
  animation-delay: 0.15s;
}
.sch-hero--medium .sch-hero__inner {
  padding-bottom: 0;
  max-width: 700px;
}
@keyframes sch-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.sch-hero__title {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  color: var(--sch-white);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.35);
}
p.sch-hero__subtitle {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
}
.sch-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
}
.sch-hero__stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.sch-hero__stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 0;
}
.sch-hero__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.sch-hero__stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.sch-hero__stat-value {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--sch-gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sch-hero__stat-label {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.3;
}

@media (max-width: 720px) {
  .sch-hero--large,
  .sch-hero--fullscreen {
    min-height: 78vh;
    padding-top: 120px;
  }
  .sch-hero__inner {
    padding-bottom: 56px;
  }
  .sch-hero__stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
  }
  .sch-hero__stat:nth-child(2n) {
    padding-left: 20px;
  }
}

/* ── Hero — split variant (content.variant === 'split') — an immersive,
   layered hero: mesh-gradient + grain backdrop, oversized display type,
   portrait in an offset gradient frame with a cursor-reactive 3D tilt
   and a soft color glow behind it, concentric dotted rings + a
   hand-drawn squiggle for texture, two floating glass panels
   (social-proof card + animated stat chips) overlapping the image, and
   a scroll cue. ────────────────────────────────────────────────────── */
.sch-hero--split {
  display: block;
  align-items: initial;
  /* The decorative blobs use negative offsets that, left uncontained,
     bleed past the section's own bottom edge into whichever section
     follows (which has its own, differently-sized blob), reading as
     two mismatched blobs overlapping at the seam. */
  overflow: hidden;
  color: var(--sch-text);
  min-height: auto;
  padding: 176px 0 108px;
  background:
    var(--sch-mesh-light),
    linear-gradient(180deg, var(--sch-sky) 0%, var(--sch-white) 60%);
}
.sch-hero--split:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: var(--sch-grain);
}
.sch-hero-split__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateY(var(--parallax, 0px));
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--sch-white) 70%, transparent) 0%, transparent 100%);
}
.sch-hero-split__rings {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(calc(-50% + var(--parallax, 0px)));
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.1s linear;
}
.sch-hero-split__blob-a,
.sch-hero-split__blob-b,
.sch-hero-split__blob-c {
  transform: translateY(var(--parallax, 0px));
  transition: transform 0.1s linear;
}
.sch-hero-split__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
}
.sch-hero-split__content {
  position: relative;
  max-width: 600px;
}
.sch-hero-split__squiggle {
  position: absolute;
  top: -38px;
  left: -34px;
  width: 34px;
  height: 52px;
  animation: sch-bob 4s ease-in-out infinite;
}
@keyframes sch-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__squiggle { animation: none; }
}
.sch-hero-split__title {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--sch-navy);
  margin-top: 10px;
}
.sch-hero__highlight {
  position: relative;
  display: inline-block;
  /* Plain solid-gold fallback for browsers without background-clip:
     text support — the shimmer below is a progressive enhancement, not
     something the word's legibility should ever depend on. */
  color: var(--sch-gold);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .sch-hero__highlight {
    background: linear-gradient(90deg, var(--sch-gold) 0%, var(--sch-gold-light) 25%, var(--sch-gold) 50%, var(--sch-gold-light) 75%, var(--sch-gold) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sch-shimmer 5s linear infinite;
  }
}
@keyframes sch-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: -250% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero__highlight { animation: none; background-position: 0% 0%; }
}
.sch-hero__highlight:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  height: 0.22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M2 15 Q60 3 120 13 T298 9' stroke='%23FFC94D' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* `p.` prefix (not just the class) is load-bearing here: the base
   `.sch-scope p { margin: 0; color: var(--sch-muted); }` reset is a
   class+type selector, which beats a bare single class of equal class
   count on specificity — without the element prefix these margin/color
   overrides silently lose and the subtitle renders glued to the title
   in the wrong color. */
p.sch-hero-split__subtitle {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--sch-muted);
  max-width: 480px;
}
.sch-hero-split__capture {
  position: relative;
  margin-top: 32px;
  max-width: 460px;
}
.sch-hero-split__capture input {
  width: 100%;
  background: var(--sch-white);
  border: 1.5px solid var(--sch-border);
  border-radius: 999px;
  padding: 20px 172px 20px 26px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sch-text);
  outline: none;
  box-shadow: 0 20px 44px -12px rgba(20, 42, 82, 0.16);
  transition: border-color 0.3s var(--sch-ease), box-shadow 0.3s var(--sch-ease);
}
.sch-hero-split__capture input:focus {
  border-color: var(--sch-royal);
  box-shadow: var(--sch-glow-royal);
}
.sch-hero-split__capture .sch-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  box-shadow: var(--sch-glow-royal);
}
p.sch-hero-split__sent {
  margin-top: 32px;
  max-width: 460px;
  padding: 16px 22px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--sch-green) 14%, var(--sch-white));
  color: var(--sch-green-deep);
  font-weight: 600;
  font-size: 14.5px;
}
a.sch-hero-split__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-weight: 600;
  font-size: 15px;
  color: var(--sch-navy);
  transition: color 0.3s var(--sch-ease), gap 0.3s var(--sch-ease);
}
.sch-hero-split__link:hover {
  color: var(--sch-royal);
  gap: 12px;
}
.sch-hero-split__figure {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 28px 46px 0;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.5s var(--sch-ease);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .sch-hero-split__figure {
    transform: none;
    transition: none;
  }
}
.sch-hero-split__frame {
  position: absolute;
  z-index: 0;
  top: 26px;
  right: 0;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  border-radius: 46% 54% 58% 42% / 44% 42% 58% 56%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sch-royal) 22%, transparent), color-mix(in srgb, var(--sch-violet) 20%, transparent));
}
.sch-hero-split__glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(100%, 460px);
  height: min(100%, 460px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--sch-gold) 35%, transparent) 0%, transparent 68%);
  filter: blur(6px);
  opacity: 0.8;
  animation: sch-glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sch-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__glow { animation: none; }
}
.sch-hero-split__portrait {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  clip-path: path("M180,8 C260,2 340,40 356,120 C372,200 350,260 320,320 C284,392 220,398 150,388 C74,378 18,332 8,256 C-2,180 24,96 84,48 C116,22 148,14 180,8 Z");
  /* box-shadow would be clipped away along with the rest of the box by
     clip-path — drop-shadow is a filter effect applied to the already-
     clipped painted shape, so it's the one that actually shows. */
  filter: saturate(0.94) contrast(1.04) drop-shadow(0 30px 50px rgba(11, 27, 56, 0.3));
}
.sch-hero-split__badge {
  position: absolute;
  z-index: 2;
  /* Bottom-right, clear of the fstats column (top-right) and the proof
     card (bottom-left) — was top-right, which the fstats panel added
     later ended up covering entirely. */
  bottom: 108px;
  right: -16px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sch-gold);
  color: var(--sch-navy);
  box-shadow: 0 16px 30px rgba(255, 201, 77, 0.4);
  animation: sch-bob 5s ease-in-out infinite;
  animation-delay: -2s;
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__badge { animation: none; }
}
.sch-hero-split__spark {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 6%;
  display: flex;
  color: var(--sch-gold);
  animation: sch-twinkle 2.4s ease-in-out infinite;
}
@keyframes sch-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__spark { animation: none; }
}
.sch-hero-split__fstats {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: -14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sch-hero-split__fstat {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--sch-glass-bg);
  border: 1px solid var(--sch-glass-border);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px -12px rgba(20, 42, 82, 0.22);
  animation: sch-float 8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__fstat { animation: none; }
}
.sch-hero-split__fstat-value {
  font-family: var(--font-fraunces), serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--sch-royal-deep);
  font-variant-numeric: tabular-nums;
}
.sch-hero-split__fstat-label {
  font-size: 11px;
  color: var(--sch-muted);
  white-space: nowrap;
}
.sch-hero-split__proof {
  position: absolute;
  z-index: 2;
  left: -12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 16px 16px;
  border-radius: 18px;
  background: var(--sch-white);
  box-shadow: 0 20px 40px rgba(20, 42, 82, 0.16);
  max-width: 280px;
}
.sch-hero-split__avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sch-hero-split__avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--sch-white);
  object-fit: cover;
  margin-left: -12px;
  box-shadow: 0 4px 10px rgba(20, 42, 82, 0.12);
}
.sch-hero-split__avatars img:first-child {
  margin-left: 0;
}
.sch-hero-split__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: -12px;
  background: var(--sch-gold);
  color: var(--sch-navy);
  font-weight: 700;
  font-size: 11px;
  justify-content: center;
  border: 2.5px solid var(--sch-white);
  box-shadow: 0 4px 10px rgba(20, 42, 82, 0.12);
}
.sch-hero-split__rating svg {
  width: 9px;
  height: 9px;
}
.sch-hero-split__proof h5 {
  font-size: 13.5px;
  margin: 0;
  white-space: nowrap;
}
.sch-hero-split__proof small {
  font-size: 12px;
  color: var(--sch-muted);
  white-space: nowrap;
}
.sch-hero-split__scrollcue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sch-muted);
  animation: sch-scrollcue-bob 2.2s ease-in-out infinite;
}
.sch-hero-split__scrollcue-line {
  width: 1.5px;
  height: 30px;
  background: linear-gradient(180deg, var(--sch-royal), transparent);
}
@keyframes sch-scrollcue-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-hero-split__scrollcue { animation: none; }
}
@media (max-width: 1180px) {
  .sch-hero-split__fstats {
    display: none;
  }
}
@media (max-width: 960px) {
  .sch-hero-split__grid {
    grid-template-columns: 1fr;
  }
  .sch-hero-split__figure {
    order: -1;
    margin-bottom: 20px;
    padding: 0 20px 40px 0;
  }
  .sch-hero-split__frame,
  .sch-hero-split__portrait {
    width: min(100%, 320px);
  }
  .sch-hero-split__proof {
    left: 4px;
  }
  .sch-hero-split__content {
    max-width: none;
  }
  .sch-hero-split__rings {
    width: 80vw;
    height: 80vw;
  }
}
@media (max-width: 640px) {
  .sch-hero--split {
    padding: 140px 0 64px;
  }
  .sch-hero-split__capture input {
    padding: 16px 20px;
  }
  .sch-hero-split__capture .sch-btn {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 12px;
    justify-content: center;
  }
  .sch-cta__card {
    padding: 34px 26px;
    border-radius: 24px;
  }
  .sch-cta__icon {
    width: 130px;
    height: 130px;
    top: -22px;
    right: -18px;
  }
  .sch-hero-split__figure {
    padding: 0 0 34px;
  }
  .sch-hero-split__proof {
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 260px;
  }
  .sch-hero-split__badge {
    width: 46px;
    height: 46px;
    bottom: auto;
    top: 20px;
    right: -4px;
  }
  .sch-hero-split__spark,
  .sch-hero-split__scrollcue {
    display: none;
  }
}

/* ===========================================
   SECTIONS — shared rhythm
   =========================================== */
.sch-whyus,
.sch-pedagogy,
.sch-journey,
.sch-studentlife,
.sch-campus,
.sch-activities,
.sch-teachers,
.sch-testimonials,
.sch-achievements,
.sch-stats,
.sch-news,
.sch-events,
.sch-admission,
.sch-faq,
.sch-contact-form,
.sch-map,
.sch-richtext {
  padding: 128px 0;
}

/* ── Why us — a colorful pillar-card grid ─────────────────────────────── */
.sch-whyus {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sch-sky) 0%, var(--sch-white) 45%);
}
.sch-whyus__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sch-whyus__card {
  background: var(--sch-white);
  border-radius: 20px;
  padding: 32px 28px;
  border-top: 4px solid var(--accent);
  box-shadow: 0 16px 36px rgba(20, 42, 82, 0.07);
  transition: transform 0.4s var(--sch-ease), box-shadow 0.4s var(--sch-ease);
}
.sch-whyus__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--accent) 20%, transparent);
}
.sch-whyus__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--accent) 14%, var(--sch-white));
  color: var(--accent);
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
}
.sch-whyus__card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.sch-whyus__card p {
  font-size: 14.5px;
}

/* ── Pedagogy (alternating rows) ───────────────────────────────────── */
.sch-pedagogy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.sch-pedagogy--right .sch-pedagogy__media-wrap {
  order: 2;
}
.sch-pedagogy__media-wrap {
  position: relative;
}
.sch-pedagogy__frame {
  position: absolute;
  z-index: 0;
  inset: 22px -22px -22px 22px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.sch-pedagogy--right .sch-pedagogy__frame {
  inset: 22px 22px -22px -22px;
}
.sch-pedagogy__media {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 26px 52px rgba(20, 42, 82, 0.18);
}
.sch-pedagogy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--sch-ease);
}
.sch-pedagogy__media-wrap:hover .sch-pedagogy__media img {
  transform: scale(1.045);
}
.sch-pedagogy__badge {
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: -18px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--sch-white);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sch-pedagogy--right .sch-pedagogy__badge {
  left: auto;
  right: -18px;
}
.sch-pedagogy__content h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  margin-bottom: 20px;
}
.sch-pedagogy__content p {
  font-size: 16px;
  margin-bottom: 16px;
}
.sch-pedagogy__list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sch-pedagogy__list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 7%, var(--sch-white));
  font-size: 15px;
  font-weight: 600;
  color: var(--sch-navy);
  transition: background 0.3s var(--sch-ease), transform 0.3s var(--sch-ease);
}
.sch-pedagogy__list li:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--sch-white));
  transform: translateX(4px);
}
.sch-pedagogy__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sch-white);
}

/* ── Educational Journey — an interactive, colorful node timeline
   (Crèche → Maternelle → Primaire → Collège → Lycée). Each node carries
   its own --accent (cycled from the --sch-accent-N palette); clicking one
   swaps the detail panel below. ────────────────────────────────────────── */
.sch-journey {
  position: relative;
  overflow: hidden;
  background: var(--sch-white);
}
.sch-journey__track {
  position: relative;
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 56px;
}
.sch-journey__track:before {
  content: "";
  position: absolute;
  top: 44px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--sch-royal), var(--sch-green-deep), var(--sch-gold), var(--sch-royal-deep), var(--sch-green));
  opacity: 0.35;
  z-index: 0;
}
.sch-journey__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sch-text);
}
.sch-journey__node-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sch-white);
  outline: 2px solid var(--accent);
  box-shadow: 0 10px 24px rgba(15, 29, 51, 0.1);
  transition: transform 0.4s var(--sch-ease), outline-color 0.4s var(--sch-ease);
}
.sch-journey__node-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-journey__node:hover .sch-journey__node-img,
.sch-journey__node.is-active .sch-journey__node-img {
  transform: scale(1.08);
}
.sch-journey__node.is-active .sch-journey__node-img {
  outline-width: 3px;
}
.sch-journey__node-label {
  font-family: var(--font-fraunces), serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--sch-navy);
}
.sch-journey__node.is-active .sch-journey__node-label {
  color: var(--accent);
}
.sch-journey__node-age {
  font-size: 12px;
  color: var(--sch-muted);
}
.sch-journey__node-arrow {
  display: none;
}
.sch-journey__panel {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: center;
  background: var(--sch-ivory);
  border-radius: 24px;
  padding: 40px;
  border-top: 4px solid var(--accent);
}
.sch-journey__panel-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sch-journey__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-journey__panel-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.sch-journey__panel-body h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 12px;
}
.sch-journey__panel-body p {
  font-size: 16px;
}
.sch-journey__panel-highlights {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.sch-journey__panel-highlights li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--sch-text);
}
.sch-journey__panel-highlights li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ── Student life — overlapping photo collage + narrative text ───────── */
.sch-studentlife {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sch-white) 0%, color-mix(in srgb, var(--sch-green) 12%, var(--sch-white)) 100%);
}
.sch-studentlife__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.sch-studentlife__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sch-studentlife__content p {
  font-size: 16px;
}
.sch-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 24px 12px 12px 24px;
}
.sch-collage__tile {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: 0 20px 44px rgba(15, 29, 51, 0.14);
  background: none;
  cursor: default;
  transition: transform 0.4s var(--sch-ease), box-shadow 0.4s var(--sch-ease);
}
.sch-collage__tile:nth-child(1) { transform: rotate(-2deg); }
.sch-collage__tile:nth-child(2) { transform: rotate(2deg) translateY(24px); }
.sch-collage__tile:nth-child(3) { transform: rotate(1.5deg) translateY(-18px); }
.sch-collage__tile:nth-child(4) { transform: rotate(-1.5deg) translateY(10px); }
.sch-collage__tile:hover {
  transform: rotate(0deg) translateY(0) scale(1.03);
  box-shadow: 0 28px 56px rgba(15, 29, 51, 0.2);
  z-index: 2;
}
.sch-collage__tile--lead {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}
.sch-collage__tile[disabled] {
  cursor: default;
}
.sch-collage__tile:not([disabled]) {
  cursor: pointer;
}
.sch-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-collage__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--sch-navy);
  background: rgba(15, 29, 51, 0.15);
  transition: background-color 0.3s var(--sch-ease);
}
.sch-collage__tile:hover .sch-collage__play {
  background: rgba(15, 29, 51, 0.28);
}
.sch-collage__play:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sch-white);
  box-shadow: 0 10px 24px rgba(15, 29, 51, 0.25);
  z-index: -1;
}
.sch-collage__tile--video {
  aspect-ratio: auto;
}
.sch-collage__tile--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Campus (interactive showcase) ────────────────────────────────────── */
.sch-campus__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -20px 0 40px;
}
.sch-campus__filter {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--sch-border);
  background: var(--sch-white);
  color: var(--sch-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--sch-ease);
}
.sch-campus__filter:hover {
  border-color: var(--sch-royal);
  color: var(--sch-royal);
}
.sch-campus__filter.is-active {
  background: var(--sch-royal);
  border-color: var(--sch-royal);
  color: var(--sch-white);
}
.sch-campus__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
}
.sch-campus__tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
.sch-campus__tile:nth-child(4n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
.sch-campus__tile button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sch-campus__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--sch-ease);
}
.sch-campus__tile:hover img {
  transform: scale(1.06);
}
.sch-campus__tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  background: linear-gradient(0deg, rgba(10, 21, 36, 0.82) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--sch-ease), transform 0.4s var(--sch-ease);
}
.sch-campus__tile:hover figcaption {
  opacity: 1;
  transform: none;
}
.sch-campus__tag {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sch-gold-light);
  font-weight: 600;
}
.sch-campus__title {
  color: var(--sch-white);
  font-weight: 600;
  font-size: 15px;
}
.sch-campus__lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  background: rgba(9, 26, 48, 0.92);
  cursor: zoom-out;
  animation: sch-fade-up 0.3s var(--sch-ease) forwards;
}
.sch-campus__lightbox img {
  max-width: min(90vw, 1100px);
  max-height: 80vh;
  border-radius: 12px;
  object-fit: contain;
  cursor: default;
}
.sch-campus__lightbox-title {
  color: var(--sch-white);
  font-size: 14px;
  letter-spacing: 0.3px;
}
.sch-campus__lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--sch-white);
  font-size: 22px;
  cursor: pointer;
}

/* ── Activities ─────────────────────────────────────────────────────── */
.sch-activities {
  position: relative;
  overflow: hidden;
  background: var(--sch-ivory);
}
.sch-activities__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.sch-activity-card {
  background: var(--sch-white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sch-border);
  border-bottom: 4px solid var(--accent, var(--sch-gold));
  transition: transform 0.4s var(--sch-ease), box-shadow 0.4s var(--sch-ease);
}
.sch-activity-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--accent, var(--sch-navy)) 22%, transparent);
}
.sch-activity-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sch-activity-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sch-ease);
}
.sch-activity-card:hover .sch-activity-card__media img {
  transform: scale(1.06);
}
.sch-activity-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sch-white);
  background: var(--accent, var(--sch-navy));
  padding: 5px 10px;
  border-radius: 999px;
}
.sch-activity-card h3 {
  font-size: 17px;
  padding: 18px 18px 4px;
}
.sch-activity-card p {
  font-size: 14px;
  padding: 0 18px 20px;
}

/* ── Teachers ───────────────────────────────────────────────────────── */
.sch-teachers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.sch-teacher-card {
  text-align: center;
}
.sch-teacher-card__photo {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  max-width: 168px;
  box-shadow: 0 16px 32px rgba(15, 29, 51, 0.1);
}
.sch-teacher-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-teacher-card h3 {
  font-size: 18px;
}
.sch-teacher-card__role {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--sch-gold);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.sch-teacher-card p {
  margin-top: 12px;
  font-size: 14px;
}

/* ── Testimonials (interactive: one featured quote + tab row) ─────────── */
.sch-testimonials {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sch-white) 0%, var(--sch-ivory) 100%);
}
.sch-t-feature {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sch-t-feature__mark {
  font-family: var(--font-fraunces), serif;
  font-size: 64px;
  line-height: 1;
  color: var(--accent, var(--sch-gold));
}
.sch-t-feature__quote {
  margin: 0;
  font-family: var(--font-fraunces), serif;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--sch-navy);
  animation: sch-fade-up 0.5s var(--sch-ease) forwards;
}
.sch-t-feature__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.sch-t-feature__name {
  font-weight: 700;
  color: var(--accent, var(--sch-navy));
  font-size: 15px;
}
.sch-t-feature__role {
  font-size: 13px;
  color: var(--sch-muted);
}
.sch-t-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}
.sch-t-tab {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  border: 2.5px solid transparent;
  background: var(--sch-gray);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s var(--sch-ease), border-color 0.3s var(--sch-ease), transform 0.3s var(--sch-ease);
}
.sch-t-tab:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.sch-t-tab.is-active {
  opacity: 1;
  /* A faded track — the animated ring below draws the actual "time
     until auto-advance" fill on top of it, Instagram-story style. */
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.sch-t-tab__ring {
  position: absolute;
  inset: -2.5px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.sch-t-tab__ring circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5px;
  stroke-linecap: round;
  /* 2 * PI * r(22) ≈ 138 — kept in sync with AUTO_ADVANCE_MS (6s) in
     SchoolTestimonialsSection.tsx. */
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  animation: sch-t-ring 6s linear forwards;
}
@keyframes sch-t-ring {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-t-tab__ring circle { animation: none; stroke-dashoffset: 0; }
}
.sch-t-tab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-t-tab__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: var(--sch-navy);
}

/* ── Stats band ─────────────────────────────────────────────────────── */
.sch-stats {
  position: relative;
  overflow: hidden;
  background: var(--sch-navy);
  background-image: radial-gradient(circle at 15% 20%, rgba(46, 91, 255, 0.18), transparent 45%);
}
.sch-stats__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sch-stat {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.4s var(--sch-ease), background 0.4s var(--sch-ease), border-color 0.4s var(--sch-ease);
}
.sch-stat:hover {
  transform: translateY(-5px);
  background: color-mix(in srgb, var(--accent, var(--sch-white)) 10%, rgba(255, 255, 255, 0.05));
  border-color: color-mix(in srgb, var(--accent, var(--sch-white)) 35%, transparent);
}
.sch-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--accent, var(--sch-gold-light)) 16%, transparent);
  color: var(--accent, var(--sch-gold-light));
}
.sch-stat__icon svg {
  width: 24px;
  height: 24px;
}
.sch-stat__value {
  font-family: var(--font-fraunces), serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  color: var(--accent, var(--sch-white));
  font-variant-numeric: tabular-nums;
}
.sch-stat__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.3px;
}

/* ── Achievements — a milestone timeline. The dot sits in NORMAL FLOW
   above each card (not absolutely centered over it), so it can never
   overlap the card's own text — the connecting line is positioned to
   pass through the dots' shared vertical center instead of the other
   way around. ──────────────────────────────────────────────────────── */
.sch-achievements {
  background: var(--sch-ivory);
}
.sch-achievements__line {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sch-achievements__line:before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sch-border);
  z-index: 0;
}
.sch-achievements__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sch-achievements__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--sch-ivory);
  box-shadow: 0 0 0 2px var(--accent);
  animation: sch-dot-pulse 2.6s var(--sch-ease) infinite;
  animation-delay: calc(var(--i, 0) * 0.2s);
}
@keyframes sch-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .sch-achievements__dot { animation: none; }
}
.sch-achievements__card {
  width: 100%;
  background: var(--sch-white);
  border-radius: 16px;
  padding: 22px 18px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 32px rgba(15, 29, 51, 0.08);
  text-align: center;
}
.sch-achievements__year {
  display: inline-block;
  font-family: var(--font-fraunces), serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.sch-achievements__card h3 {
  font-size: 15.5px;
  margin-bottom: 6px;
}
.sch-achievements__card p {
  font-size: 13px;
}

/* ── News ───────────────────────────────────────────────────────────── */
.sch-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.sch-news-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sch-border);
  transition: transform 0.4s var(--sch-ease), box-shadow 0.4s var(--sch-ease);
}
.sch-news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(15, 29, 51, 0.1);
}
.sch-news-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.sch-news-card__body {
  padding: 22px;
}
.sch-news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--sch-muted);
}
.sch-news-card__tag {
  color: var(--sch-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.sch-news-card h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.sch-news-card p {
  font-size: 14px;
}
.sch-news__more {
  text-align: center;
  margin-top: 44px;
}

/* ── Events ─────────────────────────────────────────────────────────── */
.sch-events__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sch-event-card {
  display: grid;
  grid-template-columns: 88px 140px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--sch-ivory);
  border-radius: 16px;
  padding: 22px 26px;
  border: 1px solid var(--sch-border);
  transition: box-shadow 0.35s var(--sch-ease), transform 0.35s var(--sch-ease);
}
.sch-event-card:hover {
  box-shadow: 0 18px 40px rgba(15, 29, 51, 0.08);
  transform: translateY(-3px);
}
.sch-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sch-navy);
  color: var(--sch-white);
  border-radius: 12px;
  padding: 14px 0;
}
.sch-event-card__day {
  font-family: var(--font-fraunces), serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.sch-event-card__month {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sch-gold-light);
  margin-top: 4px;
}
.sch-event-card__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sch-event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sch-event-card__body h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.sch-event-card__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--sch-gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.sch-event-card__body p {
  font-size: 14px;
  margin-bottom: 14px;
}

/* ── Admission (process timeline) ──────────────────────────────────── */
.sch-admission {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sch-sky) 0%, var(--sch-white) 60%);
}
.sch-admission__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
.sch-admission-step {
  position: relative;
  padding: 0 20px;
  text-align: center;
}
.sch-admission-step:not(:last-child):after {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(50% + 44px);
  right: calc(-50% + 44px);
  border-top: 2px dashed var(--sch-border);
}
.sch-admission-step__marker {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
}
.sch-admission-step__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--sch-white);
  border: 1.5px solid var(--accent, var(--sch-gold));
  color: var(--accent, var(--sch-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent, var(--sch-navy)) 18%, transparent);
}
.sch-admission-step__icon svg {
  width: 26px;
  height: 26px;
}
.sch-admission-step__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, var(--sch-navy));
  color: var(--sch-white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sch-admission-step h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.sch-admission-step p {
  font-size: 14px;
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.sch-faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sch-faq__item {
  border: 1px solid var(--sch-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s var(--sch-ease);
}
.sch-faq__item.is-open {
  border-color: var(--sch-gold);
}
.sch-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--sch-navy);
  cursor: pointer;
}
.sch-faq__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sch-ivory);
  color: var(--sch-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
}
.sch-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--sch-ease);
}
.sch-faq__item.is-open .sch-faq__answer-wrap {
  grid-template-rows: 1fr;
}
.sch-faq__answer {
  overflow: hidden;
  padding: 0 24px;
  font-size: 15px;
  color: var(--sch-muted);
  line-height: 1.7;
}
.sch-faq__item.is-open .sch-faq__answer {
  padding-bottom: 22px;
}

/* ── Contact form ───────────────────────────────────────────────────── */
.sch-contact-form__inner {
  max-width: 760px;
  margin: 0 auto;
}
.sch-contact-form__card {
  background: var(--sch-ivory);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sch-contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.sch-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sch-contact-form__field--full {
  grid-column: 1 / -1;
}
.sch-contact-form__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sch-navy);
}
.sch-contact-form__required {
  color: var(--sch-gold);
  margin-left: 3px;
}
.sch-contact-form__field input,
.sch-contact-form__field textarea {
  border: 1px solid var(--sch-border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--sch-white);
  color: var(--sch-text);
  outline: none;
  transition: border-color 0.3s var(--sch-ease), box-shadow 0.3s var(--sch-ease);
}
.sch-contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}
.sch-contact-form__field input:focus,
.sch-contact-form__field textarea:focus {
  border-color: var(--sch-gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 63, 0.14);
}
.sch-contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--sch-muted);
  cursor: pointer;
}
.sch-contact-form__consent input {
  margin-top: 3px;
}
.sch-contact-form__consent a {
  color: var(--sch-navy);
  text-decoration: underline;
}
.sch-contact-form__card .sch-btn {
  align-self: flex-start;
}
.sch-contact-form__success {
  text-align: center;
  background: var(--sch-ivory);
  border-radius: 20px;
  padding: 60px 40px;
}
.sch-contact-form__success h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

/* ── Map ────────────────────────────────────────────────────────────── */
.sch-map__frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid var(--sch-sky);
  box-shadow: 0 30px 60px rgba(15, 29, 51, 0.1);
}
.sch-map__card {
  position: absolute;
  left: 28px;
  bottom: 28px;
  background: var(--sch-white);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 16px 36px rgba(15, 29, 51, 0.18);
  border-left: 4px solid var(--sch-royal);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sch-map__card p {
  font-size: 14px;
  color: var(--sch-text);
}
.sch-map__card a {
  font-weight: 700;
  color: var(--sch-navy);
  font-size: 15px;
}

/* ── CTA banner — an elevated glass card floating on the gradient band,
   not text sitting flat on a flat rectangle. ──────────────────────────── */
.sch-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--sch-royal-deep) 0%, var(--sch-royal) 100%);
  padding: 76px 0;
}
.sch-cta:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 88% 20%, rgba(214, 166, 74, 0.28), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(140, 207, 106, 0.22), transparent 40%);
}
.sch-cta:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: var(--sch-grain);
}
.sch-cta__card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 32px;
  padding: 52px 56px;
  backdrop-filter: blur(8px);
}
.sch-cta__icon {
  position: absolute;
  z-index: 0;
  top: -34px;
  right: -24px;
  width: 190px;
  height: 190px;
  color: var(--sch-white);
  opacity: 0.1;
  transform: rotate(12deg);
}
.sch-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.sch-cta h2 {
  color: var(--sch-white);
  font-size: clamp(26px, 3.4vw, 36px);
  max-width: 560px;
}
.sch-cta p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 10px;
  max-width: 520px;
}
.sch-cta__buttons {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

/* ── Rich text ──────────────────────────────────────────────────────── */
.sch-richtext__inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sch-richtext--center {
  margin: 0 auto;
  text-align: center;
}
.sch-richtext--right {
  margin: 0 0 0 auto;
  text-align: right;
}
.sch-richtext p {
  font-size: 16px;
}
.sch-richtext__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.sch-richtext__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--sch-text);
}
.sch-richtext__list li:before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sch-gold);
}

/* ── Manifesto — full-bleed navy pull-quote, the brand's punctuation
   mark between sections. richText with content.variant === 'statement'. */
.sch-manifesto {
  background: var(--sch-navy-deep);
  padding: 140px 0;
  background-image: radial-gradient(circle at 50% 0%, rgba(184, 134, 63, 0.1), transparent 55%);
}
.sch-manifesto__inner {
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
p.sch-manifesto__quote {
  font-family: var(--font-fraunces), "Fraunces", Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--sch-white);
  margin: 0;
}
.sch-manifesto__sign {
  display: block;
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sch-gold-light);
}

/* ===========================================
   FOOTER
   =========================================== */
.sch-footer {
  background: var(--sch-navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 88px 0 32px;
}
.sch-footer__top {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.sch-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sch-footer__name {
  font-family: var(--font-fraunces), serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--sch-white);
}
.sch-footer__kicker {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sch-gold-light);
}
p.sch-footer__tagline {
  font-size: 15px;
  line-height: 1.7;
  color: inherit;
}
.sch-footer__grid {
  display: grid;
  grid-template-columns: repeat(var(--sch-footer-cols, 2), 1fr);
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 760px;
  margin: 0 auto;
}
.sch-footer__col h4 {
  color: var(--sch-white);
  font-size: 14px;
  font-family: var(--font-inter-sch), sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sch-footer__col a,
.sch-footer__col p {
  display: block;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  transition: color 0.3s var(--sch-ease);
}
.sch-footer__col a:hover {
  color: var(--sch-gold-light);
}
.sch-footer__bottom {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.sch-footer__bottom-line {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.sch-footer__bottom-line a {
  color: rgba(255, 255, 255, 0.45);
}
.sch-footer__bottom-line a:hover {
  color: var(--sch-gold-light);
}
.sch-socials {
  display: flex;
  gap: 12px;
}
.sch-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: border-color 0.3s var(--sch-ease), color 0.3s var(--sch-ease);
}
.sch-socials a:hover {
  border-color: var(--sch-gold);
  color: var(--sch-gold-light);
}
.sch-poweredby {
  background: var(--sch-navy-deep);
  padding: 14px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sch-poweredby span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}
.sch-poweredby img {
  display: inline-block;
  width: 80px;
}

/* ===========================================
   COOKIE / SCROLL-TO-TOP
   =========================================== */
.sch-cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  max-width: 560px;
  margin: 0 auto;
  background: var(--sch-navy);
  color: var(--sch-white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  animation: sch-fade-up 0.5s var(--sch-ease) forwards;
}
.sch-cookie__inner {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sch-cookie__inner p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.sch-cookie__actions {
  display: flex;
  gap: 10px;
}

.sch-scrolltop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sch-white);
  border: 1px solid var(--sch-border);
  box-shadow: 0 12px 28px rgba(15, 29, 51, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--sch-ease), transform 0.3s var(--sch-ease);
}
.sch-scrolltop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sch-scrolltop__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.sch-scrolltop__arrow {
  width: 18px;
  height: 18px;
  color: var(--sch-navy);
}

/* ── Photographic treatment — a single cohesive grade across every piece
   of campus/people photography (never the navbar logo or icon SVGs), the
   detail that keeps a page of stock-sourced imagery reading as one
   consistent, edited brand shoot rather than a grab-bag of stock photos. */
.sch-hero__media img,
.sch-pedagogy__media img,
.sch-campus__tile img,
.sch-journey__node-img img,
.sch-journey__panel-media img,
.sch-activity-card__media img,
.sch-teacher-card__photo img,
.sch-news-card img,
.sch-event-card__media img,
.sch-collage img {
  filter: saturate(0.92) contrast(1.05);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1080px) {
  .sch-whyus__grid,
  .sch-teachers__grid,
  .sch-news__grid,
  .sch-activities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sch-campus__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sch-journey__panel {
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 32px;
  }
  .sch-admission__steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }
  .sch-admission-step:nth-child(2n):after {
    content: none;
  }
  .sch-hero__stats-inner {
    padding: 26px 0;
  }
}

@media (max-width: 860px) {
  .sch-achievements__line {
    flex-direction: column;
    gap: 22px;
  }
  .sch-achievements__line:before {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .sch-achievements__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .sch-achievements__dot {
    margin-bottom: 0;
    margin-top: 5px;
  }
  .sch-achievements__card {
    text-align: left;
  }
  .sch-pedagogy__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sch-pedagogy--right .sch-pedagogy__media-wrap {
    order: 0;
  }
  .sch-pedagogy__media-wrap {
    margin: 0 14px 18px 0;
  }
  .sch-pedagogy--right .sch-pedagogy__media-wrap {
    margin: 0 0 18px 14px;
  }
  .sch-pedagogy__frame {
    inset: 14px -14px -14px 14px;
    border-radius: 20px;
  }
  .sch-pedagogy--right .sch-pedagogy__frame {
    inset: 14px 14px -14px -14px;
  }
  .sch-pedagogy__badge {
    width: 44px;
    height: 44px;
    bottom: -14px;
    left: -14px;
  }
  .sch-pedagogy--right .sch-pedagogy__badge {
    right: -14px;
  }
  .sch-studentlife__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sch-collage {
    max-width: 480px;
    margin: 0 auto;
  }
  .sch-journey__track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }
  .sch-journey__track:before {
    display: none;
  }
  .sch-journey__panel {
    grid-template-columns: 1fr;
  }
  .sch-event-card {
    grid-template-columns: 72px 1fr;
  }
  .sch-event-card__media {
    display: none;
  }
  .sch-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .sch-whyus,
  .sch-pedagogy,
  .sch-journey,
  .sch-studentlife,
  .sch-campus,
  .sch-activities,
  .sch-teachers,
  .sch-testimonials,
  .sch-achievements,
  .sch-stats,
  .sch-news,
  .sch-events,
  .sch-admission,
  .sch-faq,
  .sch-contact-form,
  .sch-map,
  .sch-richtext {
    padding: 72px 0;
  }
  .sch-whyus__grid {
    grid-template-columns: 1fr;
  }
  .sch-journey__track {
    grid-template-columns: repeat(2, 1fr);
  }
  .sch-teachers__grid,
  .sch-news__grid,
  .sch-activities__grid,
  .sch-stats__grid,
  .sch-admission__steps,
  .sch-footer__grid {
    grid-template-columns: 1fr;
  }
  .sch-t-tabs {
    flex-wrap: wrap;
  }
  .sch-campus__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .sch-campus__tile:nth-child(4n+1) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .sch-admission-step:after {
    content: none;
  }
  .sch-contact-form__grid {
    grid-template-columns: 1fr;
  }
  .sch-contact-form__card {
    padding: 28px 22px;
  }
  .sch-hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .sch-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}