/* ============================================================
   CARMEL ENGLISH MEDIUM HIGH SCHOOL — Kharkhari Chuipali
   styles.css · design tokens + components · see design-system/MASTER.md
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --navy-950: #0B172E;
  --navy-900: #101F3C;
  --navy-800: #152A4E;
  --navy-700: #1C3561;
  --navy-600: #234174;
  --navy-500: #2E5090;
  --navy-100: #E4E9F2;
  --navy-50:  #F1F4F9;

  --gold-600: #9A7223;
  --gold-500: #BD9330;
  --gold-400: #D4AF5E;
  --gold-300: #E2C684;
  --gold-100: #F3EAD4;

  --cream: #FBF8F2;
  --bone:  #F4EFE6;
  --white: #FFFFFF;
  --ink:   #1E2530;
  --muted: #5A6472;
  --line:  #E7E2D8;

  --shadow-sm: 0 1px 2px rgba(11, 23, 46, 0.05);
  --shadow-md: 0 10px 30px rgba(11, 23, 46, 0.08);
  --shadow-lg: 0 24px 64px rgba(11, 23, 46, 0.14);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 84px;
  --header-h-sm: 66px;
  --container: 1200px;
  --gutter: 24px;
  --section-pad: 104px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* No overflow-x mask here: every horizontal-overflow root cause
     (100vw calc, grid min-width:auto chains) is fixed at source and verified
     clean at 360–1920px. Masking would only hide future regressions. */
  overflow-wrap: break-word;
}

/* Responsive media foundation: never exceed container, keep ratio, no stretch. */
img { max-width: 100%; display: block; height: auto; }
video { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }
/* Long emails / URLs / codes must wrap instead of forcing overflow. */
a, p, li, dd, h1, h2, h3, h4 { overflow-wrap: anywhere; }
/* Keep normal headings readable: allow break only when needed. */
h1, h2, h3 { overflow-wrap: break-word; }
a { color: var(--navy-500); text-decoration: none; transition: color .2s ease-out; }
a:hover { color: var(--navy-600); }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-300); color: var(--navy-950); }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.18; color: var(--navy-900); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px;
  transition: top .2s ease-out;
}
.skip-link:focus { top: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold-500); flex: none; }
.eyebrow--center::after { content: ""; width: 30px; height: 1px; background: var(--gold-500); flex: none; }

.section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.01em; margin: 14px 0 18px; }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 620px; }
.lead-sm { color: var(--muted); font-size: .95rem; }

.serif-accent { font-family: var(--font-serif); font-style: italic; color: var(--gold-600); }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }
.section--cream { background: var(--cream); }
.section--bone  { background: var(--bone); }
.section--navy  { background: var(--navy-900); color: #D7DFEC; }
.section--navy .section-title { color: #fff; }
.section--navy .section-lead { color: #AEBAD0; }

.section-head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .section-title { margin-top: 16px; }
.section-head .section-lead { margin: 0 auto; }
.section-head--left { margin: 0 0 56px; text-align: left; }
.section-head--left .eyebrow { justify-content: flex-start; }
.section-head--left .section-lead { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
  white-space: nowrap;
  /* Allow long labels to wrap on very narrow screens (see override below). */
  max-width: 100%;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .2s ease-out; }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-navy { background: var(--navy-900); color: #fff; box-shadow: var(--shadow-sm); }
.btn-navy:hover { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-md); }

.btn-gold { background: var(--gold-500); color: var(--navy-950); }
.btn-gold:hover { background: var(--gold-400); color: var(--navy-950); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--navy-100); }
.btn-outline:hover { border-color: var(--navy-600); color: var(--navy-600); }

.btn-light { background: transparent; color: #E9EEF7; border-color: rgba(212, 175, 94, .45); }
.btn-light:hover { border-color: var(--gold-400); color: #fff; background: rgba(212, 175, 94, .08); }

.btn-lg { height: 56px; padding: 0 32px; font-size: 1rem; }
.btn-sm { height: 42px; padding: 0 18px; font-size: .86rem; }

.btn-wa { background: transparent; color: #1B7C5E; border-color: #B8DCCB; }
.btn-wa:hover { border-color: #1B7C5E; color: #145C46; background: #F0F8F3; }
.btn-call { background: transparent; color: var(--navy-700); border-color: var(--navy-100); }
.btn-call:hover { border-color: var(--navy-600); color: var(--navy-600); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: height .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
}
.site-header.is-scrolled {
  height: var(--header-h-sm);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  height: 100%; display: flex; align-items: center; gap: 28px;
}
/* FIX (desktop nav crowding): fluid gaps + wider header container so 10 links
   + logo + CTA fit one row; links never break mid-word (overrides the global
   overflow-wrap:anywhere, which caused "Ho/me", "Acade/mics"). The hamburger
   switch at 1200px remains the fallback when space runs out. */
.header-inner { max-width: 1400px; gap: clamp(12px, 2vw, 28px); }
.main-nav ul { gap: clamp(2px, .4vw, 6px); }
.main-nav a:not(.btn) {
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  padding-left: clamp(7px, .8vw, 11px); padding-right: clamp(7px, .8vw, 11px);
  font-size: clamp(.8rem, .95vw, .88rem);
}
.brand { min-width: 0; }
.nav-cta { margin-left: 12px; flex: none; }
/* Buttons may wrap only at word boundaries where explicitly allowed — never
   shatter a word ("WhatsA/pp") the way overflow-wrap:anywhere does. */
.btn { overflow-wrap: break-word; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-crest { width: auto; height: 44px; flex: none; object-fit: contain; transition: transform .25s ease-out; }
.brand:hover .brand-crest { transform: rotate(-4deg) scale(1.04); }
.brand-word { font-family: var(--font-serif); font-weight: 700; font-size: 1.22rem; letter-spacing: .02em; color: var(--navy-900); line-height: 1.1; display: block; }
.brand-sub { font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-600); display: block; margin-top: 2px; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 6px; }
.main-nav a:not(.btn) {
  display: inline-flex; align-items: center; height: 38px; padding: 0 11px;
  font-size: .88rem; font-weight: 600; color: var(--ink); border-radius: 8px;
  position: relative;
}
.main-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease-out;
}
.main-nav a:not(.btn):hover { color: var(--navy-700); }
.main-nav a:not(.btn):hover::after, .main-nav a:not(.btn).is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--navy-800); }
.nav-cta { margin-left: 12px; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 10px; flex: none;
  /* FIX: column direction so the three bars stack vertically. Without it the
     flex row layout renders them side-by-side ("—_—") and the X animation
     (translateY ±7px) has no stacked geometry to work with. */
  flex-direction: column;
  align-items: center; justify-content: center; border: 1px solid var(--line);
  background: var(--white);
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--navy-900); border-radius: 2px;
  transition: transform .25s ease-out, opacity .2s ease-out;
}
.nav-toggle span + span { margin-top: 5px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 110;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: 18px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .25s ease-out, opacity .25s ease-out, visibility .25s;
  overflow-y: auto;
  /* FIX: plain 100vh breaks on mobile browser chrome; prefer dynamic viewport. */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100svh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
}
body.nav-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu ul { display: grid; gap: 2px; }
.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 6px; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid #f0ede5;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--navy-600); }
.mobile-menu .mm-cta { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-menu .mm-cta .btn { height: 48px; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 96px; position: relative; background: var(--white); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  letter-spacing: -.015em; margin: 22px 0 22px;
}
/* Each headline phrase on its own line via block spans (no hard <br>, which
   cannot adapt at narrow widths). Identical rendering, fluid behaviour. */
.hero h1 .h-line { display: block; }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.13rem); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.hero-meta svg { width: 15px; height: 15px; color: var(--gold-500); }

.hero-media { position: relative; }
.hero-media::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-400); border-radius: var(--r-lg); z-index: 0;
}
.hero-media img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.float-chip {
  position: absolute; z-index: 2; background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: 12px;
  padding: 13px 18px; display: flex; align-items: center; gap: 12px;
}
.float-chip .fc-ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--gold-100);
  display: grid; place-items: center; color: var(--gold-600); flex: none;
}
.float-chip .fc-ic svg { width: 19px; height: 19px; }
.float-chip strong { font-size: .88rem; color: var(--navy-900); display: block; line-height: 1.3; }
.float-chip span { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); }
.fc-1 { top: 26px; right: -12px; animation: drift 7s ease-in-out infinite alternate; }
.fc-2 { bottom: 40px; left: -20px; animation: drift 9s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(9px); } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 38px; background: linear-gradient(var(--gold-500), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ---------- Hero slideshow (full-bleed) ---------- */
.hero--slideshow {
  /* FIX: vh fallback first for older browsers, then svh/dvh for mobile chrome. */
  min-height: 640px;
  min-height: max(640px, 88svh);
  min-height: max(640px, 88dvh);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 48px) 0 120px;
  background: var(--navy-950);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-bg { z-index: 0; }
.hero-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 23, 46, .62) 0%, rgba(11, 23, 46, .45) 38%, rgba(11, 23, 46, .78) 100%),
    linear-gradient(100deg, rgba(11, 23, 46, .72) 0%, rgba(11, 23, 46, .30) 55%, rgba(11, 23, 46, .15) 100%);
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero-slide.is-active {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity 1.2s ease, visibility 0s;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.hero-slide.is-active img { animation: heroZoom 6.8s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.10); } }

