/* ==========================================================================
   Kenedy Group of Schools — stylesheet
   Palette sampled from the school crest: navy, saffron, sunrise gold, star red, cream.
   The crest's rising sun and rays recur as the main visual motif.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

:root {
  /* Brand (from crest) */
  --navy-950: #0D0D29;
  --navy-900: #131336;
  --navy-800: #191943;
  --navy-700: #26265A;
  --navy-600: #3A3A70;
  --navy-100: #E6E6EE;
  --navy-50: #F2F2F6;
  --saffron-700: #9A4A1C;
  --saffron-600: #A9541F;
  --saffron-500: #C76528;
  --saffron-300: #D8AE7E;
  --saffron-100: #F3E6D8;
  --gold-500: #C9A45C;
  --gold-300: #DCC394;
  --gold-100: #F3EBDA;
  --red-600: #B3261E;
  --red-500: #B4483B;
  --red-100: #FBE3E0;
  --cream-50: #FBF8F1;
  --cream-100: #F5F0E4;
  --cream-200: #ECE3D0;
  --white: #FFFFFF;

  /* Semantic */
  /* Page surfaces, lightest to deepest: white (--surface) for cards, forms and panels; warm ivory (--ivory) for main
     sections; soft cream (--surface-alt) for alternate sections. Main sections fade to the soft cream at their top and
     bottom over --section-fade, so sections stay distinct but meet with no line or hard edge. See `.section` below. */
  --ivory: var(--cream-100);
  --ivory-glow:
    radial-gradient(55% 42% at 100% 38%, rgb(201 164 92 / .16), transparent 72%),
    radial-gradient(45% 38% at 0% 70%, rgb(199 101 40 / .06), transparent 72%);
  --section-fade: clamp(72px, 10vw, 150px);
  --bg: var(--ivory);
  --surface: var(--white);
  --surface-alt: var(--gold-100);
  --text: #2B2A4A;
  --text-muted: #57566F;
  --heading: var(--navy-800);
  --line: #E7DDC8;
  --line-strong: #D7CCB4;
  --accent-text: var(--saffron-700);
  --focus: var(--saffron-600);
  --success: #1B6E44;
  --error: var(--red-600);
  --on-dark: var(--cream-50);
  --on-dark-muted: rgb(251 248 241 / .8);

  /* Cormorant Garamond: editorial headings and statistics (lining figures).
     Manrope: navigation, body text, buttons, cards and small headings. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(25 25 67 / .04), 0 4px 14px -6px rgb(25 25 67 / .08);
  --shadow-2: 0 2px 4px rgb(25 25 67 / .04), 0 16px 36px -14px rgb(25 25 67 / .18);
  --shadow-3: 0 24px 60px -24px rgb(25 25 67 / .3);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 160ms;
  --dur-2: 300ms;
  --dur-3: 800ms;

  --container: 1250px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 68px;
  --section-y: clamp(64px, 6.5vw, 100px);        /* top and bottom padding of every section */
  --section-y-hero: clamp(48px, 5vw, 72px);      /* first section under a navy page hero (the curve adds its own space) */
  --head-gap: clamp(32px, 4vw, 52px);            /* section heading to its content */

  --z-fab: 90;
  --z-header: 100;
  --z-scrim: 190;
  --z-drawer: 200;

  color-scheme: light;
}

@media (min-width: 900px) {
  :root { --header-h: 78px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  font-synthesis: style;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 3vw + 1.1rem, 4rem); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 1.8vw + 1.05rem, 2.85rem); line-height: 1.12; }
h3 { font-size: clamp(1.18rem, .4vw + 1.05rem, 1.38rem); line-height: 1.3; }
h4 { font-size: 1.12rem; }
h1 em, h2 em { color: var(--saffron-600); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }

::selection { background: var(--gold-300); color: var(--navy-950); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--navy-800);
  color: var(--cream-50);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--saffron-500), var(--gold-500));
}
.eyebrow--light { color: var(--gold-500); }

.lead {
  font-size: clamp(1.0625rem, .45vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.hl {
  color: var(--navy-800);
  background: linear-gradient(transparent 60%, rgb(201 164 92 / .55) 60%, rgb(201 164 92 / .55) 88%, transparent 88%);
  padding-inline: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl-saffron { color: var(--saffron-600); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 2px solid var(--gold-500);
  padding-bottom: 2px;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.text-link .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-2) var(--ease-out); }
.text-link:hover { color: var(--saffron-700); border-color: var(--saffron-500); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: var(--cream-50);
  --btn-shadow: rgb(25 25 67 / .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 50px;
  padding: .75em 1.45em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 8px 18px -8px var(--btn-shadow);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 26px -10px var(--btn-shadow); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .icon-arrow { transform: translateX(3px); }

.btn--accent { --btn-bg: var(--saffron-500); --btn-fg: var(--navy-950); --btn-shadow: rgb(169 84 31 / .55); }
.btn--accent:hover { --btn-bg: #B5591F; }
.btn--light { --btn-bg: var(--cream-50); --btn-fg: var(--navy-900); --btn-shadow: rgb(0 0 0 / .35); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  border-color: rgb(25 25 67 / .28);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--navy-50); border-color: var(--navy-800); box-shadow: none; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--cream-50); border-color: rgb(251 248 241 / .45); box-shadow: none; }
.btn--ghost-light:hover { --btn-bg: rgb(251 248 241 / .1); border-color: var(--cream-50); box-shadow: none; }
.btn--wa { --btn-bg: #1B7F4B; --btn-fg: #fff; --btn-shadow: rgb(27 127 75 / .5); }
.btn--sm { min-height: 44px; padding: .55em 1.1em; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Top bar ---------- */
.topbar {
  display: none;
  background: var(--navy-900);
  color: var(--on-dark-muted);
  font-size: .875rem;
}
@media (min-width: 900px) { .topbar { display: block; } }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.topbar p { margin: 0; display: flex; align-items: center; gap: 10px; }
.topbar strong { color: var(--gold-500); font-weight: 700; }
.topbar-links { display: flex; gap: 24px; list-style: none; padding: 0; }
.topbar-links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color var(--dur-1); }
.topbar-links a:hover { color: var(--gold-500); }
.topbar .icon { width: 1rem; height: 1rem; color: var(--gold-500); }

.pulse-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
}
.pulse-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--gold-500);
  animation: pulse 2.2s var(--ease-out) infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  isolation: isolate;
  /* A gold line along the bottom of the header, on every page and at every scroll position (chosen by the school, 14 November 2026). */
  border-bottom: 2px solid var(--gold-500);
  transition: box-shadow var(--dur-2);
}
/* Blur lives on a pseudo-element so the fixed mobile drawer is not trapped inside the header. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(251 248 241 / .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgb(25 25 67 / .45); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  border-radius: 12px;
}
.brand img {
  width: 48px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px -4px rgb(169 84 31 / .55);
  transition: transform var(--dur-2) var(--ease-spring);
}
.brand:hover img { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--navy-900);
  letter-spacing: .03em;
}
.brand-tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 3px;
}
@media (min-width: 900px) {
  .brand img { width: 56px; height: 54px; }
  .brand-name { font-size: 1.6rem; }
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn, .brand-text { white-space: nowrap; }
.header-cta { display: none; }
@media (min-width: 520px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--white);
  color: var(--navy-900);
  transition: background-color var(--dur-1);
}
.nav-toggle:hover { background: var(--navy-50); }
.nav-toggle .icon { width: 24px; height: 24px; }

/* Nav: mobile drawer first */
.site-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream-50);
  box-shadow: var(--shadow-3);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 420ms var(--ease-out), visibility 0s linear 420ms;
}
.nav-open .site-nav {
  transform: none;
  visibility: visible;
  transition: transform 420ms var(--ease-out), visibility 0s;
}
.nav-head { display: flex; align-items: center; justify-content: space-between; }
.nav-head .brand-name { font-size: 1.25rem; }
.nav-close {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--navy-50);
  color: var(--navy-900);
}
.nav-close .icon { width: 24px; height: 24px; }

.nav-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy-900);
  text-decoration: none;
  transition: color var(--dur-1), padding var(--dur-2) var(--ease-out);
}
.nav-list a::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--dur-1);
}
.nav-list a:hover { color: var(--saffron-700); padding-left: 10px; }
.nav-list a[aria-current="page"] { color: var(--saffron-700); }
.nav-list a[aria-current="page"]::after { background: var(--saffron-500); }

.nav-extra { display: grid; gap: 10px; margin-top: auto; }
.nav-extra .nav-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgb(13 13 41 / .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.nav-open .nav-scrim { opacity: 1; }
.nav-open { overflow: hidden; }

@media (min-width: 1280px) {
  .nav-toggle, .nav-head, .nav-extra, .nav-scrim { display: none !important; }
  .site-nav {
    position: static;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .nav-list { flex-direction: row; gap: 0; }
  .nav-list a {
    position: relative;
    min-height: 44px;
    padding: 8px 10px;
    white-space: nowrap;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
  }
  .nav-list a::after {
    position: absolute;
    left: 50%; bottom: 3px;
    width: 5px; height: 5px;
    transform: translateX(-50%) scale(0);
    background: var(--saffron-500);
    transition: transform var(--dur-2) var(--ease-spring);
  }
  .nav-list a:hover { padding-left: 10px; background: var(--navy-50); color: var(--navy-900); }
  .nav-list a[aria-current="page"] { color: var(--navy-900); }
  .nav-list a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
  .brand { margin-right: 0; }
  .site-nav { margin-inline: auto; }
}

/* Dropdown sub-menus: collapsible lists in the mobile drawer, hover / click panels on desktop. */
.header-apply { display: none; }
@media (min-width: 760px) { .header-apply { display: inline-flex; } }

.has-sub { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.nav-list .has-sub > a { flex: 1; border-bottom: 0; }
.sub-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--navy-900);
  transition: background-color var(--dur-1);
}
.sub-toggle:hover { background: var(--navy-50); }
.sub-toggle .icon { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.has-sub.is-open > .sub-toggle .icon { transform: rotate(180deg); }
.sub-menu { display: none; width: 100%; list-style: none; margin: 0; padding: 0 0 12px 12px; }
.has-sub.is-open > .sub-menu { display: block; }
.nav-list .sub-menu a {
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .975rem;
  font-weight: 600;
  color: var(--text-muted);
}
.nav-list .sub-menu a::after { display: none; }
.nav-list .sub-menu a:hover { padding-left: 10px; background: var(--navy-50); color: var(--navy-900); }
.nav-list .sub-menu a[aria-current="page"] { color: var(--saffron-700); }
.sub-num { font-size: .75rem; font-weight: 800; color: var(--saffron-600); font-variant-numeric: tabular-nums; }
.sub-label { padding: 8px 10px 4px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.sub-sep { height: 1px; margin: 6px 10px; background: var(--line); }
.nav-list .has-sub:has([aria-current="page"]) > a { color: var(--saffron-700); }

@media (min-width: 1280px) {
  .has-sub { position: relative; flex-wrap: nowrap; border: 0; }
  .nav-list .has-sub > a, .nav-list .has-sub > a:hover { padding-right: 2px; }
  .sub-toggle { width: 24px; height: 44px; margin-left: -2px; border-radius: 8px; color: var(--text-muted); }
  .sub-toggle .icon { width: 15px; height: 15px; }
  /* Invisible bridge so the panel stays open while the pointer travels down to it. */
  .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
  .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    z-index: 5;
    width: max-content;
    min-width: 220px;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .has-sub:hover > .sub-toggle .icon, .has-sub:focus-within > .sub-toggle .icon { transform: rotate(180deg); }
  .nav-list .sub-menu a { min-height: 40px; font-size: .9rem; color: var(--text); }
  .sub-menu--branches { min-width: 260px; }
  .nav-list .has-sub:has([aria-current="page"]) > a { color: var(--navy-900); }
  .nav-list .has-sub:has([aria-current="page"]) > a::after { transform: translateX(-50%) scale(1); }
}

/* ---------- Sections ---------- */
/* Main ivory sits between the two creams, so it reads apart from the soft cream bands (older browsers keep cream-100) */
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --ivory: color-mix(in srgb, var(--cream-50) 60%, var(--cream-100)); }
}
/* Every page's rhythm comes from these rules: no page sets its own section background or padding.
   --fade-top / --fade-bottom are the tones a main section melts into at each end. */
.section {
  --fade-top: var(--surface-alt);
  --fade-bottom: var(--surface-alt);
  position: relative;
  padding-block: var(--section-y);
  background: var(--ivory-glow), linear-gradient(180deg, var(--fade-top) 0, var(--ivory) var(--section-fade), var(--ivory) calc(100% - var(--section-fade)), var(--fade-bottom) 100%);
}
.section--alt { background: var(--surface-alt); }
.page-hero + .section { padding-top: var(--section-y-hero); }
/* Two main sections in a row read as one continuous surface */
.section:not(.section--alt) + .section:not(.section--alt) { --fade-top: var(--ivory); padding-top: 0; }
.section:not(.section--alt):has(+ .section:not(.section--alt)) { --fade-bottom: var(--ivory); }
/* Home: continues from the hero's ivory behind the numbers bar */
.section.day-section { --fade-top: var(--ivory); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section-head { max-width: 720px; margin-bottom: var(--head-gap); }
.section-head--center { margin-inline: auto; text-align: center; }
/* A matching rule on the right, so a centred label sits exactly on the heading's centre line */
.section-head--center .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold-500); }
.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}
.section-head--split > div { max-width: 640px; }
.section-head--split.section-head--wide > div { max-width: 860px; }   /* room for a long heading on one line */

/* Ray backdrop used on navy surfaces (echoes the crest). */
.rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.rays::before {
  content: "";
  position: absolute;
  left: var(--rays-x, 50%);
  top: var(--rays-y, 100%);
  width: max(1600px, 160%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgb(201 164 92 / var(--rays-a, .07)) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 72%);
  mask: radial-gradient(closest-side, #000 15%, transparent 72%);
  animation: spin 160s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 5vw, 72px) clamp(96px, 11vw, 150px);
  background:
    radial-gradient(55% 60% at 88% 18%, rgb(201 164 92 / .26), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, rgb(199 101 40 / .1), transparent 70%),
    var(--cream-50);
}
.hero .rays { --rays-x: 70%; --rays-y: 40%; --rays-a: .09; }
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.02fr 1fr; }
  .hero .rays { --rays-x: 75%; }
}

.hero-title { margin-bottom: .4em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .line > span { display: inline-block; }
.js .hero-title .line > span { animation: rise 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }

.js .hero-fade { animation: fade-up .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 360ms); }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero .lead { max-width: 560px; }
.hero .btn-row { margin-top: 28px; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy-800);
}
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points .icon {
  width: 22px; height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--saffron-700);
  stroke-width: 3;
}

.hero-art { position: relative; max-width: 620px; margin-inline: auto; width: 100%; }
.js .hero-art { animation: art-in 1.2s var(--ease-out) both .2s; }
@keyframes art-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.hero-scene { width: 100%; height: auto; overflow: visible; }

