/* ============================================================
   IFISA — Design System v5  |  Institutional · Editorial
   Muted purple #574a78 · Deep plum #3f3559 · Soft gold #c2a14e
   Warm near-white surfaces · Charcoal #2c2c34 · Editorial serif
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Institutional core */
  --navy:         #3f3559;
  --navy-deep:    #2f2744;
  --navy-mid:     #4a3f68;
  --navy-soft:    #574a78;
  --accent:       #574a78;
  --accent-dark:  #463c61;
  --sand:         #f3efe6;
  --sand-deep:    #e6dfcf;
  --paper:        #fbfaf7;

  /* Brand legacy (used sparingly as warm accents) */
  --brand-purple: #574a78;
  --brand-gold:   #c2a14e;
  --brand-gold-dark: #9d8038;

  /* Legacy token mapping — keeps existing markup working */
  --purple:       var(--navy);
  --purple-mid:   var(--navy-mid);
  --purple-soft:  var(--navy-soft);
  --purple-light: var(--accent);
  --purple-pale:  #f0edf4;
  --gold:         var(--brand-gold);
  --gold-dark:    var(--brand-gold-dark);
  --gold-pale:    #fdf6ea;
  --red-p:        #b91c1c;
  --pink-p:       #9d174d;
  --amber-p:      #b45309;
  --charcoal:     #2c2c34;

  /* Neutral (warm, plum-leaning) */
  --ink:     #2c2c34;
  --ink-2:   #3a3742;
  --gray-dk: #4a4752;
  --gray:    #625e6b;
  --gray-lt: #9b97a3;
  --border:  #e8e6e2;
  --border-strong: #d5d1c9;
  --bg:      #ffffff;
  --white:   #ffffff;

  --grad-purple: linear-gradient(140deg, #3f3559 0%, #4a3f68 100%);
  --grad-gold:   linear-gradient(140deg, #c2a14e, #9d8038);

  --shadow-xs:  0 1px 2px rgba(63,53,89,.06);
  --shadow-sm:  0 1px 3px rgba(63,53,89,.06), 0 4px 16px rgba(63,53,89,.04);
  --shadow:     0 4px 14px rgba(63,53,89,.07), 0 10px 30px rgba(63,53,89,.05);
  --shadow-lg:  0 12px 40px rgba(63,53,89,.10), 0 24px 60px rgba(63,53,89,.06);
  --shadow-purple: 0 12px 36px rgba(63,53,89,.22);

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font:       var(--font-sans);

  --transition: .22s cubic-bezier(.22,1,.36,1);
  --container:  1240px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--navy); color: #fff; }

/* ---------- Animations (restrained) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.animate-fade-rise         { animation: fadeRise .8s cubic-bezier(.22,1,.36,1) both; }
.animate-fade-rise-delay   { animation: fadeRise .8s cubic-bezier(.22,1,.36,1) .2s both; }
.animate-fade-rise-delay-2 { animation: fadeRise .8s cubic-bezier(.22,1,.36,1) .4s both; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay  { transition-delay: .12s; }
.reveal-delay2 { transition-delay: .24s; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.012em;
}
h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
}
h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 600;
}
h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.3; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0; }
p  { margin-bottom: 1rem; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--navy);
  background: transparent; border: 0; padding: 0;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--brand-gold);
  display: inline-block;
}
.eyebrow--gold { color: var(--brand-gold-dark); }
.eyebrow--gold::before { background: var(--brand-gold); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: 110px 0; }
.section-sm { padding: 72px 0; }
.section-rule { border-top: 1px solid var(--border); }
.section-header { margin-bottom: 56px; max-width: 760px; }
.section-header--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header--center p { margin-left: auto; margin-right: auto; }
.section-header p { margin-top: 16px; color: var(--gray); font-size: 1.08rem; line-height: 1.7; max-width: 620px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.text-center { text-align: center; }
.text-gray   { color: var(--gray); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-block;
  background: var(--sand);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--border);
}
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.plus-mark { display: none; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
}
.nav.scrolled { box-shadow: 0 1px 0 var(--border), 0 6px 24px rgba(63,53,89,.05); }
.nav__inner {
  max-width: var(--container); margin: 0 auto;
  height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: height .25s cubic-bezier(.22,1,.36,1);
}
.nav.scrolled .nav__inner { height: 80px; }
.nav__logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 1.05rem; color: var(--navy);
  letter-spacing: -.01em; flex-shrink: 0;
  font-family: var(--font-sans);
}
.nav__logo img { height: 68px; width: auto; display: block; }
.nav__logo span { display: none; }

.nav__links { display: flex; align-items: center; gap: 0; list-style: none; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > a,
.nav__label {
  padding: 28px 14px;
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
  position: relative;
  transition: color var(--transition);
  display: flex; align-items: center;
}
.nav__item > a::after,
.nav__label::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 18px;
  height: 2px; background: var(--brand-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.nav__item:hover > a,
.nav__item:hover > .nav__label,
.nav__item.active > a,
.nav__item.active > .nav__label { color: var(--navy); }
.nav__item:hover > a::after,
.nav__item:hover > .nav__label::after,
.nav__item.active > a::after,
.nav__item.active > .nav__label::after { transform: scaleX(1); }

.nav__expand { display: none; }

/* Mega menu — desktop */
.mega-menu {
  position: fixed; left: 50%; top: 96px; transform: translateX(-50%) translateY(8px);
  width: min(1120px, calc(100vw - 64px)); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
  padding-top: 0;
  z-index: 199;
}
.nav__item:hover .mega-menu,
.nav__item:focus-within .mega-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mega-menu__inner {
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius) var(--radius);
  display: grid; grid-template-columns: 1.1fr 2fr .9fr; gap: 0;
  overflow: hidden;
}
.mega-menu__intro {
  background: var(--paper); padding: 34px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.mega-menu__intro h3 {
  font-family: var(--font-serif); font-size: 1.35rem; color: var(--navy); line-height: 1.2;
}
.mega-menu__intro p { color: var(--gray); font-size: .94rem; line-height: 1.6; margin: 0; }
.mega-menu__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
  padding: 28px; align-content: start;
}
.mega-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 120px;
}
.mega-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.mega-card__label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 10px; border-radius: 999px; width: fit-content; color: #fff;
  white-space: nowrap;
}
.mega-card--navy .mega-card__label { background: var(--navy); }
.mega-card--accent .mega-card__label { background: var(--accent); }
.mega-card--gold .mega-card__label { background: var(--brand-gold); color: var(--navy); }
.mega-card--sand .mega-card__label { background: var(--sand-deep); color: var(--navy); }
.mega-card__text { font-size: .9rem; color: var(--gray); line-height: 1.5; }

