@charset "UTF-8";
/* ==========================================================================
   Shanti Niketan Inter College — stylesheet
   --------------------------------------------------------------------------
   The colour tokens in the THEME block below are rewritten by the build
   from `theme` in site.config.js. Edit them there, not here.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /*__THEME_START__*/
  --primary: #762123;
  --primary-light: #8E2A2C;
  --primary-dark: #3F1011;
  --accent: #FFC901;
  --accent-light: #FFD84D;
  --accent-dark: #7A6000;
  --highlight: #2C5F2D;
  --primary-rgb: 118 33 35;
  --primary-light-rgb: 142 42 44;
  --primary-dark-rgb: 63 16 17;
  --accent-rgb: 255 201 1;
  --accent-light-rgb: 255 216 77;
  --accent-dark-rgb: 122 96 0;
  --highlight-rgb: 44 95 45;
  /*__THEME_END__*/

  /* Plain, near-neutral greys. The reference site sets body copy in a flat
     #4C4C4C against white and lets the maroon and yellow do all the work;
     tinting these warm would soften an identity that wants to read hard. */
  --ink: #191919;
  --ink-soft: #333333;
  --muted: #4C4C4C;
  --muted-light: #5A5A5A;   /* 6.90:1 on white — safe for small meta text */
  --line: #DEDEDE;
  --line-soft: #EDEDED;
  --tint: #F4F4F4;
  --tint-warm: #FAFAFA;
  --white: #FFFFFF;
  --whatsapp: #188741;      /* darkened from brand green so white button text clears 4.5:1 */

  /* One family, two roles. The reference site runs an all-sans identity:
     a heavy neo-grotesque set very large for display, and Source Sans for
     everything read at length. Archivo is the closest Google Fonts cut to
     the licensed face they use. */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Devanagari for the school's Hindi name; the Latin faces have no
     Devanagari coverage, so without this the browser picks an arbitrary
     system fallback and the name renders inconsistently across machines. */
  --font-deva: 'Tiro Devanagari Hindi', 'Nirmala UI', 'Noto Sans Devanagari', serif;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  /* Square. The reference site rounds nothing at all — every button, card,
     tag and panel is a hard rectangle, and that squareness is most of what
     makes the identity read as institutional rather than commercial.
     The tokens are kept (rather than deleted) so the whole site can be
     softened again from one place if the school wants that later. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-full: 999px;   /* pills only, where a shape must read as a pill */

  /* Wide uppercase tracking is the other signature: labels, buttons and
     eyebrows all carry it. */
  --track-label: 0.22em;

  --sh-sm: 0 1px 2px rgb(var(--primary-dark-rgb) / 0.05), 0 1px 3px rgb(var(--primary-dark-rgb) / 0.07);
  --sh-md: 0 4px 12px rgb(var(--primary-dark-rgb) / 0.07), 0 2px 4px rgb(var(--primary-dark-rgb) / 0.05);
  --sh-lg: 0 12px 32px rgb(var(--primary-dark-rgb) / 0.10), 0 4px 8px rgb(var(--primary-dark-rgb) / 0.05);
  --sh-xl: 0 24px 60px rgb(var(--primary-dark-rgb) / 0.15);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms var(--ease);
  --t: 260ms var(--ease);

  --container: 1200px;
  --header-h: 128px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe {
  display: block;
  max-width: 100%;
}
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--primary-light); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* 900, not 700. The whole reference identity rests on headlines set in the
     heaviest cut of a grotesque; at 700 the same layout reads unremarkable. */
  font-weight: 900;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
/* A heavy grotesque set large needs the tracking pulled in hard, or the
   counters gap. Small headings need almost none. */
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.01em; }

p { text-wrap: pretty; }

ul, ol { padding: 0; }

address { font-style: normal; }

/* Long unbreakable strings (emails, URLs) must not blow out narrow layouts.
   `break-word` only splits a word that cannot fit on a line of its own, and
   it is deliberately NOT applied to headings: a broken heading splits the
   school's name or a real word mid-spelling, which reads as a typo. Headings
   are sized to fit instead. */
a, p, li, dd, address { overflow-wrap: break-word; }

/* Headings and the header mark never hyphenate or split a word. */
h1, h2, h3, h4, .logo-name, .section-title, .hero h1 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Utility ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container.narrow { max-width: 880px; }

.sr-only {
  position: absolute;
  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: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--accent);
  color: var(--primary-dark);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus-visible { top: 0; }

:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.section-dark :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.areas-panel :focus-visible { outline-color: var(--accent); }

/* ── Icons ─────────────────────────────────────────────────── */
/* Inline SVG sprite references. Sized in em so an icon tracks the font size
   of whatever it sits in, exactly as the old icon font did. */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -0.125em;
  display: inline-block;
}

/* The sprite itself must take up no space and be ignored by assistive tech. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Sections ───────────────────────────────────────────────────────── */
.section { padding-block: var(--sp-10); }
.section-flush { padding-block: 0 var(--sp-9); }
.section-tint { background: var(--tint); }

.section-dark {
  background: var(--primary-dark);
  background-image:
    radial-gradient(circle at 12% 18%, rgb(var(--primary-light-rgb) / 0.55), transparent 45%),
    radial-gradient(circle at 88% 78%, rgb(var(--accent-rgb) / 0.10), transparent 42%);
  color: rgba(255, 255, 255, 0.82);
}
.section-dark h2,
.section-dark h3 { color: var(--white); }

.section-header {
  max-width: 720px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.section-header.is-left {
  margin-inline: 0;
  text-align: left;
  max-width: 560px;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-4);
}
.section-header.is-light .section-eyebrow { color: var(--accent); }

.section-title {
  /* Much bigger than before, and the top of the range is deliberately far
     from the bottom: the impact of this identity comes from headline scale. */
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
/* A short yellow bar, square and heavy — replacing the tapered gold hairline
   of the previous direction, which was too delicate for this type. */
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 6px;
  margin: var(--sp-5) auto 0;
  background: var(--accent);
}
.section-header.is-left .section-title::after { margin-inline: 0; }
/* On dark grounds the bar is the one place the bright yellow is legible. */
.section-header.is-light .section-title::after { background: var(--accent); }
.section-header.is-light .section-title { color: var(--white); }

.section-lede {
  font-size: 1.08rem;
  color: var(--muted);
}
.section-header.is-light .section-lede { color: rgba(255, 255, 255, 0.72); }

.section-cta { text-align: center; margin-top: var(--sp-8); }

.section-footnote {
  margin-top: var(--sp-6);
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--tint-warm);
  border-left: 3px solid var(--accent);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.section-footnote .icon { color: var(--accent-dark); margin-top: 0.25rem; }

.prose-center { text-align: center; }
.prose-center p + p { margin-top: var(--sp-4); }

.highlight {
  /* Solid block of yellow behind the words, ink text on top: 11.39:1. */
  background-color: var(--accent);
  color: var(--ink);
  padding-inline: 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.section-dark .highlight,
.hero .highlight {
  background-color: transparent;
  color: var(--accent);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-8);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  /* Small, wide-tracked and uppercase — the label is a caption, and the
     rectangle around it is what carries the weight. */
  font-size: 0.82rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.2;
  padding: 1.05rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  /* No lift on hover: these are hard rectangles, and translating them breaks
     the alignment the layout depends on. Colour does the work instead. */
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-align: center;
}
.btn .icon { font-size: 0.85em; }