.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: rgb(255 255 255 / .94);
  box-shadow: var(--shadow-2);
  font-size: .8125rem;
  line-height: 1.25;
  color: var(--text-muted);
  animation: bob 6s var(--ease-in-out) infinite;
}
.float-card strong { display: block; font-size: .9375rem; color: var(--navy-900); }
.float-card .fc-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--saffron-100);
  color: var(--saffron-700);
}
.float-card .fc-icon .icon { width: 20px; height: 20px; }
.float-card--a { left: -2%; top: 14%; }
.float-card--b { right: -1%; bottom: 20%; animation-delay: -3s; }
.float-card--b .fc-icon { background: var(--navy-100); color: var(--navy-800); }
@media (max-width: 479px) {
  .float-card { padding: 7px 10px 7px 7px; font-size: .75rem; }
  .float-card strong { font-size: .8125rem; }
  .float-card .fc-icon { width: 30px; height: 30px; border-radius: 9px; }
  .float-card--a { top: 4%; }
  .float-card--b { bottom: 12%; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero scene parts */
.sc-rays { transform-origin: 0 0; animation: spin-plain 90s linear infinite; }
@keyframes spin-plain { to { transform: rotate(360deg); } }
.sc-cloud { animation: drift 14s var(--ease-in-out) infinite alternate; }
.sc-cloud--2 { animation-duration: 18s; animation-delay: -6s; }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(18px); } }
.sc-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: wave 2.6s var(--ease-in-out) infinite; }
@keyframes wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.92); } }
.sc-twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s var(--ease-in-out) infinite; animation-delay: var(--d, 0s); }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }
.sc-birds { animation: birds 16s var(--ease-in-out) infinite alternate; }
@keyframes birds { from { transform: translate(0, 0); } to { transform: translate(-36px, 10px); } }
.sc-bird { transform-box: fill-box; transform-origin: center; animation: flap .9s var(--ease-in-out) infinite alternate; }
.sc-bird:nth-child(2) { animation-delay: -.3s; }
.sc-bird:nth-child(3) { animation-delay: -.6s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.sc-glow { animation: glow 4s var(--ease-in-out) infinite alternate; }
@keyframes glow { from { opacity: .85; } to { opacity: 1; } }
.sc-float { transform-box: fill-box; transform-origin: center; animation: bob 5s var(--ease-in-out) infinite; animation-delay: var(--d, 0s); }
.sc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s var(--ease-in-out) infinite alternate; }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.06) rotate(2deg); } 100% { transform: scale(1.03, .96) rotate(-1deg); } }
.sc-wheel { transform-box: fill-box; transform-origin: center; animation: spin-plain 1.4s linear infinite; }
.sc-bounce { animation: bus-bob .7s var(--ease-in-out) infinite alternate; }
@keyframes bus-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.sc-ring { transform-box: fill-box; transform-origin: 50% 10%; animation: ring 3.4s var(--ease-in-out) infinite; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
.sc-bubble { transform-box: fill-box; transform-origin: center; animation: bubble 2.8s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px) scale(1); opacity: 0; } }

/* ---------- Stats band ---------- */
.stats-wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(56px, 7vw, 90px)); }
.stats {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
  padding: clamp(32px, 4.5vw, 52px) clamp(20px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: var(--on-dark);
  box-shadow: var(--shadow-3);
}
/* Style A: calm navy, no rays, a short gold rule at the top and gold hairline dividers. */
.stats .rays { display: none; }
.stats::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 120px; height: 3px;
  transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
  background: var(--gold-500);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
/* Motion (main.js adds .stats--anim, not for reduced motion): the band glides with the scroll (--glide),
   and the four figures slide up in turn each time it comes into view (.is-in). */
.stats--anim { transform: translate3d(0, var(--glide, 0px), 0); will-change: transform; }
.stats--anim .stat { opacity: 0; transform: translateY(28px); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); }
.stats--anim.is-in .stat { opacity: 1; transform: none; transition-delay: calc(var(--si, 0) * 120ms); }
.stat { position: relative; z-index: 1; text-align: center; }
@media (min-width: 860px) {
  .stat + .stat::before {
    content: "";
    position: absolute;
    left: -8px; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(transparent, rgb(201 164 92 / .5), transparent);
  }
}
.stat-num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(2.8rem, 3vw + 1.3rem, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-500);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* ---------- Journey (stages) ---------- */
.journey { position: relative; display: grid; gap: 20px; }
@media (min-width: 640px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .journey { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* Progress rail above the stage cards (desktop): a line that draws itself, with a node per stage. */
.rail { display: none; }
@media (min-width: 1100px) {
  .rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 22px;
    list-style: none;
    padding: 0;
  }
  .rail::before {
    content: "";
    position: absolute;
    left: 12.5%; right: 12.5%; top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-500), var(--gold-500) 50%, var(--navy-600));
    transform-origin: left center;
  }
  .rail li {
    position: relative;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: 1.5px solid var(--line-strong);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--navy-800);
  }
  .rail li::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--saffron-500);
    box-shadow: 0 0 0 4px var(--saffron-100);
  }
  .rail li:nth-child(2)::before { background: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-100); }
  .rail li:nth-child(3)::before { background: var(--saffron-600); }
  .rail li:nth-child(4)::before { background: var(--navy-600); box-shadow: 0 0 0 4px var(--navy-100); }
  .js .rail::before { transform: scaleX(0); transition: transform 1.8s var(--ease-in-out) .15s; }
  .js .rail.is-visible::before { transform: scaleX(1); }
  .js .rail li { opacity: 0; transform: scale(.8); transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring); transition-delay: calc(var(--i) * 380ms + 200ms); }
  .js .rail.is-visible li { opacity: 1; transform: none; }
}

.stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.stage-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.stage-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--tint, var(--gold-100));
  overflow: hidden;
}
.stage-art::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -45%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgb(255 255 255 / .55);
}
.stage-art svg { position: relative; width: 82%; transition: transform var(--dur-3) var(--ease-spring); }
.stage-card:hover .stage-art svg { transform: scale(1.06) rotate(-2deg); }
@media (min-width: 640px) and (max-width: 1099px) {
  .journey .stage-art { aspect-ratio: 16 / 9; }
  .journey .stage-art svg { width: 58%; }
}
.stage-num {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
}
.stage-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 0 4px; }
.stage-card h3 { padding: 0 4px; margin-bottom: 8px; }
.stage-card p { padding: 0 4px; color: var(--text-muted); font-size: .975rem; }
.stage-card .text-link { margin: auto 4px 0; align-self: flex-start; }
.stage-card p + .text-link { margin-top: 16px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--navy-50);
  color: var(--navy-700);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.pill--saffron { background: var(--saffron-100); color: var(--saffron-700); }
.pill--gold { background: var(--gold-100); color: #6B5320; }

/* ---------- Feature grid ---------- */
.features { display: grid; gap: 18px; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.feature {
  position: relative;
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--text-muted); font-size: .975rem; }
.feature-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--tint, var(--gold-100));
  color: var(--navy-800);
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2), color var(--dur-2);
}
.feature-icon .icon { width: 26px; height: 26px; }
.feature:hover .feature-icon { transform: rotate(-8deg) scale(1.06); background: var(--navy-800); color: var(--gold-500); }

/* ---------- Split layout ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Photo slots (placeholders until real photos are added) ---------- */
.photo-slot {
  --slot-a: var(--saffron-100);
  --slot-b: var(--cream-100);
  --slot-sun: var(--gold-300);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  border-radius: var(--radius);
  background: repeating-conic-gradient(from -90deg at 50% 112%, var(--slot-a) 0deg 7.5deg, var(--slot-b) 7.5deg 15deg);
  color: var(--navy-700);
}
.photo-slot::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 44%;
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--slot-sun), var(--saffron-300));
}
.photo-slot[data-tone="navy"] { --slot-a: var(--navy-700); --slot-b: var(--navy-800); --slot-sun: var(--gold-500); }
.photo-slot[data-tone="gold"] { --slot-a: var(--gold-100); --slot-b: var(--cream-50); --slot-sun: var(--saffron-300); }
.slot-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgb(251 248 241 / .9);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.slot-label .icon { width: 22px; height: 22px; color: var(--saffron-600); }
.photo-slot img, .photo-slot > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
/* A frame that takes the photo's own shape, so the whole photo shows uncropped (Our Campuses › School transport). */
.photo-slot--fit { aspect-ratio: auto; }
.photo-slot--fit img { position: relative; inset: auto; height: auto; }

/* Principal / portrait frame */
.portrait { position: relative; max-width: 440px; margin-inline: auto; width: 100%; }
.portrait::before {
  content: "";
  position: absolute;
  right: -18px; top: -18px;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-300), var(--gold-500) 60%, var(--saffron-300));
  opacity: .55;
}
.portrait .photo-slot { --ar: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.portrait-card {
  position: absolute;
  left: -10px; bottom: 24px;
  z-index: 3;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--navy-800);
  color: var(--on-dark);
  box-shadow: var(--shadow-2);
  line-height: 1.3;
}
.portrait-card strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.portrait-card span { font-size: .875rem; color: var(--gold-300); }
@media (min-width: 900px) { .portrait-card { left: -28px; } }

.quote {
  position: relative;
  margin: 28px 0 24px;
  padding-top: 34px;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, .6vw + 1rem, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -.3em; left: -.05em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 3.6em;
  line-height: 1;
  font-style: normal;
  color: var(--saffron-500);
  opacity: .9;
}
.signature { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.signature strong { display: block; color: var(--navy-900); }
.signature span { font-size: .9375rem; color: var(--text-muted); }

/* ---------- Notice board & events ---------- */
.board { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .board { grid-template-columns: 1.1fr .9fr; } }
.board-col h3.board-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 1.35rem;
}
.board-title .icon { width: 26px; height: 26px; color: var(--saffron-600); }

.feed { display: grid; gap: 14px; list-style: none; padding: 0; }
.feed-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.feed-item:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.feed-item.is-pinned { border-color: var(--saffron-300); background: linear-gradient(180deg, #FBF4EA, var(--white)); }
.feed-item h3, .feed-item h4 { font-size: 1.1rem; margin: 6px 0 6px; line-height: 1.3; }
.feed-item p { font-size: .9375rem; color: var(--text-muted); margin-bottom: 0; }
.feed-item .text-link { margin-top: 10px; font-size: .9375rem; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8125rem; color: var(--text-muted); }
.feed-meta span { display: inline-flex; align-items: center; gap: 5px; }
.feed-meta .icon { width: 15px; height: 15px; color: var(--saffron-600); }

.date-badge {
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 68px;
  border-radius: 16px;
  background: var(--navy-800);
  color: var(--cream-50);
  text-align: center;
  line-height: 1;
}
.date-badge .db-day { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--gold-500); }
.date-badge .db-mon { margin-top: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.date-badge--past { background: var(--cream-200); color: var(--text-muted); }
.date-badge--past .db-day { color: var(--navy-700); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--navy-50);
  color: var(--navy-700);
}
.tag--admission { background: var(--saffron-100); color: var(--saffron-700); }
.tag--exam { background: var(--navy-100); color: var(--navy-800); }
.tag--holiday { background: var(--gold-100); color: #6B5320; }
.tag--event { background: var(--red-100); color: var(--red-600); }
.tag--pinned { background: var(--saffron-500); color: var(--navy-950); }

.empty-state {
  padding: 32px 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
}
.empty-state .icon { width: 32px; height: 32px; margin: 0 auto 10px; color: var(--saffron-600); }
.empty-state p { margin-bottom: 14px; }

/* Toolbar: chips + search */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy-900);
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.chip:hover { border-color: var(--navy-800); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--cream-50); }
.search-field { position: relative; flex: 1 1 260px; max-width: 360px; }
.search-field .icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-field .input { padding-left: 44px; border-radius: var(--radius-pill); }
.result-count { font-size: .9375rem; color: var(--text-muted); margin-bottom: 16px; }

/* ---------- Gallery: 16:9 photo grid (home page and Events & Gallery) ----------
   One column on phones, two on tablets, three on desktop. The JS marks large tiles:
   .is-wide spans 2 × 2 cells on desktop (still 16:9), .is-tw spans the full row on tablets. */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.g-tile { min-width: 0; }
@media (min-width: 640px) and (max-width: 979px) { .g-tile.is-tw { grid-column: span 2; } }
@media (min-width: 980px) {
  .g-tile.is-wide { grid-column: span 2; grid-row: span 2; }
  .g-tile.is-wide .g-item { height: 100%; aspect-ratio: auto; }
}
.g-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: zoom-in;
}
/* absolute, so a photo's own shape never stretches a large tile's rows */
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.g-item:hover img { transform: scale(1.035); }
.g-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 44px 18px 14px;
  background: linear-gradient(180deg, transparent, rgb(13 13 41 / .72));
  color: var(--cream-50);
  line-height: 1.3;
}
.g-title { display: block; font-size: .95rem; font-weight: 600; }
.g-cap small { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
@media (min-width: 980px) {
  .is-wide .g-cap { padding: 64px 26px 22px; }
  .is-wide .g-title { font-size: 1.2rem; }
}
.g-more { margin-top: 36px; text-align: center; }
.g-more:has(> [hidden]) { display: none; }

.lightbox {
  width: min(94vw, 1080px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream-50);
  overflow: visible;
}
.lightbox::backdrop { background: rgb(13 13 41 / .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in 320ms var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-figure { margin: 0; }
.lb-media { border-radius: var(--radius); overflow: hidden; background: var(--navy-900); }
.lb-media .photo-slot { --ar: 3 / 2; border-radius: 0; }
.lb-media img { width: 100%; max-height: 80vh; object-fit: contain; }
.lb-cap { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px 0; font-weight: 600; }
.lb-cap span { color: var(--gold-300); font-weight: 500; }
.lb-btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--cream-50);
  color: var(--navy-900);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-1);
}
.lb-btn:hover { transform: scale(1.06); }
.lb-btn .icon { width: 24px; height: 24px; }
.lb-close { top: -16px; right: -10px; }
.lb-prev, .lb-next { top: calc(50% - 40px); }
.lb-prev { left: -14px; }
.lb-next { right: -14px; }
@media (min-width: 1200px) { .lb-prev { left: -72px; } .lb-next { right: -72px; } .lb-close { right: -72px; top: 0; } }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: 18px; }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.t-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.t-card blockquote { margin: 0; font-size: 1.025rem; line-height: 1.65; color: var(--text); }
.t-card blockquote::before { content: "\201C"; display: block; height: .55em; font-family: Georgia, "Times New Roman", serif; font-size: 3.2rem; line-height: 1; color: var(--saffron-500); }
.t-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar {
  display: grid; place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--tint, var(--gold-100));
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 700;
}
.t-person strong { display: block; color: var(--navy-900); line-height: 1.3; }
.t-person span { font-size: .875rem; color: var(--text-muted); }
.t-card { margin: 0; }   /* each card is a <figure>: without this the browser's own 40px side margin narrows it */
/* "Read more" opens the parent's full testimony in place of the short quote; "Show less" folds it back. */
.t-more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 600; color: var(--saffron-600); }
.t-more summary::-webkit-details-marker { display: none; }
.t-more summary:focus-visible { outline: 2px solid var(--saffron-500); outline-offset: 3px; border-radius: 4px; }
.t-more summary .icon { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.t-more[open] summary .icon { transform: rotate(180deg); }
.t-more .t-less, .t-more[open] .t-open { display: none; }
.t-more[open] .t-less { display: inline; }
.t-card:has(.t-more[open]) blockquote { display: none; }
.testimonials:has(.t-more[open]) { align-items: start; }   /* an opened card grows alone; the others keep their size */
.t-full { margin-top: 14px; font-size: 1.025rem; line-height: 1.65; color: var(--text); }
.t-full::before { content: "\201C"; display: block; height: .55em; font-family: Georgia, "Times New Roman", serif; font-size: 3.2rem; line-height: 1; color: var(--saffron-500); }
.t-full p { margin: 0 0 .8em; }
.t-full p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px) clamp(110px, 12vw, 150px);
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: var(--on-dark);
  text-align: center;
}
.cta-band .rays { --rays-y: 100%; --rays-a: .1; }
.cta-band h2 { color: var(--cream-50); max-width: 760px; margin-inline: auto; }
.cta-band p { max-width: 620px; margin-inline: auto; color: var(--on-dark-muted); font-size: 1.125rem; }
.cta-band .btn-row { justify-content: center; margin-top: 28px; position: relative; z-index: 1; }
.cta-band > *:not(.rays):not(.cta-sun) { position: relative; z-index: 1; }
.cta-sun {
  position: absolute;
  left: 50%; bottom: 0;
  z-index: 0;
  width: clamp(180px, 26vw, 300px);
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(circle at 50% 100%, var(--gold-300), var(--gold-500) 45%, var(--saffron-500));
  box-shadow: 0 0 80px 10px rgb(201 164 92 / .35);
  transform: translate(-50%, 0);
}
.js .cta-sun { transform: translate(-50%, 70%); transition: transform 1.6s var(--ease-out) .2s; }
.js .cta-band.is-visible .cta-sun { transform: translate(-50%, 0); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px);
  background: var(--navy-800);
  color: var(--on-dark);
}
.page-hero .rays { --rays-x: 65%; --rays-y: 115%; --rays-a: .08; }
.page-hero::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%;
  bottom: -2px;
  height: clamp(28px, 4vw, 56px);
  background: var(--surface-alt);   /* the section below always starts on this tone */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}