.hero-content { position: relative; z-index: 2; width: 100%; }
.hero--slideshow h1 { color: #fff; }
.eyebrow--light { color: var(--gold-300); }
.serif-accent--light { color: var(--gold-300); }
.hero-sub--light { color: #C9D4E6; }
.hero-meta--light span { color: #C9D4E6; }
.hero-meta--light svg { color: var(--gold-400); }

/* Glass info bar: UDISE / school code / contact */
.hero-info {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-info-item { padding: 16px 22px; }
.hero-info-item + .hero-info-item { border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-info dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-300); margin-bottom: 3px;
}
.hero-info dd { font-size: .95rem; font-weight: 600; color: #fff; margin: 0; }
.hero-info dd a { color: #fff; }
.hero-info dd a:hover { color: var(--gold-300); }

/* Slideshow controls */
.hero-controls {
  position: absolute; z-index: 3;
  /* FIX: 100vw includes the vertical scrollbar width and forces horizontal
     overflow. Use 100% (the hero's own width) instead. */
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  bottom: 34px;
  display: flex; align-items: center; gap: 12px;
}
.hero-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .10);
  color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .2s ease-out, border-color .2s ease-out, transform .2s ease-out;
}
.hero-arrow:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.hero-arrow:active { transform: scale(.94); }
.hero-arrow svg { width: 18px; height: 18px; }
.hero-dots { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color .25s ease-out, transform .25s ease-out;
  padding: 0;
}
.hero-dot:hover { background: rgba(255, 255, 255, .8); }
.hero-dot.is-active { background: var(--gold-400); transform: scale(1.25); }
.scroll-hint--light { color: #C9D4E6; }

/* ---------- Stats strip ---------- */
.stats-wrap { margin-top: -64px; position: relative; z-index: 5; }
.stats-strip {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 34px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat { padding: 6px 28px; position: relative; text-align: left; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 54px; background: var(--line);
}
.stat-num { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; color: var(--navy-900); line-height: 1; display: flex; align-items: baseline; gap: 2px; }
.stat-num .suffix { font-size: 1.5rem; color: var(--gold-500); }
.stat-label { margin-top: 8px; font-size: .82rem; font-weight: 600; color: var(--muted); line-height: 1.4; }

/* ---------- Split layouts & imagery ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split .split-copy { max-width: 560px; }
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: -16px 16px 16px -16px;
  border: 1px solid var(--gold-400); border-radius: var(--r-lg); z-index: 0;
}
.frame::after {
  content: ""; position: absolute; inset: auto auto 0 0; width: 34%;
  height: 8%; border-left: 1px solid var(--gold-400); border-bottom: 1px solid var(--gold-400);
  border-radius: 0 0 0 var(--r-lg); z-index: 2;
}
.frame img { position: relative; z-index: 1; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.frame--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.frame--sq img { aspect-ratio: 4 / 3; object-fit: cover; }

.ticks { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.ticks li { display: flex; align-items: center; gap: 11px; font-size: .95rem; font-weight: 500; color: var(--ink); }
.ticks svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; }

.quote-card {
  margin-top: 30px; background: var(--bone); border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 22px 28px;
}
.quote-card p { font-family: var(--font-serif); font-style: italic; font-size: 1.12rem; line-height: 1.6; color: var(--navy-800); }

.quote-name { margin-top: 8px; font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600; color: var(--navy-800); }
.quote-name span { display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); margin-top: 4px; }

.text-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 30px;
  font-size: .95rem; font-weight: 700; color: var(--gold-600);
}
.text-link svg { width: 17px; height: 17px; transition: transform .2s ease-out; }
.text-link:hover { color: var(--navy-700); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Principal ---------- */
.principal-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
  display: grid; grid-template-columns: 380px 1fr;
}
.principal-photo { position: relative; }
.principal-photo img { width: 100%; height: 100%; object-fit: cover; }
.principal-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(transparent, rgba(11, 23, 46, .55));
}
.principal-photo .pp-name {
  position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; color: #fff;
}
.principal-photo .pp-name strong { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; display: block; }
.principal-photo .pp-name span { font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-300); }
.principal-body { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
.principal-quote { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.65; color: var(--navy-800); }
.principal-sign { margin-top: 34px; }
.principal-sign .sig {
  font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--gold-600);
  border-bottom: 1px solid var(--gold-400); display: inline-block; padding: 0 26px 6px 2px; transform: rotate(-2deg);
}
.principal-sign small { display: block; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.principal-sign strong { font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy-900); display: block; }

/* ---------- Vision & mission ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.vm-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 44px 44px 48px; overflow: hidden; transition: box-shadow .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.vm-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-500); }
.vm-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-300); transform: translateY(-3px); }
.vm-ic {
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--gold-300); background: var(--gold-100);
  display: grid; place-items: center; color: var(--gold-600); margin-bottom: 24px;
}
.vm-ic svg { width: 26px; height: 26px; }
.vm-card h3 { font-size: 1.45rem; margin-bottom: 12px; }
.vm-card p { color: var(--muted); font-size: .98rem; }

/* ---------- Feature cards (why choose) ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 32px 28px; transition: box-shadow .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.feature-card:hover { box-shadow: var(--shadow-md); border-color: var(--navy-100); transform: translateY(-3px); }
.feature-ic {
  width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--navy-50);
  display: grid; place-items: center; color: var(--navy-600); margin-bottom: 20px;
  transition: background-color .25s ease-out, color .25s ease-out;
}
.feature-card:hover .feature-ic { background: var(--gold-100); color: var(--gold-600); }
.feature-ic svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.feature-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* ---------- Academic stages ---------- */
.stage-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .25s ease-out, transform .25s ease-out;
  display: flex; flex-direction: column;
}
.stage-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stage-media { position: relative; overflow: hidden; }
.stage-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease-out; }
.stage-card:hover .stage-media img { transform: scale(1.045); }
.stage-num {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255, 255, 255, .95); color: var(--gold-600);
  font-family: var(--font-serif); font-size: .95rem; font-weight: 700;
  padding: 5px 12px; border-radius: 8px; letter-spacing: .04em;
}
.stage-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.stage-body h3 { font-size: 1.22rem; margin-bottom: 10px; }
.stage-body p { font-size: .9rem; color: var(--muted); margin-bottom: 16px; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: .72rem; font-weight: 600; color: var(--navy-700);
  background: var(--navy-50); border: 1px solid var(--navy-100);
  padding: 5px 11px; border-radius: 20px;
}
.chip--gold { color: var(--gold-600); background: var(--gold-100); border-color: var(--gold-300); }
.link-more { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--gold-600); margin-top: 18px; }
.link-more svg { width: 15px; height: 15px; transition: transform .2s ease-out; }
.link-more:hover { color: var(--navy-700); }
.link-more:hover svg { transform: translateX(3px); }

