/* ==========================================================================
   Asumbi Teachers Training College
   Design tokens and components — see design.md for the full spec.
   Signature shape: three rounded corners + a square bottom-left ("leaf").
   ========================================================================== */

:root {
  /* 60 — maroon */
  --maroon: #8B1A1F;
  --maroon-dark: #6E1318;
  --maroon-deep: #3E0A0D;
  --maroon-banner: #4A0C10;
  --maroon-tint: #FAF5F5;
  --maroon-tint-2: #F3E3E4;
  --maroon-tint-3: #F0DADB;
  --on-maroon: #F0D6D8;
  --maroon-hover-bg: #F7ECEC;

  /* 30 — green */
  --green: #2E6B30;
  --green-dark: #245626;
  --green-tint: #E8F1E8;
  --green-pale: #BFE0C1;
  --on-green: #DDEEDD;

  /* 10 — neutral. Warm greys, not pure ones: every one of these carries a
     little red so the page reads warm rather than clinical. The brand maroon
     and green are untouched. */
  --ink: #1D1917;
  --ink-soft: #4D4442;
  --muted: #6E6462;
  --border: #EDE7E4;
  --alt-bg: #F7F3F0;

  --wrap: 1240px;
  --gutter: 24px;
  /* Landscape on a notched phone eats into the side gutters, so every
     content edge pads out to whichever is larger. Needs viewport-fit=cover
     in the viewport meta or these resolve to 0. */
  --gutter-l: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));

  /* Two layers each — a tight contact shadow under a diffuse one — so a card
     reads as a real surface resting on the page rather than a flat rectangle
     with a blur behind it. Tinted warm, never pure black. */
  --shadow-card: 0 1px 2px rgba(61, 42, 38, .04), 0 10px 30px rgba(61, 42, 38, .06);
  --shadow-lift: 0 2px 6px rgba(139, 26, 31, .07), 0 20px 44px rgba(139, 26, 31, .13);
  --shadow-float: 0 2px 4px rgba(61, 42, 38, .04), 0 18px 40px rgba(61, 42, 38, .08);
  /* Sanctioned curves — built-in CSS easings are too weak for UI. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Duration scale. Anything not on this scale is deliberate and commented. */
  --dur-press: 120ms;    /* :active feedback */
  --dur-hover: 160ms;    /* colour and background hovers */
  --dur-panel: 180ms;    /* dropdown entrances, card and border hovers */
  --dur-fade: 200ms;     /* opacity-only fades */
  --dur-expand: 240ms;   /* accordion and drawer-panel height */
  --dur-drawer: 280ms;   /* the drawer itself */
  /* Not --dur-panel: the nested flyout is deliberately faster than its
     180ms parent panel so it reads as attached to it. */
  --dur-flyout: 150ms;

  /* Exit durations. Opening is the user deciding; closing is the system
     responding, and the system should never dawdle. The base rule carries the
     exit timing, the .is-open rule the enter timing. */
  --dur-exit-panel: 120ms;   --dur-exit-flyout: 110ms;
  --dur-exit-fade: 140ms;    --dur-exit-expand: 180ms;
  --dur-exit-drawer: 220ms;

  /* Type scale. Named for the pixel value each replaced, because this is a
     mechanical migration; consolidating the 21 steps into a semantic scale is
     a separate, visual change. */
  --text-11: 0.6875rem;  --text-12: 0.75rem;  --text-13: 0.8125rem;
  --text-14: 0.875rem;  --text-15: 0.9375rem;  --text-16: 1rem;
  --text-17: 1.0625rem;  --text-18: 1.125rem;  --text-19: 1.1875rem;
  --text-20: 1.25rem;  --text-21: 1.3125rem;  --text-22: 1.375rem;
  --text-24: 1.5rem;  --text-26: 1.625rem;  --text-28: 1.75rem;
  --text-30: 1.875rem;  --text-32: 2rem;  --text-34: 2.125rem;
  --text-40: 2.5rem;  --text-44: 2.75rem;  --text-54: 3.375rem;
}

/* --------------------------------------------------------- reset / baseline */

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

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Not pure white. A faint warm ground means the white cards actually read as
     surfaces resting on the page instead of dissolving into it — figure and
     ground, which is most of what makes an interface feel calm. */
  background: #FDFBFA;
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  /* 1rem, not 16px: a reader who has raised their browser's default text size
     gets bigger body copy instead of being overridden back down. */
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x: hidden here. It makes <body> a scroll container, which both
     weakens position: sticky and makes the header's backdrop-filter sample the
     wrong backdrop. Every decorative element that bleeds past the viewport
     (.stats__ring, .cta__blob, .info-card__mark) is clipped by its own
     overflow: hidden parent instead. */
}

img { max-width: 100%; display: block; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--maroon); text-decoration: none; transition: color var(--dur-hover) ease; }

/* Every tappable skips the 300ms double-tap wait… */
button, a, [role="button"] { touch-action: manipulation; }

/* …but only genuine CONTROLS opt out of selection. A link is not automatically
   a control: the footer's email and phone are links people need to long-press
   and copy, and `user-select: none` on every <a> silently took that away. */