.page-hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.35fr .65fr; } }
.page-hero h1 { color: var(--cream-50); font-size: clamp(2.2rem, 3vw + 1.1rem, 3.75rem); margin-bottom: .35em; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 620px; }
.page-hero-art { max-width: 300px; width: 70%; margin-inline: auto; }
@media (min-width: 900px) { .page-hero-art { width: 100%; } }
.page-hero-art svg { width: 100%; overflow: visible; }
.js .page-hero-art { animation: art-in 1.1s var(--ease-out) both .15s; }
.js .page-hero .hero-fade { animation-delay: calc(var(--i, 0) * 100ms + 80ms); }

.breadcrumb { margin-bottom: 18px; font-size: .875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-muted); }
.breadcrumb li + li::before { content: "/"; color: rgb(251 248 241 / .4); }
.breadcrumb a { color: var(--gold-300); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Generic cards & content blocks ---------- */
.card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.card--navy { background: var(--navy-800); border-color: var(--navy-800); color: var(--on-dark); position: relative; overflow: hidden; }
.card--navy h2, .card--navy h3 { color: var(--cream-50); }
.card--navy p { color: var(--on-dark-muted); }
.card--saffron { background: linear-gradient(160deg, var(--saffron-100), var(--gold-100)); border-color: transparent; }
.card-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--gold-500);
  color: var(--navy-900);
}
.card-icon .icon { width: 26px; height: 26px; }

.grid-2 { display: grid; gap: 20px; }
.grid-3 { display: grid; gap: 20px; }
.grid-4 { display: grid; gap: 18px; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Two headed columns that must line up: both share the same rows (eyebrow, heading, box, note),
   so the headings and boxes stay level even if one heading wraps. */
@media (min-width: 720px) {
  .grid-paired { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); row-gap: 0; }
  .grid-paired > * { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .grid-paired h2 { font-size: clamp(1.7rem, 1.1vw + 1.1rem, 2.15rem); }
  .grid-paired table { height: 100%; }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.prose { max-width: 68ch; }
.prose p { color: var(--text-muted); }
.prose p.lead { color: var(--text-muted); }

.check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon {
  width: 24px; height: 24px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--saffron-700);
  stroke-width: 3;
}
.check-list--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .check-list--2 { grid-template-columns: 1fr 1fr; gap: 14px 28px; } }

.info-list { display: grid; gap: 0; margin: 0; }
.info-list > div { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-list dt { font-weight: 700; color: var(--navy-900); }
.info-list dd { margin: 0; color: var(--text-muted); }
/* Days and times: two aligned columns where they fit, otherwise each on its own line. */
.info-hours { container-type: inline-size; }
.info-hours span { display: block; white-space: nowrap; }
.info-hours span:nth-child(3) { margin-top: 6px; }
@container (min-width: 280px) {
  .info-hours div { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 16px; }
  .info-hours span:nth-child(3) { margin-top: 0; }
}

/* Timeline */
.timeline { position: relative; list-style: none; padding: 0 0 0 36px; display: grid; gap: 28px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--saffron-500), var(--gold-500), var(--navy-600));
  border-radius: 2px;
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -32px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cream-50);
  border: 4px solid var(--saffron-500);
}
.timeline .tl-year { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--saffron-700); line-height: 1.2; }
.timeline h3 { margin: 4px 0 4px; font-size: 1.15rem; }
.timeline p { color: var(--text-muted); font-size: .975rem; }

/* People cards */
.person { text-align: center; }
.person .photo-slot { --ar: 1; border-radius: 50%; width: 160px; margin: 0 auto 18px; box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line); }
.person h3 { margin-bottom: 4px; }
.person .role { color: var(--accent-text); font-weight: 700; font-size: .9375rem; margin-bottom: 10px; }
.person p { color: var(--text-muted); font-size: .9375rem; }

/* Stage detail rows (academics) */
.stage-row {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.stage-row:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .stage-row { grid-template-columns: .8fr 1.2fr; }
  .stage-row:nth-of-type(even) { grid-template-columns: 1.2fr .8fr; }
  .stage-row:nth-of-type(even) > .stage-visual { order: 2; }
}
.stage-visual { position: relative; }
.stage-visual .stage-art { margin: 0; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }
.stage-visual .stage-art svg { width: 70%; }
.stage-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table-wrap:focus-visible { outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: .975rem; min-width: 520px; }
caption { text-align: left; padding: 16px 20px 0; font-weight: 700; color: var(--navy-900); }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy-800); color: var(--cream-50); font-weight: 700; font-size: .875rem; letter-spacing: .03em; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--cream-50); }
tbody th { font-weight: 700; color: var(--navy-900); }
td.num { font-variant-numeric: tabular-nums; }

/* Steps (admissions) */
.steps { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}
.step {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
@media (min-width: 1000px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 46px; right: -19px;
    width: 20px; height: 2px;
    background: var(--saffron-300);
  }
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { font-size: .9375rem; color: var(--text-muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy-900);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon {
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--navy-800);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.faq details[open] summary .icon { transform: rotate(45deg); background: var(--saffron-500); }
.faq summary:hover { color: var(--saffron-700); }
.faq .faq-body { padding: 0 48px 22px 0; color: var(--text-muted); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 380ms var(--ease-out), content-visibility 380ms allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- Forms ---------- */
.form-card {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 7px; font-weight: 700; font-size: .9375rem; color: var(--navy-900); }
.field .req { color: var(--red-600); }
.field .hint { display: block; margin-top: 6px; font-size: .8125rem; color: var(--text-muted); }
.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder { color: #8A88A3; }
.input:hover { border-color: #BFB08D; }
.input:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 4px rgb(38 38 90 / .16); }
textarea.input { min-height: 120px; resize: vertical; }
select.input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322215B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.field.has-error .input { border-color: var(--error); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px rgb(179 38 30 / .15); }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--error); }
.field-error:empty { display: none; }
.field-error .icon { width: 17px; height: 17px; margin-top: 1px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-note { font-size: .875rem; color: var(--text-muted); }
.form-status { border-radius: 14px; font-size: .9375rem; }
.form-status:not(:empty) { padding: 14px 16px; }
.form-status.is-success { background: #E6F4EC; color: var(--success); border: 1px solid #B9DFC8; }
.form-status.is-error { background: var(--red-100); color: var(--error); border: 1px solid #F1B9B3; }
.form-status a { font-weight: 700; color: inherit; }

/* Contact cards */
.contact-cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.contact-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.contact-card--wide { grid-column: 1 / -1; }
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--line-strong); }
.contact-card .ci {
  display: grid; place-items: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--tint, var(--saffron-100));
  color: var(--navy-800);
}
.contact-card .ci .icon { width: 22px; height: 22px; }
.contact-card strong { display: block; margin-bottom: 2px; color: var(--navy-900); }
.contact-card span { font-size: .9375rem; color: var(--text-muted); overflow-wrap: anywhere; }

.map-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cream-100);
  border: 1px solid var(--line);
}
.map-card svg { width: 100%; height: auto; }
.map-card .map-cta { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 104px);
  background: var(--navy-900);
  color: var(--on-dark-muted);
  font-size: .975rem;
}
.site-footer .rays { --rays-y: 0%; --rays-a: .05; }
.footer-sun {
  position: absolute;
  left: 50%; top: 0;
  width: 220px;
  aspect-ratio: 2 / 1;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, var(--gold-300), var(--gold-500) 45%, var(--saffron-500));
  opacity: .9;
  box-shadow: 0 0 80px 6px rgb(201 164 92 / .25);
}
.footer-grid { position: relative; z-index: 1; display: grid; gap: 40px; padding-top: 40px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr .8fr .9fr 1.3fr; gap: 48px; } }
.site-footer .brand-name { color: var(--cream-50); }
.site-footer .brand-tag { color: var(--gold-300); }
.footer-about { margin: 20px 0 12px; max-width: 380px; }
.footer-motto { margin: 0 0 22px; font-family: var(--font-display); font-weight: 800; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); }
.footer-title {
  margin-bottom: 18px;
  line-height: 1.2;          /* the same as when these titles were h2 headings (12 Nov 2026: now plain text, see footer.html) */
  text-wrap: balance;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.footer-links { list-style: none; padding: 0; display: grid; gap: 4px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
  transition: color var(--dur-1), transform var(--dur-2) var(--ease-out);
}
.footer-links a:hover { color: var(--gold-300); transform: translateX(4px); }
.footer-contact { display: grid; gap: 14px; }
.footer-contact a, .footer-contact p { display: flex; gap: 12px; align-items: flex-start; margin: 0; text-decoration: none; }
.footer-contact a:hover { color: var(--gold-300); }
.footer-contact .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--gold-500); }
.social { display: flex; gap: 10px; list-style: none; padding: 0; }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(251 248 241 / .08);
  color: var(--cream-50);
  transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.social a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); }
.social .icon { width: 20px; height: 20px; }
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-block: 24px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(251 248 241 / .12);
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--gold-300); }
.to-top .icon { width: 18px; height: 18px; }

/* ---------- WhatsApp floating button ---------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: #1B7F4B;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px -8px rgb(27 127 75 / .7);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.fab:hover { transform: translateY(-3px) scale(1.03); }
.fab .icon { width: 28px; height: 28px; }
.fab-label { display: none; }
@media (min-width: 900px) {
  .fab { width: auto; padding: 0 22px 0 18px; right: 24px; bottom: 24px; }
  .fab-label { display: inline; }
}
.js .fab { animation: fab-in .6s var(--ease-spring) both 1.2s; }
@keyframes fab-in { from { opacity: 0; transform: translateY(20px) scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- Quick enquiry panel (home) ---------- */
.enquiry-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: var(--on-dark);
}
@media (min-width: 960px) { .enquiry-panel { grid-template-columns: 1fr 1.05fr; } }
.enquiry-panel .rays { --rays-x: 15%; --rays-y: 110%; --rays-a: .1; }
.enquiry-panel > *:not(.rays) { position: relative; z-index: 1; }
.enquiry-panel h2 { color: var(--cream-50); }
.enquiry-panel .lead { color: var(--on-dark-muted); }
.enquiry-panel .form-card { box-shadow: var(--shadow-3); border: 0; color: var(--text); }
.check-list--light li { color: var(--on-dark-muted); }
.check-list--light strong { color: var(--cream-50); }
.check-list--light .icon { background: rgb(251 248 241 / .1); color: var(--gold-500); }

/* Consent / tick-box field */
.field .check-field { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.check-field input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy-800); cursor: pointer; }
.field.has-error .check-field { color: var(--error); }

/* ---------- Branch cards ---------- */
.branch-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .branch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .branch-grid--4 { grid-template-columns: repeat(4, 1fr); } .branch-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.branch-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.branch-card::before {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(201 164 92 / .22) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
  mask: radial-gradient(closest-side, #000 30%, transparent);
  transition: transform 1.2s var(--ease-out);
}
a.branch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
a.branch-card:hover::before { transform: rotate(40deg); }
.branch-num { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--saffron-500); }
.branch-card h3 { margin: 8px 0 0; }
.branch-line { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--text-muted); }
.branch-line .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--saffron-600); }
.branch-card .pill { align-self: flex-start; }
.branch-card .text-link { margin-top: auto; padding-top: 0; align-self: flex-start; }
.branch-card .branch-line + .text-link, .branch-card .branch-line:last-of-type { margin-bottom: 6px; }

.pill .icon { width: 14px; height: 14px; }
.contact-lines { display: grid; gap: 12px; margin: 22px 0 28px; }
.contact-lines .branch-line { font-size: .975rem; color: var(--text); }
a.branch-line { text-decoration: none; transition: color var(--dur-1); }
a.branch-line:hover { color: var(--saffron-700); }
.branch-photo { margin: 0; }
.branch-photo .photo-slot { border-radius: var(--radius-lg); }
.branch-photo figcaption { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--navy-900); }
.page-hero .pill { background: rgb(251 248 241 / .1); color: var(--cream-50); }
.page-hero .pill .icon { width: 15px; height: 15px; color: var(--gold-500); }

/* ---------- Careers ---------- */
.jobs { display: grid; gap: 14px; list-style: none; padding: 0; }
.job {
  display: grid;
  gap: 16px 28px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
@media (min-width: 800px) { .job { grid-template-columns: 1fr auto; } }
.job:hover { box-shadow: var(--shadow-1); border-color: var(--line-strong); }
.job h3 { margin-bottom: 10px; font-size: 1.1rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.job-qual { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .9rem; color: var(--text-muted); }
.job-qual .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--saffron-600); }
/* Optional vacancy details (admin: Careers management). Shown only when a vacancy has them. */
.job-summary { margin: 10px 0 0; font-size: .95rem; color: var(--text-muted); max-width: 46em; }
.job-more { margin-top: 12px; }
.job-more summary { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--accent-text); cursor: pointer; }
.job-more-body { margin-top: 10px; max-width: 46em; font-size: .92rem; color: var(--text-muted); }
.job-more-body p { margin: 0 0 10px; }
.job-more-body h4 { margin: 14px 0 6px; font-size: .95rem; color: var(--navy-800); }
.job-more-body ul { margin: 0; padding-left: 20px; }
.job-more-body li { margin: 3px 0; }
.job-loc { display: flex; gap: 8px; align-items: flex-start; }
.job-loc .icon, .job-more-body .text-link .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--saffron-600); }

/* ---------- Hero extras: admissions badge + scroll cue ---------- */
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 1.1rem; }
.hero-top .eyebrow { margin: 0; }
.badge-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  color: var(--gold-300);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-1);
}
.badge-open:hover { background: var(--navy-700); }
.scroll-cue {
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--cream-50);
  box-shadow: var(--shadow-1);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