.btn-lg { padding: 1.25rem 2.2rem; font-size: 0.88rem; }
.btn-sm { padding: 0.7rem 1.1rem; font-size: 0.74rem; letter-spacing: 0.16em; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

/* Yellow fill, ink label. The yellow is legible here precisely because the
   text on it is near-black — it never carries white. */
.btn-accent {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: currentColor;
}
.btn-outline:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* On photographs and dark bands: a hairline white rule over the image, which
   is the reference site's standard treatment for a secondary action. */
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.85);
}
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
  border-color: var(--whatsapp);
}
.btn-whatsapp:hover { background: #10682F; border-color: #10682F; }

.btn-naked {
  background: none;
  border: none;
  padding: 0.4rem 0;
  color: var(--primary);
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
}
.btn-naked:hover { color: var(--ink); border-bottom-color: var(--ink); gap: 0.95rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: var(--sh-md); }

.header-top {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-bottom: 0;
}
.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar-group {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.topbar-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--t-fast);
}
a.topbar-link:hover { color: var(--accent); }
.topbar-link .icon { color: var(--accent); font-size: 0.8em; }
.topbar-tag { color: rgba(255, 255, 255, 0.66); font-size: 0.8rem; }
.topbar-dot { opacity: 0.5; }

.header-main { background: var(--white); }
.header-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 88px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  /* Does NOT shrink. The name is set nowrap so that it always reads on one
     line, which means shrinking this box clips the school's name rather than
     reflowing it. The narrow-screen case that once needed min-width:0 is
     handled instead by swapping to the short form below 480px. */
  flex-shrink: 0;
  min-width: 0;
}
.logo-img { width: 56px; height: 56px; flex-shrink: 0; }
.logo-fallback {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border-radius: 0;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 900;
  /* Scales with the viewport instead of wrapping. The school's name is a
     proper noun and must never break across lines or mid-word. */
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
}
/* Below the swap point the full name cannot hold one line at a legible size,
   so the school's own abbreviation stands in. The link's aria-label carries
   the full name regardless, so nothing is lost to a screen reader. */
.logo-name-short { display: none; }
.logo-name-full { display: inline; }
.logo-sub {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 0.3rem;
}

/* ── Navigation ─────────────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
}
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.38rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--primary-light); background: var(--tint); }
.nav-link.active { color: var(--primary); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0.72rem; right: 0.72rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--accent);
  border-radius: 0;
}

.nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform var(--t-fast);
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* The extra toggle button is only used on mobile; on desktop hover opens. */
.dropdown-toggle { display: none; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 0.4rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 20;
}
/* `.is-focused` is set by the script on focusin. :focus-within alone is not
   enough — it stops applying whenever the browser window loses focus, which
   would leave a keyboard user tabbing into an invisible, unfocusable menu. */
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu,
.nav-item.is-focused > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.dropdown-item:hover {
  background: var(--tint);
  color: var(--primary);
  padding-left: 1.1rem;
}

/* Tighter than a page button: it shares the nav bar with seven menu items
   inside a 1152px content box, and at the site's uppercase tracking anything
   larger pushes the button past the container's right edge. */
.nav-cta { flex-shrink: 0; padding: 0.8rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.1em; }

.menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 46px; height: 46px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--primary-dark);
  border-radius: 0;
  transition: transform var(--t), opacity var(--t-fast), top var(--t);
}
.hamburger {
  top: 50%;
  transform: translate(-50%, -50%);
}
.hamburger::before,
.hamburger::after {
  content: '';
  transform: translateX(-50%);
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

.menu-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.menu-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

.nav-backdrop { display: none; }

/* ── Ticker ─────────────────────────────────────────────────────────── */
.ticker {
  display: flex;
  align-items: stretch;
  background: var(--primary);
  color: var(--white);
  min-height: 44px;
  overflow: hidden;
}
.ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-inline: 1.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  padding-left: 2rem;
  animation: ticker 42s linear infinite;
  will-change: transform;
}
.ticker-track:hover,
.ticker-track:focus-within { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-item {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.88rem;
  position: relative;
  padding-left: 1rem;
}
.ticker-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2px;
  border-radius: 0;
  background: var(--accent);
}
.ticker-item:hover { color: var(--accent-light); text-decoration: underline; }
.ticker-all {
  display: inline-flex;
  align-items: center;
  padding-inline: 1.1rem;
  background: var(--primary-dark);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-all:hover { background: var(--accent); color: var(--primary-dark); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 1rem; }
  .ticker-viewport { overflow-x: auto; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  /* --ink shows through wherever the photograph does not reach, and is what
     the page renders against before the image decodes. */
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* A thick yellow bar closes the hero — the single loudest use of the
     accent on the page. */
  border-bottom: 8px solid var(--accent);
}

/* ── Hero background ──────────────────────────────────────────────────
   The photograph is the ground the hero is set on. It fills the section and
   is covered by a scrim heavy enough that white text clears 4.5:1 over the
   brightest part of the image, not merely the average. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The building sits low in this frame; favouring the upper edge keeps the
     roofline visible once the section is cropped short on wide screens. */
  object-position: center 38%;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Two layers: a strong left-to-right wedge so the column of copy always has
     a dark bed, and a bottom-up fade that seats the yellow rule and keeps the
     campus card legible. */
  background:
    linear-gradient(90deg, rgb(var(--primary-dark-rgb) / 0.95) 0%, rgb(var(--primary-dark-rgb) / 0.88) 42%, rgb(var(--primary-dark-rgb) / 0.46) 74%, rgb(var(--primary-dark-rgb) / 0.32) 100%),
    linear-gradient(0deg, rgb(25 25 25 / 0.78) 0%, rgb(25 25 25 / 0.14) 45%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-content: center;
  /* Tall enough to read as a full-bleed image, capped so the copy below is
     never pushed entirely off the first screen. */
  min-height: min(78vh, 720px);
  padding-block: var(--sp-9) var(--sp-8);
}
.hero-content {
  position: relative;
  z-index: 3;
  /* NOT a ch-based measure. `ch` resolves against the inherited body font,
     which gave 524px here — far too narrow for a 104px headline, which then
     wrapped to six lines and made the hero 1396px tall. The display type
     needs a measure set in its own terms; the lede keeps its own 52ch cap
     below so body copy stays readable. */
  max-width: min(940px, 100%);
}

/* Solid yellow chip with ink text — the accent used as a flag, not a tint. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 0;
  margin-bottom: var(--sp-5);
}

.hero h1 {
  /* The signature move: the headline is the largest thing on the site by a
     wide margin, uppercase, and tracked tight enough to read as a block. */
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-5);
}
.hero-lede {
  font-size: 1.13rem;
  /* 0.78 measured 4.60:1 over the brightest pixel beneath it — passing, but
     with no room for a brighter replacement photograph. 0.88 holds the margin
     if the school swaps the image. */
  color: rgba(255, 255, 255, 0.88);
  max-width: 52ch;
  margin-bottom: var(--sp-7);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  list-style: none;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
}
.hero-trust .icon { color: var(--accent); }