button, [role="button"], .btn, .tab, .filter, .nav__link, .nav__clink,
.nav__slink, .social, .footer__socials a, .hero__dot, .hero__arrow,
.drawer__toggle, .drawer__close, .burger, .acc__head {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 16px is the floor that stops iOS zooming on focus; above it, follow the
   reader's preference rather than pinning every field to 16px. */
input, textarea, select { font: inherit; font-size: max(1rem, 16px); }

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

/* Reduced motion means fewer and gentler, not none. Fades and colour changes
   stay — they carry meaning. Everything that travels across the screen stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade-in { animation: fade-plain 200ms ease both; }

  /* Press feedback drops the scale but keeps the colour change, so touch
     users still get an acknowledgement. */
  .btn:active, .pcard:hover,
  .tab:active, .filter:active, .hero__arrow:active,
  .burger:active, .drawer__close:active, .drawer__toggle:active,
  .newsletter button:active, .pcard:active, .download:active { transform: none; }
  .tab:active, .filter:active { background: #E0E0E0; }

  .drawer__toggle i { transition: none; }
  .drawer__panel { transition: none; }
  .newsletter__note { transform: none; transition: opacity 160ms ease; }

  .nav__panel, .nav__sub,
  .nav__item--flip > .nav__panel, .nav__item--flip .nav__sub {
    transform: none;
    transition: opacity 140ms ease, visibility 140ms;
  }

  /* The drawer appears in place rather than sliding in from the edge. */
  .drawer { transform: none; opacity: 0; transition: opacity 180ms ease, visibility 180ms; }
  .drawer.is-open { opacity: 1; }

  .acc__panel { transition: none; }
  .acc__body { transition: opacity 140ms ease; }
  .events__past { transition: none; }

  /* The dissolve is opacity-only already, so it stays — just shorter. */
  .hero__slide { transition: opacity 0s linear 200ms, visibility 0s linear 200ms; }
  .hero__slide.is-active { transition: opacity 200ms ease, visibility 0s; }

  /* The dot's width change nudges its neighbours sideways — snap it, and let
     the colour carry the state instead. */
  .hero__dot { transition: background 160ms ease; }

  /* The stagger is decoration, not comprehension — drop it entirely rather
     than reduce it, and make certain nothing is left hidden. */
  [data-stagger].is-armed > *,
  [data-stagger].is-in > * { opacity: 1; visibility: visible; transform: none; animation: none; }
}

/* Translucency is a preference, not a given. Frost the materials solid rather
   than dropping the blur and leaving a half-transparent surface behind. */
@media (prefers-reduced-transparency: reduce) {
  .header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero__arrow {
    background: rgba(74, 12, 16, .75);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Near-solid surfaces with defined borders, and muted text pushed up from
   5.3:1 to 8.6:1 against white. */
@media (prefers-contrast: more) {
  :root { --muted: #4A4A4A; }
  .header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 2px solid var(--ink);
  }
  .hero__arrow { background: rgba(74, 12, 16, .85); border-color: #fff; }
  .btn--outline { border-width: 3px; }
  .acc, .tender, .step { border-color: var(--muted); }
  .ph { border-color: var(--maroon); }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--maroon); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.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;
}

/* ------------------------------------------------------- the "leaf" corners */

.leaf-10 { border-radius: 10px 10px 10px 0; }
.leaf-12 { border-radius: 12px 12px 12px 0; }
.leaf-14 { border-radius: 14px 14px 14px 0; }
.leaf-16 { border-radius: 16px 16px 16px 0; }
.leaf-18 { border-radius: 18px 18px 18px 0; }
.leaf-20 { border-radius: 20px 20px 20px 0; }
.leaf-24 { border-radius: 24px 24px 24px 0; }
.leaf-28 { border-radius: 28px 28px 28px 0; }
.leaf-32 { border-radius: 32px 32px 32px 0; }
.leaf-40 { border-radius: 40px 40px 40px 0; }

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }

.h1 {
  font-size: clamp(var(--text-40), 6vw, 4.25rem);
  line-height: 1.04; font-weight: 800; letter-spacing: -.03em; text-wrap: balance;
}
.h2 {
  font-size: clamp(var(--text-32), 4vw, 2.875rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.025em; text-wrap: balance;
}
.h3 { font-size: var(--text-21); font-weight: 700; line-height: 1.3; }
.accent { color: var(--maroon); }
.accent-pale { color: var(--green-pale); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.625rem;
  color: var(--green); font-weight: 600; font-size: var(--text-14);
  letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 2px solid var(--green); padding-bottom: 0.3125rem;
}
.eyebrow i { font-size: var(--text-18); }
.eyebrow--ondark { color: var(--green-pale); border-bottom-color: var(--green-pale); }

.lead { color: var(--muted); font-size: var(--text-17); line-height: 1.75; }
.meta { color: var(--muted); font-size: var(--text-14); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem;
  font-weight: 600; font-size: var(--text-15); letter-spacing: .07em; text-transform: uppercase;
  padding: 1rem 1.75rem; border: 0; cursor: pointer;
  border-radius: 28px 28px 28px 0;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, box-shadow var(--dur-hover) ease,
              transform var(--dur-press) var(--ease-out);
}
.btn i { font-size: var(--text-17); }
.btn:active { transform: scale(.975); }
.btn--block { width: 100%; }
.btn--sm { padding: 0.875rem 1.375rem; font-size: var(--text-14); border-radius: 24px 24px 24px 0; }

.btn--primary { background: var(--maroon); color: #fff; box-shadow: 0 8px 20px rgba(139, 26, 31, .25); }
.btn--secondary { background: var(--green); color: #fff; }
.btn--ondark { background: #fff; color: var(--maroon); }
.btn--ondark-green { background: #fff; color: var(--green); font-weight: 700; }
.btn--outline { background: transparent; border: 2px solid var(--green); color: var(--green); padding: 0.875rem 1.625rem; }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--green); }
  .btn--primary:hover { background: var(--maroon-dark); color: #fff; }
  .btn--secondary:hover { background: var(--green-dark); color: #fff; }
  .btn--ondark:hover { background: var(--maroon-hover-bg); color: var(--maroon); }
  .btn--ondark-green:hover { background: #F1F7F1; color: var(--green); }
  .btn--outline:hover { background: var(--green-tint); color: var(--green); }
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--maroon);
}

/* ---------------------------------------------------------- press feedback */
/* `html` clears -webkit-tap-highlight-color, so :active is the only
   acknowledgement a touch device gets. Every tappable needs one, and none of
   this is gated behind (hover: hover) — touch is exactly who it serves. */

.tab:active, .filter:active, .hero__arrow:active,
.burger:active, .drawer__close:active, .drawer__toggle:active,
.newsletter button:active { transform: scale(.95); }

/* Card-sized targets take a lighter press — .95 on a whole card reads as the
   layout flexing rather than a control responding. */
.pcard:active, .download:active { transform: scale(.99); }

/* Full-width rows get colour instead of scale, for the same reason. */
.acc__head:active { background: rgba(28, 28, 28, .05); }
.acc--faq.is-open .acc__head:active { background: var(--maroon-dark); }
.acc--sm.is-open .acc__head:active { background: var(--maroon-tint-2); }
.drawer__top > a:active { background: var(--maroon-tint); }
.drawer__sub a:active { background: var(--maroon-tint-2); }

/* The dots are too small for scale to register; brighten them instead. */
.hero__dot:active { background: #fff; }

/* ------------------------------------------------------------------ top bar */

.topbar { display: flex; flex-wrap: wrap; color: #fff; font-size: var(--text-15); }
.topbar__left {
  flex: 1 0 auto; min-width: 250px;
  max-width: calc((100% - var(--wrap)) / 2 + 360px);
  background: var(--maroon);
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 8px 16px 8px 20px;
}
.topbar__follow { font-weight: 600; white-space: nowrap; }
.social {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  flex: none;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.topbar__right {
  flex: 999 1 0; min-width: 0; background: var(--green);
  display: flex; flex-direction: row-reverse; flex-wrap: wrap;
  justify-content: flex-start; align-items: center;
  font-size: var(--text-14);
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + 2px)) 0 12px;
}
.topbar__item {
  display: flex; align-items: center; gap: 9px; padding: 0 14px; min-height: 48px;
  border-left: 1px solid rgba(255, 255, 255, .2); white-space: nowrap;
}
.topbar__right .topbar__item:first-child { border-left: 0; }
.topbar__item i { color: #F3C9CC; font-size: var(--text-17); }
/* Phone and email are links (tap to call / write) but keep the strip's text
   colour; the global maroon link colour would vanish on the green. */
a.topbar__item { color: inherit; }

@media (hover: hover) and (pointer: fine) {
  .social:hover { background: #fff; color: var(--maroon); }
  a.topbar__item:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 51.25em) {
  .topbar { display: none; }
}

/* ------------------------------------------------------------------- header */

/* A floating translucent layer that content scrolls underneath, rather than an
   opaque strip that consumes the top of the page. The white stays fairly solid
   at .82 because the maroon wordmark has to stay legible when the maroon hero
   passes beneath it. */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: none;
  transition: box-shadow var(--dur-fade) ease;
}

/* Scroll edge effect: the separation appears only once content is actually
   underneath the chrome, not as a permanent divider. */
.header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: #fff; }
}

/* Section anchors (#/admissions/fees → #sec-fees). Land clear of the sticky
   header rather than underneath it. They take focus so keyboard and screen-
   reader users arrive where the link pointed, but a whole section wearing a
   focus ring would read as a selection, not a destination. */
[id^="sec-"] { scroll-margin-top: 6.5rem; }
[id^="sec-"]:focus { outline: none; }

/* 1px probe sitting in flow immediately above the header, so it leaves the
   viewport at exactly the moment the header becomes sticky — not at the first
   pixel of scroll, which is what an absolutely-positioned probe would do while
   the top bar is still between them. The negative margin cancels its height. */
.scroll-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.header__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--gutter-r) 14px var(--gutter-l);
  display: flex; align-items: center; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: none; }
.brand img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: var(--text-20); letter-spacing: -.01em; color: var(--maroon); }
.brand__sub { font-size: var(--text-11); font-weight: 600; letter-spacing: .14em; color: var(--green); }
.brand--footer img { width: 56px; height: 56px; }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: var(--green-pale); }

@media (hover: hover) and (pointer: fine) {
  .brand:hover { color: var(--ink); }
}

/* ---------------------------------------------------------- desktop nav */

.nav { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 0.3125rem;
  font-weight: 600; font-size: var(--text-15); color: var(--ink);
  padding: 0.375rem 0; border-bottom: 0.125rem solid transparent; white-space: nowrap;
  background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
  font-family: inherit;
}
.nav__link i { font-size: var(--text-14); }
.nav__item.is-active > .nav__link { color: var(--maroon); border-bottom-color: var(--maroon); }
.nav__item.is-open > .nav__link { color: var(--maroon); }

/* Dropdowns drop from the trigger: origin at the top edge, never centre. */
.nav__panel {
  position: absolute; top: 100%; left: -14px; padding-top: 18px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity var(--dur-exit-panel) var(--ease-out), transform var(--dur-exit-panel) var(--ease-out), visibility var(--dur-exit-panel);
}
.nav__item.is-open > .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out), visibility var(--dur-panel);
}
.nav__item--flip > .nav__panel { left: auto; right: -14px; transform-origin: top right; }

.nav__list {
  width: 250px; background: var(--green);
  border-top: 4px solid var(--maroon);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
  padding: 6px 0;
}
.nav__child { position: relative; }
.nav__clink {
  display: flex; justify-content: space-between; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1.375rem; color: #fff; font-weight: 500; font-size: var(--text-15);
  border-bottom: 0.0625rem solid rgba(255, 255, 255, .1);
  transition: background var(--dur-hover) ease;
}
.nav__clink i { font-size: var(--text-15); }
.nav__child:last-child > .nav__clink { border-bottom: 0; }

/* Flyouts slide out of the parent row, so the origin sits on that edge. */
.nav__sub {
  position: absolute; left: 100%; top: -4px; width: 230px;
  background: var(--green); border-top: 4px solid var(--maroon);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18); padding: 6px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity var(--dur-exit-flyout) var(--ease-out), transform var(--dur-exit-flyout) var(--ease-out), visibility var(--dur-exit-flyout);
}
.nav__item--flip .nav__sub {
  left: auto; right: 100%;
  transform: translateX(6px) scale(.98);
  transform-origin: top right;
}
.nav__child.is-open > .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--dur-flyout) var(--ease-out), transform var(--dur-flyout) var(--ease-out), visibility var(--dur-flyout);
}
.nav__child.is-open > .nav__clink { background: var(--green-dark); }
.nav__slink {
  display: block; padding: 0.75rem 1.375rem; color: #fff; font-weight: 500; font-size: var(--text-15);
  border-bottom: 0.0625rem solid rgba(255, 255, 255, .1);
  transition: background var(--dur-hover) ease;
}
.nav__sub a:last-child { border-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--maroon); }
  .nav__clink:hover, .nav__slink:hover { background: var(--green-dark); color: #fff; }
}