.mega-menu__links {
  background: var(--paper); padding: 28px; border-left: 1px solid var(--border);
}
.mega-menu__links h4 {
  font-family: var(--font-sans); font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--gray); margin-bottom: 16px;
}
.mega-menu__links ul { list-style: none; }
.mega-menu__links li { margin-bottom: 10px; }
.mega-menu__links a {
  font-size: .92rem; color: var(--ink-2); font-weight: 500; transition: color .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.mega-menu__links a::before { content: '→'; color: var(--accent); font-size: .8rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.mega-menu__links a:hover { color: var(--accent); }
.mega-menu__links a:hover::before { opacity: 1; transform: translateX(0); }

/* Mobile menu (nested) */
.mega-menu__mobile { display: none; }

.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--navy); }

/* ---------- Page heroes ---------- */
.page-hero {
  padding: 120px 0 92px;
  background: var(--sand);
  border-bottom: 1px solid var(--sand-deep);
  position: relative;
  overflow: hidden;
}
.page-hero::after { content: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 860px; }
.page-hero > .container > .eyebrow { display: none; }
.page-hero p { max-width: 680px; margin-top: 24px; color: var(--ink-2); font-size: 1.18rem; line-height: 1.7; }
.breadcrumb { display: inline-flex; align-items: center; gap: 9px; color: var(--gray); font-size: .82rem; margin-bottom: 18px; letter-spacing: .04em; text-transform: uppercase; }
.breadcrumb a { color: var(--accent); font-weight: 600; }

/* Page hero with photographic background */
.page-hero--image { background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: none; padding: 140px 0 110px; }
.page-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(63,53,89,.88) 0%, rgba(63,53,89,.72) 55%, rgba(63,53,89,.5) 100%); z-index: 0; }
.page-hero--image h1, .page-hero--image .eyebrow { color: #fff; }
.page-hero--image p { color: rgba(255,255,255,.92); }
.page-hero--image .breadcrumb { color: rgba(255,255,255,.75); }
.page-hero--image .breadcrumb a { color: #fff; }
.page-hero--image .breadcrumb span { color: rgba(255,255,255,.5); }

/* ---------- Home hero — cinematic editorial ---------- */
.hero {
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(47,39,68,.78) 0%, rgba(63,53,89,.55) 45%, rgba(63,53,89,.22) 100%),
    radial-gradient(circle at 78% 30%, #574a78 0%, #3f3559 55%, #2f2744 100%);
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .35;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero p { color: rgba(255,255,255,.78); font-size: 1.18rem; max-width: 56ch; }
.hero .eyebrow { color: #fff; opacity: .9; }
.hero .eyebrow::before { background: var(--brand-gold); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }

/* Hero with photo or video background (homepage) */
.hero.hero--image,
.hero.hero--video {
  min-height: 92vh;
  background: var(--navy-deep);
  padding: 0;
}
.hero.hero--image::before,
.hero.hero--video::before { display: none; }
.hero--image .hero__bg {
  position: absolute; inset: 0;
  background-image: url('/__l5e/assets-v1/2be46175-f0e0-4943-a4cc-aab5073ab2dd/hero-classroom-kids.png');
  background-size: cover; background-position: center; z-index: 0;
}
.hero--video .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero--image .hero__overlay,
.hero--video .hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(47,39,68,.62) 0%, rgba(63,53,89,.42) 50%, rgba(63,53,89,.28) 100%),
    linear-gradient(to top, rgba(44,44,52,.30) 0%, transparent 30%);
  z-index: 1;
}
.hero--image .container,
.hero--video .container { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 130px; }
.hero--image .hero__content,
.hero--video .hero__content { max-width: 760px; }
/* One calm fade for the whole block — no per-element movement */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero--video .hero__content { animation: heroFadeIn 1.1s ease both; }
.hero--image .hero__content { animation: heroFadeIn 1.1s ease both; }
.hero--image .eyebrow, .hero--video .eyebrow { color: rgba(255,255,255,.92); opacity: 1; }
.hero--image .eyebrow::before, .hero--video .eyebrow::before { background: var(--brand-gold); }
.hero--image h1, .hero--video h1 { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.18); }
.hero--video h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  max-width: 22ch;
}
.hero--image p, .hero--video p { color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.15); }
.hero--image .btn-outline-light, .hero--video .btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.hero--image .btn-outline-light:hover, .hero--video .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
@media (max-width: 960px) {
  .hero--image .container, .hero--video .container { padding-top: 110px; padding-bottom: 90px; }
  .hero--image .hero__content, .hero--video .hero__content { max-width: 100%; }
}
@media (max-width: 560px) {
  .hero.hero--image, .hero.hero--video { min-height: auto; }
  .hero--image .container, .hero--video .container { padding-top: 80px; padding-bottom: 72px; }
}
.plus { display: none; }