.scroll-cue .icon { width: 22px; height: 22px; transform: rotate(180deg); }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Legacy (home) ---------- */
.legacy { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .legacy { grid-template-columns: .85fr 1.15fr; } }
.legacy-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(32px, 5vw, 56px) 24px;
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: var(--on-dark);
  text-align: center;
}
.legacy-badge .rays { --rays-y: 55%; --rays-a: .12; }
.legacy-badge > *:not(.rays) { position: relative; z-index: 1; }
.legacy-badge img { width: 112px; height: auto; border-radius: 18px; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .5); }
.legacy-est { font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.legacy-year { font-family: var(--font-display); font-size: clamp(4rem, 7vw + 1rem, 6.5rem); font-weight: 800; line-height: .9; letter-spacing: -0.05em; color: var(--cream-50); }
.legacy-name { color: var(--on-dark-muted); font-size: .95rem; margin: 0; }
.motto-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  color: var(--navy-950);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.motto-ribbon .icon { width: 18px; height: 18px; }
.legacy-facts { display: grid; gap: 14px; margin: 26px 0 30px; padding: 0; list-style: none; }
@media (min-width: 640px) { .legacy-facts { grid-template-columns: 1fr 1fr; } }
.legacy-facts li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.legacy-facts li strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy-900); }
.legacy-facts li span span { font-size: .9rem; color: var(--text-muted); font-weight: 400; }
.legacy-facts .fi {
  display: grid; place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--saffron-600);
}
.legacy-facts .fi .icon { width: 20px; height: 20px; }

/* ---------- Motto band (about) ---------- */
.motto-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--navy-800);
  color: var(--on-dark);
  text-align: center;
}
.motto-band .rays { --rays-y: 110%; --rays-a: .1; }
.motto-band .container { position: relative; z-index: 1; }
.motto-band img { width: 84px; margin: 0 auto 22px; border-radius: 16px; }
.motto {
  margin: 0 auto 18px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw + 1rem, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--cream-50);
}
.motto span { color: var(--gold-500); }
.motto-band p:not(.motto):not(.eyebrow) { max-width: 640px; margin-inline: auto; color: var(--on-dark-muted); font-size: 1.1rem; }

/* Philosophy pillars (about) */
.pillar { position: relative; }
.pillar-num { position: absolute; top: 22px; right: 26px; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--cream-200); }
.values-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; padding: 0; list-style: none; }
.values-row li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line); font-weight: 600; color: var(--navy-900); }
.values-row .icon { width: 18px; height: 18px; color: var(--saffron-600); }

/* ---------- Student achievements ---------- */
.ach-feature { display: grid; gap: 20px; }
@media (min-width: 1024px) { .ach-feature { grid-template-columns: 1.05fr 1fr; } }
.ach-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: var(--on-dark);
}
@media (min-width: 640px) { .ach-spotlight { grid-template-columns: .9fr 1.1fr; } }
.ach-spotlight .rays { --rays-x: 75%; --rays-y: 100%; --rays-a: .1; }
.ach-spotlight > *:not(.rays) { position: relative; z-index: 1; }
.ach-spotlight .photo-slot { --ar: 4 / 3; border-radius: 0; height: 100%; }
@media (min-width: 640px) { .ach-spotlight .photo-slot { --ar: auto; min-height: 340px; } }
.ach-spotlight .ach-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); }
.ach-spotlight h3 { margin: 16px 0 4px; font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); color: var(--cream-50); }
.ach-spotlight .ach-title { margin-bottom: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--gold-300); }
.ach-spotlight p { color: var(--on-dark-muted); }
.pill--spot { align-self: flex-start; background: rgb(201 164 92 / .16); color: var(--gold-300); }
.ach-stats { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 18px; }
.ach-stat-num { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 2vw + 1rem, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--gold-500); font-variant-numeric: tabular-nums; }
.ach-stat-label { font-size: .85rem; color: var(--on-dark-muted); }
.ach-mini { display: grid; gap: 14px; }
.ach-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ach-card .photo-slot { --ar: 16 / 10; border-radius: 0; }
.ach-card .ach-body { padding: 18px 22px 22px; }
.ach-card h3 { margin: 10px 0 2px; font-size: 1.1rem; }
.ach-card .ach-title { margin-bottom: 6px; font-weight: 600; color: var(--accent-text); }
.ach-card p { font-size: .925rem; color: var(--text-muted); }
.ach-card .ach-stat-num { color: var(--saffron-600); font-size: 1.8rem; }
.ach-card .ach-stat-label { color: var(--text-muted); }
@media (min-width: 640px) {
  .ach-mini .ach-card { flex-direction: row; }
  .ach-mini .ach-card .photo-slot { --ar: auto; flex: none; width: 34%; min-height: 150px; }
  .ach-mini .slot-label { padding: 8px 10px; font-size: .75rem; }
}
.ach-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .ach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ach-grid { grid-template-columns: repeat(3, 1fr); } }
.tag--academics { background: var(--saffron-100); color: var(--saffron-700); }
.tag--sports { background: var(--navy-100); color: var(--navy-800); }
.tag--competitions { background: var(--gold-100); color: #6B5320; }
.tag--stem { background: var(--red-100); color: var(--red-600); }
.tag--arts { background: var(--navy-50); color: var(--navy-700); }

/* ---------- Google map embed (campus pages) ---------- */
.map-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream-100);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed .map-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--text-muted); }

/* Long email addresses (e.g. careers@kenedyvidyabhavan.com) wrap instead of widening their column. */
.split > *, .grid-2 > *, .contact-cards > * { min-width: 0; }
.footer-contact span, .contact-card span, .info-list dd { overflow-wrap: anywhere; }

/* ---------- Premium type: every display number in Cormorant Garamond (lining figures) ---------- */
.legacy-year, .date-badge .db-day, .stage-num, .branch-num, .step::before, .timeline .tl-year,
.ach-stat-num, .pillar-num, .sub-num {
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
.legacy-year { font-size: clamp(4.6rem, 7vw + 1.5rem, 7.5rem); font-weight: 600; letter-spacing: -0.01em; }
.date-badge .db-day { font-size: 2rem; }
.stage-num { font-size: 1.1rem; }
.branch-num { font-size: 3rem; font-weight: 600; letter-spacing: 0; }
.step::before { font-size: 1.3rem; }
.timeline .tl-year { font-size: 1.7rem; }
.ach-stat-num { font-size: clamp(2.6rem, 2vw + 1.4rem, 3.4rem); }
.ach-card .ach-stat-num { font-size: 2.2rem; }
.pillar-num { font-size: 3.2rem; }
.sub-num { font-size: .95rem; }
/* Heading-face extras: Marcellus has one weight, so emphasis comes from size, spacing and colour. */
.motto { letter-spacing: .01em; }
.motto-ribbon, .footer-motto, .legacy-est { font-family: var(--font-display); font-weight: 400; letter-spacing: .18em; }
.ach-spotlight .ach-title, .legacy-facts li strong, .portrait-card strong { letter-spacing: .01em; }
.quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, .7vw + 1rem, 1.5rem); line-height: 1.5; }
.hero-est {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.hero-est::before { content: ""; width: 30px; height: 1.5px; background: var(--gold-500); }
.topbar-note { color: inherit; text-decoration: none; transition: color var(--dur-1); }
.topbar-note:hover { color: var(--gold-300); }

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Cards that also transition transform on hover must not inherit the reveal delay afterwards. */
.js .reveal.is-visible.is-done { transition-delay: 0s; }

/* ==========================================================================
   Design system v3: Kenedy Vidya Bhavan
   Cormorant Garamond (editorial headings, statistics) + Manrope (UI and text).
   Navy and champagne gold lead; copper is reserved for admission actions and occasional emphasis.
   ========================================================================== */

/* ---- Base type ---- */
body { color: var(--text-muted); font-synthesis: none; letter-spacing: .005em; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; color: var(--heading); }
h1 { font-size: clamp(2.6rem, 3.4vw + 1.3rem, 4.5rem); line-height: 1.04; }
h2 { font-size: clamp(2.05rem, 2.1vw + 1.2rem, 3.25rem); line-height: 1.08; }
h3, h4 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; color: var(--heading); }
h3 { font-size: clamp(1.08rem, .3vw + 1rem, 1.2rem); line-height: 1.35; }
h4 { font-size: 1.04rem; }
h1 em, h2 em, .hl-saffron { font-style: italic; font-weight: 600; color: var(--saffron-600); }
.lead { color: var(--text-muted); font-size: clamp(1.06rem, .35vw + 1rem, 1.2rem); line-height: 1.7; }
/* Large editorial headings that are h3 in the outline */
.stage-row h3, .ach-spotlight h3, .person h3, .t-card h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.stage-row h3 { font-size: clamp(1.8rem, 1.4vw + 1.2rem, 2.4rem) !important; }
.ach-spotlight h3 { font-size: clamp(2rem, 2vw + 1.2rem, 2.8rem); }
.person h3 { font-size: 1.5rem; }

/* Taglines: small, tracked Manrope with a champagne rule */
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .24em; color: var(--accent-text); }
.eyebrow::before { width: 30px; height: 1px; background: var(--gold-500); }
.eyebrow--light { color: var(--gold-500); }
.hero-est { font-family: var(--font-body); font-weight: 700; font-size: .74rem; letter-spacing: .2em; color: var(--navy-800); }
.legacy-est, .motto-ribbon, .footer-motto { font-family: var(--font-body); font-weight: 700; letter-spacing: .2em; }
.motto { font-weight: 600; letter-spacing: -0.01em; }
.motto span { font-style: italic; }
.quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 1vw + 1.1rem, 1.85rem); line-height: 1.4; color: var(--navy-800); }
.legacy-name { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }

/* ---- Brand lock-up: Kenedy Vidya Bhavan ---- */
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: 0; line-height: 1.05; color: var(--navy-800); }
.brand-tag { font-family: var(--font-body); font-weight: 700; font-size: .62rem; letter-spacing: .22em; color: var(--accent-text); margin-top: 4px; }
@media (min-width: 900px) { .brand-name { font-size: 1.62rem; } .brand-tag { font-size: .66rem; } }
.site-footer .brand-name { color: var(--cream-50); }
.site-footer .brand-tag { color: var(--gold-500); }
.nav-head .brand-name { font-size: 1.3rem; }

/* ---- Buttons: rounded rectangles ---- */
.btn {
  --btn-shadow: rgb(25 25 67 / .45);
  min-height: 48px;
  padding: .8em 1.5em;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .925rem;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgb(25 25 67 / .08), 0 8px 18px -12px var(--btn-shadow);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(25 25 67 / .08), 0 14px 26px -14px var(--btn-shadow); }
.btn--sm { min-height: 42px; padding: .6em 1.1em; font-size: .875rem; }
.btn--accent { --btn-bg: var(--saffron-500); --btn-fg: #FFFFFF; --btn-shadow: rgb(199 101 40 / .55); }
.btn--accent:hover { --btn-bg: var(--saffron-600); }
.btn:not(.btn--accent):not(.btn--ghost):not(.btn--ghost-light):not(.btn--light):not(.btn--wa):hover { --btn-bg: var(--navy-700); }
.btn--ghost { border: 1px solid rgb(25 25 67 / .22); }
.btn--ghost:hover { --btn-bg: var(--white); border-color: var(--navy-800); }
.btn--ghost-light { border: 1px solid rgb(251 248 241 / .4); }
.btn--ghost-light:hover { --btn-bg: rgb(251 248 241 / .08); border-color: var(--gold-500); }
.btn--wa { --btn-shadow: rgb(27 127 75 / .45); }
.chip { border-radius: var(--radius-btn); min-height: 42px; padding: 8px 16px; border-width: 1px; font-weight: 600; font-size: .875rem; }
.chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); }
.nav-toggle, .nav-close, .sub-toggle { border-radius: var(--radius-btn); }
.nav-toggle { border-width: 1px; }
.scroll-cue { border-radius: var(--radius-btn); width: 48px; height: 48px; background: var(--white); color: var(--navy-800); border: 1px solid rgb(25 25 67 / .18); box-shadow: none; }
.scroll-cue:hover { border-color: var(--navy-800); }
.fab { border-radius: 14px; }
.lb-btn { border-radius: var(--radius-btn); }
.search-field .input { border-radius: var(--radius-btn); }
.input { border-radius: var(--radius-btn); border-width: 1px; min-height: 50px; }
.input:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgb(201 164 92 / .3); }
.text-link { border-bottom-width: 1px; border-color: var(--gold-500); font-weight: 700; color: var(--navy-800); }
.text-link:hover { color: var(--saffron-600); border-color: var(--saffron-500); }

/* ---- Navigation ---- */
.topbar { background: var(--navy-900); font-size: .8rem; letter-spacing: .02em; }
.topbar strong { color: var(--gold-500); }
.site-header::before { background: rgb(251 248 241 / .92); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -24px rgb(25 25 67 / .5); }
.nav-list a { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; }
@media (min-width: 1280px) {
  .nav-list a { font-size: .875rem; font-weight: 600; letter-spacing: .015em; color: var(--navy-800); padding: 8px 12px; border-radius: var(--radius-sm); }
  .nav-list a:hover { background: none; color: var(--saffron-600); padding-left: 12px; }
  .nav-list a::after { left: 12px; right: 12px; width: auto; height: 1.5px; bottom: 4px; border-radius: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
  .nav-list a:hover::after, .nav-list a[aria-current="page"]::after, .nav-list .has-sub:has([aria-current="page"]) > a::after { transform: scaleX(1); }
  .nav-list .has-sub > a::after { right: 4px; }
  .sub-menu { border-radius: var(--radius); box-shadow: var(--shadow-2); }
  .nav-list .sub-menu a { border-radius: var(--radius-sm); }
  .nav-list .sub-menu a::after { display: none; }
  .nav-list .sub-menu a:hover { background: var(--cream-100); color: var(--navy-800); }
}

/* ---------- Navigation drawer (below 1280 px) ----------
   The backdrop and the drawer sit side by side inside the header, so the drawer is always the top layer
   and only the page behind it is dimmed and blurred. */
@media (max-width: 1279.98px) {
  html.nav-open { overflow: hidden; }
  .nav-scrim {
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    touch-action: none;
    transition: opacity 250ms var(--ease-out), visibility 0s linear 250ms;
  }
  .nav-open .nav-scrim { visibility: visible; opacity: 1; transition: opacity 250ms var(--ease-out), visibility 0s; }
  .site-nav {
    z-index: 2;
    width: min(88vw, 420px);
    height: 100vh;
    height: 100dvh;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--cream-50);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -28px rgb(13 13 41 / .45);
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 300ms;
  }
  .nav-open .site-nav { transition: transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .nav-open .fab { opacity: 0; visibility: hidden; pointer-events: none; }

  /* Top: crest and name, with the close button */
  .nav-head {
    flex: none;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px 20px;
    border-bottom: 1px solid var(--line);
  }
  .nav-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; border-radius: 10px; }
  .nav-brand img { flex: none; width: 44px; height: 42px; border-radius: 11px; box-shadow: 0 4px 12px -4px rgb(169 84 31 / .55); }
  .nav-head .nav-brand .brand-name { font-size: 1.12rem; white-space: nowrap; }
  .nav-brand .brand-tag { font-size: .58rem; }
  .nav-close { flex: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--white); }
  .nav-close:hover { background: var(--navy-50); }
  .nav-close .icon { width: 22px; height: 22px; }

  /* Middle: the links, which scroll on their own when needed */
  .nav-list { flex: 1; min-height: 0; margin: 0; padding: 6px max(16px, env(safe-area-inset-right)) 12px 20px; overflow-y: auto; overscroll-behavior: contain; }
  .nav-list > li > a { min-height: 50px; padding: 6px 48px 6px 2px; }
  .nav-list .has-sub > a { padding-right: 4px; }
  .nav-list a:hover { padding-left: 6px; }
  .sub-toggle { width: 44px; height: 44px; }
  .sub-menu { margin: 0 0 10px 6px; padding: 4px 0 4px 12px; border-left: 1px solid var(--gold-300); }
  .nav-list .sub-menu a { min-height: 44px; padding: 8px 10px; font-size: .95rem; }
  .nav-list .sub-menu a:hover { padding-left: 14px; }

  /* Bottom: the main actions, always in reach */
  .nav-extra {
    flex: none;
    gap: 10px;
    margin: 0;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 20px;
    border-top: 1px solid var(--line);
    background: var(--cream-50);
  }
  .nav-extra .btn { min-height: 46px; }
  .nav-extra .btn--sm { min-height: 44px; }

  /* Short screens (a phone on its side): the whole drawer scrolls instead */
  @media (max-height: 560px) {
    .site-nav { overflow-y: auto; overscroll-behavior: contain; }
    .nav-list { flex: none; overflow: visible; }
  }
  /* Narrow phones: a slightly smaller crest and name, so the name always clears the close button */
  @media (max-width: 419.98px) {
    .nav-head { gap: 8px; padding-left: 16px; padding-right: 12px; }
    .nav-brand { gap: 8px; }
    .nav-brand img { width: 38px; height: 36px; border-radius: 10px; }
    .nav-head .nav-brand .brand-name { font-size: .92rem; }
    .nav-brand .brand-tag { font-size: .54rem; }
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .site-nav { width: clamp(420px, 36vw, 460px); }
  .nav-head, .nav-list, .nav-extra { padding-left: 28px; padding-right: 28px; }
}