.header__cta { flex: none; padding: 0.8125rem 1.375rem; font-size: var(--text-14); }

/* ---------------------------------------------------------- burger + drawer */

.burger {
  display: none; margin-left: auto; flex: none;
  width: 48px; height: 48px; border: 0; cursor: pointer;
  background: var(--maroon-tint); color: var(--maroon); font-size: 24px;
  border-radius: 16px 16px 16px 0;
  align-items: center; justify-content: center;
  transition: transform var(--dur-press) var(--ease-out);
}

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 28, 28, .5);
  opacity: 0; transition: opacity var(--dur-exit-fade) var(--ease-out);
}
.drawer-backdrop.is-shown { opacity: 1; transition: opacity var(--dur-fade) var(--ease-out); }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 100;
  width: min(360px, 88vw); height: 100dvh;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform var(--dur-exit-drawer) var(--ease-drawer), visibility var(--dur-exit-drawer) var(--ease-drawer);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .18);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  visibility: hidden;
}
.drawer.is-open {
  transform: none; visibility: visible;
  transition: transform var(--dur-drawer) var(--ease-drawer), visibility var(--dur-drawer) var(--ease-drawer);
}

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex: none;
}
.drawer__title { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: var(--text-13); color: var(--green); }
.drawer__close {
  width: 42px; height: 42px; border: 0; background: var(--alt-bg); color: var(--ink);
  font-size: 22px; cursor: pointer; border-radius: 14px 14px 14px 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-press) var(--ease-out);
}

.drawer__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; }
.drawer__row { border-bottom: 1px solid var(--border); }
.drawer__top {
  display: flex; align-items: stretch;
}
.drawer__top > a {
  flex: 1; padding: 0.9375rem 1.25rem; font-weight: 600; font-size: var(--text-16); color: var(--ink);
}
.drawer__row.is-active > .drawer__top > a { color: var(--maroon); }
.drawer__toggle {
  width: 56px; border: 0; background: none; color: var(--green); font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-press) var(--ease-out);
}
/* Same 0fr→1fr recipe as .acc__panel — the chevron already animates, so the
   panel it points at should not teleport. */
.drawer__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-exit-expand) var(--ease-out);
}
.drawer__row.is-open .drawer__panel { grid-template-rows: 1fr; transition: grid-template-rows var(--dur-expand) var(--ease-out); }
.drawer__clip {
  overflow: hidden; min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-exit-expand);
}
.drawer__row.is-open .drawer__clip { visibility: visible; transition: visibility 0s; }
.drawer__sub { background: var(--maroon-tint); padding: 4px 0 10px; }
.drawer__row.is-open .drawer__toggle i { transform: rotate(180deg); }
.drawer__toggle i { transition: transform var(--dur-panel) var(--ease-out); }
.drawer__sub a {
  display: block; padding: 0.6875rem 1.25rem 0.6875rem 2rem; font-size: var(--text-15); color: var(--ink-soft); font-weight: 500;
}
.drawer__sub a.is-deep { padding-left: 2.875rem; font-size: var(--text-14); color: var(--muted); }

.drawer__foot {
  flex: none; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); display: grid; gap: 12px;
}
.drawer__call { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; color: var(--green); }

@media (max-width: 67.5em) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* ------------------------------------------------------------ layout blocks */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(56px, 7vw, 100px) 0; }
.section--tint { background: var(--maroon-tint); }
.section--grey { background: var(--alt-bg); }

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(40px, 5vw, 60px); align-items: center; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.grid--checks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }

.center { text-align: center; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 54px); }
.section-head .h2 { margin: 16px 0 14px; }
.section-head .lead { margin: 0; }

.head-row {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: flex-end; margin-bottom: 44px;
}