/* Campus card: sits on the photograph at the end of the hero rather than
   floating off the corner of a framed figure. */
.hero-card {
  justify-self: start;
  max-width: 340px;
  background: rgb(25 25 25 / 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 6px solid var(--accent);
}
/* The card is now dark, so its three text colours flip: bronze and maroon
   were chosen for a white panel and would fail against this ground. */
.hero-card-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.hero-card p {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
.hero-card-link {
  font-size: 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-card-link:hover { gap: 0.7rem; color: var(--white); }


/* ── Quick links ────────────────────────────────────────────────────── */
.quicklinks {
  margin-top: calc(var(--sp-8) * -1);
  position: relative;
  z-index: 10;
  padding-bottom: var(--sp-4);
}
.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--sp-4);
}
.quicklink {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-decoration: none;
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.quicklink:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--accent);
}
.quicklink.is-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.quicklink-icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--tint-warm);
  color: var(--accent-dark);
  font-size: 1.2rem;
}
.quicklink.is-primary .quicklink-icon { background: rgba(255, 255, 255, 0.12); color: var(--accent); }
.quicklink-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quicklink-body strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--primary-dark);
  line-height: 1.25;
}
.quicklink-body span { font-size: 0.87rem; color: var(--muted); }
.quicklink.is-primary .quicklink-body strong { color: var(--white); }
.quicklink.is-primary .quicklink-body span { color: rgba(255, 255, 255, 0.75); }
.quicklink-arrow { color: var(--muted-light); transition: transform var(--t-fast); flex-shrink: 0; }
.quicklink:hover .quicklink-arrow { transform: translateX(4px); color: var(--accent-dark); }
.quicklink.is-primary .quicklink-arrow { color: var(--accent); }

/* ── Welcome ────────────────────────────────────────────────────────── */
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--sp-9);
  align-items: center;
}
/* Grid items default to min-width:auto, so a track refuses to shrink below
   its content's min-content width — on a 320px screen that pushed this grid
   6px wider than the viewport and scrolled the whole page sideways. Every
   track here is free to shrink; the media inside is already max-width:100%. */
.welcome-grid > * { min-width: 0; }
.welcome-media { position: relative; }
.welcome-media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.welcome-media::before {
  content: '';
  position: absolute;
  inset: auto auto -18px -18px;
  width: 130px; height: 130px;
  background: var(--accent);
  border-radius: var(--r-md);
  z-index: -1;
}
.welcome-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgb(var(--primary-dark-rgb) / 0.9);
  backdrop-filter: blur(6px);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: var(--r-md);
}
.welcome-badge-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
}
.welcome-badge-text { font-size: 0.72rem; line-height: 1.3; color: rgba(255, 255, 255, 0.8); }

.welcome-body p + p { margin-top: var(--sp-4); }
.welcome-body .btn-naked { margin-top: var(--sp-5); }

.check-list { list-style: none; margin-top: var(--sp-5); display: grid; gap: 0.7rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
}
.check-list .icon {
  color: var(--accent-dark);
  background: var(--tint-warm);
  width: 22px; height: 22px;
  /* An <svg> fills its box, so inset the glyph to sit inside the circle. */
  padding: 5px;
  box-sizing: border-box;
  border-radius: 0;
  flex-shrink: 0;
  margin-top: 0.22rem;
}
.check-list-lg li { font-size: 1rem; }
.section-dark .check-list .icon { background: rgb(var(--accent-rgb) / 0.16); color: var(--accent); }

/* ── At a glance ────────────────────────────────────────────────────── */
.glance { background: var(--primary); color: var(--white); padding-block: var(--sp-8); }
.glance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  text-align: center;
}
.glance-item { padding-inline: var(--sp-3); }
.glance-item + .glance-item { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.glance-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.glance-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
}

/* ── Feature grid ───────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-6);
}
.feature-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.feature-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgb(var(--accent-rgb) / 0.4);
  transform: translateY(-3px);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
  font-size: 1.15rem;
}
.feature-item h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.feature-item p { font-size: 0.93rem; color: rgba(255, 255, 255, 0.7); }

/* ── Stage cards ────────────────────────────────────────────────────── */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--sp-5);
}
.stage-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.stage-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--accent);
}
.stage-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--accent);
  font-size: 1.05rem;
  margin-bottom: var(--sp-4);
}
.stage-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.stage-card h3 { font-size: 1.18rem; margin: 0.3rem 0 0.6rem; }
.stage-card p { font-size: 0.92rem; color: var(--muted); flex: 1; }
.stage-link {
  margin-top: var(--sp-4);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.stage-card:hover .stage-link { gap: 0.7rem; }

/* ── Stream strip ───────────────────────────────────────────────────── */
.stream-strip {
  margin-top: var(--sp-8);
  background: var(--tint-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.stream-strip-head h3 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.stream-strip-head p { font-size: 0.92rem; color: var(--muted); }
.stream-strip-items { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 0.6rem 1.2rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary-dark);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.stream-chip:hover { transform: translateY(-2px); }
.stream-chip .icon { color: var(--accent-dark); }
.stream-science:hover { border-color: var(--primary); }
.stream-arts:hover { border-color: var(--accent-dark); }
.stream-commerce:hover { border-color: var(--highlight); }

/* ── Stage list (academics page) ────────────────────────────────────── */
.stage-list { display: grid; gap: var(--sp-5); }
.stage-row {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: minmax(min(240px, 100%), 1fr) 1.6fr;
  gap: var(--sp-6);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.stage-row-head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.stage-row-num {
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  /* Solid maroon rather than a faded tint: at this size the number is a
     structural marker, not a background texture. 10.44:1 on white. */
  color: var(--primary);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.stage-row-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--accent);
}
.stage-row-head h3 { font-size: 1.3rem; margin-top: 0.15rem; }
.stage-summary { color: var(--muted); }

/* ── Streams (academics page) ───────────────────────────────────────── */
.stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-6);
}
.stream-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--primary);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.stream-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.stream-card.stream-arts { border-top-color: var(--accent-dark); }
.stream-card.stream-commerce { border-top-color: var(--highlight); }
.stream-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 0;
  background: var(--tint);
  color: var(--primary);
  font-size: 1.3rem;
  margin-bottom: var(--sp-4);
}
.stream-arts .stream-icon { color: var(--accent-dark); }
.stream-commerce .stream-icon { color: var(--highlight); }
.stream-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.stream-tagline { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); font-size: 0.96rem; }
.stream-card > p { font-size: 0.95rem; color: var(--muted); }
.stream-subjects {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.stream-subjects h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--sp-3);
}
.stream-subjects ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.stream-subjects li {
  background: var(--tint);
  border-radius: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ── Approach cards ─────────────────────────────────────────────────── */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.approach-card {
  text-align: center;
  padding: var(--sp-5);
  background: var(--tint);
  border-radius: var(--r-lg);
}
.approach-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--sp-4);
  border-radius: 0;
  background: var(--white);
  color: var(--primary);
  font-size: 1.2rem;
  box-shadow: var(--sh-sm);
}
.approach-card h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.approach-card p { font-size: 0.9rem; color: var(--muted); }