/* Liquid glass — used for CTAs over the hero video */
.liquid-glass {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn.liquid-glass { border-radius: 999px; padding: 15px 30px; }
.btn.liquid-glass:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }

/* Restyle the mosaic into a quiet editorial panel */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.mosaic__cell { border-radius: var(--radius-lg); overflow: hidden; position: relative; transition: transform .25s; border: 1px solid rgba(255,255,255,.08); }
.mosaic__cell:hover { transform: translateY(-3px); }
.mosaic__cell--a { background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); backdrop-filter: blur(8px); height: 210px; display: flex; align-items: flex-end; padding: 22px; }
.mosaic__cell--b { background: linear-gradient(155deg, #4a3f68, #3f3559); height: 210px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.mosaic__cell--c { background: var(--brand-gold); color: var(--navy); height: 190px; display: flex; align-items: center; justify-content: center; padding: 22px; }
.mosaic__cell--d { background: linear-gradient(155deg, #574a78, #4a3f68); height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.mosaic__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.7); display: block; margin-bottom: 6px; }
.mosaic__cell--c .mosaic__label { color: rgba(63,53,89,.7); }
.mosaic__big { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.02em; }
.mosaic__cell--c .mosaic__big { color: var(--navy); }
.mosaic__sub { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 6px; }
.mosaic__cell--c .mosaic__sub { color: rgba(63,53,89,.7); }
.mosaic__float { position: absolute; background: #fff; border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; z-index: 10; font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mosaic__float .fi { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; background: var(--sand); border: 1px solid var(--sand-deep); padding: 0; color: var(--navy); }
.mosaic__float--1 { bottom: -20px; left: -20px; }
.mosaic__float--2 { top: -20px; right: -16px; }

.avatar-stack { display: flex; align-items: center; gap: 14px; margin-top: 40px; color: rgba(255,255,255,.75); font-size: .9rem; }
.avatar-stack__imgs { display: flex; }
.av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--navy-deep); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #fff; background: var(--accent); }
.av:first-child { margin-left: 0; background: var(--brand-gold); color: var(--navy); }
.av:nth-child(2) { background: #fff; color: var(--navy); }
.av:nth-child(3) { background: var(--accent); }
.dot, .feat__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }

/* ---------- Homepage sections ---------- */
/* Quiet static strip of small-caps discipline labels (replaces the old marquee) */
.strand-strip, .marquee-strip { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; }
.strand-strip__row, .marquee-track {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: 40px; row-gap: 12px;
  animation: none; width: auto;
}
.strand-strip__row span, .marquee-item {
  display: flex; align-items: center; gap: 12px; padding: 0;
  white-space: nowrap; font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gray);
}
.strand-strip__row span::before, .marquee-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-gold); }
.strand-strip__row span:first-child::before { display: none; }
.marquee-item .dot { display: none; }
/* Hide the duplicated second half of any legacy marquee list */
.marquee-item:nth-child(n+9) { display: none; }

.vis-card { background: var(--navy); border-radius: var(--radius-lg); padding: 44px; position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: var(--shadow-lg); }
.vis-card h3, .vis-card h2 { color: #fff; }
.vis-card::before { content: ''; position: absolute; top: -30%; right: -25%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(87,74,120,.18) 0%, transparent 65%); border-radius: 50%; pointer-events: none; }
.vis-card__body { position: relative; z-index: 2; }
.vis-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 2; }
.vis-card__chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 16px; }
.vis-card__chip .num { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; color: var(--brand-gold); line-height: 1; }
.vis-card__chip .lbl { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: 6px; letter-spacing: .04em; }
.vis-badge { position: relative; margin-top: 16px; align-self: flex-start; background: #fff; border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; z-index: 5; color: var(--ink); }
.vis-badge__icon { width: 36px; height: 36px; background: var(--sand); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--navy); }