.check { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.check > i { color: var(--green); font-size: var(--text-20); flex: none; }
.check--start { align-items: flex-start; }
.check--start > i { margin-top: 3px; }

/* ------------------------------------------------- image placeholder / slot */

/* An empty photo slot is on nearly every page, so it sets the tone more than
   any single component. A soft warm wash reads as a deliberate surface waiting
   for an image; the dashed outline it replaces read as a broken one. */
.ph {
  position: relative; width: 100%; height: 100%;
  background: radial-gradient(130% 120% at 28% 18%, #FCF8F6 0%, #F5EDEA 55%, #EEE2DE 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; text-align: center;
  color: var(--maroon);
  overflow: hidden;
}
.ph i { font-size: var(--text-30); opacity: .28; }
.ph span { font-size: var(--text-12); font-weight: 500; letter-spacing: .06em; color: rgba(110, 100, 98, .8); line-height: 1.4; }
.ph img, .frame img { width: 100%; height: 100%; object-fit: cover; }

/* The gate is a wide, low photo cropped into a much wider hero box. Holding it
   slightly above centre keeps the arch and the lettering in frame. */
[data-slot="home-hero"] img,
[data-slot="home-hero-3"] img { object-position: center 42%; }
/* The study hall is 4:3 into a landscape slot — bias down, away from ceiling. */
[data-slot="acad-intro"] img,
[data-slot="home-hero-2"] img { object-position: center 62%; }
.ph img[data-fade] { opacity: 0; transition: opacity 300ms var(--ease-out); }
.ph img[data-fade].is-loaded { opacity: 1; }
.ph--plain { border: 0; }

.frame { overflow: hidden; position: relative; }

/* ------------------------------------------------------------ hero carousel */

.hero {
  position: relative; overflow: hidden; background: #3A0A0D;
  height: clamp(560px, 78vh, 720px);
  /* svh, not vh: on a tablet vh is the viewport with the URL bar collapsed, so
     78vh overshoots on load. svh is the smallest viewport — stable, never cut. */
  height: clamp(560px, 78svh, 720px);
  touch-action: pan-y;   /* the hero handles horizontal swipes; vertical stays with the page */
}
/* Dissolve, not cross-fade: the incoming slide fades in ON TOP while the
   outgoing one stays fully opaque underneath, then snaps away once it is
   covered. Fading both at once would show the dark base through at the
   half-way point. */
.hero__slide {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0s linear 400ms, visibility 0s linear 400ms;
}
.hero__slide.is-active {
  z-index: 2;
  opacity: 1; visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}
.hero__bg { position: absolute; inset: 0; }
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 12, 16, .94) 0%, rgba(139, 26, 31, .78) 45%, rgba(139, 26, 31, .1) 100%);
}
.hero__body {
  position: relative; height: 100%; display: flex; align-items: center;
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 120px;
  pointer-events: none;
}
.hero__copy { max-width: 620px; color: #fff; }
.hero__copy .h1 { margin: 22px 0 20px; }
.hero__copy .hero__lead { margin: 0 0 34px; font-size: var(--text-18); line-height: 1.7; color: var(--maroon-tint-2); max-width: 520px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; pointer-events: auto; }

.hero__arrow {
  position: absolute; top: calc(50% - 68px); z-index: 3;
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.hero__arrow--prev { left: clamp(14px, 2.5vw, 36px); }
.hero__arrow--next { right: clamp(14px, 2.5vw, 36px); }

.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 104px; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
}
.hero__dot {
  height: 6px; width: 12px; border: 0; padding: 0; border-radius: 3px;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: width 260ms var(--ease-out), background 260ms var(--ease-out);
}
.hero__dot.is-active { width: 34px; background: #fff; }

/* Pause and play for the slideshow. It sits with the dots rather than off on
   its own, because it belongs to the same control. */
.hero__play {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -8px 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease-out);
}
.hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Paused is the quieter state, so it is the one that stands out. */
.hero__play.is-paused { background: #fff; color: var(--maroon); }

@media (hover: hover) and (pointer: fine) {
  .hero__play:hover { background: rgba(255, 255, 255, .4); }
  .hero__play.is-paused:hover { background: #fff; }
}

@media (hover: hover) and (pointer: fine) {
  .hero__arrow:hover { background: var(--maroon); border-color: var(--maroon); }
}
@media (max-width: 45em) {
  /* Stack the slides in one grid cell instead of hiding them, so the
     cross-fade survives on phones too. */
  .hero { height: auto; min-height: 100svh; display: grid; }
  .hero__slide { position: relative; grid-area: 1 / 1; }
  .hero__body { padding: 120px var(--gutter) 150px; min-height: 100svh; }
  .hero__veil { background: linear-gradient(180deg, rgba(74, 12, 16, .9) 0%, rgba(139, 26, 31, .86) 100%); }
  .hero__arrow { top: auto; bottom: 74px; }
  .hero__dots { bottom: 90px; }
}

/* ------------------------------------------------------------ feature cards */

.features { position: relative; z-index: 2; max-width: var(--wrap); margin: -80px auto 0; padding: 0 var(--gutter-r) 0 var(--gutter-l); }
.feature {
  background: #fff; border-radius: 24px 24px 24px 0; padding: 30px 26px;
  box-shadow: var(--shadow-float); border-bottom: 4px solid var(--maroon);
}
.feature h3 { margin: 18px 0 8px; font-size: var(--text-20); }
.feature p { margin: 0; color: var(--muted); font-size: var(--text-15); }

.iconcircle {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex: none;
}
.iconcircle--ondark { background: rgba(255, 255, 255, .12); color: var(--green-pale); }
.iconsq {
  width: 64px; height: 64px; border-radius: 20px 20px 20px 0;
  background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex: none;
}
.iconsq--sm { width: 52px; height: 52px; font-size: 22px; border-radius: 16px 16px 16px 0; }
.iconsq--maroon { background: var(--maroon); color: #fff; width: 60px; height: 60px; font-size: 26px; border-radius: 18px 18px 18px 0; }

@media (max-width: 45em) {
  .features { margin-top: -56px; }
}

/* ----------------------------------------------------------- image collages */

.collage { position: relative; min-height: 520px; }
.collage__a { position: absolute; left: 0; top: 0; width: 68%; height: 400px; }
.collage__b { position: absolute; right: 0; bottom: 0; width: 52%; height: 300px; border: 10px solid #fff; }
.collage__badge {
  position: absolute; left: 24px; bottom: 30px;
  background: var(--green); color: #fff; border-radius: 24px 24px 24px 0;
  padding: 22px 26px; box-shadow: 0 16px 30px rgba(46, 107, 48, .3);
}
.collage__badge b { font-size: var(--text-44); font-weight: 800; line-height: 1; display: block; }
.collage__badge > span { font-size: var(--text-14); color: var(--on-green); display: block; margin-top: 6px; }

@media (max-width: 40em) {
  .collage { min-height: 0; display: grid; gap: 16px; }
  .collage__a, .collage__b { position: static; width: 100%; height: 240px; border: 0; }
  .collage__badge { position: static; justify-self: start; }
}

.stat-float {
  position: absolute; right: 0; color: #fff; padding: 22px 24px; width: 200px;
  border-radius: 24px 24px 24px 0;
}
.stat-float i { font-size: var(--text-28); color: var(--green-pale); }
.stat-float b { display: block; font-size: var(--text-34); font-weight: 800; margin-top: 8px; line-height: 1; }
.stat-float span { display: block; font-size: var(--text-14); margin-top: 4px; }
.stat-float--maroon { background: var(--maroon); box-shadow: 0 16px 30px rgba(139, 26, 31, .3); top: 40px; }
.stat-float--maroon span { color: var(--on-maroon); }
.stat-float--green { background: var(--green); box-shadow: 0 16px 30px rgba(46, 107, 48, .3); bottom: 40px; }
.stat-float--green span { color: var(--on-green); }

.acad-collage { position: relative; min-height: 460px; }
.acad-collage__img { position: absolute; inset: 0 18% 0 0; }

@media (max-width: 43.75em) {
  .acad-collage { min-height: 0; display: grid; gap: 16px; }
  .acad-collage__img { position: static; height: 260px; }
  .stat-float { position: static; width: 100%; }
}

/* ------------------------------------------------------------- stats banner */

.stats { background: var(--maroon); color: #fff; position: relative; overflow: hidden; }
.stats__ring {
  position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; border: 40px solid rgba(255, 255, 255, .05);
}
.stats__grid {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: 70px var(--gutter-r) 70px var(--gutter-l);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 30px;
}
.stat { display: flex; gap: 18px; align-items: center; }
.stat__icon {
  width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--green-pale); flex: none;
}
.stat b { font-size: var(--text-40); font-weight: 800; line-height: 1; display: block; }
.stat span { color: var(--on-maroon); margin-top: 4px; display: block; }

/* -------------------------------------------------------------- program card */

/* Programme card. Type and the facts carry it — no photograph, so it reads
   correctly today and the facts applicants compare (duration, intake, entry
   grade, tuition) sit on the card instead of one level behind it. */
.pcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-top: 5px solid var(--maroon);
  border-radius: 32px 32px 32px 0; padding: 2rem 1.75rem;
  color: var(--ink);
  transition: border-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease,
              transform var(--dur-hover) var(--ease-out);
}
.pcard:active { transform: scale(.99); }
.pcard__level {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  color: var(--green); font-weight: 600; font-size: var(--text-13);
  letter-spacing: .18em; text-transform: uppercase;
}
.pcard h3 {
  margin: 0.875rem 0 0; font-size: var(--text-24); font-weight: 800;
  line-height: 1.2; letter-spacing: -.02em; text-wrap: balance;
  /* Reserve three lines so the fact rows share a baseline across the row of
     cards — otherwise comparing Duration means hunting up and down. */
  min-height: 3.6em;
}
/* A lone card has nothing to align with, so the reserved space is just a gap. */
.pcard:only-child h3 { min-height: 0; }
.pcard__rule { width: 44px; height: 3px; background: var(--maroon); margin: 1rem 0 1.25rem; }
.pcard__facts { margin: 0; display: grid; gap: 0; }
.pcard__facts > div {
  display: flex; justify-content: space-between; gap: 0.875rem; align-items: baseline;
  padding: 0.625rem 0; border-bottom: 1px solid var(--border);
}
.pcard__facts dt { color: var(--muted); font-size: var(--text-14); }
.pcard__facts dd { margin: 0; font-weight: 600; font-size: var(--text-15); text-align: right; }
.pcard__facts dd.is-fee { color: var(--maroon); font-weight: 800; }
.pcard__foot { margin-top: auto; padding-top: 1.375rem; display: flex; }

@media (hover: hover) and (pointer: fine) {
  .pcard:hover { border-color: var(--maroon); box-shadow: 0 20px 44px rgba(139, 26, 31, .12); color: var(--ink); }
}

@media (hover: hover) and (pointer: fine) {
}

/* ------------------------------------------------------------------- events */

.event {
  display: flex; gap: 1.375rem; align-items: center; background: #fff;
  border-radius: 28px 28px 28px 0; padding: 1.375rem;
}
.event__date {
  flex: none; width: 84px; height: 92px; border-radius: 20px 20px 20px 0;
  background: var(--green); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.event__date b { font-size: 32px; font-weight: 800; line-height: 1; }
.event__date span { font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.event h3 { margin: 0 0 8px; font-size: var(--text-19); }
.event__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; color: var(--muted); font-size: var(--text-14); }
.event__meta span { display: flex; align-items: center; gap: 6px; }
.event__meta i { color: var(--maroon); }

.events__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1.5rem; }

/* The "see past events" control. A button, not a link — it changes what is on
   screen rather than navigating anywhere. */
.events__toggle {
  border: 0; background: none; font: inherit; cursor: pointer; padding: 0;
  color: var(--maroon);
}
.events__toggle i { font-size: 1.125rem; }

/* Past events collapse with the same 0fr->1fr recipe as the accordions, and
   the same visibility guard so collapsed cards stay out of the tab order. */
.events__past {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-exit-expand) var(--ease-out);
}
.events__past.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-expand) var(--ease-out);
}
.events__clip {
  overflow: hidden; min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-exit-expand);
}
.events__past.is-open .events__clip { visibility: visible; transition: visibility 0s; }

