/* ============================================================
   Nadia's Montessori Childcare — Design System
   Brand palette: navy #170C79 | cream #EFE3CA | teal #56B6C6
                  sky  #8ACBD0 | red  #D92243 | pink #FF97D0
   Fonts: Playfair Display (headings) · Inter (body)
   ============================================================ */

/* ── Imports ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&family=Fredoka:wght@500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --navy:      #170C79;
  --navy-dark: #0f0850;
  --navy-mid:  #1e1499;
  --cream:     #EFE3CA;
  --cream-dark:#e5d4b0;
  --teal:      #56B6C6;
  --sky:       #8ACBD0;
  --red:       #D92243;
  --red-dark:  #b51c38;
  --pink:      #FF97D0;
  --yellow:    #FFE14D;
  --yellow-dark:#e6c400;

  --text:      #1a1a2e;
  --text-muted:#5a5a7a;
  --border:    rgba(23,12,121,.12);
  --shadow-sm: 0 2px 8px rgba(23,12,121,.08);
  --shadow-md: 0 6px 24px rgba(23,12,121,.12);
  --shadow-lg: 0 16px 48px rgba(23,12,121,.16);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 48px;

  --transition: .22s cubic-bezier(.4,0,.2,1);
  --max-w:     1240px;
  --nav-h:     88px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal); }
button { cursor: pointer; font-family: inherit; border: none; }
ul { list-style: none; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  color: var(--navy);
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: 1.2rem; font-weight: 600; }

p { color: var(--text-muted); line-height: 1.75; }
.lead { font-size: 1.15rem; line-height: 1.7; color: var(--text-muted); }
strong { font-weight: 600; color: var(--text); }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1280px) { .container { padding: 0 48px; } }

.section { padding: 80px 0; }
.section--lg { padding: 112px 0; }
.section--sm { padding: 48px 0; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); }
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy h4, .section--navy p { color: #fff; }
.section--navy p { opacity: .85; }

.section--alumni-thriving {
  background: linear-gradient(135deg, var(--teal) 0%, var(--sky) 45%, var(--pink) 100%);
}
.section--alumni-thriving .card:nth-child(3n) .card-icon { background: rgba(255,255,255,.35); }
.section--alumni-thriving .card-icon { background: rgba(255,255,255,.5); }

/* ── Alumni page – stat card (Their Stories right column) ─── */
.alumni-stat-card {
  background: linear-gradient(135deg, var(--teal) 0%, var(--pink) 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
}

.grid-2 { display: grid; gap: 40px; }
.grid-3 { display: grid; gap: 32px; }
.grid-4 { display: grid; gap: 24px; }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.flex-center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(217,34,67,.35);
}
.btn-primary:hover {
  background: var(--red-dark);
  color: #fff;
  box-shadow: 0 8px 24px rgba(217,34,67,.45);
}

.btn-secondary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 16px rgba(23,12,121,.25);
}
.btn-secondary:hover {
  background: var(--navy-mid);
  color: #fff;
  box-shadow: 0 8px 24px rgba(23,12,121,.35);
}

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

.btn-outline-light {
  border: 2px solid rgba(255,255,255,.8);
  color: #fff;
  background: transparent;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}

.btn-group { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition);
}
/* Homepage hero: start transparent, restore solid on scroll */
.nav--hero {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.nav--hero.nav--scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 28px;
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.nav-logo img { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-logo-sub { font-size: .75rem; font-weight: 400; font-family: 'Inter', sans-serif;
                color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; }

.nav-links {
  display: none;
  align-items: center;
  gap: 24px;
}
@media (min-width: 1100px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--teal);
  transition: width var(--transition);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--navy); }

.nav-cta { display: none; }
@media (min-width: 1100px) { .nav-cta { display: inline-flex; } }

.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 8px;
}
@media (min-width: 1100px) { .nav-hamburger { display: none; } }
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  transition: transform var(--transition), opacity var(--transition);
}

/* Mobile menu */
.nav-mobile {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: #fff;
  padding: 24px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 99;
}
.nav-mobile.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.nav-mobile a {
  display: block;
  padding: 14px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; }