.journey { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.journey::before { content: ""; position: absolute; top: 15px; left: 12%; right: 12%; height: 1px; background: var(--gold-300); }
.j-step { position: relative; padding-top: 44px; }
.j-dot {
  position: absolute; top: 0; left: 0; width: 31px; height: 31px; border-radius: 50%;
  background: #fff; border: 1px solid var(--gold-500); display: grid; place-items: center;
}
.j-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); }
.j-step h4 { font-size: 1.05rem; margin-bottom: 6px; }
.j-step p { font-size: .88rem; color: var(--muted); }

.subject-panel { margin-top: 60px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 38px; }
.subject-panel h3 { font-size: 1.15rem; margin-bottom: 20px; }
.subject-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.subject-grid span {
  display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--cream);
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
.subject-grid span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex: none; }
.subject-grid span:hover { border-color: var(--gold-300); background: var(--gold-100); }

/* ---------- Teaching & learning ---------- */
.tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 52px; }
.tl-item {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 24px; transition: box-shadow .25s ease-out, border-color .25s ease-out;
}
.tl-item:hover { box-shadow: var(--shadow-md); border-color: var(--navy-100); }
.tl-ic { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--gold-100); color: var(--gold-600); display: grid; place-items: center; flex: none; margin-top: 2px; }
.tl-ic svg { width: 20px; height: 20px; }
.tl-item h4 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 4px; }
.tl-item p { font-size: .86rem; color: var(--muted); line-height: 1.55; }

/* ---------- Facilities ---------- */
.fac-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px 22px; text-align: center;
  transition: box-shadow .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.fac-card:hover { box-shadow: var(--shadow-md); border-color: var(--navy-100); transform: translateY(-3px); }
.fac-ic {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--navy-50); color: var(--navy-600);
  display: grid; place-items: center;
  transition: background-color .25s ease-out, color .25s ease-out;
}
.fac-card:hover .fac-ic { background: var(--gold-100); color: var(--gold-600); }
.fac-ic svg { width: 20px; height: 20px; }
.fac-card h3 { font-size: .94rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 6px; }
.fac-card p { font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* ---------- Student life (horizontal strip) ---------- */
.life-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 26px; scrollbar-width: none; }
.life-strip::-webkit-scrollbar { display: none; }
.life-card { position: relative; border-radius: var(--r-md); overflow: hidden; scroll-snap-align: start; cursor: pointer; }
.life-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease-out; }
.life-card:hover img { transform: scale(1.05); }
.life-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 23, 46, .78));
}
.life-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.life-cap span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 4px; }
.life-cap h4 { font-size: 1.12rem; color: #fff; }
.scroll-hint-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: .76rem; font-weight: 600; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.scroll-hint-row svg { width: 14px; height: 14px; color: var(--gold-500); }

/* ---------- Navy band (sports / admissions) ---------- */
.band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.band-media { position: relative; }
.band-media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid rgba(212, 175, 94, .4); border-radius: var(--r-lg); }
.band-media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .12); }
.band-values { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px; }
.value-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(212, 175, 94, .4); color: var(--gold-300);
  font-size: .84rem; font-weight: 600; padding: 9px 16px; border-radius: 30px;
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
.value-pill:hover { background: rgba(212, 175, 94, .1); border-color: var(--gold-400); }
.value-pill svg { width: 14px; height: 14px; }

/* ---------- Events ---------- */
.event-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .25s ease-out, transform .25s ease-out;
  display: flex; flex-direction: column;
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.event-media { position: relative; }
.event-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.event-date {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  padding: 7px 13px; text-align: center; min-width: 56px; line-height: 1.15;
}
.event-date strong { font-family: var(--font-serif); font-size: 1.3rem; color: var(--navy-900); display: block; }
.event-date span { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); }
.event-media.is-featured::after { content: "Featured"; position: absolute; top: 16px; right: 16px; background: var(--gold-500); color: var(--navy-950); font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: 5px 10px; border-radius: 20px; }
.event-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.event-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.event-body p { font-size: .88rem; color: var(--muted); flex: 1; }

.see-all { text-align: center; margin-top: 52px; }