/* ── Timeline ───────────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: rgb(var(--accent-rgb) / 0.3);
}
.timeline-item { position: relative; padding-bottom: var(--sp-6); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: calc(var(--sp-6) * -1);
  top: 6px;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--accent);
  border: 3px solid var(--primary-dark);
}
.timeline-item h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.timeline-item p { font-size: 0.94rem; color: rgba(255, 255, 255, 0.7); }

/* ── Facilities ─────────────────────────────────────────────────────── */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-5);
}
.facility-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.facility-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.facility-media { aspect-ratio: 16 / 10; overflow: hidden; }
.facility-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.facility-card:hover .facility-media img { transform: scale(1.05); }
.facility-body { padding: var(--sp-5); flex: 1; }
.facility-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--tint-warm);
  color: var(--accent-dark);
  font-size: 1.05rem;
  margin-bottom: var(--sp-3);
}
.facility-body h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.facility-body p { font-size: 0.92rem; color: var(--muted); }

.facility-feature-list { display: grid; gap: var(--sp-9); }
.facility-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.facility-feature.is-reversed .facility-feature-media { order: 2; }
.facility-feature-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
}
.facility-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.facility-feature-body h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: var(--sp-3); }
.facility-summary { font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); }
.facility-feature-body > p:last-child { color: var(--muted); }

/* ── Activities ─────────────────────────────────────────────────────── */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-5);
}
.activity-card {
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.activity-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: var(--sp-4);
}
.activity-card h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.activity-card p { font-size: 0.92rem; color: var(--muted); }

.activity-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-6);
}
.activity-feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.activity-feature:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.activity-feature-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.activity-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.activity-feature:hover .activity-feature-media img { transform: scale(1.05); }
.activity-feature-icon {
  position: absolute;
  left: var(--sp-4);
  bottom: calc(var(--sp-4) * -1);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--primary-dark);
  font-size: 1.2rem;
  box-shadow: var(--sh-md);
}
.activity-feature-body { padding: var(--sp-7) var(--sp-5) var(--sp-5); }
.activity-feature-body h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
.activity-feature-body p { font-size: 0.94rem; color: var(--muted); }

/* ── Photo strip ────────────────────────────────────────────────────── */
.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-4);
}
.strip-item {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}
.strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.strip-item:hover img { transform: scale(1.07); }
.strip-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  /* The scrim must be opaque enough BEHIND THE TEXT, not just at the very
     bottom edge — several of these photographs are bright (white sky, pale
     walls) and a gradient that is still transparent where the words sit
     leaves them unreadable. */
  background: linear-gradient(
    to top,
    rgb(var(--primary-dark-rgb) / 0.94) 0%,
    rgb(var(--primary-dark-rgb) / 0.82) 55%,
    rgb(var(--primary-dark-rgb) / 0) 100%
  );
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.strip-light .strip-item { box-shadow: var(--sh-md); }

/* ── Gallery ────────────────────────────────────────────────────────── */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-7);
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 0.55rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover { border-color: var(--accent); color: var(--primary); }
.filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.filter-btn.is-active .icon { color: var(--accent); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
  gap: var(--sp-5);
}
.gallery-item {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.gallery-item[hidden] { display: none; }
.gallery-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gallery-trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.gallery-item:hover .gallery-trigger img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(var(--primary-dark-rgb) / 0.55);
  color: var(--white);
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.gallery-trigger:hover .gallery-overlay,
.gallery-trigger:focus-visible .gallery-overlay { opacity: 1; }
.gallery-item figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}
.gallery-empty { text-align: center; color: var(--muted); padding: var(--sp-8) 0; }

/* ── Lightbox ───────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(4, 14, 32, 0.94); }
.lightbox-inner {
  position: relative;
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  transition: opacity var(--t-fast);
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.lightbox-count { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }

.lightbox-close,
.lightbox-nav {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--accent); color: var(--primary-dark); border-color: var(--accent); }
.lightbox-close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 44px; height: 44px;
}

/* ── Updates: cards, notices, articles ──────────────────────────────── */
.update-list { display: grid; gap: var(--sp-5); }
.update-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

.update-card {
  display: flex;
  gap: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.update-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--accent); }
.update-card[hidden] { display: none; }

.update-date {
  flex-shrink: 0;
  width: 62px;
  text-align: center;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-3) 0;
  align-self: flex-start;
}
.update-day { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.update-mon { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); margin-top: 0.2rem; }
.update-year { display: block; font-size: 0.65rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.1rem; }

.update-body { min-width: 0; flex: 1; }
.update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-bottom: var(--sp-3);
  font-size: 0.8rem;
  color: var(--muted);
}
.update-tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tag-notice { background: rgba(198, 40, 40, 0.1); color: var(--highlight); }
.tag-event { background: rgb(var(--accent-rgb) / 0.18); color: var(--accent-dark); }
.tag-news { background: rgb(var(--primary-light-rgb) / 0.1); color: var(--primary-light); }
.update-pin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--highlight);
}
.update-body h3 { font-size: 1.16rem; margin-bottom: 0.45rem; }
.update-body h3 a { color: inherit; text-decoration: none; }
.update-body h3 a:hover { color: var(--primary-light); }
.update-body p { font-size: 0.93rem; color: var(--muted); }
.update-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-3);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.update-link:hover { gap: 0.7rem; }
.update-empty { text-align: center; color: var(--muted); padding: var(--sp-8) 0; }

.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-7);
}

.feature-post {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  background: var(--primary);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  margin-bottom: var(--sp-8);
}
.feature-post[hidden] { display: none; }
.feature-post h2 { color: var(--white); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--sp-3); }
.feature-post h2 a { color: inherit; text-decoration: none; }
.feature-post h2 a:hover { color: var(--accent-light); }
.feature-post p { margin-bottom: var(--sp-5); }
.feature-post .update-meta { color: rgba(255, 255, 255, 0.6); }
.feature-post .update-tag { background: rgba(255, 255, 255, 0.14); color: var(--accent-light); }
.feature-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.75rem;
}
.feature-post-body { flex: 1; min-width: 0; }
.feature-post-date {
  flex-shrink: 0;
  width: 118px;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-3);
}
.feature-day { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--white); line-height: 1; }
/* --accent, not --accent-light, fell just under 4.5:1 against this panel once
   the palette moved to maroon; the lighter gold clears it comfortably. */
.feature-mon { display: block; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; color: var(--accent-light); margin-top: 0.3rem; }
.feature-year { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); margin-top: 0.2rem; }

.list-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  margin: var(--sp-8) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--line);
}
.list-heading .icon { color: var(--accent-dark); font-size: 0.9em; }

/* Notices */
.notice-board {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.notice-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--primary);
  color: var(--white);
  padding: var(--sp-4) var(--sp-5);
}
.notice-board-head h2 { color: var(--white); font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.notice-board-head h2 .icon { color: var(--accent); font-size: 0.85em; }
.notice-board-head span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }

.notice-list { list-style: none; }
.notice-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast);
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:hover { background: var(--tint); }
.notice-main { flex: 1; min-width: 0; }
.notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-bottom: 0.4rem;
  font-size: 0.79rem;
  color: var(--muted);
}
.notice-main h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.notice-main h3 a { color: inherit; text-decoration: none; }
.notice-main h3 a:hover { color: var(--primary-light); }
.notice-main p { font-size: 0.9rem; color: var(--muted); }
.notice-cta { flex-shrink: 0; }

/* Article */
.article { font-size: 1.05rem; }
.article > p + p { margin-top: var(--sp-4); }
.article h2 { font-size: 1.4rem; margin: var(--sp-7) 0 var(--sp-3); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.article-lede {
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
  padding-left: var(--sp-5);
  border-left: 4px solid var(--accent);
  margin-bottom: var(--sp-6);
}
.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.article-contact {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--tint);
  border-radius: var(--r-md);
  font-size: 0.92rem;
}
.article-contact .icon { color: var(--accent-dark); margin-right: 0.4rem; }
.article address { margin-top: var(--sp-4); line-height: 1.8; }

.article-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.article-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.article-nav-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.article-nav-link span { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); }
.article-nav-link strong { font-family: var(--font-display); font-size: 1rem; color: var(--primary-dark); }
.article-nav-link.is-next { text-align: right; }

/* ── Homepage news layout ───────────────────────────────────────────── */
.news-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.news-main > .btn { margin-top: var(--sp-6); }
.news-aside {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}
.aside-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--sp-4);
}
.aside-heading .icon { color: var(--highlight); font-size: 0.85em; }
.aside-notices { list-style: none; display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.aside-notices li { display: flex; flex-direction: column; gap: 0.2rem; }
.aside-notices time { font-size: 0.75rem; color: var(--muted-light); font-weight: 600; }
.aside-notices a {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  line-height: 1.35;
}
.aside-notices a:hover { color: var(--primary-light); text-decoration: underline; }

.aside-contact {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.aside-contact h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.aside-contact p { font-size: 0.88rem; color: var(--muted); margin-bottom: var(--sp-4); }
.aside-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: var(--sp-4);
}
.aside-phone .icon { font-size: 0.75em; color: var(--accent-dark); }
.aside-phone:hover { color: var(--primary-light); }

/* ── Testimonials ───────────────────────────────────────────────────── */
.testimonials-invite .invite-card {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--sh-md);
}
.invite-quote { font-size: 2rem; color: var(--accent); margin-bottom: var(--sp-4); }
.invite-card h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: var(--sp-4); }
.invite-card p { color: var(--muted); max-width: 60ch; margin-inline: auto; }
.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-6);
}

.testimonial-track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.testimonial-card {
  flex: 0 0 min(420px, 84%);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin: 0;
  box-shadow: var(--sh-sm);
}
.testimonial-quote { font-size: 1.5rem; color: var(--accent); margin-bottom: var(--sp-3); }
.testimonial-card p { font-size: 1rem; color: var(--ink-soft); margin-bottom: var(--sp-5); }
.testimonial-card footer { display: flex; align-items: center; gap: 0.8rem; }
.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 0;
  background: var(--primary);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-card cite { display: block; font-style: normal; font-weight: 700; color: var(--primary-dark); }
.testimonial-relation { font-size: 0.83rem; color: var(--muted); }
.testimonial-controls { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }
.testimonial-btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--primary);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.testimonial-btn:hover { border-color: var(--primary); background: var(--primary); color: var(--white); }

/* ── Areas ──────────────────────────────────────────────────────────── */
.areas-panel {
  background: var(--primary);
  background-image: radial-gradient(circle at 90% 10%, rgb(var(--accent-rgb) / 0.14), transparent 45%);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
}
.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  list-style: none;
  margin-bottom: var(--sp-5);
}
.area-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}
.area-chips li .icon { font-size: 0.72rem; color: var(--accent); }
.areas-note { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; margin-bottom: var(--sp-5); }
.areas-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

.area-chips-light li {
  background: var(--tint-warm);
  border-color: var(--line);
  color: var(--ink-soft);
}
.area-chips-light li .icon { color: var(--accent-dark); }

/* ── Page header ────────────────────────────────────────────────────── */
.page-header {
  background: var(--primary-dark);
  background-image: radial-gradient(circle at 15% 30%, rgb(var(--primary-light-rgb) / 0.6), transparent 55%);
  color: var(--white);
  padding-block: var(--sp-8) var(--sp-9);
  position: relative;
  overflow: hidden;
}
/* The photograph is set inline on the element (see components.js). The scrim
   below keeps the white heading and breadcrumb readable over any photograph,
   including the bright ones. */
.page-header-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-header-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(var(--primary-dark-rgb) / 0.95) 0%,
    rgb(var(--primary-dark-rgb) / 0.88) 45%,
    rgb(var(--primary-rgb) / 0.74) 100%
  );
  z-index: 0;
}
.page-header .container { position: relative; z-index: 1; }
.page-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  color: var(--white);
  margin-top: var(--sp-3);
}
.page-subtitle {
  margin-top: var(--sp-3);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 60ch;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  font-size: 0.84rem;
}
.breadcrumb li { color: rgba(255, 255, 255, 0.6); }
.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--accent); font-weight: 600; }

/* ── Split / vision / values / principal ────────────────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.split-body p + p { margin-top: var(--sp-4); }
.split-media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fact-list {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
.fact-list dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.2rem;
}
.fact-list dd { margin: 0; font-weight: 600; color: var(--primary-dark); font-size: 0.96rem; }

.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-6);
}
.vm-card {
  padding: var(--sp-7);
  border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.vm-vision { background: var(--primary); color: rgba(255, 255, 255, 0.82); }
.vm-vision h2 { color: var(--white); }
.vm-mission { background: var(--tint-warm); border: 1px solid var(--line); }
.vm-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  font-size: 1.3rem;
  margin-bottom: var(--sp-4);
}
.vm-vision .vm-icon { background: rgb(var(--accent-rgb) / 0.18); color: var(--accent); }
.vm-mission .vm-icon { background: var(--primary); color: var(--accent); }
.vm-card h2 { font-size: 1.6rem; margin-bottom: var(--sp-4); }
.vm-mission ul { list-style: none; display: grid; gap: 0.7rem; }
.vm-mission li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.96rem; }
.vm-mission li .icon {
  color: var(--accent-dark);
  background: var(--white);
  width: 22px; height: 22px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 0;
  flex-shrink: 0;
  margin-top: 0.22rem;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-5);
}
.value-card {
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  transition: background var(--t-fast), transform var(--t-fast);
}
.value-card:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-3px); }
.value-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.value-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.value-card p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); }

.principal-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.principal-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tint);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  border: 6px solid var(--white);
  outline: 1px solid var(--line);
}
.principal-portrait img { width: 100%; height: 100%; object-fit: cover; }
.principal-placeholder { font-size: 4rem; color: var(--muted-light); }
.principal-name {
  margin-top: var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.principal-name strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary-dark); }
.principal-role { font-size: 0.85rem; color: var(--muted); }
.pending-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--tint);
  border: 1px dashed var(--line);
  border-radius: 0;
  padding: 0.25rem 0.75rem;
  margin-inline: auto;
}
.principal-body { position: relative; }
.principal-quote { font-size: 2.2rem; color: var(--accent); margin-bottom: var(--sp-3); }
.principal-body p + p { margin-top: var(--sp-4); }
.principal-signoff {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
}

/* ── Admissions ─────────────────────────────────────────────────────── */
.admission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-5);
}
.reason-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.reason-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
.reason-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--tint-warm);
  color: var(--accent-dark);
  font-size: 1.1rem;
  margin-bottom: var(--sp-4);
}
.reason-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.reason-card p { font-size: 0.92rem; color: var(--muted); }

