/* ==========================================================================
   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); }

@media (hover: hover) and (pointer: fine) {
  .social:hover { background: #fff; color: var(--maroon); }
}
@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; }
}

/* 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; }
.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; height: clamp(560px, 78vh, 720px); overflow: hidden; background: #3A0A0D;
  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; }

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

/* ---------------------------------------------------------------- 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 */

.person { text-align: center; }
.person__photo { height: 280px; border-radius: 32px 32px 32px 0; overflow: hidden; margin-bottom: 18px; }
.person h3 { margin: 0 0 4px; font-size: var(--text-20); }
.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 {
  background: #fff; border-radius: 32px 32px 32px 0; padding: 2.125rem 1.875rem;
  border-bottom: 0.25rem solid transparent;
  transition: border-color var(--dur-panel) ease, box-shadow var(--dur-panel) ease;
}
.dept__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dept__count { font-size: var(--text-14); color: var(--muted); font-weight: 500; }
.dept h3 { margin: 22px 0 10px; font-size: var(--text-21); }
.dept p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; font-size: var(--text-15); }

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

/* -------------------------------------------------------------- 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; }

@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; }
}
@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); }

/* ------------------------------------------------------------------- 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);
}
.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; }
}