/* ---- Cards, borders, icons ---- */
.stage-card, .feature, .card, .feed-item, .t-card, .branch-card, .ach-card, .job, .contact-card, .step, .form-card, .table-wrap {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(25 25 67 / .03);
}
.stage-card:hover, .feature:hover, a.branch-card:hover, .ach-card:hover, a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.feed-item:hover, .job:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--line-strong); }
.form-card { box-shadow: var(--shadow-2); }
.card--navy { border-color: var(--navy-800); }
/* One icon style everywhere: navy tile, champagne-gold glyph */
.feature-icon, .card-icon, .contact-card .ci, .legacy-facts .fi {
  width: 50px; height: 50px;
  border-radius: 12px;
  border: 0;
  background: var(--navy-800);
  color: var(--gold-500);
}
.feature-icon .icon, .card-icon .icon { width: 24px; height: 24px; stroke-width: 1.75; }
.contact-card .ci .icon, .legacy-facts .fi .icon { width: 21px; height: 21px; stroke-width: 1.75; }
.feature:hover .feature-icon { transform: translateY(-2px); background: var(--navy-800); color: var(--gold-300); }
.check-list .icon, .hero-points .icon { background: var(--gold-100); color: var(--saffron-700); }
.icon { stroke-width: 1.85; }
.stage-num { background: var(--navy-800); color: var(--gold-500); }
.branch-num { color: var(--gold-500); }
.date-badge { border-radius: 12px; background: var(--navy-800); }
.date-badge .db-day { color: var(--gold-500); }
.pill--saffron { background: var(--cream-100); color: var(--saffron-700); border: 1px solid var(--line); }

/* ---- Sections & rhythm ---- */
.features, .grid-3, .grid-4, .branch-grid, .testimonials, .ach-grid { gap: clamp(18px, 2vw, 26px); }
.page-hero { padding-block: clamp(56px, 7vw, 104px) clamp(88px, 10vw, 136px); }
.cta-band, .enquiry-panel, .stats, .legacy-badge, .ach-spotlight { border-radius: var(--radius-lg); }
.cta-band { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); }
.cta-sun { opacity: .9; }

/* Small labels stay in Manrope for legibility; the serif is reserved for large headings and numbers. */
.legacy-facts li strong, .portrait-card strong, .signature strong, .t-person strong, .float-card strong,
.ach-card .ach-title, .board-title, .date-badge .db-mon, .avatar {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.legacy-facts li strong { font-size: 1rem; color: var(--navy-800); }
.ach-spotlight .ach-title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.board-title { font-size: 1.15rem !important; }

.branches-home { margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }

/* ---- Restrained motion ---- */
.js .reveal { transform: translateY(18px); transition-duration: 900ms; }

/* ==========================================================================
   v4: Libre Baskerville for the school name and section headings;
   two-column hero with a photo slideshow.
   ========================================================================== */
:root { --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif; }

/* School name: traditional institutional identity */
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.15; }
@media (min-width: 400px) { .brand-name { font-size: 1.2rem; } }
@media (min-width: 900px) { .brand-name { font-size: 1.5rem; } }
.nav-head .brand-name { font-size: 1.15rem; }
.brand-tag { margin-top: 6px; }

/* Section headings and page titles */
h2, .page-hero h1, .stage-row h3, .ach-spotlight h3, .person h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(1.7rem, 1.5vw + 1.1rem, 2.55rem); line-height: 1.2; }
h2 em { font-weight: 400; }
.page-hero h1 { font-size: clamp(2rem, 2.2vw + 1.1rem, 3.1rem); line-height: 1.16; }
.stage-row h3 { font-size: clamp(1.45rem, 1vw + 1.1rem, 1.9rem) !important; line-height: 1.25; }
.ach-spotlight h3 { font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem); }
.person h3 { font-size: 1.25rem; }

/* ---- Hero: copy on the left, cinematic photo slideshow on the right ---- */
.hero--media {
  padding-block: clamp(28px, 4vw, 64px) clamp(100px, 10vw, 144px);
  background: radial-gradient(55% 65% at 92% 8%, rgb(201 164 92 / .14), transparent 70%), var(--ivory);
}
.hero--media .hero-grid { gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 860px) { .hero--media .hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.hero--media .hero-title { font-size: clamp(2.5rem, 3vw + 1.25rem, 4.3rem); }
.hero--media .lead { max-width: 32em; }
.hero--media .btn-row { margin-top: 30px; }

.hero-media { position: relative; }
.hm-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  box-shadow: 0 34px 70px -34px rgb(25 25 67 / .5);
}
@media (min-width: 860px) and (max-width: 1099px) { .hm-frame { aspect-ratio: 1 / 1.05; } }
@media (min-width: 1100px) { .hm-frame { aspect-ratio: 6 / 5; } }
.hm-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.hm-slide.is-active { opacity: 1; }
.hm-slide img, .hm-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-slide.is-active img { animation: hm-settle 6s var(--ease-out) both; }
@keyframes hm-settle { from { transform: scale(1.05); } to { transform: scale(1); } }
.hm-shade { position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(transparent, rgb(13 13 41 / .7)); pointer-events: none; }
.hm-caption {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  bottom: clamp(14px, 1.6vw, 22px);
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  color: var(--cream-50);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
}
.hm-count { font-family: var(--font-num); font-size: 1.4rem; font-weight: 600; color: var(--gold-500); font-variant-numeric: lining-nums; }
.hm-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.hm-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.hm-dot { position: relative; width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hm-dot::before {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgb(25 25 67 / .2);
  transition: background-color var(--dur-2), height var(--dur-2);
}
.hm-dot:hover::before { background: rgb(25 25 67 / .45); }
.hm-dot[aria-current="true"]::before { height: 3px; background: var(--gold-500); }
.hm-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid rgb(25 25 67 / .18);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--navy-800);
  transition: border-color var(--dur-1);
}
.hm-toggle:hover { border-color: var(--navy-800); }
.hm-toggle .icon { width: 18px; height: 18px; }
.hm-ico-play, .is-paused .hm-ico-pause { display: none; }
.is-paused .hm-ico-play { display: block; }
.hero--media .float-card { z-index: 3; }
.hero--media .float-card--a { left: -26px; top: 26px; }
.hero--media .float-card--b { right: -18px; top: auto; bottom: 86px; }
@media (min-width: 860px) and (max-width: 1099px) { .hero--media .float-card--b { right: 12px; } .hero--media .float-card--a { left: -14px; } }
@media (max-width: 859px) { .hero--media .float-card { display: none; } }

/* ==========================================================================
   v5: "A Day at Kenedy" film and the home-page campus cards
   ========================================================================== */

/* ---- A Day at Kenedy ---- */
.day-head { max-width: 780px; margin-bottom: var(--head-gap); }
.day-sub { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem); font-style: italic; font-weight: 500; line-height: 1.3; color: var(--navy-800); }
.day-head .lead { margin-top: 14px; }
.day-film {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;   /* the film's own shape, so nothing is cropped */
  border-radius: 22px;
  background: var(--navy-800);
  box-shadow: 0 34px 70px -38px rgb(25 25 67 / .55);
}
.day-poster, .day-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.day-poster { object-position: 50% 45%; }
.day-video { opacity: 0; transition: opacity 1s var(--ease-out); }
.day-film.is-playing .day-video { opacity: 1; }
.day-film.is-still .day-poster { animation: day-drift 18s var(--ease-in-out) infinite alternate; }
@keyframes day-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.day-shade { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(transparent, rgb(13 13 41 / .74)); pointer-events: none; }
.day-overlay {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  bottom: clamp(16px, 2.6vw, 34px);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--cream-50);
  font-size: clamp(.72rem, .3vw + .65rem, .9rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.day-overlay::before { content: ""; width: 34px; height: 1px; background: var(--gold-500); }
.day-controls { position: absolute; right: clamp(14px, 2.4vw, 30px); bottom: clamp(12px, 2.2vw, 28px); display: flex; gap: 10px; }
@media (max-width: 639px) { .day-controls { top: 14px; bottom: auto; } .day-overlay { letter-spacing: .2em; } }
.film-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgb(251 248 241 / .35);
  border-radius: var(--radius-btn);
  background: rgb(13 13 41 / .45);
  color: var(--cream-50);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.film-btn:hover { background: rgb(13 13 41 / .7); border-color: var(--gold-500); }
.film-btn[hidden] { display: none; }
.film-btn .icon { width: 18px; height: 18px; }
.film-ico-play, .is-paused .film-ico-pause { display: none; }
.is-paused .film-ico-play { display: block; }
.film-ico-sound, .film-sound[aria-pressed="true"] .film-ico-muted { display: none; }
.film-sound[aria-pressed="true"] .film-ico-sound { display: block; }

/* ---- Our Branches: four campus cards with photos ---- */
.campus-head, .campus-head > div { max-width: 1000px; }
.campus-head .lead { max-width: 34em; margin-top: 12px; }
.campus-title { max-width: none; }   /* heading font and size match the other section headings */
.campus-title .gold { color: var(--gold-500); }
.campus-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 700px) { .campus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.campus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.campus-card:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 3px; }
.campus-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 19px 19px 0 0; background: var(--cream-100); }
.campus-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.campus-card:hover .campus-media img { transform: scale(1.05); }
.campus-media .photo-slot { height: 100%; border-radius: 0; }
.campus-crest {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 80px; height: 80px;
  padding: 7px;
  margin: -40px 0 0 clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--cream-50);
  box-shadow: 0 10px 24px -12px rgb(25 25 67 / .35);
}
/* The crest artwork is a full-bleed square, so it sits in a rounded square rather than a circle (no corners cut off). */
.campus-crest img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 13px; }
.campus-body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px); }
.campus-num { position: absolute; top: -34px; right: clamp(20px, 2.4vw, 28px); font-family: var(--font-num); font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--gold-500); font-variant-numeric: lining-nums; }
.campus-body h3 { margin: 0 0 2px; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.3rem, .8vw + 1rem, 1.6rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--navy-800); }
.campus-line { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; font-weight: 500; line-height: 1.5; color: var(--text-muted); }
.campus-line .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--saffron-500); }
.campus-grades { font-weight: 600; color: var(--navy-800); }
.campus-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; color: var(--navy-800); transition: color var(--dur-2); }
.campus-cta .icon { width: 18px; height: 18px; color: var(--saffron-500); transition: transform var(--dur-2) var(--ease-out); }
.campus-card:hover .campus-cta { color: var(--saffron-700); }
.campus-card:hover .campus-cta .icon { transform: translateX(5px); }

/* ==========================================================================
   v6: achievement cards, Founder's Vision, principal's message, footer, legal pages
   ========================================================================== */

/* ---- Student achievements: one large feature, then portrait cards (all photos 4:5) ---- */
.achv-wrap { display: grid; gap: clamp(20px, 2.4vw, 28px); }
.achv-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--cream-100); }
.achv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.achv-photo-empty {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px;
  border: 1px dashed var(--line-strong); border-radius: inherit;
  font-size: .85rem; font-weight: 600; text-align: center; color: var(--text-muted);
}
.achv-photo-empty .icon { width: 24px; height: 24px; color: var(--saffron-500); }
.achv-body { display: flex; flex-direction: column; align-items: flex-start; }
.achv-meta { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: var(--accent-text); }
/* Parts are separated by a gold dot that stays at the end of the item before it (never starts a line). */
.achv-meta > span, .achv-line > span { white-space: nowrap; }
.achv-meta > span:not(:last-child)::after, .achv-line > span:not(:last-child)::after { content: "·"; margin: 0 4px 0 8px; color: var(--gold-500); }
.achv-body h3 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy-800); }
.achv-title { margin: 4px 0 0; font-weight: 600; color: var(--saffron-700); }
.achv-line { margin: 12px 0 0; font-size: .925rem; font-weight: 500; line-height: 1.5; color: var(--text-muted); }
.achv-line--grade { margin-top: 2px; }
.achv-score { display: flex; flex-direction: column; align-self: stretch; margin: 20px 0 0; padding: 16px 0; border-block: 1px solid var(--line); }
.achv-score-num { font-family: var(--font-num); font-size: 3rem; font-weight: 500; line-height: .95; letter-spacing: -0.01em; color: var(--gold-500); font-variant-numeric: lining-nums; }
.achv-score-num small { margin-left: 4px; font-size: .42em; letter-spacing: 0; color: var(--text-muted); }
.achv-score-label { margin-top: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.achv-stats { display: flex; gap: 32px; align-self: stretch; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.achv-stat-num { display: block; font-family: var(--font-num); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--gold-500); font-variant-numeric: lining-nums; }
.achv-stat-label { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.achv-photos-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; margin-top: 20px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--navy-800);
  cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1);
}
.achv-photos-btn .icon { width: 17px; height: 17px; color: var(--saffron-500); }
.achv-photos-btn:hover { border-color: var(--gold-500); background: var(--cream-50); }

/* Portrait cards (home: three across; achievements page: the hall-of-fame grid) */
.achv-grid { display: grid; gap: clamp(20px, 2.4vw, 28px); }
@media (min-width: 640px) { .achv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .achv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.achv-card {
  display: flex; flex-direction: column; padding: 12px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.achv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.achv-card .achv-body { flex: 1; padding: 20px 10px 10px; }

/* Feature (the main achievement): see "Achievement feature" further down */

/* ---- Founder's Vision (home) and Principal's Message (campus pages) ---- */
.founder-portrait { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 0 28px; }
.founder-portrait::before {          /* fine champagne frame, offset behind the photo */
  content: ""; position: absolute; top: -14px; right: -14px; bottom: 44px; left: 28px;
  border: 1px solid var(--gold-500); border-radius: calc(var(--radius-lg) + 4px); opacity: .75;
}
.founder-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-100); box-shadow: var(--shadow-2); }
.founder-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgb(25 25 67 / .42)); box-shadow: inset 0 0 0 1px rgb(201 164 92 / .3); }
.founder-frame .photo-slot { --ar: auto; height: 100%; border-radius: 0; }
.founder-frame:has(.photo-slot)::after { background: none; }
.founder-card {
  position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%);
  padding: 14px 28px; border-radius: var(--radius); text-align: center; white-space: nowrap;
  background: var(--navy-800); color: var(--on-dark); box-shadow: var(--shadow-2); line-height: 1.3;
}
.founder-card strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.founder-card span { display: block; margin-top: 3px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); }
.founder-text .quote { margin-bottom: 18px; }
.founder-motto { display: inline-flex; flex-direction: column; gap: 6px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--gold-500); font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900); }
.founder-motto span { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--accent-text); }
.principal-id { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 0; }
.principal-id strong { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; color: var(--navy-800); }
.principal-id > span { font-size: .95rem; font-weight: 500; color: var(--text-muted); }
.principal .quote { margin-top: 22px; }
.principal .prose p + p { margin-top: 12px; }
.principal .text-link { margin-top: 20px; }