.process-list { list-style: none; display: grid; gap: var(--sp-4); counter-reset: none; }
.process-step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  position: relative;
}
.process-num {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  /* Square, not a circle — nothing in this system is round. */
  border-radius: 0;
  background: var(--primary);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.process-body { flex: 1; }
.process-icon { color: var(--accent-dark); margin-right: 0.5rem; }
.process-body h3 { display: inline; font-size: 1.14rem; }
.process-body p { margin-top: 0.4rem; font-size: 0.94rem; color: var(--muted); }

.class-list { list-style: none; display: grid; gap: var(--sp-3); }
.class-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.class-label { font-family: var(--font-display); font-weight: 600; color: var(--primary-dark); }
.class-note { font-size: 0.83rem; color: var(--muted); text-align: right; }

.info-panel {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  background: var(--primary);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.info-panel h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 0.5rem; }
.info-panel a { color: var(--accent-light); font-weight: 700; }
.info-panel-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 0;
  background: rgb(var(--accent-rgb) / 0.16);
  color: var(--accent);
  font-size: 1.2rem;
}
.info-panel-soft {
  margin-top: var(--sp-7);
  background: var(--tint-warm);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.info-panel-soft h3 { color: var(--primary-dark); }
.info-panel-soft a { color: var(--primary); }
.info-panel-soft .info-panel-icon { background: var(--white); color: var(--accent-dark); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-list {
  display: grid;
  gap: var(--sp-3);
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-item h3 { margin: 0; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: none;
  border: 0;
  padding: var(--sp-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-dark);
  transition: background var(--t-fast);
}
.faq-question:hover { background: var(--tint); }
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--accent-dark);
  border-radius: 0;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.faq-icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq-icon::after { top: 0; left: 9px; width: 2px; height: 20px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 var(--sp-5) var(--sp-5); }
.faq-answer p { font-size: 0.96rem; color: var(--muted); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  box-shadow: var(--sh-md);
}
.form-aside {
  background: var(--tint-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.form-aside h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.form-aside p { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--sp-4); }
.form-aside hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
.form-aside address { font-size: 0.92rem; line-height: 1.7; margin-bottom: var(--sp-4); }
.form-aside .btn + .btn { margin-top: var(--sp-3); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.form-field { display: flex; flex-direction: column; grid-column: 1 / -1; }
.form-field.is-half { grid-column: span 1; }

.form-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.form-field .req { color: var(--highlight); }
.form-field .optional { font-weight: 400; color: var(--muted-light); font-size: 0.82rem; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 0.97rem;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  /* iOS zooms in on focus when the font-size is under 16px. */
  min-height: 46px;
}
.form-field textarea { resize: vertical; min-height: 86px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgb(var(--primary-light-rgb) / 0.14);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--highlight);
  background: rgb(var(--highlight-rgb) / 0.06);
}
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.14); }

.field-help { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }
.field-error {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--highlight);
  margin-top: 0.3rem;
  display: none;
}
.form-field.has-error .field-error { display: block; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  margin-top: var(--sp-4);
  font-size: 0.85rem;
  color: var(--muted);
}
.form-note .req { color: var(--highlight); font-weight: 700; }

.form-submit {
  margin-top: var(--sp-5);
  position: relative;
}
.btn-spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  /* Stays round while everything else is squared: this element rotates, and
     a spinning square reads as a rendering glitch, not a loading state. */
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.site-form.is-sending .btn-spinner { display: block; }
.site-form.is-sending .form-submit { opacity: 0.8; pointer-events: none; }

.form-status {
  margin-top: var(--sp-4);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
}
.form-status:not(:empty) {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgb(var(--highlight-rgb) / 0.06);
  border-left: 4px solid var(--highlight);
  color: var(--ink-soft);
  font-weight: 500;
}
.form-status a { color: var(--primary); font-weight: 700; }
.form-status .status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.form-result { text-align: center; padding: var(--sp-7) var(--sp-4); }
.form-result-icon { font-size: 3rem; color: var(--whatsapp); margin-bottom: var(--sp-4); }
.form-result h3 { font-size: 1.4rem; margin-bottom: var(--sp-3); }
.form-result p { color: var(--muted); margin-bottom: var(--sp-5); }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(var(--primary-dark-rgb) / 0.6); backdrop-filter: blur(3px); }
.modal-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  animation: modalIn 260ms var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.modal-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.modal-header h2 { color: var(--white); font-size: 1.4rem; }
.modal-close {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 0;
  color: var(--white);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.modal-close:hover { background: var(--accent); color: var(--primary-dark); }
.modal-body { padding: var(--sp-6); }

/* ── Floating actions ───────────────────────────────────────────────── */
.floating-actions {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 850;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sh-lg);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover { transform: translateY(-2px) scale(1.02); }
.fab .icon { font-size: 1.05rem; }
.fab-whatsapp { background: var(--whatsapp); color: var(--white); }
.fab-call { background: var(--white); color: var(--primary); border: 1px solid var(--line); }
.fab-enquire { background: var(--accent); color: var(--primary-dark); }

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta-band {
  background: var(--primary-dark);
  background-image: radial-gradient(circle at 80% 20%, rgb(var(--accent-rgb) / 0.16), transparent 50%);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--sp-9);
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: 0.5rem; }
.cta-band p { max-width: 52ch; }
.cta-band-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ── Error page ─────────────────────────────────────────────────────── */
.error-section {
  background: var(--primary-dark);
  background-image: radial-gradient(circle at 20% 25%, rgb(var(--primary-light-rgb) / 0.6), transparent 55%);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--sp-10);
  min-height: 60vh;
  display: grid;
  align-items: center;
}
.error-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.error-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 700;
  line-height: 1;
  /* 0.22 read as a barely-there smudge and fell below the 3:1 large-text
     threshold. 0.55 measures 3.57:1 on the navy and still reads as a
     watermark rather than competing with the heading. */
  color: rgb(var(--accent-rgb) / 0.55);
}
.error-inner h1 { color: var(--white); font-size: clamp(1.7rem, 4vw, 2.6rem); margin-top: calc(var(--sp-4) * -1); }
.error-lede { margin: var(--sp-4) auto var(--sp-7); max-width: 54ch; }
.error-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.error-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--sp-3);
  text-align: left;
}
.error-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.error-link:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--accent); }
.error-link-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgb(var(--accent-rgb) / 0.15);
  color: var(--accent);
}
.error-link strong { display: block; font-family: var(--font-display); color: var(--white); font-size: 1rem; }
.error-link span span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.error-help { margin-top: var(--sp-7); font-size: 0.92rem; }
.error-help a { color: var(--accent); font-weight: 700; }