/* ---------- Notices ---------- */
.notice-list { display: grid; gap: 14px; }
.notice-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold-500);
  border-radius: var(--r-sm); padding: 20px 26px; cursor: pointer;
  transition: box-shadow .2s ease-out, border-color .2s ease-out, transform .2s ease-out;
}
.notice-item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); border-left-color: var(--navy-600); }
.notice-badge { font-size: .62rem; font-weight: 700; letter-spacing: .14em; background: var(--gold-500); color: var(--navy-950); padding: 5px 9px; border-radius: 20px; }
.notice-badge.is-old { background: var(--bone); color: var(--muted); }
.notice-main h4 { font-size: 1.02rem; font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.notice-main p { font-size: .86rem; color: var(--muted); }
.notice-item time { font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.notice-arrow { color: var(--gold-600); width: 18px; height: 18px; flex: none; transition: transform .2s ease-out; }
.notice-item:hover .notice-arrow { transform: translateX(3px); }

/* ---------- Admissions steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.step-card {
  position: relative; background: #fff; border-radius: var(--r-md); padding: 30px 26px 28px;
  box-shadow: var(--shadow-md); transition: transform .25s ease-out, box-shadow .25s ease-out;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.step-card::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; background: var(--gold-500); }
.step-num { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 700; color: var(--gold-400); line-height: 1; }
.step-card h4 { font-size: 1.05rem; margin: 12px 0 8px; }
.step-card p { font-size: .85rem; color: var(--muted); }
.step-connector { display: none; }

.adm-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adm-info {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(212, 175, 94, .25);
  border-radius: var(--r-md); padding: 26px 26px;
}
.adm-info .ai-ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(212, 175, 94, .14); color: var(--gold-400); display: grid; place-items: center; margin-bottom: 16px; }
.adm-info .ai-ic svg { width: 19px; height: 19px; }
.adm-info h4 { font-size: 1rem; color: #fff; margin-bottom: 8px; }
.adm-info p { font-size: .86rem; color: #AEBAD0; line-height: 1.6; }
.adm-info ul li { font-size: .86rem; color: #C7D1E2; padding-left: 18px; position: relative; line-height: 1.9; }
.adm-info ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-400); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 32px 30px; display: flex; flex-direction: column;
  transition: box-shadow .25s ease-out, border-color .25s ease-out;
}
.testi-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.stars { display: flex; gap: 3px; margin-bottom: 18px; }
.stars svg { width: 15px; height: 15px; color: var(--gold-500); fill: var(--gold-500); }
.testi-quote { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.65; color: var(--navy-800); flex: 1; }
.testi-who { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--navy-900); color: var(--gold-300);
  font-size: .9rem; font-weight: 700; display: grid; place-items: center;
}
.testi-who strong { font-size: .92rem; display: block; color: var(--ink); }
.testi-who span { font-size: .78rem; color: var(--muted); }

/* ---------- Gallery ---------- */
.filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 auto 42px; max-width: 720px; }
.filter-btn {
  padding: 9px 18px; border-radius: 30px; font-size: .83rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  transition: all .2s ease-out;
}
.filter-btn:hover { border-color: var(--gold-400); color: var(--gold-600); }
.filter-btn.is-active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.masonry { columns: 3; column-gap: 16px; }
.masonry .g-item { break-inside: avoid; margin-bottom: 16px; position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.masonry img { width: 100%; display: block; transition: transform .45s ease-out, filter .3s ease-out; }
.masonry .g-item:hover img { transform: scale(1.06); filter: brightness(.92); }
.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff;
  background: linear-gradient(transparent, rgba(11, 23, 46, .85));
  padding: 34px 16px 13px; font-size: .84rem; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease-out, transform .25s ease-out;
}
.masonry .g-item:hover .g-cap { opacity: 1; transform: translateY(0); }
/* GALLERY PAGE: 4 columns on wide screens (base is 3; 2 columns at
   <=900px and 1 column at <=480px per the queries below). */
@media (min-width: 1280px) {
  .masonry { columns: 4; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(11, 23, 46, .92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility .3s;
  backdrop-filter: blur(6px);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lb-frame { max-width: min(1100px, 92vw); text-align: center; }
.lb-frame img { max-height: 76vh; max-width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-lg); margin: 0 auto; }
.lb-cap { color: #DFE6F1; margin-top: 18px; }
.lb-cap strong { display: block; font-family: var(--font-serif); font-size: 1.1rem; color: #fff; }
.lb-cap span { font-size: .8rem; color: var(--gold-300); letter-spacing: .1em; text-transform: uppercase; }
.lb-btn {
  position: absolute; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center;
  transition: background-color .2s ease-out;
}
.lb-btn:hover { background: var(--gold-500); color: var(--navy-950); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 20px; right: 20px; }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #AEBAD0; font-size: .82rem; letter-spacing: .08em; }

/* ---------- Campus ---------- */
.pano-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.pano { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; }
.pano img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .5s ease-out; }
.pano:hover img { transform: scale(1.04); }
.pano-cap { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.pano-cap strong { font-family: var(--font-serif); font-size: 1.25rem; display: block; }
.pano-cap span { font-size: .8rem; color: var(--gold-300); }

/* ---------- Achievements ---------- */
.achieve-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.achieve-item {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 26px; cursor: pointer;
  transition: box-shadow .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.achieve-item:hover { box-shadow: var(--shadow-md); border-color: var(--gold-300); transform: translateY(-3px); }
.achieve-ic {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--gold-100); color: var(--gold-600); display: grid; place-items: center;
}
.achieve-ic svg { width: 21px; height: 21px; }
.achieve-item h4 { font-size: 1.02rem; margin-bottom: 5px; }
.achieve-item p { font-size: .88rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-side .card-mini {
  margin-top: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.faq-side .card-mini h4 { font-family: var(--font-sans); font-size: .98rem; font-weight: 700; margin-bottom: 6px; }
.faq-side .card-mini p { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }

.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:first-child { border-top: 1px solid var(--line); }
.acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; padding: 22px 4px; font-size: 1.03rem; font-weight: 600; color: var(--navy-900); cursor: pointer;
  transition: color .2s ease-out;
}
.acc-q:hover { color: var(--gold-600); }
.acc-q .acc-ic {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-300); color: var(--gold-600);
  display: grid; place-items: center; flex: none; transition: transform .3s ease-out, background-color .25s ease-out;
}
.acc-q .acc-ic svg { width: 15px; height: 15px; }
.acc-item.is-open .acc-ic { transform: rotate(45deg); background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease-out; }
.acc-panel-inner { padding: 0 44px 24px 4px; font-size: .94rem; color: var(--muted); line-height: 1.75; }
.acc-panel-inner a { font-weight: 600; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.contact-list { display: grid; gap: 14px; }
.contact-card {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px; transition: box-shadow .25s ease-out, border-color .25s ease-out;
}
.contact-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.cc-ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy-600); display: grid; place-items: center; flex: none; }
.cc-ic svg { width: 20px; height: 20px; }
.contact-card h4 { font-size: .84rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.contact-card p { font-size: .98rem; font-weight: 500; color: var(--ink); }
.contact-card a:hover { color: var(--gold-600); }
.contact-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.contact-actions .btn { height: 46px; padding: 0 12px; font-size: .86rem; }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 38px 40px;
}
.form-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
.form-card > p { font-size: .9rem; color: var(--muted); margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: .8rem; font-weight: 700; color: var(--navy-800); letter-spacing: .02em; }
.form-field input, .form-field select, .form-field textarea {
  height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--cream); font-size: .94rem; transition: border-color .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out;
}
.form-field textarea { height: auto; min-height: 108px; padding: 13px 15px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--gold-500); background: #fff; box-shadow: 0 0 0 3px rgba(189, 147, 48, .15);
}
.form-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: .78rem; color: var(--muted); }
.form-note svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; margin-top: 2px; }
.form-card .btn { width: 100%; margin-top: 24px; }
.form-ok { display: none; margin-top: 18px; background: #EAF6EF; border: 1px solid #BFE3CC; color: #16653B; font-size: .88rem; font-weight: 600; border-radius: var(--r-sm); padding: 13px 16px; }
.form-ok.is-show { display: block; }
.form-err { display: none; margin-top: 18px; background: #FDECEC; border: 1px solid #F3C1C1; color: #A93226; font-size: .88rem; font-weight: 600; border-radius: var(--r-sm); padding: 13px 16px; }
.form-err.is-show { display: block; }

.map-frame {
  margin-top: 64px; position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--navy-900);
  display: grid; place-items: center; min-height: 320px;
}
.map-frame .mf-inner { text-align: center; color: #C7D1E2; padding: 40px 24px; }
.map-frame svg { width: 40px; height: 40px; color: var(--gold-400); margin: 0 auto 14px; }
.map-frame strong { font-family: var(--font-serif); font-size: 1.15rem; color: #fff; display: block; margin-bottom: 6px; }
.map-frame p { font-size: .84rem; max-width: 420px; margin: 0 auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #93A3BE; margin-top: var(--section-pad); }
.footer-main { padding: 72px 0 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-sub { color: var(--gold-400); }
.footer-brand p { font-size: .88rem; margin-top: 18px; line-height: 1.7; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center; color: #C7D1E2; transition: all .2s ease-out;
}
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h4 { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 20px; font-family: var(--font-sans); }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: #93A3BE; font-size: .9rem; transition: color .2s ease-out; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); opacity: 0; transition: opacity .2s ease-out; }
.footer-col a:hover { color: #fff; }
.footer-col a:hover::before { opacity: 1; }
.footer-contact li { display: flex; gap: 12px; font-size: .88rem; line-height: 1.65; }
.footer-contact svg { width: 16px; height: 16px; color: var(--gold-400); flex: none; margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09); padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .8rem;
  max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter);
}
.footer-bottom a { color: var(--gold-400); }

/* ---------- Mobile sticky actions ---------- */
.mob-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr); gap: 9px; backdrop-filter: blur(10px);
}
.mob-cta .btn { height: 46px; padding: 0 8px; font-size: .84rem; }
.mob-cta .btn svg { width: 15px; height: 15px; }
body { padding-bottom: 0; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--navy-900); padding: 84px 0 68px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; right: -120px; top: -160px; width: 480px; height: 480px;
  border: 1px solid rgba(212, 175, 94, .16); border-radius: 50%;
}
.page-hero::after {
  content: ""; position: absolute; right: -40px; top: -80px; width: 260px; height: 260px;
  border: 1px solid rgba(212, 175, 94, .12); border-radius: 50%;
}
.page-hero-inner { position: relative; z-index: 1; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-300); }
.crumbs a { color: #8FA4C8; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.1rem); margin: 16px 0 14px; letter-spacing: -.01em; }
.page-hero p { color: #AEBAD0; max-width: 640px; font-size: 1.02rem; }
.page-hero .hero-rule { width: 56px; height: 3px; background: var(--gold-500); margin-top: 26px; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* FIX (header overflow ~1121-1400px): with nowrap links the row's minimum
   width exceeds the viewport here, so compact the nav in this band instead
   of wrapping or clipping. Below 1200px the hamburger takes over. */
@media (max-width: 1400px) {
  .header-inner { gap: 12px; }
  .main-nav ul { gap: 2px; }
  .main-nav a:not(.btn) { padding-left: 5px; padding-right: 5px; font-size: .78rem; }
  .nav-cta { margin-left: 4px; height: 46px; padding: 0 18px; font-size: .88rem; }
}

/* ---------- Responsive ---------- */
/* ============================================================
   HEADER BRAND (real logo + full school name — additive only)
   The long name wraps at word boundaries in ≤2 lines beside a
   44px (38px mobile) logo; the 84/66/72px header heights are
   unchanged, so no offset updates are needed. Tune with the
   clamp() below (floor .68rem ≈ 11px, the readable minimum).
   ============================================================ */
.brand { flex-shrink: 1; min-width: 0; }
.brand > span { min-width: 0; }
.main-nav, .nav-cta, .nav-toggle { flex-shrink: 0; }
.brand-word {
  font-size: clamp(.68rem, .55rem + .65vw, .95rem);
  line-height: 1.15; letter-spacing: .04em; overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand-word { letter-spacing: .02em; }
}
/* FIX (long brand name): the full 11-item nav + CTA + wide brand
   no longer fits one row below ~1200px, so the hamburger takes
   over at 1200px instead of 1120px. */
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .mobile-menu .mm-cta { display: grid; }
  .stats-strip { padding: 26px 22px; }
  .stat { padding: 4px 18px; }
  .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .subject-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .principal-card { grid-template-columns: 320px 1fr; }
  .principal-body { padding: 40px 38px; }
}

@media (max-width: 900px) {
  :root { --section-pad: 72px; }
  .hero { padding-top: 40px; }
  .hero-grid, .split, .band-inner, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-media::before { inset: 12px -12px -12px 12px; }
  .fc-1 { right: 8px; }
  .fc-2 { left: 8px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 26px; }
  .grid-3, .vm-grid, .testi-grid, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .grid-5 { gap: 14px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .adm-grid { grid-template-columns: 1fr 1fr; }
  .principal-card { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .principal-photo img { aspect-ratio: 4 / 3.4; height: auto; }
  .principal-photo::after { display: none; }
  .principal-photo .pp-name { display: none; }
  .journey::before { display: none; }
  .journey { gap: 18px; }
  .j-step { padding-top: 0; padding-left: 44px; }
  .j-dot { top: 4px; left: 0; }
  .masonry { columns: 2; }
  .faq-side { position: static; }
  .pano-row { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
  .section-head { margin-bottom: 44px; }
  .hero--slideshow {
    /* FIX: hero always fills the viewport (100vh fallback, then svh for
       mobile browser chrome); content grows it taller when needed. */
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + 32px) 0 132px;
  }
  .hero-info { grid-template-columns: 1fr 1fr; }
  .hero-info-item:nth-child(3) { border-left: none; }
  .hero-info-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}

@media (max-width: 760px) {
  :root { --header-h: 72px; --section-pad: 60px; --gutter: 20px; }
  .header-inner { gap: 14px; }
  .brand-crest { width: auto; height: 38px; }
  /* Long brand name: keep the fluid clamp, not the old 1.05rem single-line size. */
  .brand-word { font-size: clamp(.68rem, .55rem + .65vw, .95rem); }
  .brand-sub { font-size: .52rem; }
  /* FIX: hero keeps the desktop design (photo + navy gradient + tagline +
     serif headline + sub + CTAs + ticks), adapted fluidly. Stronger shade
     keeps text readable over the bright sky; object-position keeps the main
     entrance visible instead of default-centre cropping. */
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-sub { font-size: clamp(1rem, 3.5vw, 1.1rem); }
  .hero-slide img { object-position: center 60%; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(11, 23, 46, .72) 0%, rgba(11, 23, 46, .58) 38%, rgba(11, 23, 46, .86) 100%),
      linear-gradient(100deg, rgba(11, 23, 46, .78) 0%, rgba(11, 23, 46, .42) 55%, rgba(11, 23, 46, .22) 100%);
  }
  .hero-actions .btn { flex: 1; }
  .scroll-hint { display: none; }
  .stats-wrap { margin-top: 0; }
  .stats-strip { box-shadow: var(--shadow-md); }
  .grid-2, .grid-3, .grid-4, .grid-5, .steps, .adm-grid, .tl-grid,
  .vm-grid, .testi-grid, .achieve-grid, .life-strip + .scroll-hint-row { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ticks { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-actions { grid-template-columns: 1fr; }
  .masonry { columns: 2; column-gap: 10px; }
  .masonry .g-item { margin-bottom: 10px; }
  .filter-btn { padding: 8px 14px; font-size: .78rem; }
  .subject-grid { grid-template-columns: 1fr 1fr; }
  .principal-body { padding: 30px 24px; }
  .step-card { padding: 24px 20px; }
  .form-card { padding: 28px 22px; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  .notice-item { grid-template-columns: auto 1fr; gap: 14px; }
  .notice-item time { grid-column: 2 / -1; }
  .life-strip { grid-auto-columns: 82%; }
  .mobile-menu .mm-cta { grid-template-columns: 1fr; }

  .mob-cta { display: grid; }
  body { padding-bottom: 76px; }
  main { /* nothing */ }
  .hero--slideshow { padding-bottom: 150px; }
  .hero-info { grid-template-columns: 1fr; margin-top: 30px; }
  .hero-info-item + .hero-info-item { border-left: none; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-info-item { padding: 13px 18px; }
  .hero-controls { left: var(--gutter); right: var(--gutter); justify-content: center; bottom: 88px; }
}

@media (max-width: 480px) {
  .grid-5 { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .section-head--left .section-title { font-size: 1.7rem; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
}

/* ---------- Responsive hardening (mobile-first fixes, no redesign) ----------
   Breakpoints in use: 480 / 760 / 900 / 1200 (header hamburger moved 1120 → 1200 for the long brand name).
   Ultra-wide guard + small-phone guard added below. */
.container { max-width: min(var(--container), 100% - 0px); }
.hero-slide img { object-position: center 38%; }
.stage-media img, .event-media img, .frame img { object-position: center; }

/* Responsive embeds: maps / videos keep 16:9 without a fixed 400px height. */
.map-frame { min-height: 0; padding: 0; }
.map-frame .mf-inner { padding: 48px 24px; }
.map-frame iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  min-height: 280px; border: 0;
}

/* Contact cards: long emails must wrap; keep icon column fixed. */
.contact-card { min-width: 0; }
.contact-card > div:last-child { min-width: 0; }
.contact-card p, .contact-card a { overflow-wrap: anywhere; word-break: break-word; }
.hero-info dd, .hero-info dd a { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.hero-info-item { min-width: 0; }
.footer-contact li, .footer-contact span, .footer-contact a { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* Tap targets: enlarge hit area without changing visual size. */
.hero-dot { position: relative; }
a, button { touch-action: manipulation; }
body { -webkit-tap-highlight-color: rgba(212, 175, 94, .25); }
.hero-dot::after { content: ""; position: absolute; inset: -18px; }
.filter-btn { min-height: 44px; display: inline-flex; align-items: center; }
.footer-social a { width: 44px; height: 44px; }
.mobile-menu a { min-height: 48px; }

/* Guard decorative offsets so they never cause horizontal scroll. */
.hero, .split, .band-inner, .frame, .band-media, .hero-media { min-width: 0; }
.frame, .hero-media, .band-media { max-width: 100%; }
/* FIX (verified 1024px overflow): grid items default to min-width:auto and refuse
   to shrink past their content (contact buttons, long emails), pushing the
   neighbouring column past the viewport. Force shrinkability down the chain. */
.split > *, .band-inner > *, .faq-grid > *, .contact-grid > *,
.contact-list, .form-card, .contact-card > div:last-child { min-width: 0; }
.contact-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-actions .btn { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
/* Keep the original single-column mobile layout: the 3-col fix above must not
   override the max-width:760px rule that stacks these buttons. */
@media (max-width: 760px) {
  .contact-actions { grid-template-columns: 1fr; }
  .contact-actions .btn { white-space: nowrap; }
}
/* FIX (verified 1024px overflow, part 2): form grid items + inputs also refuse
   to shrink (UA input min-width). Force fluid width down the chain. */
.form-grid > *, .adm-grid > *, .steps > *, .tl-grid > *,
.subject-grid > *, .grid-3 > *, .grid-2 > * { min-width: 0; }
.form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-width: 0; max-width: 100%;
}

@media (max-width: 760px) {
  /* Notice list has 4 children (badge/main/time/arrow): place arrow with badge. */
  .notice-item { grid-template-columns: auto 1fr auto; }
  .notice-item time { grid-column: auto; }
  .notice-item .notice-main { min-width: 0; }
  /* iOS zoom-on-focus: inputs must be >=16px. */
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
}

/* Hero CTAs: stacked full-width column on phones, side by side from 640px up.
   (Moved out of the 760px query so 641–760px tablets get the row layout —
   two buttons fit comfortably there.) */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn {
    flex: 1 1 auto; width: 100%; white-space: normal; text-align: center;
    height: auto; min-height: 48px; padding-top: 14px; padding-bottom: 14px;
  }
}

/* Trust ticks: vertical list on the narrowest phones so nothing collides. */
@media (max-width: 400px) {
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  /* 360px phones: hero buttons must not collide; controls sit below info bar. */
  .hero h1 { overflow-wrap: break-word; }
  .hero-meta { gap: 6px 14px; }
  .hero-meta span { font-size: .8rem; }
  .stat-num { font-size: 2rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stat { min-width: 0; }
  .contact-actions .btn { min-height: 48px; height: auto; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }
  .mob-cta .btn { min-height: 46px; white-space: nowrap; }
  .map-frame iframe { aspect-ratio: 4 / 3; min-height: 320px; } /* CONTACT: MAP EMBED — 320px minimum so the map is never squashed at 360px. */
  .lb-frame { max-width: 94vw; }
  .lb-frame img { max-height: 70vh; max-height: 70dvh; }
}

@media (max-width: 360px) {
  /* Smallest phones: single column everywhere, tighter padding. */
  .hero-info { grid-template-columns: 1fr; }
  .subject-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat:nth-child(n+3) { border-top: none; padding-top: 4px; }
  .stat + .stat { border-top: 1px solid var(--line); padding-top: 22px; }
}

/* Landscape phones (height-constrained): reduce hero bulk so content fits. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero--slideshow { min-height: 0; padding-top: calc(var(--header-h) + 20px); padding-bottom: 120px; }
  .mobile-menu { max-height: calc(100dvh - var(--header-h)); }
}

/* Ultra-wide: keep centred container, prevent stretched content. */
@media (min-width: 1536px) {
  :root { --container: 1320px; }
  .hero-slide img { object-position: center 40%; }
}

/* Safe-area for notched phones on fixed bars. */
.site-header, .mobile-menu { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .float-chip { animation: none; }
  .scroll-hint::after { animation: none; }
  .hero-slide { transition: opacity .2s ease-out, visibility 0s; }
  .hero-slide.is-active img { animation: none; transform: none; }
}

/* ============================================================
   HERO CORNER STACKS (homepage hero overlays — additive only)
   Left stack: "LOVE TO LEARN" tagline + Mother Mary flush with
   the hero's left edge. Right stack: "LEARN TO LOVE" tagline +
   school logo aligned to the tagline's right edge. Tune here:
   --hero-mary-w (Mary width), --hero-logo-w (logo width),
   --hero-stack-gap (tagline-to-image gap, 8-12px),
   --hero-reserve-top (copy clearance below the stacks),
   --hero-content-shift (desktop copy clearance beside Mary).
   To switch the gentle float off, add the class
   "hero-float--static" to the hero <section> (one place).
   Both stacks are direct children of .hero--slideshow, stacked
   above .hero-shade (z-index 1) and below .hero-controls (3),
   the mobile menu (110) and the sticky header (120). They sit
   OUTSIDE #hero-bg, so js/main.js heroSlideshow() — which only
   queries "#hero-bg .hero-slide" — never touches them.
   NOTE: both source files are JPEGs (solid backgrounds, no
   transparency), so they are framed with a subtle gold border
   and a soft shadow instead of a transparent drop-shadow. Mary
   keeps the border on top/right/bottom only, with square left
   corners, so the visible picture touches x = 0 exactly.
   Supply transparent PNG/WebP versions for a cut-out look.
   ============================================================ */
.hero--slideshow {
  --hero-mary-w: clamp(220px, 20vw, 320px);
  --hero-mary-w: min(clamp(220px, 20vw, 320px), 44svh);
  --hero-logo-w: clamp(96px, 8vw, 140px);
  --hero-tagline-top: 18px;
  --hero-tagline-size: clamp(.7rem, .65rem + .8vw, 1.1rem);
  --hero-stack-gap: 10px;
  --hero-float-gutter: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  /* Clearance so the corner stacks never cover the hero copy: top
     clears the right (logo) stack; left clears Mary's width on
     desktop, where the copy is vertically centred beside it. */
  --hero-reserve-top: 80px;
  --hero-content-shift: max(0px, var(--hero-mary-w) + 16px - var(--hero-float-gutter));
}
/* Stacks: absolute flex columns pinned to the top corners. */
.hero-stack { position: absolute; top: var(--hero-tagline-top); z-index: 2; display: flex; flex-direction: column; gap: var(--hero-stack-gap); margin: 0; }
/* HERO: MARY FULL-HEIGHT (Method A — reveal more of the same picture).
   The left stack spans from its current top to the hero's bottom edge and
   the Mary wrapper takes the remaining height. Width, top offset and
   tagline are untouched. Height comes from the hero itself (no fixed
   heights, no vh), so it follows min-height:100svh automatically. */
.hero-stack--left { left: 0; bottom: 0; align-items: flex-start; }
.hero-stack--right { right: var(--hero-float-gutter); align-items: flex-end; }
/* Taglines keep their text/font/size/colour/shadow; now laid out by
   the stack instead of absolute offsets. The left tagline keeps its
   old left offset as inner padding while the stack sits at x = 0. */
.hero-stack .hero-tagline {
  position: static; margin: 0;
  font-family: var(--font-sans); font-weight: 800; text-transform: uppercase;
  font-size: var(--hero-tagline-size); letter-spacing: .18em; line-height: 1.2;
  color: var(--gold-300); white-space: nowrap; overflow-wrap: normal; word-break: normal;
  text-shadow: 0 1px 3px rgba(11, 23, 46, .9), 0 2px 12px rgba(11, 23, 46, .6);
}
.hero-tagline--left { padding-left: var(--hero-float-gutter); text-align: left; }
.hero-tagline--right { text-align: right; }
/* Floating images: static inside their stack (positioning lives on
   the stack). Sizing only here — no offsets, no horizontal motion. */
.hero-stack .hero-float { position: static; transform: none; margin: 0; }
.hero-float img {
  display: block; width: 100%; height: auto; object-fit: cover;
  background: #fff;
  border: 2px solid rgba(212, 175, 94, .7);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .5), 0 0 24px rgba(212, 175, 94, .22);
}
/* HERO: MARY EXTENSION FILL (white-block fix).
   Root causes fixed: (1) the extension url() is css-relative, so it must
   climb out of css/ (was 404ing under /css/assets/...); (2) the <img>
   inherits a white element background that covered the wrapper fill, so
   it is transparent here and the extension shows through the letterbox
   zones; (3) `animation: none` is qualified so it beats the later
   generic float rule (equal-specificity order was letting Mary drift).
   Picture, box, border, shadow and stack behaviour are untouched. */
.hero-float--mary {
  width: var(--hero-mary-w); flex: 1 1 auto; min-height: 0; overflow: hidden;
  --mary-extend-fade: rgba(11, 23, 46, .55);
  --mary-extend-solid: 20%;
  background-color: var(--navy-900);
  background-image:
    linear-gradient(to bottom, rgba(11, 23, 46, 0) var(--mary-extend-solid), var(--mary-extend-fade)),
    url("../assets/images/mother-mary-extend.webp");
  background-size: 100% 100%, 100% 100%;
  background-position: center, bottom;
  background-repeat: no-repeat;
}
.hero-float--mary img {
  height: 100%;
  object-fit: contain;
  object-position: top center;
  background: transparent;
  border-left: none;
  border-bottom: none;
  border-radius: 0 18px 0 0;
  box-shadow: 14px 0 34px rgba(0, 0, 0, .45), 0 0 24px rgba(212, 175, 94, .22);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.hero--slideshow .hero-float--mary img { animation: none; } /* pinned flush: never drift (wins over generic float) */
.hero-float--logo { width: var(--hero-logo-w); }
.hero-float--logo img { aspect-ratio: 431 / 464; border-radius: 16px; object-fit: contain; }
/* Reserve room so the copy starts clear of the corner stacks. */
.hero--slideshow .hero-content {
  padding-left: calc(var(--gutter) + var(--hero-content-shift));
  padding-top: var(--hero-reserve-top);
}
/* Gentle hover-like float (vertical only, so Mary never leaves x = 0).
   Positioning lives on the stack above; this animates the inner img
   via the independent `translate` property so the two never conflict. */
@keyframes heroFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hero-float img { animation: heroFloat 7s ease-in-out infinite; }
.hero--slideshow.hero-float--static .hero-float img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-float img { animation: none; }
}
/* ============================================================
   HERO top shade (permanent overlay). Slightly taller/stronger
   than before so the corner stacks stay readable over bright sky.
   A sibling of .hero-content, outside #hero-bg, so the slideshow
   script never touches it.
   ============================================================ */
.hero-topshade {
  position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 23, 46, .62) 0%, rgba(11, 23, 46, 0) 100%);
  pointer-events: none;
}
@media (max-width: 359.98px) {
  .hero-tagline { font-size: .6rem; letter-spacing: .08em; }
}
/* Tablet (640–1023px): same corner stacks, smaller sizes. The copy
   starts below the taller (Mary) stack, so no left shift is needed. */
@media (max-width: 1023.98px) {
  .hero--slideshow {
    --hero-mary-w: clamp(170px, 26vw, 240px);
    --hero-mary-w: min(clamp(170px, 26vw, 240px), 44svh);
    --hero-logo-w: clamp(76px, 10vw, 110px);
    /* Stack height (tagline-top + tagline + gap + Mary + breathing
       room) minus the section's own top padding. */
    --hero-reserve-top: calc(var(--hero-mary-w) * 1.253 - 40px);
    --hero-content-shift: 0px;
  }
  /* Same box as BEFORE (width var + 494/619 ratio); the shared contain
     rules above fit the whole picture inside it (shrink case: the spare
     sides show the extension). Frame treatment kept as it was. */
  .hero-stack--left { bottom: auto; }
  .hero-float--mary { flex: none; aspect-ratio: 494 / 619; }
  .hero-float--mary img {
    border-bottom: 2px solid rgba(212, 175, 94, .7);
    border-radius: 0 18px 18px 0;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .5), 0 0 24px rgba(212, 175, 94, .22);
  }
}
/* Phone (under 640px): taglines share the top row with a stack under
   each; the copy starts below the taller (Mary) stack. */
@media (max-width: 639.98px) {
  .hero--slideshow {
    --hero-mary-w: clamp(96px, 30vw, 150px);
    --hero-logo-w: clamp(56px, 19vw, 80px);
    --hero-tagline-top: 12px;
    --hero-reserve-top: calc(var(--hero-mary-w) * 1.253 - 56px);
    --hero-content-shift: 0px;
  }
  .hero-tagline { font-size: clamp(.62rem, 3.4vw, .72rem); letter-spacing: .12em; }
  .hero-tagline--left { padding-left: var(--gutter); }
  .hero-stack--right { right: var(--gutter); }
  .hero-float--mary img { border-radius: 0 14px 14px 0; }
  .hero-float--logo img { border-radius: 12px; }
}
/* Landscape phones (height-constrained): keep both compact. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero--slideshow { --hero-mary-w: 130px; --hero-logo-w: 64px; }
}

/* ============================================================
   WHO WE ARE - HISTORY (about.html #who-we-are — additive only)
   Lead + body paragraphs, milestone strip, Vision/Goal cards.
   Reuses .section-lead, .quote-card and the site tokens; the
   global prefers-reduced-motion rule already covers reveals.
   ============================================================ */
.who-lead { margin-bottom: 18px; }
.who-text {
  font-size: 1rem; line-height: 1.7; color: var(--ink);
  max-width: 65ch; margin-bottom: 1.1em;
  overflow-wrap: break-word;
}
.who-timeline {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin-top: 60px;
}
.who-ms {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  border-top: 3px solid var(--gold-500); padding: 22px 24px 24px; min-width: 0;
}
.who-ms time {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: 1.2rem; color: var(--navy-900); margin-bottom: 8px;
}
.who-ms p { font-size: .92rem; color: var(--muted); line-height: 1.65; overflow-wrap: break-word; }
.who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.who-cards .quote-card { margin-top: 0; }
.who-cards .quote-card p { overflow-wrap: break-word; }
.who-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 10px;
}
/* Tablet and below: split already stacks; milestones go single column. */
@media (max-width: 900px) {
  .who-timeline { grid-template-columns: 1fr; max-width: 640px; margin-top: 48px; }
}
/* Phone: Vision/Goal stack. */
@media (max-width: 760px) {
  .who-cards { grid-template-columns: 1fr; }
}
/* School profile facts (about.html #who-we-are — additive only). */
.who-profile { margin-top: 56px; }
.who-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin: 8px 0 0;
}
.who-fact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  border-top: 3px solid var(--gold-500); padding: 20px 22px; min-width: 0; margin: 0;
}
.who-fact dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 6px;
}
.who-fact dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--navy-900); overflow-wrap: break-word; }
.who-fact--wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .who-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .who-facts { grid-template-columns: 1fr; }
}