.events__past-head {
  margin: 2.5rem 0 1.25rem; font-size: var(--text-14); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* A past event reads as an archive entry: grey date block, muted card. */
.event--past { background: transparent; border: 1px solid var(--border); }
.event--past .event__date { background: var(--muted); }
.event--past h3 { color: var(--ink-soft); }
.event__date small {
  font-size: var(--text-11); font-weight: 600; letter-spacing: .08em;
  opacity: .8; margin-top: 2px;
}

/* ------------------------------------------------------------- testimonials */

.quote {
  border: 1px solid var(--border); border-radius: 32px 32px 32px 0;
  padding: 2.125rem; position: relative;
}
.quote__glyph { position: absolute; right: 30px; top: 28px; font-size: var(--text-44); color: var(--maroon-tint-3); }
.quote__stars { display: flex; gap: 3px; color: var(--maroon); margin-bottom: 16px; }
.quote p { margin: 0 0 24px; color: var(--ink-soft); font-size: var(--text-17); line-height: 1.7; }
.quote__who { display: flex; align-items: center; gap: 14px; }
.quote__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; }
.quote__name { font-weight: 700; }
.quote__role { color: var(--muted); font-size: var(--text-14); }

/* ------------------------------------------------------------------- video */

.video { position: relative; height: 460px; border-radius: 40px 40px 40px 0; overflow: hidden; }
.video__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video__play span {
  width: 90px; height: 90px; border-radius: 50%; background: var(--maroon); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 0 0 14px rgba(139, 26, 31, .25);
}
@media (max-width: 40em) { .video { height: 280px; } }

/* --------------------------------------------------------------- CTA banner */

.cta {
  border-radius: 40px 40px 40px 0; padding: 54px clamp(28px, 5vw, 64px); color: #fff;
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center;
  position: relative; overflow: hidden;
}
.cta--green { background: var(--green); }
.cta--maroon { background: var(--maroon); }
.cta__blob { position: absolute; left: -60px; bottom: -100px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.cta__copy { position: relative; }
.cta__eyebrow { font-size: var(--text-14); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--green-pale); }
.cta h2 { margin: 10px 0 8px; font-size: clamp(var(--text-28), 3.4vw, var(--text-40)); font-weight: 800; letter-spacing: -.02em; }
.cta p { margin: 0; font-size: var(--text-17); }
.cta--green p { color: var(--on-green); }
.cta--maroon p { color: var(--on-maroon); }
.cta .btn { position: relative; }

/* ----------------------------------------------------------------- news card */

.news { background: #fff; border-radius: 32px 32px 32px 0; padding: 18px; box-shadow: var(--shadow-card); }
.news__img { position: relative; height: 220px; border-radius: 24px 24px 24px 0; overflow: hidden; }
.news__date {
  position: absolute; top: 14px; right: 14px; pointer-events: none;
  background: var(--maroon); color: #fff; font-size: var(--text-14); font-weight: 600;
  padding: 0.4375rem 0.875rem; border-radius: 14px 14px 14px 0;
  display: flex; align-items: center; gap: 0.375rem;
}
.news__body { padding: 1.125rem 0.5rem 0.375rem; }
.news__meta {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; color: var(--muted); font-size: var(--text-14);
  padding-bottom: 0.875rem; border-bottom: 1px solid var(--border);
}
.news__meta span { display: flex; align-items: center; gap: 6px; }
.news__meta i { color: var(--green); }
.news h3 { margin: 16px 0 14px; font-size: var(--text-20); font-weight: 700; line-height: 1.35; }

/* -------------------------------------------------------- inner page banner */

.banner { position: relative; background: var(--maroon-banner); overflow: hidden; }
.banner__bg { position: absolute; inset: 0; opacity: .35; }
.banner__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(74, 12, 16, .95), rgba(139, 26, 31, .8)); }
.banner__inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(56px, 8vw, 90px) var(--gutter-r) clamp(56px, 8vw, 90px) var(--gutter-l);
  text-align: center; color: #fff;
}
.banner h1 { margin: 0 0 14px; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.crumbs { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--text-15); color: var(--on-maroon); flex-wrap: wrap; justify-content: center; }
.crumbs a { color: var(--green-pale); }

/* ---------------------------------------------------------------- mvm cards */

.info-card { background: #fff; border-radius: 32px 32px 32px 0; padding: 2.375rem; }
.info-card h3 { margin: 20px 0 10px; font-size: var(--text-24); }
.info-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.info-card--maroon { background: var(--maroon); color: #fff; position: relative; overflow: hidden; }
.info-card--maroon p { color: var(--on-maroon); }
.info-card--maroon .motto { font-size: var(--text-28); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.info-card__mark { position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; opacity: .12; }

/* Core values and core functions, side by side on the About page. */
.creed {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 64px);
}
.creed__head { margin: 1.125rem 0 1.5rem; font-size: var(--text-26); font-weight: 800; letter-spacing: -.02em; }

.creed__values { list-style: none; margin: 0; padding: 0; counter-reset: creed; }
.creed__values li {
  counter-increment: creed;
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.875rem 0; border-bottom: 1px solid var(--border);
  font-size: var(--text-18); font-weight: 600;
}
.creed__values li::before {
  content: counter(creed, decimal-leading-zero);
  font-size: var(--text-14); font-weight: 800; color: var(--maroon);
  letter-spacing: .06em; flex: none; min-width: 1.75rem;
}
.creed__values li:last-child { border-bottom: 0; }

.creed__functions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.creed__functions li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--maroon-tint); border-radius: 16px 16px 16px 0;
  padding: 1rem 1.125rem; font-size: var(--text-17); line-height: 1.5;
}
.creed__functions i { color: var(--green); font-size: var(--text-20); flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------- timeline */

.timeline { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 30px; }
.timeline__line { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: #DCE9DC; }
.milestone { position: relative; }
.milestone__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--green); border: 5px solid var(--green-tint); }
.milestone__year { margin-top: 20px; font-size: var(--text-30); font-weight: 800; color: var(--maroon); }
.milestone h4 { margin: 6px 0; font-size: var(--text-18); }
.milestone p { margin: 0; color: var(--muted); font-size: var(--text-15); line-height: 1.6; }

/* ------------------------------------------------------------------- people */

.people-group + .people-group { margin-top: clamp(40px, 5vw, 56px); }
.people-group__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem;
}
.people-group__head {
  margin: 0; padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--green);
  font-size: var(--text-19); font-weight: 700;
}

/* Arrows are for a desktop mouse, which has no easy way to scroll sideways.
   Touch and trackpad users just swipe, so they never appear there — and they
   stay hidden until the rail actually overflows. */
.rail-nav { display: none; gap: 0.5rem; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .people-group.has-overflow .rail-nav { display: flex; }
}
.rail-nav__btn {
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--border);
  background: #fff; color: var(--maroon); cursor: pointer;
  border-radius: 14px 14px 14px 0;
  display: flex; align-items: center; justify-content: center; font-size: var(--text-18);
  transition: background var(--dur-hover) ease, border-color var(--dur-hover) ease,
              opacity var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.rail-nav__btn:active { transform: scale(.95); }
.rail-nav__btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .rail-nav__btn:not(:disabled):hover { background: var(--maroon-tint); border-color: var(--maroon); }
}

/* The rail runs to both screen edges so a long staff list has somewhere to go,
   but the first card still lines up with the content column. */
.people-rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Align with the content column, not the screen edge, so the first card sits
     under the heading above it. Same calc the top bar and hero use. */
  scroll-padding-inline-start: max(var(--gutter-l), calc((100% - var(--wrap)) / 2 + var(--gutter-l)));
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.people-rail:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.people-rail::-webkit-scrollbar { height: 8px; }
.people-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.people-rail__track {
  list-style: none; margin: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(10rem, 14rem);
  gap: 1.75rem;
  /* Starts under the heading; runs off the right edge, which is the point. */
  padding: 0.25rem var(--gutter-r) 1.25rem
           max(var(--gutter-l), calc((100% - var(--wrap)) / 2 + var(--gutter-l)));
  /* Centre a short list inside the content column rather than stranding it. */
  justify-content: start;
}
.people-rail .person { scroll-snap-align: start; }
.people-rail .person__photo { height: 15rem; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .people-rail { scroll-snap-type: none; }
}

.person { text-align: center; }
.person__photo { height: 280px; border-radius: 32px 32px 32px 0; overflow: hidden; margin-bottom: 18px; }
.person h3, .person h4 { margin: 0 0 4px; font-size: var(--text-20); font-weight: 700; }
.person__role { color: var(--green); font-weight: 500; }

.principal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; }
.principal__photo { height: 420px; border-radius: 40px 40px 40px 0; overflow: hidden; max-width: 380px; width: 100%; }
.principal__quote { margin: 22px 0; font-size: clamp(var(--text-22), 2.4vw, var(--text-28)); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }

/* --------------------------------------------------------------- department */

.dept-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem;
}
.dept {
  display: flex; align-items: center; gap: 1.125rem;
  background: #fff; border-radius: 24px 24px 24px 0; padding: 1.5rem 1.625rem;
  border-bottom: 4px solid transparent;
  transition: border-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease;
}
.dept h3 { margin: 0; font-size: var(--text-19); font-weight: 700; line-height: 1.3; }