/* ── Site map page ──────────────────────────────────────────────────── */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-7);
}
.sitemap-col h2 {
  font-size: 1.2rem;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent);
  margin-bottom: var(--sp-4);
}
.sitemap-list { list-style: none; display: grid; gap: 0.55rem; }
.sitemap-list ul { list-style: none; margin: 0.5rem 0 0.6rem 1rem; display: grid; gap: 0.45rem; }
.sitemap-list a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.sitemap-list > li > a { font-weight: 700; color: var(--primary-dark); }
.sitemap-list a:hover { color: var(--primary-light); text-decoration: underline; }

/* ── Contact cards / map ────────────────────────────────────────────── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-5);
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.contact-icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 0;
  background: var(--tint-warm);
  color: var(--accent-dark);
  font-size: 1.15rem;
  margin-bottom: var(--sp-4);
}
.contact-card h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.contact-card p { font-size: 0.94rem; color: var(--muted); }
.contact-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-4);
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.contact-action:hover { gap: 0.7rem; }

.map-block {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.map-frame { min-height: 420px; background: var(--tint); }
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; }
.map-aside { padding: var(--sp-6); background: var(--white); }
.map-aside h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; margin-bottom: var(--sp-4); }
.map-aside h3 .icon { color: var(--accent-dark); font-size: 0.85em; }
.map-aside address { line-height: 1.8; margin-bottom: var(--sp-4); }
.map-note { font-size: 0.88rem; color: var(--muted); margin-bottom: var(--sp-5); }
.map-actions { display: grid; gap: var(--sp-3); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.66);
  padding-block: var(--sp-9) var(--sp-5);
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr;
  gap: var(--sp-7) var(--sp-6);
  padding-bottom: var(--sp-8);
}
.footer-logo { display: flex; align-items: center; gap: 0.8rem; margin-bottom: var(--sp-4); }
.footer-logo img { width: 52px; height: 52px; }
.footer-school-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.footer-school-hindi {
  display: block;
  font-family: var(--font-deva);
  font-size: 0.95rem;
  color: var(--accent);
  margin-top: 0.3rem;
  /* Devanagari sits taller than Latin; the default line-height clips the
     matras above the headline. */
  line-height: 1.7;
}
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-light);
  margin-bottom: var(--sp-3);
}
.footer-about { font-size: 0.9rem; line-height: 1.7; }

.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.footer-links,
.footer-contact { list-style: none; display: grid; gap: 0.65rem; }
.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-links a:hover { color: var(--accent); padding-left: 5px; }

.footer-contact li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.6; }
.footer-contact .icon { color: var(--accent); margin-top: 0.28rem; flex-shrink: 0; width: 15px; text-align: center; }
.footer-contact a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer-contact a:hover { color: var(--accent); text-decoration: underline; }

.social-links { display: flex; gap: 0.6rem; margin-top: var(--sp-5); }
.social-link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social-link:hover { background: var(--accent); color: var(--primary-dark); transform: translateY(-2px); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal { display: flex; gap: var(--sp-5); list-style: none; flex-wrap: wrap; }
.footer-legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }

/* ── Reveal on scroll ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── ≤ 1200px ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* The .nav-link override that used to sit here made links LARGER than the
     current base (0.9rem against 0.75rem), widening the nav to 855px right at
     the width where it has least room — which is what pushed "Apply Now" off
     the container. It was tuned for the previous, bigger type scale. */
  .footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); }
}

/* ── ≤ 1210px : collapse the desktop nav ────────────────────────────── */
/* Raised from 1024px. Measured: logo (370) + gap (12) + nav row (755) = 1137,
   plus 48px of container padding = 1185px of content needed. A 1200px window
   only offers ~1185px once the scrollbar is subtracted, which put the CTA 2px
   past the container edge — so the drawer holds until 1211px. This is also
   what fixed the school's name wrapping in the header: at the old 1024px
   breakpoint the nav left the logo too little room and flexbox crushed it. */