/* ============================================================
   MANAGEMENT PAGE (management.html — additive only)
   Two featured cards (Provincial, President) centred on row 1,
   three equal cards on row 2. Tokens, radius, shadow, hover and
   reveal behaviour match .stage-card / .feature-card. The global
   prefers-reduced-motion rule already neutralises the hover
   transitions. Names wrap at word boundaries only (break-word).
   ============================================================ */
.mgmt-lead {
  display: grid; grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center; gap: 26px; margin-bottom: 26px;
}
.mgmt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; max-width: 1080px; margin: 0 auto;
}
.mgmt-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-width: 0;
  transition: box-shadow .25s ease-out, transform .25s ease-out, border-color .25s ease-out;
}
.mgmt-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold-300); }
.mgmt-photo { overflow: hidden; border-bottom: 3px solid var(--gold-500); }
.mgmt-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  transition: transform .45s ease-out;
}
.mgmt-card:hover .mgmt-photo img { transform: scale(1.045); }
.mgmt-body {
  padding: 24px 22px 26px; text-align: center; flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0;
}
.mgmt-role {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
}
.mgmt-name {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem;
  color: var(--navy-900); overflow-wrap: break-word;
}
.mgmt-lead .mgmt-name { font-size: 1.35rem; }
/* Tablet (640-1023px): 2 columns, last card centred. */
@media (max-width: 1023.98px) {
  .mgmt-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .mgmt-grid .mgmt-card:last-child { grid-column: 1 / -1; max-width: 367px; width: 100%; margin: 0 auto; }
}
/* Phone (under 640px): single column, full-width cards, photo on top. */
@media (max-width: 639.98px) {
  .mgmt-lead, .mgmt-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .mgmt-lead { margin-bottom: 24px; }
  .mgmt-grid .mgmt-card:last-child { grid-column: auto; max-width: none; }
}