/* ---- Footer ---- */
.site-footer { padding-top: clamp(56px, 7vw, 88px); background: var(--navy-800); color: rgb(251 248 241 / .78); box-shadow: inset 0 1px 0 rgb(201 164 92 / .35); }
.footer-grid { gap: 44px 40px; padding-top: 0; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* overrides the older 4-column rule */
@media (min-width: 1240px) { .footer-grid { grid-template-columns: 1.55fr .85fr .9fr 1.3fr; gap: 48px; } }
.footer-brand .brand img { border-radius: 10px; }
.footer-about { max-width: 400px; margin: 22px 0 18px; font-size: .95rem; line-height: 1.75; }
.footer-motto { margin: 0 0 22px; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .22em; color: var(--gold-500); }
.footer-title { margin: 6px 0 20px; font-size: .78rem; letter-spacing: .2em; color: var(--gold-500); }
.footer-links { gap: 2px; }
.footer-links a { min-height: 40px; color: rgb(251 248 241 / .82); transition: color var(--dur-1); }
.footer-links a:hover { color: var(--gold-300); transform: none; }
.footer-more a { gap: 8px; margin-top: 6px; font-weight: 600; color: var(--gold-500); }
.footer-more .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.footer-more a:hover .icon { transform: translateX(4px); }
.footer-contact { gap: 4px; }
.footer-contact a { align-items: center; min-height: 40px; color: rgb(251 248 241 / .82); transition: color var(--dur-1); }
.footer-contact .icon { margin-top: 0; }
.footer-contact span { overflow-wrap: break-word; }   /* the email breaks only before "@" (see main.js) */
.footer-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0 18px;
  border: 1px solid rgb(201 164 92 / .6); border-radius: var(--radius-btn);
  font-weight: 600; font-size: .925rem; color: var(--gold-300); text-decoration: none;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.footer-cta .icon { width: 16px; height: 16px; }
.footer-cta:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.social { gap: 12px; margin: 0; }
.social a { width: 42px; height: 42px; border: 1px solid rgb(201 164 92 / .35); background: transparent; color: var(--gold-300); }
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.footer-bottom { margin-top: clamp(44px, 5vw, 64px); border-top-color: rgb(201 164 92 / .25); font-size: .85rem; color: rgb(251 248 241 / .66); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.footer-legal > span { color: rgb(201 164 92 / .5); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgb(251 248 241 / .78); text-decoration: none; transition: color var(--dur-1); }
.footer-legal a:hover { color: var(--gold-300); }
.footer-legal .to-top { justify-content: center; width: 40px; min-height: 40px; height: 40px; margin-left: 8px; border: 1px solid rgb(201 164 92 / .35); border-radius: 50%; color: var(--gold-300); }
.footer-legal .to-top:hover { border-color: var(--gold-500); }

/* ---- Privacy Policy / Terms of Use ---- */
.legal { max-width: 760px; }
.legal h2 { margin: 36px 0 10px; font-size: clamp(1.25rem, .6vw + 1rem, 1.45rem); }
.legal h2:first-child { margin-top: 0; }
.legal ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; color: var(--text-muted); }
.legal ul + p { margin-top: 14px; }
.legal a { color: var(--accent-text); font-weight: 600; }

/* ==========================================================================
   v7: grander achievement feature, achievements page hero, gold heading words,
   notice dates, CTA sun
   ========================================================================== */
.text-gold { color: var(--gold-500); }

/* ---- Why Kenedy headline: each phrase stays whole when the line wraps ---- */
.why-head > div { max-width: 900px; }
.why-title > span { white-space: nowrap; }
.why-head .lead { max-width: 640px; margin-top: 14px; }

/* ---- Notice / event dates: the day number matches the month (not gold) ---- */
.date-badge .db-day { color: inherit; }
/* Past events ("Recently held"): a champagne badge with navy lettering (the navy rule above had left them grey on navy) */
.date-badge.date-badge--past { background: var(--gold-100); color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--gold-300); }
.date-badge.date-badge--past .db-mon { color: var(--accent-text); }

/* ---- CTA banner sun: smaller and lower, so it sits below the buttons ---- */
.cta-band { padding-bottom: clamp(104px, 10vw, 132px); }
.cta-sun { width: clamp(140px, 15vw, 200px); box-shadow: 0 0 60px 6px rgb(201 164 92 / .3); }

/* ---- Achievement feature (Sai Kavita): a grand award panel ----
   Toned navy with a soft gold glow behind the words, a fine inner frame, the photo in a gold mount,
   and a clear order: school, name, honour, score, details, supporting line. */
.achv-feature {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(26px, 3.4vw, 60px); align-items: center;
  padding: clamp(18px, 2.4vw, 34px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(55% 70% at 74% 42%, rgb(201 164 92 / .14), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, rgb(199 101 40 / .08), transparent 70%),
    linear-gradient(140deg, var(--navy-700) 0%, var(--navy-800) 46%, var(--navy-950) 100%);
  color: var(--on-dark);
  box-shadow: 0 40px 80px -46px rgb(13 13 41 / .75), inset 0 0 0 1px rgb(201 164 92 / .3);
}
.achv-feature::before {
  content: ""; position: absolute; inset: clamp(8px, 1vw, 12px); z-index: -1; pointer-events: none;
  border: 1px solid rgb(201 164 92 / .16); border-radius: calc(var(--radius-lg) - 6px);
}
@media (min-width: 760px) { .achv-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* The photograph whole, in a fine gold mount */
.achv-feature .achv-photo {
  aspect-ratio: auto; overflow: visible; padding: 8px; border-radius: 20px;
  background: linear-gradient(160deg, rgb(201 164 92 / .24), rgb(201 164 92 / .04));
  box-shadow: inset 0 0 0 1px rgb(201 164 92 / .65), 0 28px 50px -30px rgb(0 0 0 / .7);
}
.achv-feature .achv-photo img { height: auto; aspect-ratio: 4 / 5; border-radius: 13px; }
.achv-feature .achv-photo-empty { aspect-ratio: 4 / 5; border-color: rgb(201 164 92 / .4); color: var(--on-dark-muted); }

.achv-feature .achv-body { padding: 2px 6px 8px; }
@media (min-width: 760px) { .achv-feature .achv-body { padding: 20px clamp(12px, 3vw, 44px) 20px 0; } }

/* 1. The school */
.achv-feature .achv-school {
  display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, .7vw + .85rem, 1.45rem);
  line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-50);
}
.achv-feature .achv-school::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--gold-500); }
/* Side by side with the photo, the school name stays on one line and scales with the column */
@media (min-width: 760px) { .achv-feature .achv-school { white-space: nowrap; font-size: clamp(.78rem, 1.6vw, 1.35rem); letter-spacing: .08em; } }
/* 2. The student */
.achv-feature h3 {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.9rem, 3.6vw + 1.4rem, 5.2rem);
  line-height: 1; letter-spacing: -0.005em; color: var(--cream-50);
}
/* 3. The honour, between two fine gold rules, with a small medal */
.achv-honour {
  position: relative; display: inline-flex; align-items: center; gap: .55em; margin: clamp(16px, 1.8vw, 22px) 0 0; padding: .55em 0;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.3vw + .85rem, 2rem);
  line-height: 1.15; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-500);
}
.achv-honour::before, .achv-honour::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgb(201 164 92 / .75), rgb(201 164 92 / .08)); }
.achv-honour::before { top: 0; }
.achv-honour::after { bottom: 0; }
.achv-honour .icon { flex: none; width: 1.05em; height: 1.05em; padding: .2em; border: 1px solid rgb(201 164 92 / .6); border-radius: 50%; color: var(--gold-500); }
/* 4. The score */
.achv-feature .achv-score { display: block; align-self: stretch; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; border: 0; }
.achv-feature .achv-score-num {
  font-size: clamp(5rem, 6.6vw + 2rem, 9.2rem); line-height: .9; color: var(--gold-500);
  text-shadow: 0 12px 40px rgb(201 164 92 / .18);
}
.achv-feature .achv-score-num small { margin-left: .06em; font-size: .36em; color: rgb(251 248 241 / .78); }
/* 5. SSC 2026 · Grade X · ECIL, under a fine gold line */
.achv-feature .achv-details {
  align-self: stretch; margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgb(201 164 92 / .6), rgb(201 164 92 / 0)) 1;
  font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(251 248 241 / .82);
}
/* The supporting line */
.achv-tagline { max-width: 34ch; margin: 18px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, .6vw + .95rem, 1.35rem); line-height: 1.4; color: var(--gold-300); }
.achv-feature .achv-detail { max-width: 46ch; margin: 14px 0 0; color: var(--on-dark-muted); }
.achv-feature .achv-stats { border-color: rgb(201 164 92 / .3); }
.achv-feature .achv-stat-label { color: var(--on-dark-muted); }
.achv-feature .achv-photos-btn { border-color: rgb(201 164 92 / .55); color: var(--cream-50); }
.achv-feature .achv-photos-btn .icon { color: var(--gold-500); }
.achv-feature .achv-photos-btn:hover { border-color: var(--gold-500); background: rgb(201 164 92 / .14); }

/* Phones: the photo above, centred and a little narrower so the card stays compact; the words centred beneath */
@media (max-width: 759.98px) {
  .achv-feature { justify-items: center; }
  .achv-feature .achv-photo { width: min(100%, 270px); }
  .achv-feature .achv-body { align-items: center; text-align: center; }
  /* The school on two balanced lines under a short gold rule; the medal sits above the honour */
  .achv-feature .achv-school { flex-direction: column; gap: 10px; text-wrap: balance; }
  .achv-honour { flex-direction: column; gap: .4em; padding: .7em .2em; text-wrap: balance; }
  .achv-honour::before, .achv-honour::after { background: linear-gradient(90deg, rgb(201 164 92 / 0), rgb(201 164 92 / .75), rgb(201 164 92 / 0)); }
  .achv-feature .achv-details { border-image: linear-gradient(90deg, rgb(201 164 92 / 0), rgb(201 164 92 / .6), rgb(201 164 92 / 0)) 1; }
}

/* ---- Achievements page: awards-style hero and spotlight ---- */
.ach-hero::before {
  content: ""; position: absolute; z-index: 0; top: 50%; right: max(0px, calc(50% - 640px));
  width: min(640px, 70vw); aspect-ratio: 1; transform: translateY(-50%);
  background: radial-gradient(circle, rgb(201 164 92 / .16), transparent 62%); pointer-events: none;
}
.ach-hero h1 { font-size: clamp(2.3rem, 2.4vw + 1.2rem, 3.5rem); line-height: 1.1; }
@media (min-width: 640px) { .ach-hero h1 > span { display: block; white-space: nowrap; } }
.ach-hero .lead { max-width: 600px; }
.ach-hero .page-hero-art { max-width: 360px; }
@media (min-width: 900px) { .ach-hero .page-hero-grid { grid-template-columns: 1.4fr .6fr; } }
.spot-title { font-size: clamp(2.2rem, 2.4vw + 1.2rem, 3.4rem); }

/* ==========================================================================
   v9: Events & Gallery media showcase, campus card names
   ========================================================================== */
/* Events & Gallery hero: three-line headline, last line gold */
.gal-hero h1 { font-size: clamp(2.1rem, 2vw + 1.2rem, 3.1rem); line-height: 1.22; letter-spacing: -0.015em; margin: 18px 0 26px; }
@media (min-width: 640px) { .gal-hero h1 > span { display: block; white-space: nowrap; } }
.gal-hero h1 > span + span { margin-top: .06em; }
/* Admissions and Campus heroes: two balanced lines, the second in gold, with more air around them */
.hero-2line h1 { font-size: clamp(2.2rem, 2.3vw + 1.2rem, 3.4rem); line-height: 1.2; letter-spacing: -0.015em; margin: 16px 0 24px; }
@media (min-width: 640px) { .hero-2line h1 > span { display: block; white-space: nowrap; } .hero-2line h1 > span + span { margin-top: .08em; } }
.hero-2line .lead { max-width: 600px; line-height: 1.7; }
.gal-hero .lead { max-width: 600px; line-height: 1.7; }
@media (min-width: 900px) { .gal-hero .page-hero-grid { grid-template-columns: 1.45fr .55fr; } }
.gal-section .section-head .lead { max-width: 720px; }

/* Video gallery: 16:9 thumbnails with a centred play button; title and category underneath.
   Desktop uses a 6-column track: .is-lg cards take half the row, the others a third. */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 30px 22px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 979px) { .v-tile.is-tw { grid-column: span 2; } }