/* Nav transparent over hero */
.nav--hero .nav-logo { color: #fff; }
.nav--hero .nav-logo-sub { color: rgba(255,255,255,.7); }
.nav--hero .nav-links a { color: rgba(255,255,255,.9); }
.nav--hero .nav-links a:hover { color: #fff; }
.nav--hero .nav-hamburger span { background: #fff; }
/* Nav text stays white in both hero and scrolled states (nav--scrolled bg is
   dark navy either way -- see nav-v2.css) -- no separate dark-text override needed. */

/* ── Hero Slideshow ──────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: var(--navy-dark);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(23,12,121,.72) 0%,
    rgba(23,12,121,.4) 50%,
    rgba(0,0,0,.25) 100%
  );
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  padding-top: var(--nav-h);
}
.hero-text {
  max-width: 680px;
  color: #fff;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 20px;
}
.hero-text h1 {
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.hero-text .lead { color: rgba(255,255,255,.88); margin-bottom: 36px; }
.hero-dots {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  transition: background var(--transition), transform var(--transition);
}
.hero-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* ── Section headings ────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.section-heading { margin-bottom: 16px; }
.section-intro { max-width: 600px; }
.section-header { margin-bottom: 56px; }
.section-header--center { text-align: center; }
.section-header--center .section-intro { margin: 0 auto; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.card-body { padding: 28px; }
.card-icon {
  width: 56px; height: 56px;
  background: rgba(86,182,198,.12);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.card:nth-child(3n) .card-icon { background: rgba(255,151,208,.14); }

/* ── Stat bars ───────────────────────────────────────────── */
.stats-strip {
  background: var(--navy);
  padding: 48px 0;
}
.stats-strip .container { display: grid; gap: 32px; }
@media (min-width: 640px)  { .stats-strip .container { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px)  { .stats-strip .container { grid-template-columns: repeat(4,1fr); } }
.stat-item { text-align: center; }
.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
}
.stat-item:nth-child(2) .stat-number { color: var(--pink); }
.stat-label { font-size: .85rem; color: rgba(255,255,255,.75); margin-top: 8px; letter-spacing: .03em; }

/* ── Photo grid / gallery ────────────────────────────────── */
.year-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.year-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--navy-dark);
}
.year-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease, filter .4s ease;
}
.year-card:hover img { transform: scale(1.07); filter: brightness(.85); }
.year-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,12,121,.85) 0%, rgba(23,12,121,.1) 60%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  transition: background var(--transition);
}
.year-card:hover .year-card-overlay {
  background: linear-gradient(to top, rgba(23,12,121,.92) 0%, rgba(23,12,121,.25) 60%);
}
.year-card-text h3 { color: #fff; margin-bottom: 4px; font-size: 1.5rem; }
.year-card-count { font-size: .8rem; color: var(--sky); font-weight: 500; letter-spacing: .04em; }

.subcat-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.subcat-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--navy-dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.subcat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.subcat-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .4s ease;
}
.subcat-card:hover img { transform: scale(1.05); }
.subcat-card-body { padding: 16px; background: #fff; }
.subcat-card-body h4 { font-size: 1rem; margin-bottom: 4px; }
.subcat-card-body .count { font-size: .78rem; color: var(--text-muted); }

.photo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 600px)  { .photo-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px)  { .photo-grid { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 1200px) { .photo-grid { grid-template-columns: repeat(5,1fr); } }

/* Fixed 6-photo homepage preview grid: 2 cols on mobile, 3 cols (2 rows) from tablet up */
.photo-grid--preview { grid-template-columns: repeat(2,1fr); }
@media (min-width: 600px) { .photo-grid--preview { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .photo-grid--preview { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1200px) { .photo-grid--preview { grid-template-columns: repeat(3,1fr); } }

.photo-thumb {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--cream);
  transition: transform .3s ease;
}
.photo-thumb:hover {
  transform: translateY(-2px);
  animation: thumb-glow 2.5s linear infinite;
}
@keyframes thumb-glow {
  0%   { box-shadow: 0 0 0 2px var(--teal),  0 6px 24px rgba(86,182,198,.45); }
  33%  { box-shadow: 0 0 0 2px var(--sky),   0 6px 24px rgba(138,203,208,.45); }
  66%  { box-shadow: 0 0 0 2px var(--pink),  0 6px 24px rgba(255,151,208,.45); }
  100% { box-shadow: 0 0 0 2px var(--teal),  0 6px 24px rgba(86,182,198,.45); }
}
.photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.photo-thumb:hover img { transform: scale(1.06); }
.photo-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(23,12,121,.38) 0%, rgba(86,182,198,.22) 100%);
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition);
}
.photo-thumb:hover .photo-thumb-overlay { opacity: 1; }
.photo-thumb-overlay svg { color: #fff; width: 32px; height: 32px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

/* ── Lightbox ────────────────────────────────────────────── */
@keyframes lb-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(12px); }
}
@keyframes lb-img-in {
  from { opacity: 0; transform: scale(.88) translateY(18px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes lb-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(86,182,198,.5),  0 0 36px rgba(86,182,198,.18),  0 24px 80px rgba(15,8,80,.8); }
  33%  { box-shadow: 0 0 0 3px rgba(255,151,208,.55), 0 0 44px rgba(255,151,208,.22), 0 24px 80px rgba(15,8,80,.8); }
  66%  { box-shadow: 0 0 0 3px rgba(138,203,208,.5),  0 0 40px rgba(138,203,208,.2),  0 24px 80px rgba(15,8,80,.8); }
  100% { box-shadow: 0 0 0 3px rgba(86,182,198,.5),  0 0 36px rgba(86,182,198,.18),  0 24px 80px rgba(15,8,80,.8); }
}
@keyframes lb-glow-ring {
  0%   { opacity: .55; transform: scale(1); }
  50%  { opacity: .9;  transform: scale(1.012); }
  100% { opacity: .55; transform: scale(1); }
}
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,8,80,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.open {
  opacity: 1; visibility: visible; pointer-events: all;
  animation: lb-backdrop-in .35s ease forwards;
}
.lightbox-img-wrap {
  position: relative;
  max-width: min(90vw, 1100px);
  max-height: 88vh;
}
.lightbox.open .lightbox-img-wrap {
  animation: lb-img-in .38s cubic-bezier(.22,1,.36,1) forwards;
}
/* glow ring behind the image */
.lightbox-img-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-sm) + 6px);
  background: linear-gradient(135deg, var(--teal), var(--pink), var(--sky));
  z-index: -1;
  filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
}
.lightbox.open .lightbox-img-wrap::before {
  opacity: .55;
  animation: lb-glow-ring 3s ease-in-out infinite;
}
.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}
.lightbox.open .lightbox-img-wrap img {
  animation: lb-pulse 4s ease-in-out infinite;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.lightbox-close { top: -52px; right: 0; width: 38px; height: 38px; }
.lightbox-prev  { left: -60px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-next  { right: -60px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-close:hover { background: rgba(217,34,67,.5); border-color: rgba(217,34,67,.7); transform: scale(1.1); }
.lightbox-prev:hover  { background: rgba(86,182,198,.3); border-color: rgba(86,182,198,.6); transform: translateY(-50%) scale(1.08); }
.lightbox-next:hover  { background: rgba(86,182,198,.3); border-color: rgba(86,182,198,.6); transform: translateY(-50%) scale(1.08); }
.lightbox-actions {
  position: absolute;
  bottom: -52px; right: 0;
  display: flex; gap: 12px;
}
.lightbox-actions a,
.lightbox-actions button {
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  cursor: pointer; padding: 6px 14px; font-family: inherit;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lightbox-actions a:hover,
.lightbox-actions button:hover { background: rgba(86,182,198,.25); color: #fff; border-color: rgba(86,182,198,.5); }
.lightbox-delete:hover { background: rgba(217,34,67,.25) !important; border-color: rgba(217,34,67,.5) !important; color: #ff7090 !important; }
.lightbox-slideshow[data-active="1"] { color: #FF97D0; border-color: rgba(255,151,208,.4); background: rgba(255,151,208,.12); }
.lightbox-zoom-controls {
  position: absolute;
  bottom: -52px; left: 0;
  display: flex; gap: 6px;
}
.lightbox-zoom-controls button {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.lightbox-zoom-controls button:hover { background: rgba(86,182,198,.3); transform: scale(1.1); border-color: rgba(86,182,198,.5); }

/* ── Video gallery ───────────────────────────────────────── */
.video-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.video-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-play-btn svg {
  width: 56px; height: 56px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  transition: transform var(--transition);
}
.video-card:hover .video-play-btn svg { transform: scale(1.1); }
.video-card-body { padding: 20px; background: #fff; }
.video-card-body h4 { font-size: 1rem; margin-bottom: 4px; color: var(--navy); }
.video-card-body .meta { font-size: .78rem; color: var(--text-muted); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 24px; }
.form-group label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(86,182,198,.18);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-error { color: var(--red); font-size: .82rem; margin-top: 6px; }
.form-success {
  background: rgba(86,182,198,.12);
  border: 2px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 24px;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  gap: 16px;
}
.faq-q svg {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--teal);
}
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
}
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 20px; }

/* ── Info boxes ──────────────────────────────────────────── */
.info-box {
  background: var(--cream);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.info-box h4 { margin-bottom: 6px; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-muted);
  padding: 16px 0;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb-sep { opacity: .4; }

/* ── Page hero (interior pages) ─────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 56px) 0 56px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--pink);
  border-radius: 2px;
  margin: 14px auto 0;
  opacity: .75;
}
.page-hero .lead { color: rgba(255,255,255,.8); max-width: 600px; margin: 0 auto; }

/* ── Map / Contact ───────────────────────────────────────── */
.map-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-wrap iframe { display: block; }

.contact-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.contact-detail-icon {
  width: 48px; height: 48px;
  background: rgba(86,182,198,.12);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--teal);
  font-size: 1.2rem;
}
.contact-detail-text strong { display: block; color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.contact-detail-text p { margin: 0; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.75);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  gap: 48px;
  margin-bottom: 48px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { }
.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 16px;
  display: block;
}
.footer-tagline { font-size: .88rem; line-height: 1.6; margin-bottom: 24px; }
.footer h4 { color: #fff; font-size: .85rem; font-weight: 600; letter-spacing: .1em;
             text-transform: uppercase; margin-bottom: 20px; }
.footer ul li { margin-bottom: 12px; }
.footer ul a { color: rgba(255,255,255,.6); font-size: .88rem; transition: color var(--transition); }
.footer ul a:hover { color: var(--sky); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .8rem; margin: 0; }
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: var(--sky); }

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 0 0;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 14px;
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.pagination a {
  color: var(--navy);
  border: 2px solid var(--border);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pagination a:hover { background: rgba(255,151,208,.1); border-color: var(--pink); color: var(--pink); }
.pagination .current { background: var(--navy); color: #fff; border: 2px solid var(--navy); }
.pagination .current:nth-child(even) { background: var(--pink); border-color: var(--pink); }
.pagination .ellipsis { color: var(--text-muted); border: none; background: none; padding: 0 6px; }

/* ── Admin ───────────────────────────────────────────────── */
.admin-wrap { min-height: 100vh; background: #f4f6f9; }
.admin-sidebar {
  width: 240px;
  background: var(--navy);
  min-height: 100vh;
  position: fixed;
  left: 0; top: 0;
  padding: 28px 20px;
}
.admin-sidebar .logo {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 32px;
  display: block;
}
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.7);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 4px;
  transition: background var(--transition), color var(--transition);
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.admin-main { margin-left: 240px; padding: 40px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.admin-table { width: 100%; background: #fff; border-radius: var(--radius-md); overflow: hidden;
               box-shadow: var(--shadow-sm); border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 14px 20px; text-align: left; }
.admin-table th { background: #f8f9fb; font-size: .82rem; font-weight: 600;
                  color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.admin-table td { border-top: 1px solid var(--border); font-size: .9rem; }
.admin-table tr:hover td { background: #fafbfc; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .75rem; font-weight: 600; }
.badge-visible { background: rgba(86,182,198,.15); color: var(--teal); }
.badge-hidden  { background: rgba(217,34,67,.1); color: var(--red); }

/* ── Video subcat play overlay ───────────────────────────── */
.subcat-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23,12,121,.18);
  transition: background var(--transition);
}
.subcat-card--video:hover .subcat-video-play { background: rgba(23,12,121,.35); }
.subcat-card--video:hover .subcat-video-play svg { transform: scale(1.1); }
.subcat-card--video .subcat-video-play svg { transition: transform var(--transition); }
.subcat-card > div { position: relative; }

/* ── Google Translate ────────────────────────────────────── */
.translate-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goog-te-gadget { font-size: 0 !important; }
.goog-te-gadget select {
  font-size: .82rem !important;
  font-family: 'Inter', sans-serif !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.8) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 8px !important;
  cursor: pointer;
}
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* ── Utilities ───────────────────────────────────────────── */
.mt-4  { margin-top: 16px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4  { margin-bottom: 16px; }
.mb-8  { margin-bottom: 32px; }
.gap-4 { gap: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive helpers ──────────────────────────────────── */
@media (max-width: 639px) {
  .section { padding: 56px 0; }
  .section--lg { padding: 72px 0; }
  .btn-group { flex-direction: column; align-items: center; }
  .lightbox-prev { left: 8px; z-index: 10; }
  .lightbox-next { right: 8px; z-index: 10; }
  .alumni-stat-card { padding: 28px 20px; }
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; padding: 24px; }
}

/* ── Color variant sections ──────────────────────────────── */
.section--pink   { background: linear-gradient(135deg, rgba(255,151,208,.08) 0%, rgba(255,225,77,.06) 100%); }
.section--yellow { background: linear-gradient(135deg, rgba(255,225,77,.10) 0%, rgba(239,227,202,.5) 100%); }
.section--teal   { background: linear-gradient(135deg, rgba(86,182,198,.08) 0%, rgba(138,203,208,.12) 100%); }

/* ── Section label color variants ───────────────────────── */
.section-label--pink   { color: var(--pink) !important; }
.section-label--yellow { color: var(--yellow-dark) !important; }
.section-label--red    { color: var(--red) !important; }
.section-label--teal   { color: var(--teal) !important; }

/* ── Accent bar (thin colored underline on headings) ─────── */
.accent-pink::after  { content:''; display:block; width:48px; height:3px; background:var(--pink); border-radius:2px; margin-top:12px; }
.accent-teal::after  { content:''; display:block; width:48px; height:3px; background:var(--teal); border-radius:2px; margin-top:12px; }
.accent-yellow::after{ content:''; display:block; width:48px; height:3px; background:var(--yellow); border-radius:2px; margin-top:12px; }

/* ── Lace trim borders ───────────────────────────────────── */
@keyframes lace-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 400% 400%; }
}
.lace-trim {
  position: relative;
  border-radius: var(--radius-md);
  z-index: 0;
}
.lace-trim::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-md) + 3px);
  background: linear-gradient(
    135deg,
    var(--teal) 0%,
    var(--pink) 25%,
    var(--yellow) 50%,
    var(--sky)  75%,
    var(--teal) 100%
  );
  background-size: 300% 300%;
  z-index: -1;
  filter: blur(1px);
  opacity: .65;
  animation: lace-shift 8s linear infinite;
}

/* ── Photo with lace frame ───────────────────────────────── */
.photo-lace-wrap {
  position: relative;
  border-radius: var(--radius-md);
  padding: 4px;
  background: linear-gradient(135deg, var(--teal), var(--pink), var(--yellow), var(--sky));
  box-shadow: 0 8px 32px rgba(23,12,121,.15);
}
.photo-lace-wrap img {
  border-radius: calc(var(--radius-md) - 2px);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Card with colored top accent ───────────────────────── */
.card--accent-pink  { border-top: 4px solid var(--pink); }
.card--accent-teal  { border-top: 4px solid var(--teal); }
.card--accent-yellow{ border-top: 4px solid var(--yellow); }
.card--accent-red   { border-top: 4px solid var(--red); }
.card--accent-sky   { border-top: 4px solid var(--sky); }

/* ── Highlight badge (yellow pill) ──────────────────────── */
.highlight-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: .82rem;
  padding: 2px 10px;
  border-radius: 100px;
  letter-spacing: .02em;
}

/* ── FAQ category headers ─────────────────────────────────── */
.faq-category {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 48px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.faq-category:first-child { margin-top: 0; }
.faq-category-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.faq-category h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

/* ── Program photo card ───────────────────────────────────── */
.program-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.program-photo img {
  width: 100%; height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.program-photo-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(23,12,121,.75);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── Stats row with color ─────────────────────────────────── */
.stats-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.stat-item { text-align: center; }
.stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.stat-label { font-size: .82rem; color: var(--text-muted); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   NMC Decorative Assets — Cohesion Layer v1
   Append to /assets/css/main.css
   Brand: navy #170C79 | teal #56B6C6 | sky #8ACBD0
          pink #FF97D0  | cream #EFE3CA | yellow #FFE14D
   All paths relative to /assets/css/ -> ../img/decorative/
   ============================================================ */

/* ── Shared: sections hosting abs-positioned decos ─────────── */
.deco-host { position: relative; overflow: hidden; }

/* ── 1. Teal lace section-bottom trim ───────────────────────── */
/* border_lace_teal_03.jpg — white lace on brand teal #56B6C6   */
.deco-lace-teal-bottom {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 56px;
  background: none;
  opacity: .80;
  pointer-events: none;
  z-index: 2;
}

/* ── 2. Sky lace section-top trim ───────────────────────────── */
/* border_floral_lace_04.jpg — white lace on brand sky #8ACBD0  */
.deco-lace-sky-top {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 48px;
  background: none;
  opacity: .65;
  pointer-events: none;
  z-index: 2;
}

/* ── 3. Hand-drawn colorful section divider ─────────────────── */
/* border_handdrawn_colorful_05.jpg — crops to teal/navy row    */
.deco-handdrawn-divider {
  display: none;
}

/* ── 4. Cute hand-drawn card corner frames ──────────────────── */
/* border_handdrawn_cute_06.jpg — scalloped corner frame         */
.card-deco { position: relative; overflow: visible; }
.card-deco::before,
.card-deco::after {
  content: '';
  position: absolute;
  width: 72px; height: 72px;
  background: url('../img/decorative/border_handdrawn_cute_06.jpg')
              0% 62% / 480px auto no-repeat;
  opacity: .45;
  pointer-events: none;
  z-index: 3;
}
.card-deco::before { top: -8px; left: -8px; }
.card-deco::after  { bottom: -8px; right: -8px; transform: rotate(180deg); }

/* ── 5. Teal scroll ornamental divider ──────────────────────── */
/* divider_02.jpg — teal scroll, exact brand match, no recolor  */
.deco-scroll-divider {
  display: block;
  margin: 0 auto 1.75rem;
  width: 300px; max-width: 80%;
  height: auto;
  opacity: .68;
}

/* ── 6. Teal+pink hibiscus corner flourish ──────────────────── */
/* flourish_01.jpg — teal hibiscus + pink lily on white          */
.deco-flourish {
  position: absolute;
  bottom: -16px; left: -24px;
  width: 260px; height: auto;
  opacity: .48;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* ── 7. Watercolor sprig corner accents ─────────────────────── */
/* flower_corner_01.jpg — vibrant curved watercolor sprigs       */
.deco-sprig-tr {
  position: absolute;
  top: -14px; right: -14px;
  width: 140px; height: auto;
  opacity: .58;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
}
.deco-sprig-tl {
  position: absolute;
  top: -14px; left: -14px;
  width: 140px; height: auto;
  opacity: .58;
  pointer-events: none;
  mix-blend-mode: multiply;
  transform: scaleX(-1);
  z-index: 2;
}

/* ── 8. Watercolor flower cluster background accent ─────────── */
/* floral_01.jpg — 14-element watercolor spritesheet             */
.deco-floral-bg {
  position: absolute;
  bottom: -20px; right: -40px;
  width: 360px; height: auto;
  opacity: .13;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ── 9. Flat butterfly + botanicals (programs) ──────────────── */
/* floral_butterfly_01.jpg — navy/yellow/pink flat design        */
.deco-butterfly {
  position: absolute;
  top: -28px; right: -28px;
  width: 175px; height: auto;
  opacity: .82;
  pointer-events: none;
  z-index: 2;
}

/* ── 10. Teal mandala background watermark ──────────────────── */
/* floral_mandala_01.jpg — teal #56B6C6 on white, exact match   */
.deco-mandala-teal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: auto;
  opacity: .065;
  pointer-events: none;
  z-index: 0;
}

/* ===== GLOWING WHITE HERO SHIMMER ===== */
/* Inspired by bellasuebooks.com — soft radial light over hero sections */

@keyframes hero-glow-breathe {
  0%   { opacity: .55; transform: scale(1) translateY(0); }
  40%  { opacity: .75; transform: scale(1.04) translateY(-8px); }
  70%  { opacity: .6;  transform: scale(1.02) translateY(-4px); }
  100% { opacity: .55; transform: scale(1) translateY(0); }
}

@keyframes hero-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.08); }
  66%  { transform: translate(-20px, 15px) scale(.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes shimmer-particle {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  20%  { opacity: 1; }
  80%  { opacity: .6; }
  100% { opacity: 0; transform: scale(1.5) rotate(180deg); }
}

/* Main glow orb on heroes */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 180%;
  top: -40%;
  left: 15%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.10) 20%,
    rgba(255,255,255,.04) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: hero-glow-breathe 6s ease-in-out infinite;
  border-radius: 50%;
  filter: blur(8px);
}
/* Secondary smaller orb — offset for depth */
.page-hero::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 100%;
  top: -20%;
  left: 30%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.05) 35%,
    transparent 65%);
  pointer-events: none;
  z-index: 1;
  animation: hero-glow-drift 10s ease-in-out infinite;
  border-radius: 50%;
  filter: blur(12px);
  animation-delay: -3s;
}
/* Hero content must be above the glow */
.page-hero .container {
  position: relative;
  z-index: 2;
}

/* Stats-strip glow too */
.stats-strip {
  position: relative;
  overflow: hidden;
}

/* Floating sparkle dots on heroes */
.hero-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  animation: shimmer-particle 4s ease-in-out infinite;
}
/* ===== END GLOWING WHITE HERO SHIMMER ===== */

/* ── 11. Flower vine strip dividers ─────────────────────────── */
/* floral_border_01.jpg — 4 rows: blue/yellow/orange/pink        */

.deco-flower-strip-pink,
.deco-flower-strip-blue,
.deco-flower-strip-yellow {
  display: none;
}

/* ── 12. Pink mandala hero watermark ────────────────────────── */
/* mandala_01.jpg — rose-pink mehndi mandala on white           */
.deco-mandala-pink {
  position: absolute;
  top: -130px; right: -130px;
  width: 560px; height: auto;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}

/* ── 13. Lotus arch footer accent ───────────────────────────── */
/* accent_01.jpg — black lotus arch, CSS-tinted to brand teal   */
/* filter pipeline: black lineart -> sepia -> saturate -> teal  */
.deco-lotus-footer {
  display: block;
  margin: 0 auto 0.75rem;
  width: 220px; max-width: 50%;
  opacity: .28;
  filter: sepia(1) saturate(3) hue-rotate(155deg) brightness(.82);
  pointer-events: none;
}

/* ── 14. Mehndi corner ornament ─────────────────────────────── */
/* accent_02.jpg — black mehndi, CSS-tinted to brand pink       */
.deco-mehndi-corner {
  position: absolute;
  bottom: -32px; right: -32px;
  width: 195px; height: auto;
  opacity: .10;
  filter: sepia(1) saturate(5) hue-rotate(295deg) brightness(.92);
  pointer-events: none;
  z-index: 0;
}

/* ── Responsive: scale down all decorative elements on mobile ─ */
@media (max-width: 768px) {
  .deco-lace-teal-bottom           { height: 36px; }
  .deco-lace-sky-top               { height: 30px; }
  .deco-flourish                   { width: 155px; opacity: .32; bottom: -8px; left: -12px; }
  .deco-sprig-tr, .deco-sprig-tl   { width: 90px; }
  .deco-floral-bg                  { width: 200px; opacity: .09; }
  .deco-butterfly                  { width: 110px; top: -16px; right: -16px; }
  .deco-mandala-teal               { width: 280px; }
  .deco-mandala-pink               { width: 320px; top: -80px; right: -80px; }
  .deco-flower-strip-pink,
  .deco-flower-strip-blue,
  .deco-flower-strip-yellow        { height: 46px; background-size: auto 184px; }
  .card-deco::before,
  .card-deco::after                { width: 50px; height: 50px; }
  .deco-scroll-divider             { width: 180px; }
  .deco-lotus-footer               { width: 150px; }
  .deco-mehndi-corner              { width: 125px; }
}

/* ===== FAQ V2 ===== */
.faq-section { padding: 48px 0 40px; position: relative; }
.faq-section--teal   { background: linear-gradient(135deg, rgba(86,182,198,.38) 0%, rgba(138,203,208,.22) 100%); }
.faq-section--pink   { background: linear-gradient(135deg, rgba(255,151,208,.36) 0%, rgba(255,151,208,.16) 100%); }
.faq-section--sky    { background: linear-gradient(135deg, rgba(138,203,208,.42) 0%, rgba(239,227,202,.5) 100%); }
.faq-section--coral  { background: linear-gradient(135deg, rgba(255,0,82,.24) 0%, rgba(255,151,208,.18) 100%); }
.faq-section--navy   { background: linear-gradient(135deg, rgba(23,12,121,.22) 0%, rgba(86,182,198,.20) 100%); }

.faq-section .faq-category {
  flex-direction: column;
  align-items: flex-start;
  border-bottom: none;
  margin: 0 0 20px;
  padding-bottom: 0;
}

.faq-category-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: 100px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 20px;
}
.faq-section--teal   .faq-category-badge { background: #56B6C6; color: #fff; }
.faq-section--pink   .faq-category-badge { background: #FF97D0; color: #fff; }
.faq-section--sky    .faq-category-badge { background: #8ACBD0; color: var(--navy); }
.faq-section--coral  .faq-category-badge { background: #FF0052; color: #fff; }
.faq-section--navy   .faq-category-badge { background: #170C79; color: #fff; }

.faq-item {
  border: none !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(23,12,121,.06);
  transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: 0 4px 16px rgba(23,12,121,.1); }

.faq-section--teal   .faq-item { border-left: 6px solid #56B6C6 !important; }
.faq-section--pink   .faq-item { border-left: 6px solid #FF97D0 !important; }
.faq-section--sky    .faq-item { border-left: 6px solid #8ACBD0 !important; }
.faq-section--coral  .faq-item { border-left: 6px solid #FF0052 !important; }
.faq-section--navy   .faq-item { border-left: 6px solid #170C79 !important; }

.faq-q {
  background: #fff !important;
  padding: 18px 20px 18px 20px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: #170C79 !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .18s;
}

.faq-a {
  padding: 0 20px !important;
  font-size: .9rem !important;
  color: var(--text-muted);
  line-height: 1.7 !important;
  background: #fff !important;
}
.faq-item.open .faq-a { padding: 16px 20px 20px !important; }

.faq-section--teal   .faq-q { background: rgba(86,182,198,.30)  !important; }
.faq-section--teal   .faq-a { background: rgba(86,182,198,.14)  !important; }
.faq-section--teal   .faq-item.open .faq-q { background: rgba(86,182,198,.42)  !important; }

.faq-section--pink   .faq-q { background: rgba(255,151,208,.34) !important; }
.faq-section--pink   .faq-a { background: rgba(255,151,208,.16) !important; }
.faq-section--pink   .faq-item.open .faq-q { background: rgba(255,151,208,.46) !important; }

.faq-section--sky    .faq-q { background: rgba(138,203,208,.38) !important; }
.faq-section--sky    .faq-a { background: rgba(138,203,208,.18) !important; }
.faq-section--sky    .faq-item.open .faq-q { background: rgba(138,203,208,.50) !important; }

.faq-section--coral  .faq-q { background: rgba(255,0,82,.20)   !important; }
.faq-section--coral  .faq-a { background: rgba(255,0,82,.10)  !important; }
.faq-section--coral  .faq-item.open .faq-q { background: rgba(255,0,82,.28)   !important; }

.faq-section--navy   .faq-q { background: rgba(23,12,121,.18)  !important; }
.faq-section--navy   .faq-a { background: rgba(23,12,121,.09) !important; }
.faq-section--navy   .faq-item.open .faq-q { background: rgba(23,12,121,.26)  !important; }

/* Hover: uniform teal wash — open state always >= resting hover */
.faq-section .faq-q:hover                  { background: rgba(86,182,198,.12) !important; }
.faq-section .faq-item.open .faq-q:hover   { background: rgba(86,182,198,.14) !important; }

/* Focus-visible: on-brand teal outline for keyboard navigation */
.faq-q:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   HERO PAGE MODIFIERS v1 — Unique per-page visual identity
   Appended 2026-06 · palette corrections + new hero treatments
   Brand: navy #170C79 | teal #56B6C6 | sky #8ACBD0
          pink #FF97D0 | cream #EFE3CA | red #FF0052
   ============================================================ */

/* ── Approved palette correction: red was #D92243, spec is #FF0052 ── */
:root {
  --red:      #FF0052;
  --red-dark: #cc0041;
}
/* Update btn-primary shadow to match new red */
.btn-primary              { box-shadow: 0 4px 16px rgba(255,0,82,.35); }
.btn-primary:hover        { box-shadow: 0 8px 24px rgba(255,0,82,.45); }

/* ── Gallery: midnight navy with dual radial accent bursts ──
   Teal sunrise from bottom-right + pink flare from top-left.
   Gives the gallery a cinematic, photo-rich energy without
   competing with the year-card thumbnails below.              */
.page-hero--gallery {
  background:
    radial-gradient(ellipse at 88% 115%, rgba(86,182,198,.55)  0%, transparent 48%),
    radial-gradient(ellipse at  8% -15%, rgba(255,151,208,.30)  0%, transparent 42%),
    linear-gradient(160deg, #0f0850 0%, #170C79 55%, #1a0e8a 100%);
}

/* ── Alumni: warm cream inversion — nostalgic, grown-up ─────
   Light background is the single most differentiating move.
   Teal eyebrow + navy heading convey pride and warmth.        */
.page-hero--alumni {
  background: linear-gradient(155deg, #EFE3CA 0%, #e2d3b5 100%);
}
.page-hero--alumni::before,
.page-hero--alumni::after         { display: none; }
.page-hero--alumni h1             { color: var(--navy); }
.page-hero--alumni h1::after      { background: var(--teal); }
.page-hero--alumni .lead          { color: var(--text-muted); }
.page-hero--alumni .hero-eyebrow  { color: var(--teal); opacity: .9; }
.page-hero--alumni .section-label { color: var(--teal); }

/* ── About: deep navy with teal radial spotlight from below ─
   Spotlight rises from the horizon, suggesting depth and
   reflection — appropriate for a philosophy/story page.       */
.page-hero--about {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(86,182,198,.50) 0%, transparent 50%),
    linear-gradient(160deg, #0f0850 0%, #170C79 60%, #1e1499 100%);
}

/* ── Montessori Method: deep navy + pink radial (philosophy/education page) ── */
.page-hero--montessori-method {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,151,208,.35) 0%, transparent 55%),
    linear-gradient(160deg, #0f0850 0%, #170C79 65%, #1e1499 100%);
}

/* ── Programs: navy-to-teal gradient — approved palette pair ─
   Switched from teal-to-sky (failed WCAG AA contrast) to
   navy-to-teal so white text meets 4.5:1 on the darker base.
   Teal identity preserved at the bright end of the gradient.  */
.page-hero--programs {
  background: linear-gradient(135deg, #170C79 0%, #56B6C6 100%);
}
.page-hero--programs h1              { color: #fff; }
.page-hero--programs h1::after       { background: rgba(255,255,255,.55); }
.page-hero--programs .lead           { color: rgba(255,255,255,.92); }
.page-hero--programs .section-label  { color: rgba(255,255,255,.85); }
.page-hero--programs::before {
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.24) 0%,
    rgba(255,255,255,.10) 28%,
    transparent 62%);
}
.page-hero--programs::after {
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.15) 0%,
    transparent 58%);
}

/* ── FAQ: warm cream with red/coral section label ────────────
   Second light-bg hero, but differentiated by the red accent
   bar under h1 and the red section label — signals urgency
   and helpfulness rather than nostalgia.                       */
.page-hero--faq {
  background: linear-gradient(155deg, #EFE3CA 0%, #f5edd8 100%);
}
.page-hero--faq::before,
.page-hero--faq::after          { display: none; }
.page-hero--faq h1              { color: var(--navy); }
.page-hero--faq h1::after       { background: #FF0052; }
.page-hero--faq .lead           { color: var(--text-muted); }
.page-hero--faq .section-label  { color: #FF0052; }
/* Links inside the cream hero must use navy (~7:1 on cream) not teal (~1.85:1) */
.page-hero--faq a               { color: var(--navy); text-decoration: underline; }

/* ── Financial Aid: navy with cream warmth + teal trust glow ─
   Cream hint (top-right) signals warmth/value; teal (bottom-left)
   signals trust. The combination reads "helpful professional". */
.page-hero--financial-aid {
  background:
    radial-gradient(ellipse at 82%  -5%, rgba(239,227,202,.28) 0%, transparent 44%),
    radial-gradient(ellipse at 18% 105%, rgba(86,182,198,.36)  0%, transparent 50%),
    linear-gradient(160deg, #170C79 0%, #0f0850 100%);
}

/* ── Financial Aid page-specific section styles ────────────── */
/* Contact CTA block: pink-to-cream (on-palette pair, scoped to
   this page so shared .section--pink is not touched)           */
.section--financial-aid-cta {
  background: linear-gradient(135deg, rgba(255,151,208,.08) 0%, rgba(239,227,202,.35) 100%);
}

/* ── FAQ page-specific CTA section override ─────────────────
   The global .section--pink is only 6-8% opacity — invisible
   against white. Scoped to .faq-cta so only this page is
   affected; raises pink to 18% + yellow to 10% for visual
   weight after the navy band above.                            */
.faq-cta {
  background: linear-gradient(135deg, rgba(255,151,208,.18) 0%, rgba(255,225,77,.10) 100%);
}

/* ── FAQ intro banner subtext token ─────────────────────────
   Replaces inline color:#555 so future palette updates reach it */
.faq-intro-sub { color: var(--text-muted); font-size: .92rem; }

/* Programs grid: 2-column at mid-tablet (560-767px) so 6 cards
   don't stack single-column all the way down to 320px          */
@media (min-width: 560px) {
  .grid-3--programs { grid-template-columns: repeat(2, 1fr); }
}

/* ── Contact: pink-to-cream — friendly, open, welcoming ─────
   Starts at full pink and dissolves to cream so the heading
   area feels warm and approachable. Navy text ensures contrast
   against both the pink start and cream end of the gradient.  */
.page-hero--contact {
  background: linear-gradient(148deg, #FF97D0 0%, #f0bce0 38%, #EFE3CA 100%);
}
.page-hero--contact::before,
.page-hero--contact::after          { display: none; }
.page-hero--contact h1              { color: var(--navy); }
.page-hero--contact h1::after       { background: var(--navy); opacity: .35; }
.page-hero--contact .lead           { color: var(--text); }
.page-hero--contact .section-label  { color: var(--navy); opacity: 1; }

/* ── Contact page — scoped overrides ────────────────────────
   All selectors here are scoped to #contact-form or address
   to avoid colliding with shared rules on other pages.       */

/* Custom dropdown arrow (replaces stripped -webkit-appearance affordance) */
#contact-form .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23170C79' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

/* Error status box — mirrors .form-success but uses red palette */
.form-status-error {
  background: rgba(217,34,67,.06);
  border: 2px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 24px;
}

/* Name-field grid: defer two-column layout to 900 px so it
   doesn't get too narrow when the outer contact grid already
   splits at 640 px (~280 px wide cards). */
.name-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .name-grid { grid-template-columns: 1fr 1fr; } }

/* Contact-detail icon alternation — mirrors card-icon pattern */
address .contact-detail:nth-child(even) .contact-detail-icon {
  background: rgba(255,151,208,.12);
  color: var(--pink);
}
address .contact-detail:nth-child(3n) .contact-detail-icon {
  background: rgba(138,203,208,.14);
  color: var(--sky);
}

/* ── Programs page — palette corrections & layout fixes ──────
   All selectors scoped to programs-specific classes or the
   .page-hero--programs modifier to avoid collision with other
   pages sharing this stylesheet.                              */

/* Fix 4: sparkle dots — semi-transparent navy so they read on
   the dark navy-to-teal hero (was white, invisible on teal).  */
.page-hero--programs .hero-sparkle {
  background: rgba(23,12,121,.35);
}

/* Fix 5: responsive gap for wide two-column grids */
.grid-2--wide { gap: 64px; }

/* Fix 6: photo/text column swap —
   Mobile default: text first (order:1), photo second (order:2).
   Desktop (640px+): photo left (order:1), text right (order:2). */
.col-photo-swap { order: 2; }
.col-text-swap  { order: 1; }

@media (min-width: 640px) {
  .col-photo-swap { order: 1; }
  .col-text-swap  { order: 2; }
}

@media (max-width: 639px) {
  /* Fix 5: tighter gap when grid stacks to single column */
  .grid-2--wide { gap: 28px; }
  /* Fix 8: keep btn-group centred when .flex-center is also present */
  .flex-center.btn-group { align-items: center; }
}

/* ── Careers: red/coral sunrise — urgency + hiring energy ───
   Coral radial from bottom-left echoes the Requirements icon
   color; pink flare top-right adds approachable warmth.      */
.page-hero--careers {
  background:
    radial-gradient(ellipse at 15% 110%, rgba(255,0,82,.40)     0%, transparent 50%),
    radial-gradient(ellipse at 85%  -10%, rgba(255,151,208,.25) 0%, transparent 44%),
    linear-gradient(160deg, #170C79 0%, #0f0850 100%);
}

/* ── Careers page — scoped layout & component overrides ──── */

/* Why-grid: desktop gap 64px collapses to 32px on mobile */
.careers-why-grid { gap: 64px; }
@media (max-width: 639px) {
  .careers-why-grid { gap: 32px; }
}

/* Why section: gradient fade into the cream Job Posting section */
.careers-section-why { position: relative; }
.careers-section-why::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  pointer-events: none;
  z-index: 1;
}

/* Card body: responsive padding — prevents clip on narrow phones */
.card-body--lg { padding: 40px; }
@media (max-width: 639px) {
  .card-body--lg { padding: 24px; }
}

/* ── Calendar: teal radial accent bursts over deep navy ──────
   Scheduling/time theme: teal sunrise from bottom-left,
   pink flare from top-right, linear navy-to-teal base.
   Differentiates from Programs (solid teal-to-sky) by using
   radial bursts rather than a flat gradient.                  */
.page-hero--calendar {
  background:
    radial-gradient(ellipse at 20% 120%, rgba(86,182,198,.50)  0%, transparent 48%),
    radial-gradient(ellipse at 80%  -10%, rgba(255,151,208,.25) 0%, transparent 40%),
    linear-gradient(155deg, #170C79 0%, #1e1499 70%, #56B6C6 100%);
}
.page-hero--calendar h1::after { background: var(--teal); }

/* ── Calendar page — event card hover ───────────────────────
   Moved from inline <style> in calendar.php.
   Shadow uses brand navy rgba, not generic black.            */
.calendar-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(23,12,121,.12) !important;
}