@media (hover: hover) and (pointer: fine) {
  .dept:hover { border-bottom-color: var(--maroon); box-shadow: 0 20px 40px rgba(139, 26, 31, .1); }
}

/* The non-teaching sections: a plain roll-call, deliberately quieter than the
   departments above it. */
.sections { margin-top: clamp(40px, 5vw, 56px); padding-top: 2rem; border-top: 1px solid var(--border); }
.sections__head {
  margin: 0 0 1.25rem; font-size: var(--text-14); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.sections__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0.75rem;
}
.sections__grid li {
  display: flex; align-items: center; gap: 0.75rem;
  background: #fff; border: 1px solid var(--border); border-radius: 14px 14px 14px 0;
  padding: 0.8125rem 1rem; font-weight: 600; font-size: var(--text-15);
}
.sections__grid i { color: var(--green); font-size: var(--text-18); flex: none; }

/* -------------------------------------------------------------- term / rows */

.term {
  display: flex; gap: 1.25rem; align-items: center;
  border: 1px solid var(--border); border-radius: 24px 24px 24px 0; padding: 1.25rem 1.375rem;
}
.term__badge {
  flex: none; width: 70px; height: 70px; border-radius: 20px 20px 20px 0;
  background: var(--maroon); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.term__badge small { font-size: 12px; letter-spacing: .1em; font-weight: 600; }
.term__badge b { font-size: 26px; font-weight: 800; line-height: 1; }
.term__months { font-weight: 700; font-size: var(--text-18); margin-bottom: 4px; }
.term__focus { color: var(--muted); font-size: var(--text-15); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--lg { gap: 24px; }

/* --------------------------------------------------------------- tabs/chips */

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tab {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.375rem;
  border: 0; cursor: pointer; font-weight: 600; font-family: inherit; font-size: var(--text-15);
  border-radius: 20px 20px 20px 0; background: var(--alt-bg); color: var(--ink);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.tab__count { font-size: var(--text-13); opacity: .75; }
.tab.is-active { background: var(--maroon); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .tab:not(.is-active):hover { background: #E7E7E7; }
}

.chip { font-size: var(--text-13); font-weight: 600; padding: 0.3125rem 0.75rem; border-radius: 999px; }
.chip--green { background: var(--green-tint); color: var(--green); }
.chip--grey { background: #EEEEEE; color: #555555; }
.chip--maroon { background: var(--maroon-tint-2); color: var(--maroon); }

/* ------------------------------------------------------- accordion (jobs etc) */

.acc { border: 1px solid var(--border); border-radius: 28px 28px 28px 0; overflow: hidden; transition: border-color var(--dur-panel) ease; }
.acc.is-open { border-color: var(--maroon); }
.acc__head {
  width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left;
  padding: 1.5rem 1.625rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
}
.acc__tags { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.acc__head h3 { margin: 0 0 10px; font-size: var(--text-20); font-weight: 700; line-height: 1.35; color: var(--ink); }
.acc__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; color: var(--muted); font-size: var(--text-14); }
.acc__meta span { display: flex; align-items: center; gap: 6px; }
.acc__meta i { color: var(--green); }
.acc__meta .due { color: var(--maroon); font-weight: 600; }
.acc__meta .due i { color: var(--maroon); }
.acc__sign {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--alt-bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.acc.is-open .acc__sign { background: var(--maroon); color: #fff; }

/* Accordions are the one place height earns an exception — there is no
   transform equivalent. 0fr→1fr animates without measuring anything in JS. */
.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-exit-expand) var(--ease-out);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; transition: grid-template-rows var(--dur-expand) var(--ease-out); }
.acc__clip {
  overflow: hidden; min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-exit-expand);
}
.acc.is-open .acc__clip { visibility: visible; transition: visibility 0s; }
.acc__body {
  padding: 0 1.625rem 1.625rem; border-top: 0.0625rem solid #F0E6E6;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-out);
}
.acc.is-open .acc__body { opacity: 1; transition-delay: 60ms; }
.acc__body h4 { margin: 20px 0 10px; font-size: var(--text-16); font-weight: 700; }

/* simple accordion (curriculum / FAQ) */
.acc__head { transition: background var(--dur-hover) ease, color var(--dur-hover) ease; }

.acc--sm { border-radius: 20px 20px 20px 0; }
.acc--sm .acc__head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.875rem;
  padding: 1.125rem 1.375rem; font-weight: 700; font-size: var(--text-17);
}
.acc--sm .acc__body { padding: 1rem 1.375rem 1.25rem; color: var(--muted); line-height: 1.7; border-top: 0; }
.acc--sm.is-open .acc__head { background: var(--maroon-tint); color: var(--maroon); }

.acc--faq { border-radius: 22px 22px 22px 0; }
.acc--faq .acc__head { padding: 1.25rem 1.5rem; font-weight: 700; font-size: var(--text-17); display: flex; justify-content: space-between; gap: 0.875rem; align-items: center; }
.acc--faq.is-open .acc__head { background: var(--maroon); color: #fff; }
.acc--faq .acc__body { padding: 1.125rem 1.5rem 1.375rem; color: var(--muted); line-height: 1.7; border-top: 0; }

/* ------------------------------------------------------------ split + aside */

.split { display: grid; gap: 40px; align-items: start; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.split--aside-left { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
.sticky-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 58.75em) {
  .split, .split--aside-left { grid-template-columns: minmax(0, 1fr); }
  .sticky-aside { position: static; }
  .split--aside-left > .sticky-aside { order: 2; }
}

.panel { background: var(--maroon-tint); border-radius: 28px 28px 28px 0; padding: 1.75rem; }
.panel h4 { margin: 0 0 16px; font-size: var(--text-19); font-weight: 700; padding-bottom: 0.625rem; border-bottom: 2px solid var(--green); }
.panel__list { display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--text-15); }
.panel__list > div { display: flex; gap: 10px; align-items: center; }
.panel__list i { color: var(--maroon); font-size: var(--text-18); flex: none; }

.help-card { background: var(--green); color: #fff; border-radius: 28px 28px 28px 0; padding: 1.75rem; }
.help-card > i { font-size: var(--text-30); color: var(--green-pale); }
.help-card h4 { margin: 12px 0 8px; font-size: var(--text-19); font-weight: 700; }
.help-card p { margin: 0 0 12px; color: var(--on-green); line-height: 1.6; font-size: var(--text-15); }
.help-card__lines { display: flex; flex-direction: column; gap: 0.5rem; color: var(--on-green); font-size: var(--text-15); }
.help-card__lines a, .help-card__lines span { display: flex; gap: 8px; align-items: center; color: #fff; }
.help-card strong { font-weight: 700; font-size: var(--text-18); }

.steps-list { display: flex; flex-direction: column; gap: 0.875rem; font-size: var(--text-15); line-height: 1.55; }
.steps-list > div { display: flex; gap: 12px; }
.steps-list b {
  flex: none; width: 28px; height: 28px; border-radius: 10px 10px 10px 0;
  background: var(--maroon); color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* -------------------------------------------------------------- filter list */

.filter-list { display: flex; flex-direction: column; gap: 8px; }
.filter {
  display: flex; justify-content: space-between; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem; border: 0; cursor: pointer; font-family: inherit; font-size: var(--text-15);
  font-weight: 600; border-radius: 14px 14px 14px 0; background: #fff; color: var(--ink);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.filter span { font-size: var(--text-13); opacity: .8; }
.filter.is-active { background: var(--maroon); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .filter:not(.is-active):hover { background: var(--green-tint); color: var(--green); }
}

.result-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  align-items: center; margin-bottom: 26px; color: var(--muted);
}
.result-row b { color: var(--ink); }
.result-row .mode { display: flex; gap: 0.5rem; align-items: center; font-size: var(--text-15); }

/* ------------------------------------------------------------------ tenders */

.tender {
  border: 1px solid var(--border); border-radius: 28px 28px 28px 0; padding: 1.5rem 1.625rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.125rem 1.5rem; align-items: center;
  transition: border-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease;
}
.tender__ref { font-size: var(--text-14); color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.tender h3 { margin: 0 0 10px; font-size: var(--text-20); font-weight: 700; line-height: 1.35; }
.tender__meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; color: var(--muted); font-size: var(--text-14); }
.tender__meta span { display: flex; align-items: center; gap: 6px; }
.tender__meta i { color: var(--green); }
.tender__meta .due { font-weight: 600; }
.btn--grey { background: #555555; color: #fff; }

/* A tender whose document has not been published yet. It is a <span>, not a
   link, so there is nothing to click and nothing for the keyboard to land on. */
.btn.is-disabled {
  background: #ececec;
  color: var(--muted);
  cursor: default;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .tender:hover { border-color: var(--maroon); box-shadow: 0 16px 36px rgba(139, 26, 31, .08); }
  .btn--grey:hover { background: #454545; color: #fff; }
  .btn.is-disabled:hover { background: #ececec; color: var(--muted); }
}
@media (max-width: 40em) {
  .tender { grid-template-columns: minmax(0, 1fr); }
}

.empty {
  padding: 40px; text-align: center; color: var(--muted);
  border: 1px dashed #DDD; border-radius: 28px 28px 28px 0;
}

/* ----------------------------------------------------------- program detail */

.prog-hero { height: 400px; border-radius: 40px 40px 40px 0; overflow: hidden; }
.prog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.tabpane h2 { margin: 0 0 14px; font-size: var(--text-30); font-weight: 800; letter-spacing: -.02em; }
.tabpane h3 { margin: 0 0 16px; font-size: var(--text-22); font-weight: 700; }
.learn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.learn > div {
  display: flex; gap: 0.625rem; align-items: center; background: var(--maroon-tint);
  padding: 0.875rem 1rem; border-radius: 16px 16px 16px 0; font-weight: 500;
}
.learn i { color: var(--green); font-size: var(--text-20); flex: none; }

.infobox {
  background: #fff; border-radius: 32px 32px 32px 0; padding: 30px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .08); border-top: 5px solid var(--maroon);
}
.infobox h3 { margin: 0 0 20px; font-size: var(--text-22); font-weight: 800; }
.infobox__row {
  display: flex; justify-content: space-between; gap: 0.875rem; align-items: center;
  padding: 0.8125rem 0; border-bottom: 0.0625rem solid var(--border);
}
.infobox__row > span:first-child { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.infobox__row i { color: var(--green); }
.infobox__fee { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 22px; }
.infobox__fee > span:first-child { color: var(--muted); }
.infobox__fee b { font-size: var(--text-24); font-weight: 800; color: var(--maroon); }
.infobox .btn { width: 100%; }
.infobox .btn + .btn { margin-top: 12px; }
@media (max-width: 58.75em) { .prog-hero { height: 260px; } }

/* --------------------------------------------------------------- admissions */

.step {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: 32px 32px 32px 0; padding: 2.125rem 1.75rem;
  transition: border-color var(--dur-panel) ease;
}
.step__n { position: absolute; right: 26px; top: 22px; font-size: var(--text-54); font-weight: 800; color: var(--maroon-tint-2); line-height: 1; }
.step h3 { margin: 22px 0 8px; font-size: var(--text-20); }
.step p { margin: 0; color: var(--muted); line-height: 1.6; font-size: var(--text-15); }
@media (hover: hover) and (pointer: fine) { .step:hover { border-color: var(--maroon); } }

.reqtable { background: #fff; border-radius: 28px 28px 28px 0; overflow: hidden; }
.reqtable__head, .reqtable__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; padding: 16px 22px; }
.reqtable__head { background: var(--green); color: #fff; font-weight: 600; }
.reqtable__row { border-bottom: 0.0625rem solid #F0E6E6; }
.reqtable__row:last-child { border-bottom: 0; }
.reqtable__row a { font-weight: 600; color: var(--ink); }
.reqtable__row span:last-child { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .reqtable__row a:hover { color: var(--maroon); } }

.dates { background: #fff; border-radius: 28px 28px 28px 0; padding: 8px 24px; }
.dates__row { display: flex; justify-content: space-between; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 0.0625rem solid var(--border); }
.dates__row:last-child { border-bottom: 0; }
.dates__row > span:first-child { font-weight: 500; }
.date-badge { font-weight: 600; padding: 0.3125rem 0.75rem; border-radius: 12px 12px 12px 0; white-space: nowrap; }
.date-badge--green { background: var(--green-tint); color: var(--green); }
.date-badge--maroon { background: var(--maroon-tint-2); color: var(--maroon); }

.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.download {
  display: flex; gap: 0.75rem; align-items: center; background: #fff;
  border-radius: 20px 20px 20px 0; padding: 1.125rem; color: var(--ink); font-weight: 600;
}
.download > i:first-child { font-size: var(--text-22); color: var(--green); }
.download span { flex: 1; }
.download > i:last-child { color: var(--maroon); }

/* ------------------------------------------------------------- history page */

/* A year rail beside the prose: the chronology stays scannable while the
   reading column keeps a comfortable measure. */
.era {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem;
  padding: clamp(32px, 4vw, 46px) 0; border-top: 1px solid var(--border);
}
.era:first-of-type { border-top: 0; padding-top: 0; }
.era__years {
  font-size: var(--text-19); font-weight: 800; color: var(--maroon);
  letter-spacing: -.01em; white-space: nowrap;
}
.era__body h3 { margin: 0 0 1rem; font-size: var(--text-24); font-weight: 800; letter-spacing: -.02em; }
.era__body p { margin: 0 0 1rem; color: var(--ink-soft); font-size: var(--text-17); line-height: 1.8; max-width: 62ch; }
.era__body p:last-child { margin-bottom: 0; }

/* The roll: a typographic series, not a chart — the numbers are the point and
   a decline mid-way needs its explanation beside it, not a shape to read. */
.roll {
  margin-top: clamp(40px, 5vw, 60px); padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.roll__head {
  margin: 0 0 1.5rem; font-size: var(--text-14); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.roll__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 1.5rem;
}
.roll__list li { display: flex; flex-direction: column; gap: 0.25rem; }
.roll__list b { font-size: var(--text-30); font-weight: 800; color: var(--maroon); line-height: 1; letter-spacing: -.02em; }
.roll__list span { color: var(--muted); font-size: var(--text-14); font-weight: 500; }
.roll__note { margin: 1.5rem 0 0; color: var(--muted); font-size: var(--text-14); line-height: 1.6; max-width: 56ch; }

@media (max-width: 45em) {
  .era { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .era__years { font-size: var(--text-17); }
}


/* The college year, on the programmes page — context for choosing between the
   full-time diploma and the holiday upgrade. */
.year {
  margin-top: clamp(40px, 5vw, 56px); padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.year__head {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 0 0 0.875rem; font-size: var(--text-19); font-weight: 700;
}
.year__head i { color: var(--green); font-size: var(--text-20); }
.year__lead { margin: 0 0 1.5rem; color: var(--muted); font-size: var(--text-16); line-height: 1.7; max-width: 60ch; }
.year__terms {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem;
}
.year__terms li {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--maroon-tint); border-radius: 16px 16px 16px 0; padding: 1rem 1.125rem;
}
.year__terms b { font-size: var(--text-13); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.year__terms span { font-size: var(--text-17); font-weight: 700; }

/* ------------------------------------------------------------------- footer */

.footer { background: var(--maroon-deep); color: #E6CFD0; margin-top: clamp(64px, 9vw, 110px); }
.footer__grid {
  padding-top: 80px; padding-bottom: 50px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 40px;
}
.footer__h { margin: 0 0 20px; color: #fff; font-size: var(--text-19); font-weight: 700; }
.footer__blurb { margin: 0 0 20px; line-height: 1.7; font-size: var(--text-15); }
.footer .brand--footer { margin-bottom: 20px; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 12px 12px 12px 0;
  background: rgba(255, 255, 255, .08); color: #E6CFD0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.footer__links, .footer__contact { display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--text-15); }
.footer__contact { gap: 14px; }
.footer__links a, .footer__contact a, .footer__contact span { color: #E6CFD0; display: flex; gap: 10px; }
.footer__contact i { color: var(--green-pale); flex: none; }

@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover, .footer__contact a:hover { color: var(--green-pale); }
  .footer__socials a:hover { background: var(--green); color: #fff; }
}

.newsletter { display: flex; background: #fff; border-radius: 24px 24px 24px 0; padding: 5px; }
.newsletter input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 14px; background: transparent; color: var(--ink); }
.newsletter button {
  border: 0; background: var(--green); color: #fff; width: 44px;
  border-radius: 20px 20px 20px 0; cursor: pointer; font-size: 18px; flex: none;
  transition: background var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
/* inline-block so the send ⇄ check morph's scale applies — transforms are
   ignored on inline boxes. */
.newsletter button i { display: inline-block; }
.newsletter__note {
  margin: 10px 0 0; font-size: var(--text-14); color: var(--green-pale); min-height: 1.2em;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out);
}
.newsletter__note.is-shown { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .newsletter button:hover { background: var(--green-dark); } }

.footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__bar-inner {
  padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: var(--text-14); color: #B8999B;
}

/* ------------------------------------------------------------------ entries */

/* Deliberately a literal, not --dur-expand: the route fade happens to share
   240ms with the accordion, but the two should be free to diverge. */
/* Scroll-revealed stagger, on the two grids nobody scans under time pressure:
   testimonials and news. Purely decorative, so the hidden state is applied by
   JS — if the observer never runs, nothing is ever invisible. */
/* visibility, not just opacity: an opacity-0 card keeps its "Read more"
   link in the tab order, so a keyboard user lands on an invisible link. */
[data-stagger].is-armed > * { opacity: 0; visibility: hidden; }
[data-stagger].is-in > * { visibility: visible; }
[data-stagger].is-in > * { animation: stagger-in 320ms var(--ease-out) both; }
[data-stagger].is-in > *:nth-child(2) { animation-delay: 60ms; }
[data-stagger].is-in > *:nth-child(3) { animation-delay: 120ms; }
[data-stagger].is-in > *:nth-child(4) { animation-delay: 180ms; }
[data-stagger].is-in > *:nth-child(5) { animation-delay: 240ms; }
[data-stagger].is-in > *:nth-child(n+6) { animation-delay: 300ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* A grid still waiting to scroll into view must never print blank. */
@media print {
  [data-stagger].is-armed > * { opacity: 1; visibility: visible; animation: none; }
}

.fade-in { animation: fade-in 240ms var(--ease-out) both; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-plain {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   LISTEN TO THIS PAGE
   The browser reads the page aloud. The control carries its own label rather
   than a lone icon: a visitor who needs it is the least likely to recognise an
   unexplained symbol.
   ========================================================================== */

.listen {
  position: fixed;
  right: var(--gutter-r);
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  /* The leaf: three rounded corners and a square one, as elsewhere on the site. */
  border-radius: 999px 999px 999px 8px;
  background: var(--maroon);
  color: #fff;
  font: inherit;
  font-size: var(--text-15);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(139, 26, 31, .28), 0 2px 6px rgba(0, 0, 0, .12);
  transition: background var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.listen i { font-size: 1.0625rem; }
.listen:active { transform: scale(0.97); }
.listen:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.listen.is-on {
  background: #1d6b32;
  box-shadow: 0 10px 28px rgba(29, 107, 50, .3), 0 2px 6px rgba(0, 0, 0, .12);
}

@media (hover: hover) and (pointer: fine) {
  .listen:hover { background: #a02026; }
  .listen.is-on:hover { background: #17552a; }
}

/* The passage currently being read, so a listener can follow along. */
.is-speaking {
  background: #fdf3cf;
  box-shadow: 0 0 0 6px #fdf3cf;
  border-radius: 2px;
  transition: background var(--dur-fade) var(--ease-out);
}

/* --------------------------------------------------- the one-time hint */

.listen-hint {
  position: fixed;
  right: var(--gutter-r);
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 60px);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(21rem, calc(100vw - 2 * var(--gutter-r)));
  padding: 14px 14px 14px 16px;
  border-radius: 14px 14px 4px 14px;
  background: #16181d;
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
  animation: listen-hint-in 420ms var(--ease-out) both;
}
.listen-hint p {
  margin: 0;
  font-size: var(--text-14);
  line-height: 1.5;
}
.listen-hint strong { font-weight: 700; }

.listen-hint__x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -2px 0 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 0.8125rem;
  cursor: pointer;
}
.listen-hint__x:hover { background: rgba(255, 255, 255, .22); }

@keyframes listen-hint-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .listen-hint { animation-duration: 1ms; }
  .listen { transition-duration: 1ms; }
  .is-speaking { transition: none; }
}

/* On a narrow screen the label would crowd the page, so the button sits lower
   and the hint spans the width. */
@media (max-width: 30em) {
  .listen { padding: 11px 15px; font-size: var(--text-14); }
  .listen-hint { left: var(--gutter-l); max-width: none; }
}

/* Printing a page has nothing to listen to. */
@media print {
  .listen, .listen-hint { display: none !important; }
  .is-speaking { background: none; box-shadow: none; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line, #e8e8ea);
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  transition: border-color var(--dur-panel) var(--ease-out),
              box-shadow var(--dur-panel) var(--ease-out);
}
.contact-card__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-13);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.contact-card a,
.contact-card__value {
  font-size: var(--text-17);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-card a:hover { color: var(--maroon); }

@media (hover: hover) and (pointer: fine) {
  .contact-card:hover {
    border-color: var(--maroon);
    box-shadow: 0 14px 32px rgba(139, 26, 31, .07);
  }
}

/* --------------------------------------------------------------- the map */

.map {
  position: relative;
  overflow: hidden;
  border-radius: 28px 28px 28px 0;
  background: #eceff1;
  aspect-ratio: 4 / 3;
}
.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.92);
}
.map__none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--muted);
  font-size: var(--text-15);
}
.map__none i { font-size: 1.75rem; }

.map__caption {
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
}

@media (max-width: 48em) {
  .map { aspect-ratio: 1 / 1; }
}

/* ================================================== staff email, on a card */

.person__mail {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 10px;
  border-radius: 50%;
  background: #f2f2f4;
  color: var(--maroon);
  font-size: 0.9375rem;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .person__mail:hover { background: var(--maroon); color: #fff; }
}

/* ==========================================================================
   WHATSAPP
   Bottom-left, opposite the read-aloud button, so the two never collide.
   ========================================================================== */

.wa {
  position: fixed;
  left: var(--gutter-l);
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px 999px 8px 999px;
  background: #25D366;
  color: #04301a;
  font-size: var(--text-15);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .32), 0 2px 6px rgba(0, 0, 0, .12);
  transition: background var(--dur-hover) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.wa i { font-size: 1.125rem; }
.wa:active { transform: scale(0.97); }
.wa:focus-visible { outline: 3px solid #04301a; outline-offset: -6px; }

@media (hover: hover) and (pointer: fine) {
  .wa:hover { background: #1fbe5b; color: #04301a; }
}

/* Two floating buttons would crowd a narrow screen, so this one keeps the
   icon and drops the word; the label stays for screen readers. */
@media (max-width: 30em) {
  .wa { padding: 12px; border-radius: 50%; }
  .wa__text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) { .wa { transition-duration: 1ms; } }
@media print { .wa { display: none !important; } }

/* ==========================================================================
   SERVICE CHARTER
   One card that opens to two columns of services. The open/close is the same
   0fr → 1fr grid row the accordions use, and the clip carries visibility so
   the contents leave the tab order when closed, not just the eye.
   ========================================================================== */

.charter {
  margin-top: 46px;
  border: 1px solid var(--border);
  border-radius: 28px 28px 28px 0;
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease;
}
.charter.is-open { border-color: var(--maroon); }

.charter__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  width: 100%;
  padding: 1.75rem;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.charter__intro h3 {
  margin: 14px 0 10px;
  font-size: var(--text-24);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.charter__intro p {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.65;
}
.charter__tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.charter__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--maroon-tint-2);
  color: var(--maroon);
  font-size: 1.125rem;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.charter.is-open .charter__toggle { background: var(--maroon); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .charter:hover { border-color: var(--maroon); }
}

.charter__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-exit-expand) var(--ease-out);
}
.charter.is-open .charter__panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-expand) var(--ease-out);
}
.charter__clip {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-exit-expand);
}
.charter.is-open .charter__clip { visibility: visible; transition: visibility 0s; }

.charter__body {
  padding: 0 1.75rem 1.75rem;
  border-top: 1px solid #F0E6E6;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.charter.is-open .charter__body { opacity: 1; transition-delay: 60ms; }

/* The two columns. One column on a narrow screen, where side by side would
   leave each service a few words wide. */
.charter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each service stacks: what it is, then how long and what it costs. A column is
   around 330px wide, too narrow to put the two side by side reliably — letting
   them wrap meant some rows did and some did not, which read as a mistake. */
.charter-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1.125rem 0;
  border-bottom: 1px solid #F3EFEF;
}
.charter-item:last-child { border-bottom: 0; }

.charter-item__text { min-width: 0; }
.charter-item__text h4 {
  margin: 0 0 5px;
  font-size: var(--text-16);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.charter-item__text p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
}

.charter-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.charter-item__when {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-13);
  white-space: nowrap;
}
.charter-item__when i { color: var(--green); font-size: 0.875rem; }

.charter__note {
  display: flex;
  gap: 10px;
  margin: 1.75rem 0 0;
  padding: 1rem 1.125rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--maroon-tint-2);
  color: var(--ink);
  font-size: var(--text-14);
  line-height: 1.65;
}
.charter__note i { flex: 0 0 auto; margin-top: 2px; color: var(--maroon); }

@media (max-width: 40em) {
  .charter__head { padding: 1.25rem; }
  .charter__body { padding: 0 1.25rem 1.25rem; }
}

@media print {
  .charter__panel { grid-template-rows: 1fr; }
  .charter__clip { visibility: visible; }
  .charter__body { opacity: 1; }
}