@media (min-width: 980px) {
  .video-grid { grid-template-columns: repeat(6, 1fr); gap: 38px 24px; }
  .v-tile { grid-column: span 2; }
  .v-tile.is-lg { grid-column: span 3; }
}
.v-card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.v-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-2); }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.v-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(13 13 41 / .42)); }
.v-card:hover .v-thumb img { transform: scale(1.035); }
.v-play {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 72px; height: 72px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(251 248 241 / .95); color: var(--navy-900);
  box-shadow: 0 0 0 8px rgb(251 248 241 / .2), 0 12px 30px rgb(13 13 41 / .35);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2);
}
.v-play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
@media (min-width: 980px) { .is-lg .v-play { width: 88px; height: 88px; } .is-lg .v-play svg { width: 34px; height: 34px; } }
.v-card:hover .v-play, .v-card:focus-visible .v-play { transform: translate(-50%, -50%) scale(1.08); background: var(--saffron-500); color: #FFFFFF; }
.v-dur { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: 6px; background: rgb(13 13 41 / .78); color: var(--cream-50); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-info { display: block; padding: 16px 2px 0; }
.v-title { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--navy-800); }
@media (min-width: 980px) { .is-lg .v-title { font-size: 1.25rem; } }
.v-meta { display: block; margin-top: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }

/* Video player (same dialog look as the photo viewer) */
.vp-media { background: #000; }
.vp-media video { display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #000; }
.vp-frame { aspect-ratio: 16 / 9; }
.vp-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vplayer .lb-close { top: -16px; right: -10px; }
@media (min-width: 1200px) { .vplayer .lb-close { right: -72px; top: 0; } }

/* Home campus cards: school name in the heading serif, branch as a small gold line */
.campus-body h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.campus-school { display: block; font-size: clamp(1.3rem, .7vw + 1.05rem, 1.65rem); line-height: 1.2; text-wrap: balance; }
@media (min-width: 480px) { .campus-school { white-space: nowrap; } }
.campus-area {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #9F7C3C;
}
.campus-area::before { content: ""; width: 22px; height: 1px; background: var(--gold-500); }
/* Individual branch pages: one template for all four */
.branch-hero-grid { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .branch-hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(36px, 4vw, 56px); } }
.branch-hero h1 { font-size: clamp(2rem, 2vw + 1.25rem, 3.05rem); line-height: 1.2; letter-spacing: -0.015em; margin: 14px 0 20px; }
.branch-hero h1 .text-gold { display: block; }
.branch-hero .lead { line-height: 1.7; }
.branch-hero-photo { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgb(201 164 92 / .4), 0 30px 70px -28px rgb(0 0 0 / .65); }
.branch-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.branch-about { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .branch-about { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.branch-lists { display: grid; gap: 20px clamp(20px, 3vw, 40px); margin-top: 26px; }
@media (min-width: 640px) { .branch-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.branch-lists h3 { margin: 0 0 12px; font-size: 1.05rem; }
.campus-panel { margin: 0; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.campus-panel > div { padding: 13px 0; }
.campus-panel > div:first-child { padding-top: 0; }
.campus-panel > div:not([hidden]) ~ div { border-top: 1px solid var(--line); }
.campus-panel dt { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.campus-panel dt .icon { width: 16px; height: 16px; color: var(--gold-500); }
.campus-panel dd { margin: 5px 0 0; font-weight: 600; line-height: 1.5; color: var(--navy-800); white-space: pre-line; }
.campus-panel a { color: inherit; text-decoration: none; }
.campus-panel a:hover { color: var(--saffron-700); }
.branch-principal { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 860px) { .branch-principal { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); } }
.branch-principal .founder-portrait { width: 100%; max-width: 400px; margin: 0 auto; }
.principal-approach { margin: 16px 0 0; color: var(--text-muted); }
.branch-principal .text-link { margin-top: 22px; }
.facility-grid { display: grid; gap: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .facility-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facility { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.facility-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 9px; border-radius: var(--radius-lg); background: var(--navy-800); box-shadow: var(--shadow-1); }
.facility-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facility strong { font-size: 1.02rem; color: var(--navy-800); }
.facility > span:last-child:not(.facility-media) { font-size: .92rem; color: var(--text-muted); }
.ev-grid { display: grid; gap: clamp(20px, 2.4vw, 28px); }
@media (min-width: 640px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev-card:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 980px) {
  .ev-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ev-card, .ev-card:last-child:nth-child(odd) { grid-column: span 2; }
  .ev-card.is-lg { grid-column: span 3; }
  .ev-card.is-solo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.ev-card { display: grid; align-content: start; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); color: inherit; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.ev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ev-card:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 3px; }
.ev-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-800); }
.ev-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.ev-card:hover .ev-media img { transform: scale(1.04); }
.ev-play { position: absolute; right: 12px; bottom: 12px; }
.ev-play .v-play { position: static; display: grid; width: 40px; height: 40px; transform: none; }
.ev-body { display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.6vw, 20px); }
.ev-meta { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.ev-title { font-family: var(--font-heading); font-size: 1.14rem; font-weight: 700; line-height: 1.3; color: var(--navy-800); }
.ev-summary { font-size: .94rem; line-height: 1.55; color: var(--text-muted); }
.ev-count { margin-top: 2px; font-size: .82rem; font-weight: 600; color: var(--navy-800); }
.branch-visit { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 960px) { .branch-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
#campus-enquiry { margin-top: clamp(36px, 5vw, 60px); scroll-margin-top: 110px; }
.branch-enquiry h2 .text-gold { display: block; }
/* Editorial branch design, used by all four branch pages. */
.branch-feature { --section-y: clamp(52px, 5.2vw, 78px); --section-y-hero: clamp(44px, 4.4vw, 64px); }
.branch-feature .branch-hero .lead { font-size: 1.02rem; }
.branch-feature .branch-hero h1 .text-gold { display: block; }
.branch-feature .branch-hero .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.branch-feature .branch-hero .btn-row .btn { justify-content: center; padding-inline: 14px; }
.branch-feature .branch-hero .btn-row .btn:first-child { grid-column: 1 / -1; }
.bf-about { padding-bottom: 0; }
.bf-about .section-head { max-width: 800px; }
.bf-highlights { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 16px 0 0; font-weight: 600; color: var(--navy-800); }
.bf-about-photo { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--navy-800); box-shadow: var(--shadow-2); }
.bf-about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-about-photo--full { aspect-ratio: auto; max-width: 720px; margin-inline: auto; }   /* the whole photo, at its own shape */
.bf-about-photo--full img { height: auto; }
.bf-strip { margin-top: clamp(32px, 4vw, 52px); background: var(--navy-800); border-block: 2px solid var(--gold-500); }
.bf-facts { display: grid; margin-block: 0; padding-block: clamp(10px, 1.4vw, 16px); }
.bf-facts > div { padding: 14px clamp(16px, 3vw, 44px); text-align: center; }
.bf-facts dt { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.bf-facts dt .icon { width: 16px; height: 16px; color: var(--gold-500); }
.bf-facts dd { margin: 8px 0 0; font-family: var(--font-heading); font-size: clamp(1.02rem, .4vw + .92rem, 1.2rem); line-height: 1.55; color: var(--cream-50); white-space: pre-line; }
@media (max-width: 719px) { .bf-facts > div + div { border-top: 1px solid rgb(201 164 92 / .3); } }
@media (min-width: 720px) {
  .bf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-facts > div + div { border-left: 1px solid rgb(201 164 92 / .3); }
}
.bf-hours { display: inline-grid; grid-template-columns: auto auto; justify-content: start; column-gap: clamp(14px, 2vw, 28px); vertical-align: top; text-align: left; white-space: nowrap; }
.bf-principal { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
.bf-principal .founder-portrait { width: 100%; max-width: 420px; padding-bottom: 0; }
.bf-principal-side { width: 100%; max-width: 420px; margin-inline: auto; }
.bf-principal-side .bf-principal-id { margin-top: 26px; }
.bf-principal:has(.bf-principal-side .bf-principal-id) { align-items: start; }   /* with a message, photo and text start level */
.bf-principal .quote { margin: 16px 0 0; padding-top: 26px; font-size: clamp(1.22rem, .5vw + 1.1rem, 1.42rem); line-height: 1.36; letter-spacing: 0; }
.bf-principal .quote::before { font-size: 2.6em; top: -.22em; }
.bf-principal .quote p { margin: 0; text-wrap: pretty; }
.bf-principal .quote p + p { margin-top: .55em; }
.bf-principal .quote .msg-lead { font-size: 1.14em; font-weight: 600; line-height: 1.3; }
.bf-principal .quote .msg-greeting { margin-top: .8em; font-style: normal; font-weight: 600; }
.bf-principal .quote .msg-greeting:first-child { margin-top: 0; }
.bf-principal .quote .msg-close { margin-top: .85em; padding-top: .7em; border-top: 1px solid rgb(201 164 92 / .55); font-weight: 600; color: var(--saffron-700); }
.bf-principal .quote .msg-close strong { display: block; margin-bottom: 3px; font-family: var(--font-heading); font-size: .72em; font-style: normal; font-weight: 700; letter-spacing: .22em; color: var(--navy-800); }
.bf-principal .quote .msg-close span { display: block; }
@media (min-width: 860px) and (min-height: 760px) { .bf-principal-side { position: sticky; top: 110px; } }   /* stays in view beside a long message */
@media (min-width: 860px) { .bf-principal { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
#principal + [hidden] + .section--alt { padding-top: 0; }   /* no gallery yet: the two sections share one surface */
.bf-principal-id { display: flex; flex-direction: column; gap: 4px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgb(201 164 92 / .55); }
.bf-principal-id strong { font-family: var(--font-heading); font-size: clamp(1.4rem, 1vw + 1.05rem, 1.8rem); font-weight: 700; line-height: 1.2; color: var(--navy-800); }
.bf-principal-id > span { color: var(--text-muted); }
.bf-principal .text-link { margin-top: 20px; }
@media (min-width: 640px) and (max-width: 979px) { .gallery-grid--feature .g-tile.is-lg:first-child:nth-last-child(odd) { grid-column: span 2; } }
@media (min-width: 980px) {
  .gallery-grid--feature { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gallery-grid--feature .g-tile { grid-column: span 2; }
  .gallery-grid--feature .g-tile.is-lg { grid-column: span 3; }
  .gallery-grid--feature .g-tile.is-solo { grid-column: 1 / -1; }
}
.branch-feature .gallery-grid .g-item { border-radius: var(--radius-lg); }

/* Campus walkthrough: the home page film frame, directly under the gallery */
.section.bf-walk { padding-top: 0; }
.ev-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--navy-800); }
.ev-action .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-2) var(--ease-out); }
.ev-card:hover .ev-action { color: var(--saffron-700); }
.ev-card:hover .ev-action .icon { transform: translateX(3px); }
@media (min-width: 640px) {
  .ev-grid--lead .ev-card:last-child:nth-child(odd) { grid-column: auto; }
  .ev-grid--lead .ev-card.is-lead, .ev-grid--lead .ev-card.is-solo, .ev-grid--lead .ev-card.is-solo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .ev-grid--lead { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ev-grid--lead .ev-card, .ev-grid--lead .ev-card:last-child:nth-child(odd) { grid-column: span 4; }
  .ev-grid--lead .ev-card.is-lg, .ev-grid--lead .ev-card.is-lg:last-child:nth-child(odd) { grid-column: span 6; }
  .ev-grid--lead .ev-card.is-lead { grid-column: span 7; grid-row: span 2; }
  .ev-grid--lead .ev-card.is-side, .ev-grid--lead .ev-card.is-side:last-child:nth-child(odd) { grid-column: span 5; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-content: stretch; }
  .ev-grid--lead .is-side .ev-media { aspect-ratio: auto; height: 100%; min-height: 190px; }
  .ev-grid--lead .is-side .ev-media img { position: absolute; inset: 0; }
  .ev-grid--lead .is-lead .ev-title { font-size: 1.4rem; }
  .ev-grid--lead .ev-card.is-solo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.bf-visit h2 .text-gold { display: block; }
.bf-visit { display: grid; gap: clamp(26px, 4vw, 52px); align-items: stretch; }
@media (min-width: 960px) { .bf-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.bf-contact { display: grid; margin: 20px 0 0; }
.bf-contact > div { display: grid; gap: 4px 16px; padding: 12px 0; border-top: 1px solid rgb(201 164 92 / .4); }
@media (min-width: 480px) { .bf-contact > div { grid-template-columns: 150px minmax(0, 1fr); } }
.bf-contact dt { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.bf-contact dt .icon { width: 16px; height: 16px; color: var(--gold-500); }
.bf-contact dd { margin: 0; font-weight: 600; line-height: 1.5; color: var(--navy-800); white-space: pre-line; }
.bf-contact a { color: inherit; text-decoration: none; }
.bf-contact a:hover { color: var(--saffron-700); }
.bf-routes { margin-top: 16px; }
.bf-routes h3 { margin: 0 0 10px; font-size: 1.05rem; }
.bf-actions { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 480px) { .bf-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf-actions .btn { justify-content: center; }
.bf-map { display: flex; min-height: 320px; }
.bf-map .map-embed { flex: 1; aspect-ratio: auto; min-height: 320px; box-shadow: var(--shadow-1); }
.event-hero h1 { max-width: 900px; font-size: clamp(2rem, 2vw + 1.25rem, 3rem); line-height: 1.2; margin: 14px 0 16px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-300); text-decoration: none; }
.back-link:hover { color: var(--cream-50); }
.back-link .icon { width: 18px; height: 18px; }
.ev-story { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); font-size: 1.08rem; line-height: 1.75; color: var(--text-muted); }
.ev-story p { margin: 0 0 12px; }
.ev-videos { margin-top: clamp(32px, 4vw, 48px); }
.ev-videos h2 { margin: 0 0 18px; }
.empty-note { margin: 0; color: var(--text-muted); }
/* Campus page: hero crest, feature cards, group overview and the photo section */
.campus-hero .page-hero-art { max-width: 170px; }
@media (min-width: 900px) { .campus-hero .page-hero-art { max-width: 320px; } }
.campus-hero-logo img { display: block; width: 100%; height: auto; border-radius: 16%; box-shadow: 0 0 0 1px rgb(201 164 92 / .4), 0 30px 70px -28px rgb(0 0 0 / .65); }

/* ---- About: hero collage of genuine photographs ---- */
.about-hero h1 .text-gold { display: block; }
.about-hero .page-hero-grid { gap: clamp(36px, 4vw, 64px); }
@media (min-width: 900px) { .about-hero .page-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.about-motto { margin: 22px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem); font-style: italic; font-weight: 500; color: var(--cream-50); }
.about-motto::before { content: ""; display: inline-block; width: 38px; height: 1px; margin-right: 14px; vertical-align: middle; background: var(--gold-500); }
.about-motto span { color: var(--gold-500); }
.about-hero .page-hero-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); width: 100%; max-width: 620px; }
.about-col { display: grid; gap: clamp(10px, 1.2vw, 16px); align-content: start; min-width: 0; }
.about-col:nth-child(2) { padding-top: clamp(22px, 3vw, 40px); }   /* the offset makes the four frames read as one composition */
.about-collage figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--navy-800); box-shadow: 0 0 0 1px rgb(201 164 92 / .38), 0 26px 50px -30px rgb(0 0 0 / .75); }
.about-collage figure.is-tall { aspect-ratio: 1 / 1.08; }
.about-collage figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-crest { position: absolute; left: 50%; top: 50%; width: clamp(58px, 7vw, 92px); height: auto; border-radius: 18%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--navy-800), 0 0 0 4px rgb(201 164 92 / .7), 0 16px 30px -12px rgb(0 0 0 / .7); }

/* ---- Events & Gallery: hero grid of genuine activity photographs (the About Us composition), gently animated:
   the photos rise in one after another, each column drifts slowly out of step, and each photo zooms very slowly.
   Visitors who ask for less motion get the still grid (see the reduced-motion rules). ---- */
@media (min-width: 900px) { .gal-hero .page-hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(32px, 3.5vw, 56px); } }
.gal-hero .page-hero-art.gal-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); width: 100%; max-width: 480px; }
.js .gal-hero .page-hero-art.gal-collage { animation: none; }   /* each photo has its own entrance below */
.gal-col { display: grid; gap: clamp(10px, 1.2vw, 16px); align-content: start; min-width: 0; }
.gal-col:nth-child(2) { padding-top: clamp(22px, 3vw, 40px); }
.gal-collage figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--navy-800); box-shadow: 0 0 0 1px rgb(201 164 92 / .38), 0 26px 50px -30px rgb(0 0 0 / .75); }
.gal-collage figure.is-tall { aspect-ratio: 1 / 1.08; }
.gal-collage figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The school crest in the centre, exactly as on About Us (.about-crest); it sits above the photos. */
.gal-crest { z-index: 2; place-self: start; }
.js .gal-collage figure { animation: gal-in .9s var(--ease-out) both; animation-delay: calc(.2s + var(--n, 0) * .14s); }
.js .gal-collage .gal-col { animation: gal-drift 7s var(--ease-in-out) 1.4s infinite alternate both; }
.js .gal-collage .gal-col:nth-child(2) { animation-delay: -2.1s; }
.js .gal-collage figure img { animation: gal-zoom 16s var(--ease-in-out) infinite alternate; }
.js .gal-crest { animation: gal-badge-in .7s var(--ease-out) .8s both; }
@keyframes gal-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gal-drift { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes gal-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes gal-badge-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
html.kv-intro-hold .gal-collage figure, html.kv-intro-hold .gal-crest { animation-play-state: paused; }

/* ---- About: our story ---- */
@media (min-width: 900px) { .about-story .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.about-story h2 { margin-bottom: .45em; }
.story-slides .hm-frame { aspect-ratio: 16 / 9; }   /* the buildings' own shape, so each one shows whole */

/* ---- About: the longer copy stays inside the original section heights ---- */
.vm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.vm-head .card-icon { flex: none; margin: 0; }
.vm-head h3 { margin: 0; }
#vision .check-list { gap: 7px; line-height: 1.5; }
#message .founder-portrait { padding-bottom: 0; }
#correspondent .quote { margin-top: 34px; }

/* ---- About: key facts ---- */
.facts-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.facts-stats, .facts-details { display: grid; margin: 0; }
.facts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: clamp(20px, 2.6vw, 34px) clamp(14px, 2vw, 28px); text-align: center; border-bottom: 1px solid var(--line); }
.facts-stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.facts-stats dd { margin: 0; font-family: var(--font-num); font-size: clamp(2.5rem, 2.6vw + 1.5rem, 3.75rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; color: var(--navy-800); }
.facts-stats dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.facts-details { gap: 24px; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.facts-details > div { position: relative; min-height: 46px; padding-left: 60px; }
.facts-details dt { font-weight: 700; color: var(--navy-900); }
.facts-details dd { margin: 3px 0 0; font-size: .975rem; line-height: 1.5; color: var(--text-muted); }
.facts-icon { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--navy-800); color: var(--gold-500); }
.facts-icon .icon { width: 22px; height: 22px; }
.facts-campuses { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: clamp(18px, 2vw, 24px) clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); background: var(--cream-50); }
.facts-campuses p { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.facts-campuses ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.facts-campuses a { display: inline-block; padding: 8px 16px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white); font-size: .9375rem; font-weight: 600; color: var(--navy-900); transition: border-color var(--dur-2), color var(--dur-2); }
.facts-campuses a:hover { border-color: var(--gold-500); color: var(--accent-text); }
@media (min-width: 640px) { .facts-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .facts-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-stats > div:not(:last-child) { border-right: 1px solid var(--line); }
  .facts-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- About: our journey. Each new milestone <li> adds a column; the line runs on past the last one ---- */
.journey-band { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-800); color: var(--on-dark); }
.section.journey-band + .section:not(.section--alt) { padding-top: var(--section-y); }   /* the navy band needs the usual gap below it */
.journey-band .rays { --rays-y: 110%; --rays-a: .1; }
.journey-band .container { position: relative; z-index: 1; }
.journey-band h2 { color: var(--cream-50); }
.journey-band .lead { color: var(--on-dark-muted); }
.journey-line { position: relative; display: grid; gap: 34px; margin: 0; padding: 0 0 0 34px; list-style: none; }
.journey-line::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold-500), rgb(201 164 92 / .08)); }
.journey-line li { position: relative; min-width: 0; }
.journey-line li::before { content: ""; position: absolute; left: -34px; top: 8px; width: 18px; height: 18px; border: 3px solid var(--gold-500); border-radius: 50%; background: var(--navy-800); box-shadow: 0 0 0 5px rgb(201 164 92 / .16); }
.journey-year { display: block; font-family: var(--font-num); font-size: clamp(2.6rem, 2vw + 2rem, 3.5rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; color: var(--gold-500); }
.journey-line h3 { margin: 12px 0 6px; color: var(--cream-50); }
.journey-line p { max-width: 30em; margin: 0; color: var(--on-dark-muted); }
@media (min-width: 760px) {
  .journey-line { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: 44px 0 0; }
  .journey-line::before { left: 0; right: 0; top: 8px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--gold-500) 60%, rgb(201 164 92 / .08)); }
  .journey-line li::before { left: 0; top: -44px; }
}
@media (min-width: 900px) { #correspondent .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); } }
.campus-feature h3 a { color: inherit; text-decoration: none; }
.campus-feature h3 a:hover .campus-school { color: var(--saffron-700); }
.campus-tel { text-decoration: none; }
.campus-tel:hover { color: var(--saffron-700); }
.campus-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.campus-links .campus-cta { margin: 0; padding: 0; border: 0; text-decoration: none; }
.campus-feature:hover .campus-cta { color: var(--navy-800); }
.campus-feature:hover .campus-cta .icon { transform: none; }
.campus-links .campus-cta:hover { color: var(--saffron-700); }
.campus-overview { max-width: 860px; margin-bottom: 0; }
.overview-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.overview-facts li { display: flex; flex-direction: column; gap: 3px; padding-inline: clamp(20px, 3vw, 40px); }
.overview-facts li + li { border-left: 1px solid rgb(201 164 92 / .5); }
.overview-facts strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--navy-800); }
.overview-facts span { font-size: .875rem; color: var(--text-muted); }
@media (max-width: 639px) { .overview-facts { flex-direction: column; } .overview-facts li + li { border-left: 0; } }
.exp-grid { display: grid; gap: clamp(26px, 3vw, 36px) clamp(18px, 2vw, 26px); }
.exp-tile { margin: 0; min-width: 0; }
.exp-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-800); box-shadow: var(--shadow-1); }
.exp-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.exp-tile:hover .exp-media img { transform: scale(1.035); }
.exp-tile figcaption { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px 0; }
.exp-tile figcaption strong { font-size: 1.02rem; font-weight: 700; color: var(--navy-800); }
.exp-tile figcaption span { font-size: .92rem; line-height: 1.5; color: var(--text-muted); }
@media (min-width: 640px) and (max-width: 979px) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exp-tile:first-child { grid-column: span 2; } }
@media (min-width: 980px) {
  .exp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .exp-4 { grid-column: span 4; } .exp-5 { grid-column: span 5; } .exp-7 { grid-column: span 7; }
  .exp-media { aspect-ratio: auto; height: clamp(250px, 25vw, 350px); }
}
/* Compact branch cards (Admissions, Contact) use the same name style, sized for four narrow columns */
.branch-card { gap: 12px; }
.branch-card h3 { margin: 6px 0 4px; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.branch-card .campus-school { font-size: clamp(1.18rem, .45vw + 1rem, 1.36rem); white-space: normal; }
.branch-card .campus-area { margin-top: 12px; font-size: .74rem; letter-spacing: .18em; }
.branch-card .campus-line + .text-link { margin-top: auto; }

/* Legacy heading in the home hero's typeface (Cormorant Garamond, navy + copper italic) */
#legacy-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 2.4vw + 1.3rem, 3.6rem); line-height: 1.06; letter-spacing: -0.012em; }
#legacy-title em { display: block; font-weight: 600; }

/* Founder's Vision: gold quotation mark, more room between the heading and the quote */
.founder-text .quote { margin-top: clamp(34px, 3vw, 46px); padding-top: 44px; }
.founder-text .quote::before { color: var(--gold-500); opacity: 1; }

/* Brand: "Estd. 1990" sits under the end of "Bhavan" (the negative margin offsets the trailing letter-spacing) */
.brand-tag { align-self: flex-end; margin-right: -.22em; }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .rail::before { transform: none; }
  .js .rail li { opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
  .js .cta-sun { transform: translate(-50%, 0); }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .fab, .site-footer .rays, .footer-sun, .rays { display: none !important; }
  .page-hero { background: none; color: #000; }
  .page-hero h1 { color: #000; }
}

/* ---------- Eyebrows on phones ----------
   One style for every eyebrow: a little smaller and tighter, the gold line fixed beside the text.
   A label too long for one line gets short wording: <span class="eb-long">…</span><span class="eb-short">…</span>. */
.eyebrow .eb-short { display: none; }
@media (max-width: 599px) {
  .eyebrow, .cta-band p.eyebrow { font-size: .68rem; letter-spacing: .18em; gap: .75em; line-height: 1.5; }
  .eyebrow::before, .section-head--center .eyebrow::after { flex: none; width: 24px; }
  .eyebrow .eb-long { display: none; }
  .eyebrow .eb-short { display: inline; }
  .hero-copy > .eyebrow { margin-bottom: 1.25rem; }
}

/* ---------- Brand intro (assets/js/intro.js) ----------
   Opening 0-0.7s, crest 0.7-1.6s, name 1.6-2.5s, motto 2.5-3.2s, lift 3.2-4s. */
html.kv-intro-on { scrollbar-color: var(--navy-800) var(--navy-800); }   /* same width, so nothing shifts when it leaves */
html.kv-intro-hold .hero-fade, html.kv-intro-hold .hero-art, html.kv-intro-hold .page-hero-art, html.kv-intro-hold .hm-slide.is-active img { animation-play-state: paused; }
.kv-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px 20px 72px;
  background: radial-gradient(70% 62% at 50% 40%, var(--navy-700), var(--navy-800) 58%, var(--navy-950) 120%);
  color: var(--cream-50);
  text-align: center;
  touch-action: none;
}
.kv-intro::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); opacity: .7; }
.kv-intro .rays { --rays-x: 50%; --rays-y: 40%; --rays-a: .035; opacity: 0; }
.kv-intro .rays::before { animation: none; }
.kv-intro-sweep { position: absolute; inset: -20% auto -20% 0; width: 75%; background: linear-gradient(90deg, transparent, rgb(201 164 92 / .025) 25%, rgb(201 164 92 / .1) 50%, rgb(201 164 92 / .025) 75%, transparent); opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-15deg); pointer-events: none; will-change: transform, opacity; }
.kv-intro-stage { position: relative; z-index: 1; display: grid; justify-items: center; }
/* A soft bloom behind the crest as it arrives. It fades to nothing, so the settled screen is unchanged. */
.kv-intro-halo { position: absolute; left: 50%; top: 0; width: clamp(220px, min(60vw, 50vh), 400px); aspect-ratio: 1; margin-left: calc(clamp(220px, min(60vw, 50vh), 400px) / -2); margin-top: calc(clamp(96px, min(26vw, 22vh), 176px) / 2 - clamp(220px, min(60vw, 50vh), 400px) / 2); border-radius: 50%; background: radial-gradient(closest-side, rgb(201 164 92 / .2), transparent); opacity: 0; pointer-events: none; }
.kv-intro-crest { position: relative; isolation: isolate; overflow: hidden; will-change: transform, opacity; width: clamp(96px, min(26vw, 22vh), 176px); aspect-ratio: 800 / 766; margin-bottom: clamp(16px, 3.2vh, 30px); border-radius: 16%; box-shadow: 0 0 0 1px rgb(201 164 92 / .45), 0 30px 70px -28px rgb(0 0 0 / .65); opacity: 0; }
.kv-intro-crest img { display: block; width: 100%; height: 100%; }
.kv-intro-crest::after { content: ""; position: absolute; inset: -30% -70%; background: linear-gradient(105deg, transparent 40%, rgb(255 238 200 / .08) 46%, rgb(255 238 200 / .28) 50%, rgb(255 238 200 / .08) 54%, transparent 60%); opacity: 0; transform: translate3d(-60%, 0, 0); }
.kv-intro p { margin: 0; opacity: 0; }
.kv-intro-name { font-family: var(--font-heading); font-size: clamp(1.1rem, 5.2vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: .07em; color: var(--cream-50); }
.kv-intro-est { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px !important; font-size: clamp(.64rem, 1.5vw, .78rem); font-weight: 700; letter-spacing: .32em; color: var(--gold-500); }
.kv-intro-est::before, .kv-intro-est::after { content: ""; width: clamp(20px, 5vw, 44px); height: 1px; background: var(--gold-500); opacity: .6; }
.kv-intro-motto { margin-top: clamp(16px, 3vh, 26px) !important; font-family: var(--font-display); font-size: clamp(1.02rem, 2.2vw, 1.5rem); font-weight: 600; letter-spacing: .2em; color: var(--cream-50); }
.kv-intro-motto span { font-style: italic; color: var(--gold-500); }
.kv-intro-skip {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(251 248 241 / .22);
  border-radius: var(--radius-btn);
  background: none;
  color: rgb(251 248 241 / .78);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2);
  animation: kv-fade .5s ease .4s both;
}
.kv-intro-skip:hover { border-color: var(--gold-500); color: var(--cream-50); }
.kv-intro-skip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.kv-intro.is-playing .rays { animation: kv-fade 1.2s ease both; }
.kv-intro.is-playing .kv-intro-sweep { animation: kv-sweep 2s cubic-bezier(.45, .05, .35, 1) .05s both; }
.kv-intro.is-playing .kv-intro-halo { animation: kv-halo 1.6s ease-out .6s both; }
.kv-intro.is-playing .kv-intro-crest { animation: kv-crest 1.1s cubic-bezier(.16, 1, .3, 1) .7s both; }
.kv-intro.is-playing .kv-intro-crest::after { animation: kv-sheen 1.1s cubic-bezier(.45, .05, .35, 1) 1.1s both; }
.kv-intro.is-playing .kv-intro-name { animation: kv-up .7s var(--ease-out) 1.6s both; }
.kv-intro.is-playing .kv-intro-est { animation: kv-up .6s var(--ease-out) 1.85s both; }
.kv-intro.is-playing .kv-intro-motto { animation: kv-up .55s var(--ease-out) 2.4s both; }
.kv-intro.is-static .rays, .kv-intro.is-static .kv-intro-crest, .kv-intro.is-static p { opacity: 1; animation: none; }
/* The screen rises a little past the top, so its soft shadow leaves with it and nothing is cut off at the end. */
.kv-intro.is-leaving { transform: translate3d(0, -115%, 0); box-shadow: 0 30px 80px rgb(13 13 41 / .4); transition: transform .7s cubic-bezier(.76, 0, .24, 1) .1s; }
.kv-intro.is-leaving .kv-intro-stage, .kv-intro.is-leaving .kv-intro-skip { opacity: 0; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease; animation: none; }
.kv-intro.is-skipped { transition-duration: .4s; transition-delay: 0s; }
@keyframes kv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-sweep { 0% { opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-15deg); } 18% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(170%, 0, 0) skewX(-15deg); } }
@keyframes kv-halo { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kv-crest { 0% { opacity: 0; transform: scale(.965); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes kv-sheen { 0% { opacity: 0; transform: translate3d(-60%, 0, 0); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(60%, 0, 0); } }
@keyframes kv-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kv-intro.is-leaving { transform: none; box-shadow: none; opacity: 0; transition: opacity .3s linear !important; }
  .kv-intro.is-leaving .kv-intro-stage, .kv-intro.is-leaving .kv-intro-skip { transform: none; }
}
@media print { .kv-intro { display: none; } }

/* ---------- Blog (12 November 2026): the article page and the list's page links ---------- */
.blog-article { max-width: 820px; }
.blog-cover { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); background: var(--navy-50); }
.blog-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-body { max-width: none; }
.blog-body p { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.8; }
.blog-body h3 { margin: 28px 0 8px; font-size: clamp(1.1rem, .4vw + 1rem, 1.25rem); }
.blog-body ul, .blog-body ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; color: var(--text-muted); line-height: 1.7; }
.blog-body li::marker { color: var(--gold-500); }
.blog-body blockquote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold-500); font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, .5vw + 1rem, 1.35rem); color: var(--navy-800); }
.blog-body blockquote p { margin: 0; color: inherit; font-size: inherit; }
.blog-body strong { color: var(--text); }
.blog-byline { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .95rem; }
.blog-back { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; margin: 22px 0 0; }
.blog-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: clamp(28px, 4vw, 40px); }
.blog-pages-n { color: var(--text-muted); font-size: .95rem; }
.ev-card .pill { margin-top: 10px; align-self: flex-start; }

/* ---------- Phones: slightly warmer background on every page (chosen by the school, 14 November 2026, "Option A") ----------
   Only on screens up to 700 px wide. Tablets and computers keep the usual tones. This comes after the main colour rules,
   so it takes their place on phones. */
@media (max-width: 700px) {
  :root {
    --ivory: #F5F0E4;
    --surface-alt: #F0E6D2;
  }
}