@media (max-width: 1210px) {
  /* The header is still 40 + 88 = 128px here; only the nav collapses. */

  .menu-toggle { display: block; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-6) var(--sp-5) var(--sp-9);
    overflow-y: auto;
    box-shadow: var(--sh-xl);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    z-index: 1000;
    visibility: hidden;
  }
  .site-nav.is-open { transform: none; visibility: visible; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgb(var(--primary-dark-rgb) / 0.5);
    opacity: 0;
    transition: opacity var(--t);
    z-index: 990;
  }
  .nav-backdrop[hidden] { display: none; }
  .nav-backdrop.is-open { opacity: 1; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav-item.has-dropdown { position: relative; }

  .nav-link {
    padding: 0.95rem 0.5rem;
    font-size: 1rem;
    border-radius: 0;
    justify-content: flex-start;
  }
  .nav-link.active::after { display: none; }
  .nav-link.active { color: var(--primary); background: var(--tint); }
  .nav-caret { display: none; }

  .dropdown-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background: none;
    border: 0;
  }
  .dropdown-toggle::before,
  .dropdown-toggle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background: var(--muted);
    border-radius: 0;
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .dropdown-toggle::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
  .dropdown-toggle::after { width: 2px; height: 13px; transform: translate(-50%, -50%); }
  .dropdown-toggle[aria-expanded="true"]::after { opacity: 0; }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    background: var(--tint);
    margin: 0 0 var(--sp-3) var(--sp-4);
    padding: var(--sp-2);
    display: none;
  }
  .nav-item.is-open > .dropdown-menu { display: block; }
  .nav-item:hover > .dropdown-menu { display: none; }
  .nav-item.is-open:hover > .dropdown-menu { display: block; }

  .nav-cta { margin-top: var(--sp-5); width: 100%; padding-block: 0.9rem; }

  body.nav-open { overflow: hidden; }

  /* Layout */
  .hero-inner { gap: var(--sp-7); padding-block: var(--sp-8); min-height: min(72vh, 620px); }
  .welcome-grid,
  .split-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .welcome-media { order: -1; }
  .news-layout { grid-template-columns: 1fr; }
  .news-aside { position: static; }
  .form-layout { grid-template-columns: 1fr; }
  .principal-grid { grid-template-columns: 1fr; }
  .principal-aside { max-width: 280px; margin-inline: auto; }
  .map-block { grid-template-columns: 1fr; }
  .stage-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .facility-feature { grid-template-columns: 1fr; gap: var(--sp-5); }
  .facility-feature.is-reversed .facility-feature-media { order: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── ≤ 768px ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* header-top 36 + header-main 72 = 108px (measured). */
  :root { --header-h: 108px; }

  body { font-size: 1rem; }
  .section { padding-block: var(--sp-8); }

  .hide-sm { display: none !important; }
  .header-top-inner { justify-content: center; min-height: 36px; font-size: 0.8rem; }
  .topbar-tag { display: none; }
  .header-main-inner { min-height: 72px; }
  .logo-img, .logo-fallback { width: 46px; height: 46px; }
  .logo-sub { font-size: 0.62rem; letter-spacing: 0.1em; }

  .ticker-all { display: none; }

  .quicklinks { margin-top: 0; padding-top: var(--sp-6); }
  .glance-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) 0; }
  .glance-item:nth-child(odd) { border-left: 0; }
  .glance-item:nth-child(3) { border-left: 0; }

  /* Full width on phones; the grid gap already supplies the space that the
     old absolutely-positioned card needed a margin for. */
  .hero-card {
    max-width: none;
    justify-self: stretch;
  }
  .hero-actions .btn { flex: 1 1 auto; }

  .stream-strip { flex-direction: column; align-items: flex-start; }

  .feature-post { flex-direction: column-reverse; align-items: flex-start; padding: var(--sp-6); }
  .feature-post-date { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; padding: var(--sp-3); }
  .feature-day, .feature-mon, .feature-year { font-size: 1.2rem; margin: 0; }
  .feature-day { font-size: 1.6rem; }

  .notice-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .notice-cta { width: 100%; }

  .update-card { gap: var(--sp-4); }
  .update-date { width: 54px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-field.is-half { grid-column: 1 / -1; }
  .form-card { padding: var(--sp-5); }

  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1 1 auto; }

  .article-nav-link.is-next { text-align: left; }

  /* Keep the floating buttons from covering content on a phone. */
  .floating-actions {
    right: var(--sp-3);
    bottom: var(--sp-3);
    flex-direction: row;
  }
  .fab { padding: 0.75rem; border-radius: 50%; width: 48px; height: 48px; justify-content: center; }
  .fab-label { display: none; }

  .lightbox-inner { width: 96vw; gap: 0; }
  .lightbox-nav {
    position: absolute;
    top: auto;
    bottom: 4px;
    width: 44px; height: 44px;
  }
  .lightbox-prev { left: 12%; }
  .lightbox-next { right: 12%; }
  .lightbox-figure img { max-height: 62vh; }
  .lightbox-figure { padding-bottom: var(--sp-8); }

  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── ≤ 560px ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .container { padding-inline: var(--sp-4); }

  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--sp-3); }
  .gallery-item figcaption { font-size: 0.78rem; padding: var(--sp-2) var(--sp-3); }
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .update-grid { grid-template-columns: 1fr; }
  .areas-panel, .invite-card { padding: var(--sp-6) var(--sp-4); }
  .info-panel { flex-direction: column; gap: var(--sp-4); }
  .process-step { flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
  .class-list li { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .class-note { text-align: left; }
  .modal-body { padding: var(--sp-5) var(--sp-4); }
  .modal-header { padding: var(--sp-4) var(--sp-5); }
  .modal-header h2 { font-size: 1.2rem; }
  .stage-row { padding: var(--sp-5); }
  .stage-row-num { display: none; }
  .invite-actions .btn,
  .admission-actions .btn,
  .error-actions .btn { width: 100%; }
}

/* ── ≤ 400px : the narrowest phones ─────────────────────────────────── */
@media (max-width: 400px) {
  /* Header stays 108px — the 72px min-height still governs. */
  body { font-size: 0.97rem; }

  .header-main-inner { gap: var(--sp-3); }
  .logo { gap: 0.5rem; }
  .logo-img, .logo-fallback { width: 38px; height: 38px; }
  .logo-sub { font-size: 0.55rem; }
  /* Stays at the 44px minimum tap target even on the narrowest phones. */
  .menu-toggle { width: 44px; height: 44px; }

  .header-top-inner { font-size: 0.76rem; }

  .hero h1 { font-size: 2.55rem; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: 1rem 1.2rem; font-size: 0.8rem; }

  .glance-grid { grid-template-columns: 1fr; }
  .glance-item { border-left: 0 !important; }
  .glance-item + .glance-item { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--sp-4); }

  .gallery-grid { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 1.7rem; }
  .section-title::after { height: 5px; width: 48px; margin-top: var(--sp-4); }
  .stage-row-num { font-size: 2.4rem; }
  .form-card, .form-aside { padding: var(--sp-4); }
  .quicklink { padding: var(--sp-4); gap: var(--sp-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .lightbox-prev { left: 4%; }
  .lightbox-next { right: 4%; }
}

/* ── Short viewports (landscape phones) ─────────────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .hero-inner { padding-block: var(--sp-6); }
  .modal-dialog { max-height: 96vh; }
  .lightbox-figure img { max-height: 58vh; }
}

/* ── Very wide screens ──────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .floating-actions, .ticker,
  .cta-band, .modal, .lightbox, .skip-link, .gallery-filters { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: underline; color: #000; }
  .section { padding-block: 1rem; }
}

/* ── ≤ 480px : the header mark swaps to the short form ───────────────────
   The school's full name cannot hold a single legible line below roughly
   460px, and it must never wrap or break mid-word, so its own abbreviation
   takes over. The link's aria-label still announces the full name. */
@media (max-width: 480px) {
  .logo-name-full { display: none; }
  .logo-name-short { display: inline; }
  .logo-name { font-size: 1.05rem; letter-spacing: 0.01em; }
}

/* Notices added through the admin panel have no generated detail page, so
   their full text is disclosed inline rather than linked. */
.notice-more { margin-top: var(--sp-3); }
.notice-more > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--primary);
}
.notice-more > summary:hover { color: var(--ink); }
.notice-more[open] > summary { margin-bottom: var(--sp-3); }
.notice-more p + p { margin-top: var(--sp-3); }

/* The Managing Director block mirrors the Principal's, with the portrait on
   the opposite side so the two leadership sections alternate down the page. */
.principal-grid.is-reversed .principal-aside { order: 2; }
.principal-grid.is-reversed .principal-body { order: 1; }
@media (max-width: 900px) {
  .principal-grid.is-reversed .principal-aside,
  .principal-grid.is-reversed .principal-body { order: 0; }
}

/* ── Staff ──────────────────────────────────────────────────────────── */
.staff-group + .staff-group { margin-top: var(--sp-9); }
.staff-group-title {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid var(--accent);
  margin-bottom: var(--sp-6);
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-5);
}
.staff-grid > * { min-width: 0; }

.staff-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--primary);
}
.staff-portrait {
  aspect-ratio: 1;
  background: var(--tint);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.staff-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Shown when a member has no photograph yet — better than a broken frame or
   a stock silhouette, and it keeps the grid even. */
.staff-initials {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.02em;
  color: var(--primary);
  background: var(--tint-warm);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.staff-detail { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.staff-detail h3 { font-size: 1rem; line-height: 1.25; }
.staff-meta {
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 0.35rem;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-4); }
  .staff-detail { padding: var(--sp-3); }
}

/* Developer credit, pinned to the bottom-right of the footer.
   margin-left:auto pushes it past the legal links on a wide row; when the
   row wraps on narrow screens it falls to its own full-width line. */
.footer-credit {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
}
.footer-credit a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.footer-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 768px) {
  .footer-credit { margin-left: 0; width: 100%; text-align: left; }
}