.fi { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.num { display: block; color: var(--navy); font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.lbl { display: block; color: var(--gray); font-size: .78rem; margin-top: 6px; letter-spacing: .04em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.split--flip { direction: rtl; }
.split--flip > * { direction: ltr; }

.feat { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); }
.feat:first-child { padding-top: 0; }
.feat:last-child { border-bottom: none; padding-bottom: 0; }
.feat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 10px; }
.feat__body h4 { margin-bottom: 4px; font-size: 1rem; color: var(--navy); }
.feat__body p { color: var(--gray); font-size: .92rem; margin: 0; }

.stage-row { display: flex; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.stage-mini { flex: 1; padding: 32px 24px; min-height: 280px; position: relative; overflow: hidden; transition: flex .35s ease; color: #fff; }
.stage-mini:hover { flex: 1.35; }
.stage-mini--1 { background: linear-gradient(165deg, #4a3f68, #3f3559); }
.stage-mini--2 { background: linear-gradient(165deg, #574a78, #4a3f68); }
.stage-mini--3 { background: linear-gradient(165deg, #6d5f8f, #574a78); }
.stage-mini--4 { background: linear-gradient(165deg, #c2a14e, #9d8038); color: var(--navy); }
.stage-mini .sn { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 600; opacity: .12; line-height: 1; position: absolute; top: 12px; right: 16px; color: #fff; }
.stage-mini--4 .sn { color: var(--navy); opacity: .18; }
.stage-mini h4 { color: #fff; font-size: 1rem; margin-bottom: 6px; font-family: var(--font-serif); font-weight: 600; }
.stage-mini--4 h4 { color: var(--navy); }
.stage-mini .age { display: inline-block; background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px 10px; font-size: .68rem; font-weight: 600; color: #fff; margin-bottom: 12px; letter-spacing: .04em; }
.stage-mini--4 .age { background: rgba(63,53,89,.14); color: var(--navy); }
.stage-mini p { font-size: .82rem; color: rgba(255,255,255,.78); margin: 0; line-height: 1.55; }
.stage-mini--4 p { color: rgba(63,53,89,.78); }

.audience-card { border-radius: var(--radius-lg); padding: 44px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-xs); transition: transform .22s, box-shadow .22s, border-color .22s; }
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.audience-card--school { background: var(--navy); color: #fff; border: none; box-shadow: var(--shadow-purple); }
.audience-card--school h3 { color: #fff; }
.audience-card__tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; background: var(--sand); color: var(--navy); }
.audience-card--school .audience-card__tag { background: rgba(194,161,78,.15); color: var(--brand-gold); }
.audience-card .btn { margin-top: 22px; }

.cta-block { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 80px 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; box-shadow: var(--shadow-lg); }
.cta-block::before { content: ''; position: absolute; bottom: -40%; right: 8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(194,161,78,.12) 0%, transparent 65%); border-radius: 50%; pointer-events: none; }
.cta-block h2 { color: #fff; margin-bottom: 12px; }
.cta-block p { color: rgba(255,255,255,.72); margin: 0; font-size: 1.06rem; max-width: 56ch; }
.cta-block__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: .9rem; letter-spacing: .01em;
  font-family: var(--font-sans);
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
  line-height: 1;
  box-shadow: none;
}

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-gold { background: var(--brand-gold); color: var(--navy); border-color: var(--brand-gold); font-weight: 700; }
.btn-gold:hover { background: var(--brand-gold-dark); color: #fff; border-color: var(--brand-gold-dark); }

.btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-outline-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-outline-dark:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn-sm { padding: 10px 18px; font-size: .82rem; }

.cta-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-group--center { justify-content: center; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 36px; border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card__icon { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 18px; background: var(--sand); color: var(--navy); }

/* ---------- Stage Cards ---------- */
.stage-card { border-radius: var(--radius-lg); padding: 36px; color: #fff; position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.stage-card:hover { transform: translateY(-4px); }
.stage-card--1 { background: var(--grad-purple); box-shadow: var(--shadow-purple); }
.stage-card--2 { background: linear-gradient(140deg, #4a3f68, #3f3559); box-shadow: var(--shadow-purple); }
.stage-card--3 { background: linear-gradient(140deg, #574a78, #4a3f68); box-shadow: var(--shadow-purple); }
.stage-card--4 { background: linear-gradient(140deg, #c2a14e, #9d8038); color: var(--navy); box-shadow: 0 12px 36px rgba(194,161,78,.28); }
.stage-card h2 { color: #fff; }
.stage-card--4 h2 { color: var(--navy); }
.stage-card .stage-num { font-family: var(--font-serif); font-size: 5rem; font-weight: 600; opacity: .12; position: absolute; top: 8px; right: 18px; line-height: 1; }
.stage-card .age-badge { display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 14px; font-size: .76rem; font-weight: 600; margin-bottom: 16px; letter-spacing: .04em; }
.stage-card--4 .age-badge { background: rgba(63,53,89,.14); color: var(--navy); }
.stage-card p { color: rgba(255,255,255,.95); font-size: .92rem; line-height: 1.65; }
.stage-card--4 p { color: rgba(63,53,89,.9); }

/* ---------- Pathway Cards ---------- */
.pathway-card { border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--border); border-top: 3px solid; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--transition), box-shadow var(--transition); }
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pathway-card--ai    { border-top-color: var(--navy); }
.pathway-card--robo  { border-top-color: var(--brand-gold); }
.pathway-card--bio   { border-top-color: var(--accent); }
.pathway-card--entre { border-top-color: var(--navy-soft); }
.pathway-card .badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; color: #fff; text-transform: uppercase; letter-spacing: .1em; }
.pathway-card--ai    .badge { background: var(--navy); }
.pathway-card--robo  .badge { background: var(--brand-gold); color: var(--navy); }
.pathway-card--bio   .badge { background: var(--accent); }
.pathway-card--entre .badge { background: var(--navy-soft); }

/* ---------- Section variants ---------- */
.section--dark { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.section--dark::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 38px 38px; opacity: .5; pointer-events: none; }
.section--dark .section-header h2 { color: #fff; }
.section--dark .section-header p  { color: rgba(255,255,255,.7); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .text-gray { color: rgba(255,255,255,.75); }
.section--light { background: #fff; }
.section--pale  { background: var(--sand); }

/* ---------- Dual Track ---------- */
.dual-track { display: grid; grid-template-columns: 1fr auto 1fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.dual-track__a { background: #fff; padding: 48px; }
.dual-track__b { background: var(--navy); color: #fff; padding: 48px; }
.dual-track__b h3 { color: var(--brand-gold); }
.dual-track__divider { display: flex; align-items: center; background: linear-gradient(180deg, #fff 50%, var(--navy) 50%); padding: 0 10px; }
.dual-track__divider span { background: #fff; border: 2px solid var(--navy); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--navy); flex-shrink: 0; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; }
.checklist li { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ---------- Stats ---------- */
.stat { padding: 28px 0; border-top: 1px solid var(--border); }
.stat:first-child { border-top: none; padding-top: 0; }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.stat__lbl { display: block; color: var(--gray); font-size: .92rem; margin-top: 10px; }

/* ---------- News / press cards (IBO-style date-led) ---------- */
.news-card {
  background: #fff;
  border-radius: 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
  display: flex; flex-direction: column;
}
.news-card:hover { transform: none; box-shadow: none; }
.news-card__img { aspect-ratio: 4 / 3; background: var(--sand); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; position: relative; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .news-card__img img { transform: scale(1.03); }
.news-card__date { font-size: .78rem; color: var(--gray); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; font-weight: 500; }
.news-card__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--navy); margin-bottom: 16px; transition: color .2s ease; }
.news-card:hover .news-card__title { color: var(--accent); }
.news-card__arrow { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); color: var(--accent); font-size: 1rem; }
.news-card__arrow::after { content: '→'; }

/* ---------- Forms ---------- */
input, textarea, select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .96rem;
  background: #fff;
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(87,74,120,.15);
}
label { font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; letter-spacing: .02em; }

/* ---------- Footer (institutional, plum) ---------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 80px 0 32px; border-top: 1px solid rgba(255,255,255,.08); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 56px; margin-bottom: 56px; }
.footer__brand p { color: rgba(255,255,255,.6); font-size: .94rem; line-height: 1.65; max-width: 36ch; }
.footer__logo { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #fff; margin-bottom: 18px; font-size: 1.05rem; }
.footer__logo img { height: 64px; width: auto; display: block; }
.footer h4 { color: var(--brand-gold); margin-bottom: 18px; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-family: var(--font-sans); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: rgba(255,255,255,.72); font-size: .92rem; transition: color var(--transition); }
.footer ul a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.5); font-size: .85rem; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .section { padding: 72px 0; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero { min-height: auto; }
  .hero .container { padding-top: 72px; padding-bottom: 72px; }
  .cta-block { grid-template-columns: 1fr; padding: 56px 36px; gap: 32px; }
  .cta-block__actions { align-items: flex-start; flex-direction: row; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .dual-track { grid-template-columns: 1fr; }
  .dual-track__divider { display: none; }
  .stage-row { flex-direction: column; }
  .stage-mini:hover { flex: 1; }
  .mega-menu__inner { grid-template-columns: 1fr; }
  .mega-menu__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav__inner { height: 82px; }
  .nav__logo img { height: 58px; }
  .nav__links {
    position: absolute; top: 82px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 8px 16px 24px; gap: 0;
    display: none; max-height: calc(100vh - 82px); overflow-y: auto;
  }
  .nav__links.open { display: flex; }
  .nav__item {
    flex-wrap: wrap; border-bottom: 1px solid var(--border);
  }
  .nav__item > a,
  .nav__label {
    padding: 14px 0; flex: 1;
  }
  .nav__item > a::after,
  .nav__label::after { display: none; }
  .nav__expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: transparent; color: var(--navy);
    cursor: pointer; transition: transform .2s ease;
  }
  .nav__item.open .nav__expand { transform: rotate(180deg); }
  .nav__toggle { display: inline-flex; }
  .mega-menu { display: none; }
  .mega-menu__mobile {
    display: none; width: 100%; padding: 8px 0 16px; border-top: 1px dashed var(--border);
  }
  .nav__item.open .mega-menu__mobile { display: block; }
  .mega-menu__mobile .mega-menu__intro { display: none; }
  .mega-menu__mobile .mega-menu__cards {
    display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; margin-bottom: 18px;
  }
  .mega-menu__mobile .mega-card { min-height: auto; padding: 14px; }
  .mega-menu__mobile .mega-menu__links { padding: 0; background: transparent; border: none; }
  .mega-menu__mobile .mega-menu__links h4 { margin-bottom: 10px; }
  .footer__grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .container { padding: 0 20px; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Hero highlight word — original markup wrapped a word in a gradient span */
.hero h1 span, .hero h1 em, .hero h1 .accent, .hero h1 [style] {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--brand-gold) !important;
  font-style: normal;
}
/* Star row inside the mosaic testimonial reads cleanly */
.mosaic__cell--c { text-align: center; }
.mosaic__cell--c .stars,
.mosaic__cell--c [class*="star"] { color: var(--navy); letter-spacing: 4px; }

/* Community section (homepage) */
.community-section{padding:96px 0;background:#fff;}
.community-grid{display:grid;grid-template-columns:0.85fr 1.15fr;align-items:center;position:relative;}
.community-photo{position:relative;z-index:2;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(63,53,89,.35);transform:translateX(40px);}
.community-photo img{display:block;width:100%;height:520px;object-fit:cover;}
.community-card{background:#f3efe6;border-radius:8px;padding:72px 64px 64px 104px;min-height:480px;}
.community-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
.community-stat{border-radius:6px;padding:24px 20px;color:#fff;}
.community-stat .num{font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.02em;}
.community-stat .lbl{font-size:.85rem;margin-top:8px;opacity:.95;}
.community-stat--purple{background:#574a78;}
.community-stat--sand{background:#a89e84;}
.community-stat--gold{background:#c2a14e;}
.community-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:#3f3559;font-weight:600;border-bottom:1px solid #3f3559;padding-bottom:6px;text-decoration:none;}
.community-link:hover{color:#574a78;border-color:#574a78;}
@media(max-width:900px){
  .community-grid{grid-template-columns:1fr;}
  .community-photo{transform:translateY(40px);max-width:80%;margin:0 auto;}
  .community-photo img{height:340px;}
  .community-card{padding:80px 32px 40px;}
  .community-stats{grid-template-columns:1fr;}
}

/* ---------- Consistent image treatment (subtle plum wash) ---------- */
.community-photo::after,
.news-card__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(63,53,89,.16) 0%, rgba(63,53,89,0) 45%, rgba(44,44,52,.12) 100%);
  pointer-events: none;
}
.news-card__img { position: relative; }
.community-photo img { transition: transform 6s cubic-bezier(.22,1,.36,1); }
.community-photo:hover img { transform: scale(1.04); }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero--video .hero__content,
  .hero--image .hero__content { animation: none !important; opacity: 1; }
}

/* ---------- Curriculum strands — DNA helix ---------- */
.dna-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.dna-stage { perspective: 1000px; display: flex; justify-content: center; padding: 24px 0; }
.dna-helix { position: relative; width: 280px; height: 470px; transform-style: preserve-3d; }
.dna-rung {
  position: absolute; left: 0; right: 0;
  top: calc(var(--i) * 66px);
  height: 44px;
  display: flex; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  transform: rotateY(calc(var(--i) * 51.43deg));
  font-family: var(--font-sans);
}
.dna-node {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  border: 2px solid transparent;
  flex-shrink: 0;
  backface-visibility: hidden;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.dna-rung:hover .dna-node,
.dna-rung.is-active .dna-node {
  background: var(--brand-gold); color: var(--navy);
  border-color: rgba(63,53,89,.25);
  transform: scale(1.12);
}
.dna-bar {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(87,74,120,.45) 50%, var(--brand-gold) 100%);
}
.dna-rung.is-active .dna-bar { height: 3px; }
.dna-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-gold);
  flex-shrink: 0;
}
.dna-detail { position: relative; }
.dna-card {
  display: none;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-gold);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}
.dna-card.is-active { display: block; animation: fadeRise .45s cubic-bezier(.22,1,.36,1) both; }
.dna-card__num {
  font-family: var(--font-serif);
  font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: var(--navy); opacity: .14;
  margin-bottom: 12px;
}
.dna-card__label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--gray);
  margin-bottom: 10px;
}
.dna-card h4 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--navy); }
@media (max-width: 980px) {
  .dna-layout { grid-template-columns: 1fr; gap: 32px; }
  .dna-stage { display: none; }
  .dna-card { display: block; margin-bottom: 20px; animation: none; }
  .dna-card.is-active { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dna-card.is-active { animation: none; }
}

/* ============================================================
   Journey hero — scroll-driven "IFISA Journey" (homepage)
   A pinned hero: a gold path draws itself through 5 waypoints
   (ages 5 → 18 → graduate) as the user scrolls.
   ============================================================ */
.jhero {
  position: relative;
  display: block;
  overflow: visible;
  height: 340vh;
  min-height: 0;
  padding: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(245,217,138,.35) 0%, transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(87,74,120,.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 60%, #f3efe6 100%);
}
.jhero::before { display: none; }
.jhero__pin {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}
.jhero__stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(194,161,78,.55), transparent),
    radial-gradient(1.4px 1.4px at 34% 12%, rgba(87,74,120,.35), transparent),
    radial-gradient(1.6px 1.6px at 62% 28%, rgba(194,161,78,.45), transparent),
    radial-gradient(1.4px 1.4px at 82% 16%, rgba(87,74,120,.35), transparent),
    radial-gradient(1.2px 1.2px at 22% 68%, rgba(194,161,78,.4), transparent),
    radial-gradient(1.2px 1.2px at 76% 72%, rgba(87,74,120,.3), transparent);
}
.jhero__scrim {
  position: absolute; top: 0; left: 0; right: 0;
  height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.jhero .container {
  position: relative; z-index: 3;
  padding-top: 136px; padding-bottom: 0;
}
.jhero__content { max-width: 660px; animation: heroFadeIn 1.1s ease both; }
.jhero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  max-width: 22ch;
  color: var(--ink);
  text-shadow: none;
}
.jhero .eyebrow { color: var(--navy); opacity: 1; }
.jhero .eyebrow::before { background: var(--brand-gold); }
.jhero .btn-outline-light { background: transparent; color: var(--ink); border: 1.5px solid var(--navy); }
.jhero .btn-outline-light:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.jhero__stage {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%; z-index: 2; pointer-events: none;
}
.jhero__stage svg { width: 100%; height: 100%; display: block; }

.jhero__cue {
  position: absolute; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 10px;
  color: var(--gray);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .5s ease;
}
.jhero__cue span { animation: jcueBob 1.6s ease-in-out infinite; }
@keyframes jcueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.jhero.is-going .jhero__cue { opacity: 0; }

/* Path */
.jpath__base {
  fill: none;
  stroke: rgba(63,53,89,.18);
  stroke-width: 2;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
}
.jpath__draw {
  fill: none;
  stroke: var(--brand-gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 8px rgba(194,161,78,.5));
}
.jspark { fill: #f7e3a6; opacity: 0; transition: opacity .3s ease; }
.jspark-halo { fill: rgba(245,217,138,.45); opacity: 0; transition: opacity .3s ease; }

/* Waypoints */
.jw__ring {
  fill: #ffffff;
  stroke: var(--navy);
  stroke-width: 2;
  transition: fill .45s ease, stroke .45s ease;
}
.jw.is-on .jw__ring { fill: var(--brand-gold); stroke: var(--navy); }
.jw__pulse {
  fill: none;
  stroke: var(--brand-gold);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.jw.is-on .jw__pulse { animation: jwPulse .8s ease-out 1; }
@keyframes jwPulse {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0;  transform: scale(2.6); }
}
.jw__art {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease .1s, transform .55s ease .1s;
}
.jw.is-on .jw__art { opacity: 1; transform: translateY(0); }
/* Swap sand-colored figure fills to deep navy so they read on a light hero */
.jhero .jw__art [fill="#f3efe6"] { fill: #3f3559; }
.jhero .jw__art [stroke="#f3efe6"] { stroke: #3f3559; }
.jhero .jw__art [fill="#463c61"] { fill: #2f2744; }
.jw__label, .jw__age {
  opacity: 0;
  transition: opacity .55s ease .18s;
  text-anchor: middle;
  font-family: var(--font-sans);
  text-transform: uppercase;
}
.jw.is-on .jw__label, .jw.is-on .jw__age { opacity: 1; }
.jw__label { fill: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; }
.jw__age   { fill: var(--brand-gold-dark); font-size: 9.5px;  font-weight: 700; letter-spacing: .14em; }
.jhero--m .jw__label { font-size: 15px; }
.jhero--m .jw__age   { font-size: 12px; }

/* Finale */
.jhero.is-done .jw--final .jw__ring { filter: drop-shadow(0 0 12px rgba(194,161,78,.9)); }
.jhero.is-done .jw--final .jw__globe { stroke: rgba(63,53,89,.5); }

@media (max-width: 960px) {
  .jhero { height: 300vh; }
  .jhero .container { padding-top: 112px; }
}
@media (max-width: 760px) {
  .jhero { height: auto; }
  .jhero__pin { position: relative; height: auto; min-height: 100vh; }
  .jhero .container { padding-top: 96px; }
  .jhero__content { max-width: 100%; }
  .jhero p { font-size: 1rem; }
  .jhero__stage { height: 46%; }
  .jhero__scrim { height: 48%; }
  .jhero__cue { display: none; }
  .jw__art, .jw__label, .jw__age, .jw__ring, .jspark, .jspark-halo { transition: none; }
  .jw.is-on .jw__pulse { animation: none; }
  .jhero__cue span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* No pinning: show the fully-drawn journey as a static hero */
  .jhero { height: auto; }
  .jhero__pin { position: relative; height: auto; min-height: 100vh; }
  .jhero__cue { display: none; }
  .jw__art, .jw__label, .jw__age, .jw__ring, .jspark, .jspark-halo { transition: none; }
  .jw.is-on .jw__pulse { animation: none; }
  .jhero__cue span { animation: none; }
}

/* ============ Homepage: hero photo collage + card media ============ */
.jhero__content { max-width: none !important; }
.hero__two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 6; }
.hero__copy { max-width: 600px; }
.hero__photos { position: relative; height: 520px; }
.hero__photos .hp { margin: 0; position: absolute; border-radius: 18px; overflow: hidden; background: #f3efe6;
  box-shadow: 0 30px 60px -22px rgba(45,0,87,.45), 0 10px 30px -18px rgba(0,0,0,.25); }
.hero__photos .hp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photos .hp--main { top: 0; right: 0; width: 78%; height: 64%; border: 6px solid #fff; }
.hero__photos .hp--main figcaption { position: absolute; left: 14px; bottom: 12px; background: rgba(20,10,40,.72);
  color: #fff; font-size: .72rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(6px); }
.hero__photos .hp--a { bottom: 0; left: 0; width: 56%; height: 44%; border: 6px solid #fff; transform: rotate(-3deg); }
.hero__photos .hp--b { bottom: 16%; right: -4%; width: 44%; height: 38%; border: 6px solid #fff; transform: rotate(4deg); z-index: 3; }
.hp-badge { position: absolute; top: 54%; left: -18px; background: #fff; border-radius: 14px;
  padding: 12px 16px 12px 14px; box-shadow: 0 12px 30px rgba(45,0,87,.22); display: flex; align-items: center;
  gap: 10px; z-index: 4; animation: heroBadgeFloat 4s ease-in-out infinite; }
.hp-badge__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gold, #c2a14e);
  box-shadow: 0 0 0 4px rgba(194,161,78,.22); flex-shrink: 0; }
.hp-badge__t { font-size: .85rem; font-weight: 800; color: var(--ink); }
.hp-badge__s { font-size: .7rem; color: var(--gray); }
@keyframes heroBadgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Push the SVG journey stage behind the collage on desktop */
.jhero__stage { z-index: 1 !important; opacity: .85; }

@media (max-width: 960px) {
  .hero__two { grid-template-columns: 1fr; gap: 40px; }
  .hero__photos { height: 400px; width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero__photos { height: 340px; width: 100%; max-width: 100%; }
  .hp-badge { left: 8px; }
  .jhero h1 { font-size: 2rem; max-width: 100%; }
  .jhero .btn { display: block; width: 100%; text-align: center; }
  .jhero .cta-group { display: flex; flex-direction: column; gap: 10px; }
}

/* Pathway card media header */
.card { overflow: hidden; }
.card .card-media { margin: -24px -24px 20px; height: 180px; overflow: hidden; border-radius: 16px 16px 0 0; position: relative; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.05); }

/* Stage-mini background photo */
.stage-mini { min-height: 260px; }
.stage-mini .stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .22; mix-blend-mode: luminosity; pointer-events: none; }
.stage-mini > *:not(.stage-photo) { position: relative; z-index: 2; }

/* ============ Page hero photo band (all interior pages) ============ */
.page-photo-band { padding: 0 0 24px; background: transparent; }
.page-photo-band .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.page-photo-band__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; }
.page-photo-band figure { margin: 0; border-radius: 16px; overflow: hidden; height: 280px;
  box-shadow: 0 24px 44px -24px rgba(45,0,87,.4); position: relative; }
.page-photo-band figure::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(45,0,87,.35) 100%); pointer-events: none; }
.page-photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.page-photo-band figure:hover img { transform: scale(1.05); }
.page-photo-band figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 2;
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (max-width: 820px) {
  .page-photo-band__grid { grid-template-columns: 1fr 1fr; }
  .page-photo-band figure:first-child { grid-column: 1 / -1; height: 240px; }
  .page-photo-band figure { height: 180px; }
}
@media (max-width: 520px) {
  .page-photo-band__grid { grid-template-columns: 1fr; }
  .page-photo-band figure, .page-photo-band figure:first-child { height: 200px; }
}