/* =====================================================================
   ASG — African School of Governance
   Design system: "Ridgeline & Record"
   ---------------------------------------------------------------------
   Every value below maps 1:1 to an Elementor Global (colour, font,
   spacing) or to Site Settings > Custom CSS. See HANDOFF.md §4.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour — Elementor Global Colours */
  --navy: #062440;          /* Primary — mandatory brand anchor */
  --navy-2: #0c3358;        /* Navy layer (hover, inset panels) */
  --navy-3: #133f69;        /* Navy rule / outline on dark */
  --ink: #17232d;           /* Body text on light */
  --ivory: #f7f8f9;         /* Default page ground */
  --paper: #eeeadf;         /* Deeper ivory for alternating bands */
  --white: #ffffff;
  --mist: #8fa3b5;          /* Muted blue-grey: metadata on dark */
  --slate: #4f6273;         /* Metadata on light (AA on ivory) */
  /* Secondary brand colour: the red of the ASG logo.
     Sampled from the official logo artwork (assets/img/logo-main.png): the
     dominant red is rgb(211, 13, 13) = #D30D0D, covering 2,337 pixels. The
     logo artwork itself is never recoloured or modified.

     Four shades of that one red are needed, because the exact logo red does
     not hold contrast on every ground. All four are the same hue family.
       --accent           exact logo red. Large display text on light (5.03:1
                          on ivory), decorative rules, dots and markers, and
                          solid button fills with white text (5.48:1).
       --accent-ink       darker, for small and medium text on ivory, paper and
                          white (7.55:1) - labels, links, metadata, eyebrow
                          numbers, list markers.
       --accent-on-dark   brighter, for small and medium text, numerals and
                          markers on navy and charcoal (5.12:1), where the
                          exact logo red only reaches 2.87:1 and would fail.
       --accent-display   for large display emphasis on dark grounds (3.42:1,
                          comfortably over the 3:1 needed for large text) so
                          headlines carry a red much closer to the logo than
                          the small-text shade.
       --accent-hover     darker fill for button hover. */
  --accent: #d30d0d;
  --accent-ink: #a00c0c;
  --accent-on-dark: #ff5a52;
  --accent-display: #e81711;
  --accent-hover: #b00b0b;
  --rule: rgba(6, 36, 64, .16);
  --rule-strong: rgba(6, 36, 64, .55);
  --rule-dark: rgba(247, 248, 249, .16);

  /* Type — Elementor Global Fonts */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.4rem + 5.2vw, 6.4rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  --fs-h2: clamp(1.95rem, 1.35rem + 2.3vw, 3.35rem);
  --fs-h3: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.15rem, 1rem + .55vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-label: .75rem;

  /* Space — 4px base */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --wrap: 1320px;
  --measure: 64ch;

  /* Motion — tuned values (see HANDOFF.md §6) */
  --ease-out: cubic-bezier(.2, .65, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 220ms;
  --dur-text: 680ms;
  --dur-img: 880ms;
  --rise: 24px;

  --header-h: 76px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Guard: no synthetic obliques may be produced if a stray rule survives. */
  font-synthesis-style: none;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
::selection { background: var(--navy); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.section--navy :focus-visible, .on-dark :focus-visible { outline-color: var(--accent-on-dark); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--navy); color: var(--white); padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--navy { background: var(--navy); color: var(--ivory); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--ivory); }
.stack > * + * { margin-top: var(--s-5); }

/* ---------- 4. Type ---------- */
.display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.025em; font-variation-settings: "opsz" 72; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; font-variation-settings: "opsz" 72; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; font-variation-settings: "opsz" 60; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; }
.h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
/* Emphasis is carried by weight and colour, never by slant. There is no
   italic styling anywhere on the site (see HANDOFF.md §12). */
/* Emphasis inside body copy keeps its semantic meaning but is carried by
   weight alone, so it works on light and dark grounds alike. */
.prose em, .prose i, p em, li em, dd em { font-style: normal; font-weight: 600; }
.display em, .h1 em, .h2 em, .h3 em { font-style: normal; font-weight: 500; color: var(--accent); }
.section--navy :is(.display, .h1, .h2, .h3) em,
.on-dark :is(.display, .h1, .h2, .h3) em,
.hero em, .band__copy em,
.band__copy :is(.display, .h1, .h2, .h3) em { color: var(--accent-on-dark); }
/* Large display emphasis on dark may use the truer red. Defined last in the
   file (see §22) so it wins over the component rules above. */
.lead { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.45; font-weight: 400; font-variation-settings: "opsz" 24; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 0; }
.prose h3 { margin: 2rem 0 .75rem; }
.small { font-size: var(--fs-small); }
.muted { color: var(--slate); }
.on-dark .muted, .section--navy .muted { color: var(--mist); }

.label {
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
/* Section marker: "§ 02 — Who we are". The ASG "record" device. */
.eyebrow {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 var(--s-6);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
/* The section marker is now plain text: the numbering device has been removed. */
.eyebrow::after { content: ""; flex: 0 0 3.5rem; height: 1px; background: currentColor; opacity: .5; }
.section--navy .eyebrow, .on-dark .eyebrow { color: var(--mist); }


/* Masked line reveal (markup: <span class="ln"><span>text</span></span>) */
.ln { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.ln > span { display: block; }

/* ---------- 5. Buttons & links ---------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: var(--white); --btn-bd: var(--navy);
  display: inline-flex; align-items: center; gap: .85rem; min-height: 3.1rem;
  padding: .85rem 1.4rem; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.btn:hover { --btn-bg: var(--navy-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--navy); --btn-fg: var(--white); --btn-bd: var(--navy); }
.btn--light { --btn-bg: var(--ivory); --btn-fg: var(--navy); --btn-bd: var(--ivory); }
.btn--light:hover { --btn-bg: var(--white); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: rgba(247, 248, 249,.45); }
.btn--outline-light:hover { --btn-bg: var(--ivory); --btn-fg: var(--navy); --btn-bd: var(--ivory); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--white); --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }
.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow, .link-arrow:hover .arrow, a:hover > .arrow, .card-link:hover .arrow { transform: translateX(4px); }
.arrow--ext { transform: rotate(-45deg); }
.btn:hover .arrow--ext, .link-arrow:hover .arrow--ext { transform: rotate(-45deg) translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
  transition: background-size var(--dur-text) var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.u-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--dur-text) var(--ease-out); }
.u-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- 6. Pending-content device ----------
   Used wherever the brief says "Communications to supply/confirm".
   Visible in prototype, hidden in production via body.is-production. */
.pending {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem;
  border: 1px dashed var(--accent-ink); color: var(--accent-ink); background: rgba(208,13,13,.06);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35;
}
.pending::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
.section--navy .pending, .on-dark .pending { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.pending-block {
  border: 1px dashed var(--rule-strong); padding: var(--s-6); display: grid; gap: .75rem; align-content: start;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(6,36,64,.025) 14px 15px);
}
.on-dark .pending-block, .section--navy .pending-block { border-color: rgba(247, 248, 249,.35); background: none; }
.pending-block .h4 { color: var(--navy); }
.on-dark .pending-block .h4 { color: var(--ivory); }

/* ---------- 7. Header ---------- */
.utility { background: var(--navy); color: var(--ivory); font-size: .8rem; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.4rem; }
.utility a { text-decoration: none; opacity: .86; transition: opacity var(--dur-fast); }
.utility a:hover { opacity: 1; text-decoration: underline; }
.utility__contact, .utility__links { display: flex; align-items: center; gap: 1.25rem; list-style: none; }
.utility__links li + li::before { content: "·"; margin-right: 1.25rem; opacity: .5; }
.utility__social { display: flex; gap: .35rem; list-style: none; padding-left: 1rem; border-left: 1px solid var(--rule-dark); margin-left: .25rem; }
.utility__social a { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; }
.utility__social svg { width: .9rem; height: .9rem; }
.utility__right { display: flex; align-items: center; gap: 1.25rem; }

.masthead {
  position: sticky; top: 0; z-index: 100; background: rgba(247, 248, 249,.94);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule); transition: box-shadow var(--dur-fast);
}
.masthead.is-scrolled { box-shadow: 0 10px 30px -20px rgba(6,36,64,.35); }
.masthead__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); transition: height var(--dur-fast) var(--ease-out); }
.masthead.is-scrolled .masthead__bar { height: 64px; }
.brand { flex: none; display: block; }
.brand img { height: 44px; width: auto; transition: height var(--dur-fast) var(--ease-out); }
.masthead.is-scrolled .brand img { height: 38px; }

.nav { margin-left: auto; height: 100%; }
.nav__list { display: flex; list-style: none; height: 100%; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__trigger {
  position: relative; display: flex; align-items: center; gap: .3rem; height: 100%;
  padding: 0 .62rem; background: none; border: 0; font-size: .875rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  text-decoration: none;
}
.nav__trigger::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: -1px; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-text) var(--ease-out);
}
.nav__item:hover .nav__trigger::after, .nav__item:focus-within .nav__trigger::after, .nav__trigger.is-current::after { transform: scaleX(1); }
.nav__item.is-closed .mega { opacity: 0 !important; visibility: hidden !important; }
.nav__trigger.is-current { color: var(--navy); font-weight: 600; }
.nav__chev { width: .6rem; height: .6rem; opacity: .55; transition: transform var(--dur-fast); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.masthead__cta { flex: none; min-height: 2.6rem; padding: .55rem 1rem; font-size: .85rem; }

/* Mega panel (Mobbin-style structured dropdown) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--ivory); border-bottom: 1px solid var(--rule);
  box-shadow: 0 30px 40px -30px rgba(6,36,64,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.nav__item:hover .mega, .nav__item:focus-within .mega, .nav__item.is-open .mega {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mega__inner { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gutter); padding-block: 2.25rem 2.5rem; }
.mega__intro .h3 { margin-bottom: .75rem; color: var(--navy); }
.mega__intro p { color: var(--slate); font-size: .95rem; max-width: 34ch; }
.mega__links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); align-content: start; }
.mega__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--rule); text-decoration: none; font-weight: 500;
  transition: color var(--dur-fast), padding var(--dur-fast) var(--ease-out);
}
.mega__links a:hover, .mega__links a:focus-visible { color: var(--navy); padding-left: .4rem; }
.mega__links a small { display: block; color: var(--slate); font-weight: 400; font-size: .8rem; margin-top: .1rem; }
.mega__links a .arrow { opacity: .4; }
.mega__links a:hover .arrow { opacity: 1; }
.mega__links a[aria-current="page"] { color: var(--navy); font-weight: 700; }

.burger {
  display: none; margin-left: auto; align-items: center; gap: .6rem; background: none; border: 1px solid var(--rule-strong);
  padding: .55rem .85rem; font-size: .85rem; font-weight: 600; color: var(--navy);
}
.burger__lines { width: 18px; height: 10px; position: relative; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.burger__lines::before { top: 0; } .burger__lines::after { bottom: 0; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--navy); color: var(--ivory);
  display: flex; flex-direction: column; visibility: hidden; opacity: 0;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.drawer.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; border-bottom: 1px solid var(--rule-dark); }
.drawer__close { background: none; border: 1px solid rgba(247, 248, 249,.4); color: var(--ivory); padding: .55rem .85rem; font-size: .85rem; font-weight: 600; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-block: 1rem 2rem; }
.drawer__group { border-bottom: 1px solid var(--rule-dark); }
.drawer__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; background: none; border: 0; color: var(--ivory); text-align: left;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15;
}
.drawer__toggle .num { font-family: var(--font-sans); font-size: .7rem; color: var(--accent-on-dark); letter-spacing: .12em; margin-right: .9rem; vertical-align: middle; }
.drawer__toggle svg { width: .9rem; height: .9rem; transition: transform var(--dur-fast); flex: none; }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-out); }
.drawer__panel > ul { overflow: hidden; list-style: none; }
.drawer__toggle[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }
.drawer__panel a { display: block; padding: .55rem 0 .55rem 2.3rem; text-decoration: none; color: rgba(247, 248, 249,.85); }
.drawer__panel li:last-child a { padding-bottom: 1.2rem; }
.drawer__panel a:hover { color: var(--white); }
.drawer__utility { margin-top: 2rem; display: grid; gap: .5rem; font-size: .9rem; }
.drawer__utility a { color: var(--mist); text-decoration: none; }
.drawer__foot { padding-block: 1rem; border-top: 1px solid var(--rule-dark); display: flex; gap: .75rem; flex-wrap: wrap; }
body.drawer-open { overflow: hidden; }

/* ---------- 8. Ridgeline motif (Kigali's hills) ---------- */
/* Dotted-continent motif (see africaDots in build/site.mjs). Three dot sizes,
   drawn as squares, echoing the Africa mark in the ASG logo.
   The base rule carries a complete placement and an explicit muted colour, so
   an instance that states neither degrades to a quiet corner watermark rather
   than stretching to fill the section and inheriting the page's text colour. */
.dots {
  position: absolute; pointer-events: none;
  top: auto; right: -4%; bottom: -6%; left: auto;
  width: 34%; aspect-ratio: 700 / 740;
  color: rgba(143,163,181,.12);
}
.dots path { fill: currentColor; stroke: none; }
.dots .d-l { fill-opacity: .92; }
.dots .d-m { fill-opacity: .58; }
.dots .d-s { fill-opacity: .32; }

/* The Forum band carries long-form copy across the full width, so its mark is
   held further back than anywhere else. */
.dots--forum { right: -3%; bottom: -5%; width: 30%; color: rgba(143,163,181,.08); }

/* ---------- 9. Hero (home) — full-bleed, image-led ----------
   The photograph covers the whole hero; a layered navy scrim keeps the
   white text highly legible on the left while the right of the frame stays
   open. Content sits on the image as a foreground layer, never inside a
   panel. Reverse: 8.3 - "Image treatment".
   Stacks (z): 0 background frames · 1 scrim · 2 captions · 3 content. */
.hero { position: relative; background: var(--navy); color: var(--ivory); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero__frame.is-active { opacity: 1; }
.hero__frame img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: center 42%; will-change: transform; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,36,64,.94) 0%, rgba(6,36,64,.86) 30%, rgba(6,36,64,.58) 52%, rgba(6,36,64,.24) 76%, rgba(6,36,64,.10) 100%),
    linear-gradient(0deg, rgba(6,36,64,.90) 0%, rgba(6,36,64,.34) 34%, rgba(6,36,64,0) 58%),
    linear-gradient(180deg, rgba(6,36,64,.58) 0%, rgba(6,36,64,0) 30%);
}
.hero__captions { position: absolute; top: 1.4rem; right: var(--gutter); z-index: 2; max-width: 26rem; text-align: right; }
.hero__caption { margin: 0; font-size: .72rem; line-height: 1.45; color: rgba(247, 248, 249,.78); display: none; }
.hero__caption.is-active { display: block; }
.hero__inner {
  position: relative; z-index: 3;
  display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(540px, 82vh, 880px);
  padding-block: clamp(2.25rem, 5.5vh, 4.25rem) clamp(1.5rem, 3.5vh, 2.5rem);
}
.hero__main { align-self: center; max-width: 56rem; }
.hero__kicker { display: flex; gap: 1rem; align-items: center; color: rgba(247, 248, 249,.82); }
.hero__kicker .rule { width: 3rem; height: 1px; background: var(--accent-on-dark); flex: none; }
/* The headline lives inside each slide so it changes with the tab. Its size is
   held down and its measure widened so no slide title runs past three lines,
   and it reserves two lines so the supporting copy starts at the same place on
   every slide. */
.hero__title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.2rem, 1.25rem + 3.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  /* Reserve three lines: the most any slide title uses, so every slide's
     headline block is the same height. */
  min-height: 3.12em;
}
/* Every slide occupies the same grid cell, so the tallest one sets the height
   and the call to action always lands on the same baseline no matter how long
   the copy is. Without scripting only the first slide is in flow, so the hero
   still reads correctly. */
.hero__slides { display: grid; margin-top: 2rem; max-width: 38rem; }
.hero__slide { grid-area: 1 / 1; }
.hero__slide[hidden] { display: none; }
/* Rows are sized by content and the leftover space falls below the buttons, so
   the gap between headline, copy and call to action is exactly what is set
   here on every slide rather than stretching to fill. */
.js .hero__slide {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.js .hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Two lines reserved for the supporting copy for the same reason: with the
   headline and the copy both fixed, every slide is the same height, so the
   call to action sits on one line with no slack gap above it. */
.hero__slide .lead {
  margin-top: 1.5rem;
  color: rgba(247, 248, 249, .94);
  min-height: 2.9em;
}
.hero__slide .btn-row {
  margin-top: 2.25rem;
  align-self: start;
}
.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter); align-items: end;
}
.hero__index { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; border-top: 1px solid rgba(247, 248, 249,.30); }
.hero__tab {
  position: relative; width: 100%; text-align: left; background: none; border: 0; color: rgba(247, 248, 249,.62);
  padding: 1rem 0 0; font-size: .8rem; line-height: 1.35; transition: color var(--dur-fast);
}
.hero__tab::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--accent-on-dark); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.hero__tab[aria-selected="true"] { color: var(--ivory); }
.hero__tab[aria-selected="true"]::before { transform: scaleX(1); }
.hero__tab:hover { color: var(--ivory); }

/* ---------- 10. Who we are — "the founding record" ----------
   Three moves: the statement is set as a large editorial paragraph with a
   short measure, a tall portrait anchors it on the right, and the founding
   facts sit beneath as a ruled record rather than a stacked list. */
.who__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.who__lead { grid-column: 1 / span 7; }
.who__figure { grid-column: 9 / span 4; margin: 0; }
.who__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 32%; }
.who__figure figcaption { margin-top: .85rem; font-size: .75rem; line-height: 1.4; color: var(--slate); }
.who__statement {
  margin: 0; max-width: 32ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.4rem); line-height: 1.28;
  letter-spacing: -.014em; color: var(--navy); font-variation-settings: "opsz" 48;
}
.who__statement strong { font-weight: 500; }
.who__statement .hl { font-weight: 500; color: var(--accent); }
.who__support { margin: 1.5rem 0 0; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.who__lead .btn-row { margin-top: 2.25rem; }

/* The record: founding facts as a ruled three-up, echoing the cohort ledger. */
.record { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--rule-strong); }
.record > li { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
.record > li + li { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.record .label { display: block; margin-bottom: .6rem; color: var(--accent-ink); }
.record__val { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; color: var(--navy); }

/* ---------- 11. Programme register (list, not cards) ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.sec-head__title { grid-column: 1 / span 7; }
.sec-head__aside { grid-column: 9 / span 4; }
.sec-head__aside p { color: var(--slate); }
.section--navy .sec-head__aside p { color: var(--mist); }

.register { list-style: none; border-top: 1px solid var(--rule-strong); }
.prog {
  position: relative; display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 3.6fr) minmax(0, 2.4fr);
  gap: var(--gutter); padding: 2.25rem 0; border-bottom: 1px solid var(--rule); align-items: start;
  text-decoration: none; color: inherit; transition: background var(--dur-fast);
}

.prog__name { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.08; color: var(--navy); letter-spacing: -.01em; }
.prog__name small { display: block; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slate); margin-top: .9rem; }
.prog__desc { color: var(--ink); font-size: 1rem; padding-top: .45rem; }
.prog__meta { display: grid; gap: .55rem; padding-top: .5rem; }
.prog__meta div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; font-size: .9rem; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; }
.prog__meta dt { color: var(--slate); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding-top: .15rem; }
.prog__meta dd { color: var(--navy); font-weight: 500; }
.prog__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-weight: 600; color: var(--navy); font-size: .92rem; }
.prog__thumb {
  position: absolute; right: 26%; top: 50%; width: 15rem; aspect-ratio: 4/5; pointer-events: none; z-index: 3;
  opacity: 0; transform: translate(0, -46%) scale(.96) rotate(-1.5deg); transition: opacity 320ms var(--ease-out), transform 520ms var(--ease-out);
  overflow: hidden; box-shadow: 0 30px 50px -25px rgba(6,36,64,.6);
}
.prog__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 1100px) {
  .prog:hover { background: linear-gradient(90deg, rgba(6,36,64,.035), transparent); }
  .prog:hover .prog__thumb { opacity: 1; transform: translate(0, -50%) scale(1) rotate(-1.5deg); }
  .prog:hover .prog__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
}

.devstrip {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--gutter); align-items: center;
  margin-top: 2.5rem; padding: 1.75rem; border: 1px dashed var(--rule-strong); background: transparent;
}
.devstrip__tag { display: inline-flex; align-items: center; gap: .6rem; color: var(--slate); }
.devstrip__tag::before { content: ""; width: .6rem; height: .6rem; border: 1.5px solid currentColor; border-radius: 50%; }
.devstrip__names { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); line-height: 1.3; }
.devstrip__names span { color: var(--slate); }
.devstrip p { font-size: .92rem; color: var(--slate); margin-top: .35rem; }
.devstrip .link-arrow { justify-self: end; color: var(--navy); }

/* ---------- 11b. Programme plates (homepage) ----------
   A triptych, not three cards: the plates are joined by 1px hairlines with no
   gaps or shadows, and the type sits on the photograph rather than beneath it,
   carrying the full-bleed language of the hero into the page. The homepage
   needs only name, duration, format and a destination (brief 2.2); the longer
   descriptions stay on the programmes overview, which uses the register above. */
.plates {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule-strong); border-block: 1px solid var(--rule-strong);
}
.plate { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; text-decoration: none; color: var(--ivory); background: var(--navy); }
.plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 1.2s var(--ease-out); }
.plate__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,36,64,.94) 0%, rgba(6,36,64,.72) 34%, rgba(6,36,64,.16) 68%, rgba(6,36,64,.06) 100%);
  transition: opacity var(--dur-fast);
}
.plate__body { position: absolute; inset: auto 0 0 0; display: grid; gap: .6rem; padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.plate__code { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); }
.plate__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.95rem); line-height: 1.1; letter-spacing: -.012em; }
.plate__meta { font-size: .88rem; line-height: 1.45; color: rgba(247, 248, 249,.82); }
.plate__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .9rem; font-weight: 600; }
.plate__cta .arrow { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .plate:hover .plate__img { transform: scale(1.05); }
  .plate:hover .plate__scrim { opacity: .88; }
  .plate:hover .plate__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
  .plate:hover .plate__cta .arrow { transform: translateX(4px); }
}
.plate:focus-visible { outline-offset: -3px; }

/* ---------- 12. At a glance (cohort ledger) ---------- */
.glance { overflow: hidden; }
.glance .dots { top: 10%; bottom: auto; right: -3%; width: 25%; color: rgba(143,163,181,.2); }
.glance__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); }
.glance__intro .h2 { margin-bottom: 1.5rem; }
.ledger { list-style: none; border-top: 1px solid var(--rule-dark); }
.ledger__row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gutter);
  align-items: end; padding: 1.75rem 0; border-bottom: 1px solid var(--rule-dark);
}
.ledger__label .label { color: var(--accent-on-dark); display: block; margin-bottom: .35rem; }
.ledger__label span:last-child { font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); }
.ledger__num { font-family: var(--font-display); font-size: clamp(4rem, 2.4rem + 6vw, 8.5rem); line-height: .82; letter-spacing: -.04em; font-weight: 300; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.ledger__num small { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); font-weight: 600; margin-left: .75rem; vertical-align: .6em; }
.ledger__countries { display: flex; align-items: baseline; gap: .6rem; color: var(--mist); }
.ledger__countries b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); color: var(--accent-on-dark); line-height: 1; }
/* The publish guard has been retired: the cohort figures are confirmed and are
   published. The numbers count up from zero once the block is in view. */
.ledger__num .val,
.ledger__countries b {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 13. Pillars ---------- */
.pillars__intro { grid-column: 1 / span 8; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.pillars__intro .lead { color: var(--navy); }
.pillars { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; gap: 0; border-top: 1px solid var(--rule-strong); }
.pillar { position: relative; display: flex; flex-direction: column; padding: 2rem var(--gutter) 2.5rem 0; text-decoration: none; color: inherit; }
.pillar + .pillar { padding-left: var(--gutter); border-left: 1px solid var(--rule); }

.pillar__title { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); line-height: 1; color: var(--navy); margin-bottom: 1.5rem; letter-spacing: -.015em; }
.pillar__media { overflow: hidden; aspect-ratio: 4/3; margin-bottom: 1.5rem; background: var(--paper); }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.pillar:hover .pillar__media img { transform: scale(1.04); }
.pillar p { font-size: .98rem; flex: 1; }
.pillar .link-arrow { margin-top: 1.5rem; color: var(--navy); align-self: flex-start; }
/* Research: typographic "journal page" instead of a photo */
.pillar__folio {
  aspect-ratio: 4/3; margin-bottom: 1.5rem; background: var(--navy); color: var(--ivory); padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.pillar__folio .dots { top: auto; right: -10%; bottom: -8%; width: 66%; color: rgba(143,163,181,.3); }
.pillar__folio .label { color: var(--accent-on-dark); position: relative; }
.pillar__folio p { position: relative; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; font-weight: 400; flex: none; }

/* ---------- 14. Student voices ---------- */
.voices__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); }
.voices__intro .lead { color: rgba(247, 248, 249,.9); margin-top: 1.5rem; }
.voice { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--rule-dark); }
.voice:last-child { border-bottom: 1px solid var(--rule-dark); }
.voice__quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; margin: 0; font-weight: 300; }
.voice__quote::before { content: "\201C"; color: var(--accent-on-dark); margin-left: -.45em; padding-right: .05em; }
.voice__quote::after { content: "\201D"; color: var(--accent-on-dark); }
.voice__cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: .9rem; }
.voice__cite b { display: block; font-weight: 600; color: var(--ivory); }
.voice__cite span { color: var(--mist); }

/* Portrait slot: honest placeholder for photography Communications supplies */
.portrait-slot {
  position: relative; aspect-ratio: 4/5; background: var(--navy-2); border: 1px solid var(--rule-dark);
  display: grid; place-items: center; overflow: hidden; color: var(--mist);
}
.portrait-slot img { width: 100%; height: 100%; object-fit: cover; }
.portrait-slot .initials { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; color: rgba(247, 248, 249,.55); }
.portrait-slot .slot-note { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.portrait-slot--light { background: var(--paper); border-color: var(--rule); color: var(--slate); }
.portrait-slot--light .initials { color: rgba(6,36,64,.35); }

/* ---------- 15. People strip ---------- */
/* auto-fit so the row fills correctly whatever number of profiles is published */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gutter); }
.person { text-decoration: none; color: inherit; display: grid; align-content: start; gap: 1rem; }
.person .portrait-slot { transition: transform var(--dur-img) var(--ease-out); }
.person:hover .portrait-slot { transform: translateY(-4px); }
.person__name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.15; color: var(--navy); }
.person__role { font-size: .88rem; color: var(--slate); }
.person:hover .person__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* ---------- 16. News ---------- */
.news { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: var(--gutter); }
.story { display: grid; align-content: start; gap: 1rem; text-decoration: none; color: inherit; }
.story__media { overflow: hidden; aspect-ratio: 3/2; background: var(--paper); }
.story:first-child .story__media { aspect-ratio: 4/3; }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.story:hover .story__media img { transform: scale(1.035); }
.story__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--slate); align-items: center; }
.story__meta .cat { color: var(--accent-ink); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }
.story__title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.18; color: var(--navy); }
.story:first-child .story__title { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); }
.story:hover .story__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.byline-pending { font-size: .72rem; color: var(--accent-ink); border-bottom: 1px dashed currentColor; }

/* ---------- 17. CTA band, join strip, newsletter, partners ---------- */
/* The band is a dark section, so it sets its own text colour. Without this the
   heading inherits the dark body ink and disappears into the navy. */
.band { position: relative; overflow: hidden; color: var(--ivory); }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; }
.band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,36,64,.96) 0%, rgba(6,36,64,.86) 45%, rgba(6,36,64,.35) 100%); }
.band .wrap { position: relative; }
.band__copy { max-width: 40rem; }
.band__copy .h1 { margin-bottom: 1.5rem; }
.band__copy p { color: rgba(247, 248, 249,.88); font-size: 1.1rem; margin-bottom: 2rem; }

.join { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 3fr)); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.join > * { padding: 1.5rem 1.25rem 1.5rem 0; }
.join a { display: flex; justify-content: space-between; align-items: center; padding-left: 1.25rem; border-left: 1px solid var(--rule); text-decoration: none; font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); transition: background var(--dur-fast); }
.join a:hover { background: var(--white); }

.newsletter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: end; }
.field { display: grid; gap: .45rem; }
.field label, .field .field__label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.input, .select, .textarea {
  width: 100%; min-height: 3.1rem; padding: .8rem 1rem; border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(6,36,64,.14); }
.on-dark .input { background: transparent; color: var(--ivory); border-color: rgba(247, 248, 249,.4); }
.on-dark .input::placeholder { color: var(--mist); }
.on-dark .input:focus { border-color: var(--ivory); box-shadow: 0 0 0 3px rgba(247, 248, 249,.15); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.form-msg { font-size: .88rem; margin-top: .75rem; min-height: 1.4em; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; }
.check input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--navy); }

.partners { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); align-items: start; }
.partner-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.partner { min-height: 9rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--rule); }
.partner + .partner { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.partner a { text-decoration: none; }
.partner__mark { font-family: var(--font-display); font-size: 1.45rem; color: var(--navy); line-height: 1.15; }
.partner .label { color: var(--accent-ink); }

/* ---------- 18. Footer ---------- */
.footer { background: var(--ink); color: var(--ivory); position: relative; overflow: hidden; }
.footer .dots { top: auto; right: -6%; bottom: 7%; width: 36%; color: rgba(143,163,181,.14); }
.footer__top { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); padding-block: clamp(4rem, 7vw, 6.5rem) 3rem; }
/* Named .footer__plate, not .plate: .plate is the programme triptych, and its
   aspect-ratio was being inherited here and squashing the logo. The white
   logo carries its own contrast on the navy footer, so it sits unplated. */
.footer__plate { display: inline-block; }
.footer__plate img { height: 64px; width: auto; }
.footer__brand p { color: var(--mist); font-size: .92rem; margin-top: 1.5rem; max-width: 34ch; }
.footer__news { margin-top: 2rem; max-width: 26rem; }
.footer__news .label { color: var(--accent-on-dark); display: block; margin-bottom: .75rem; }
.sitemap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.sitemap h2 { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule-dark); }
.sitemap h2 + h2, .sitemap ul + h2 { margin-top: 2rem; }
.sitemap ul { list-style: none; display: grid; gap: .55rem; }
.sitemap a { text-decoration: none; color: rgba(247, 248, 249,.82); font-size: .92rem; }
.sitemap a:hover { color: var(--white); text-decoration: underline; }
.footer__contact { position: relative; display: grid; grid-template-columns: 4fr 3fr 3fr 2fr; gap: var(--gutter); padding-block: 2rem; border-top: 1px solid var(--rule-dark); font-size: .9rem; }
.footer__contact .label { color: var(--mist); display: block; margin-bottom: .4rem; }
.footer__contact a { color: var(--ivory); }
.social { display: flex; gap: .5rem; list-style: none; }
.social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--rule-dark); transition: background var(--dur-fast), border-color var(--dur-fast); }
.social a:hover { background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.social svg { width: 1rem; height: 1rem; }
.footer__legal { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--rule-dark); font-size: .8rem; color: var(--mist); }

/* ---------- 19. Inner page heroes ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; font-size: .8rem; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.on-dark .crumbs, .section--navy .crumbs { color: var(--mist); }

/* Same treatment as the homepage hero (§9) at roughly half the height: the
   photograph covers the header, a navy scrim holds the copy on the left, and
   the content sits on the image as a foreground layer rather than beside it.
   Stacks (z): 0 background · 1 scrim · 3 content. */
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--ivory); }
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: center 45%; will-change: transform; }
/* Fallback when no photograph has been supplied yet. */
.phero__bg--plain { color: rgba(143,163,181,.3); }
.phero__bg--plain .dots { top: auto; right: 2%; bottom: -8%; width: 26%; }
/* Lighter on the right than the homepage hero: these headers are short, so the
   photograph needs to do more work with less room. */
.phero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,36,64,.94) 0%, rgba(6,36,64,.82) 26%, rgba(6,36,64,.44) 54%, rgba(6,36,64,.08) 100%),
    linear-gradient(0deg, rgba(6,36,64,.84) 0%, rgba(6,36,64,.20) 36%, rgba(6,36,64,0) 70%);
}
.phero__inner {
  position: relative; z-index: 3;
  display: grid; align-content: end; align-items: end;
  min-height: clamp(320px, 45vh, 510px);
  padding-block: clamp(1.75rem, 4vh, 3rem) clamp(1.5rem, 3.5vh, 2.6rem);
}
.phero__copy { max-width: 52rem; }
.phero__title { margin: 1.5rem 0 1.25rem; }
.phero__lead { max-width: 44rem; color: rgba(247, 248, 249,.93); }

/* Anchor sub-nav (in-page) */
.subnav { position: sticky; top: 64px; z-index: 50; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.subnav ul { display: flex; gap: 1.75rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 1rem 0; font-size: .85rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--slate); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.subnav a:hover, .subnav a.is-active { color: var(--navy); border-color: var(--navy); }

/* Programme "At a glance" fact bar */
.factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.factbar div { padding: 1.25rem 1rem 1.25rem 0; }
.factbar div + div { padding-left: 1rem; border-left: 1px solid var(--rule-dark); }
.factbar dt { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: .4rem; }
.factbar dd { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
.factbar--light { border-color: var(--rule-strong); }
.factbar--light div + div { border-color: var(--rule); }
.factbar--light dt { color: var(--slate); }
.factbar--light dd { color: var(--navy); }

/* Split editorial block */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gutter); }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split__label { position: relative; }
.split__label .h2 { position: sticky; top: calc(var(--header-h) + 5rem); }
.figure { position: relative; overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption { font-size: .78rem; color: var(--slate); margin-top: .75rem; }

/* Numbered item list (curriculum, values, why) */
.items { list-style: none; border-top: 1px solid var(--rule-strong); }
.items > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--gutter); padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.items h3 { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--navy); }
.items p { font-size: 1rem; }
.section--navy .items { border-color: var(--rule-dark); }
.section--navy .items > li { border-color: var(--rule-dark); }
.section--navy .items h3 { color: var(--ivory); }
.items--two > li { grid-template-columns: minmax(0, 1fr); }

/* Tracks (MPA year two) */
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-strong); }
.track { padding: 1.75rem var(--gutter) 2rem 0; }
.track + .track { padding-left: var(--gutter); border-left: 1px solid var(--rule); }
.track .label { color: var(--accent-ink); display: block; margin-bottom: 1rem; }
.track h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--navy); margin-bottom: 1rem; }
.track ul { list-style: none; margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.track li { padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }

/* Year timeline */
.years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.year { border-top: 2px solid var(--navy); padding-top: 1.5rem; }

.year h3 { margin: 1rem 0; }

/* Modes / steps (horizontal process) */
.modes { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.modes li { position: relative; padding: 2.25rem 1.25rem 0 0; border-top: 1px solid var(--rule-dark); }
.modes li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-on-dark); }
.modes h3 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: .6rem; }
.modes p { font-size: .92rem; color: rgba(247, 248, 249,.82); }
.modes--light li { border-color: var(--rule-strong); }
.modes--light li::before { background: var(--navy); }
.modes--light h3 { color: var(--navy); }
.modes--light p { color: var(--ink); }

/* Panels (practice, fees, requirements) */
.panel { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--rule); }
.panel--navy { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.panel h3 { margin-bottom: 1rem; }
.panel--navy h3 { color: var(--ivory); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.ticks { list-style: none; display: grid; gap: .1rem; }
.ticks li { position: relative; padding: .7rem 0 .7rem 1.75rem; border-bottom: 1px solid var(--rule); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .9rem; height: 1px; background: var(--accent-ink); }
.on-dark .ticks li, .panel--navy .ticks li { border-color: var(--rule-dark); }
.on-dark .ticks li::before, .panel--navy .ticks li::before { background: var(--accent-on-dark); }

.bignum { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .9; letter-spacing: -.035em; }

/* FAQ — native <details> */
.faq { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.35rem 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 300; transition: transform var(--dur-fast); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 0 1.5rem; max-width: 62ch; }

/* Vision / mission side by side */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-dark); }
.vm > div { padding: 2.5rem var(--gutter) 1rem 0; scroll-margin-top: 9rem; }
.vm > div + div { padding-left: var(--gutter); border-left: 1px solid var(--rule-dark); }
.vm .label { color: var(--accent-on-dark); display: block; margin-bottom: 1.25rem; }
.vm p { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); line-height: 1.3; font-weight: 300; }

/* Values */
.values { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.values li { padding: 2rem var(--gutter) 2rem 0; border-bottom: 1px solid var(--rule); }
.values li:not(:nth-child(3n+1)) { padding-left: var(--gutter); border-left: 1px solid var(--rule); }
.values h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--navy); margin-bottom: .6rem; }
.values h3::first-letter { color: var(--accent-ink); }

/* Accreditation seal block */
.accred { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gutter); align-items: start; padding: clamp(2rem, 4vw, 3.5rem); border: 1px solid var(--rule-strong); background: var(--white); }
.accred__ref { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy); border-top: 2px solid var(--navy); padding-top: 1rem; }
.accred__ref b { display: block; font-size: 1.6rem; font-weight: 400; margin-top: .3rem; }

/* Profile page */
.profile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); }
.profile__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.profile__bio { font-size: 1.08rem; }
.profile__bio p:first-child { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.45; color: var(--navy); }

/* Listings (news / events / opportunities) */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip { border: 1px solid var(--rule-strong); background: transparent; padding: .5rem 1rem; font-size: .85rem; font-weight: 500; border-radius: 999px; transition: background var(--dur-fast), color var(--dur-fast); }
.chip[aria-pressed="true"], .chip:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.list-rows { list-style: none; border-top: 1px solid var(--rule-strong); }
.list-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--gutter); padding: 1.6rem 0; border-bottom: 1px solid var(--rule); align-items: start; text-decoration: none; color: inherit; }
.list-row__date { font-family: var(--font-display); color: var(--navy); }
.list-row__date b { display: block; font-size: 2.4rem; line-height: 1; font-weight: 300; }
.list-row h3 { font-family: var(--font-display); font-size: 1.45rem; color: var(--navy); line-height: 1.2; margin-bottom: .4rem; }
.list-row:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid currentColor; }
.status--open { color: #1f6b45; }
.status--closed { color: var(--slate); }
.status--past { color: var(--slate); }
.empty {
  padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--rule); background: var(--white);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: center;
}
.empty .h3 { color: var(--navy); margin-bottom: .5rem; }
.empty--single { grid-template-columns: minmax(0, 1fr); }

/* Template field chips (templates/* pages) */
.tf { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .78em; background: rgba(6,36,64,.07); color: var(--navy); padding: .15em .45em; border: 1px dashed rgba(6,36,64,.35); border-radius: 2px; }
.on-dark .tf { background: rgba(247, 248, 249,.08); color: var(--ivory); border-color: rgba(247, 248, 249,.35); }
.tf-block { border: 1px dashed rgba(6,36,64,.35); background: rgba(6,36,64,.03); padding: 1.25rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; color: var(--navy); }
.article { max-width: 46rem; margin-inline: auto; }
.article__body { font-size: 1.15rem; line-height: 1.7; }

.notice { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border-left: 3px solid var(--accent-ink); background: rgba(208,13,13,.07); font-size: .92rem; }
/* In client mode an internal notice can end up empty; collapse it rather than
   leaving a stray red rule behind. */
.notice:empty { display: none; }

/* ---------- 19a. Profile rows ----------
   A portrait beside the name, role and biography. Used for the founders and the
   executive team, where the biography is the point, rather than the 4-up card
   grid used for a plain directory. */
.profile-list { border-top: 1px solid var(--rule-strong); }
.profile-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.profile-row__portrait .portrait-slot { aspect-ratio: 4 / 5; }
.profile-row__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + .9vw, 1.95rem);
  line-height: 1.15;
  color: var(--navy);
}
.profile-row__role {
  margin-top: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.profile-row__bio { margin-top: 1rem; max-width: 64ch; }

/* ---------- 19b. Three pillars, rebuilt ----------
   Full-width editorial rows rather than three equal panels: the pillar name
   set large, the case for it, and its own piece of media. The middle row
   inverts to navy so the sequence has rhythm. */
.pillars-section { padding-block: var(--section-y); }
.pillars__intro {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  color: var(--navy);
}
.pillars2 { border-top: 1px solid var(--rule-strong); }
.pillar2 {
  display: block;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.pillar2--dark {
  background: var(--navy);
  color: var(--ivory);
  border-bottom-color: var(--rule-dark);
}
.pillar2__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--gutter);
  align-items: start;
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.pillar2__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--navy);
}
.pillar2--dark .pillar2__word { color: var(--accent-on-dark); }
.pillar2__body { display: grid; gap: 1rem; }
.pillar2__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
  line-height: 1.15;
  color: var(--navy);
}
.pillar2--dark .pillar2__title { color: var(--ivory); }
.pillar2__copy { max-width: 54ch; font-size: 1rem; }
.pillar2--dark .pillar2__copy { color: rgba(247, 248, 249, .86); }
.pillar2__body .link-arrow { color: var(--navy); }
.pillar2--dark .pillar2__body .link-arrow { color: var(--accent-on-dark); }
.pillar2__media { overflow: hidden; }
.pillar2__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.pillar2:hover .pillar2__media img { transform: scale(1.04); }
.pillar2:hover .pillar2__word { text-decoration: underline; text-underline-offset: .08em; }
.pillar2__folio {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  background: var(--navy-2);
  overflow: hidden;
}
.pillar2__folio .dots { top: auto; right: -9%; bottom: -7%; width: 62%; color: rgba(143, 163, 181, .32); }
.pillar2__folio .label { position: relative; color: var(--accent-on-dark); }
.pillar2__quote {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ivory);
}

/* ---------- 19c. News and insights, rebuilt ----------
   One lead story carrying the image, and two supporting stories with square
   thumbnails on a ruled column, so the block reads as a front page rather than
   three identical cards. */
.news2 {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.story2 { display: grid; align-content: start; gap: .9rem; text-decoration: none; color: inherit; }
.story2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: center;
  font-size: .78rem;
  color: var(--slate);
}
.story2__meta .cat {
  color: var(--accent-ink);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}
.story2__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.18;
  color: var(--navy);
}
.story2:hover .story2__title { text-decoration: underline; text-underline-offset: .15em; }
.story2__excerpt { font-size: .98rem; color: var(--ink); }
.story2__media { overflow: hidden; }
.story2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.story2:hover .story2__media img { transform: scale(1.045); }
.story2--lead .story2__media img { aspect-ratio: 3 / 2; }
.story2--lead .story2__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); line-height: 1.14; }
.news2__side { display: grid; align-content: start; border-top: 1px solid var(--rule-strong); }
.story2--side {
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-block: clamp(1.4rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.story2--side .story2__media img { aspect-ratio: 1 / 1; }

/* ---------- 19d. Partners, rebuilt ----------
   A logo plate per partner: the mark sits in a bordered box so the strip reads
   as a wall of marks. Slots without a supplied logo are drawn as dashed
   placeholders rather than invented. */
.partner-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
}
.partner2 {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.partner2 + .partner2 {
  padding-left: 1.5rem;
  border-left: 1px solid var(--rule);
}
.partner2 .label { color: var(--accent-ink); }
.partner2__plate {
  display: grid;
  place-items: center;
  min-height: 9.5rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
}
.partner2__mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  text-align: center;
  color: var(--navy);
}
/* The anchor takes the full plate width so the image's percentage has a
   containing block to resolve against; the image itself is centred inside it.
   Sized by width, not height: several partner marks are close to square, so a
   height cap alone leaves them tiny. */
.partner2__logo { display: block; width: 100%; }
.partner2__logo img {
  display: block;
  width: 132px;
  height: auto;
  margin-inline: auto;
}
.partner2__mark--empty {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}
.partner2__note { font-size: .78rem; color: var(--slate); }
.partner2--placeholder .partner2__plate { border-style: dashed; background: transparent; }
.partner2:hover .partner2__mark { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- 20. Motion (progressive enhancement) ----------
   Only applies when JS has added .js to <html> AND the user has not
   requested reduced motion. Without JS, everything is visible. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translate3d(0, var(--rise), 0);
    transition: opacity var(--dur-text) var(--ease-out), transform var(--dur-text) var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal="img"] {
    opacity: 1; transform: none; clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-img) var(--ease-io); transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="img"] img { transform: scale(1.03); transition: transform calc(var(--dur-img) * 1.6) var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal="lines"] { opacity: 1; transform: none; }
  .js [data-reveal="lines"] .ln > span { transform: translate3d(0, 105%, 0); transition: transform var(--dur-text) var(--ease-out); }
  .js [data-reveal="lines"] .ln:nth-child(2) > span { transition-delay: calc(var(--d, 0ms) + 90ms); }
  .js [data-reveal="lines"] .ln:nth-child(3) > span { transition-delay: calc(var(--d, 0ms) + 180ms); }
  .js [data-reveal="lines"] .ln:nth-child(4) > span { transition-delay: calc(var(--d, 0ms) + 270ms); }
  .js [data-reveal="words"] { opacity: 1; transform: none; }
  .js [data-reveal="words"] .w { display: inline-block; opacity: .18; transition: opacity 460ms var(--ease-out); transition-delay: calc(var(--i) * 14ms); }

  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0); }
  .js [data-reveal="img"].is-in img { transform: none; }
  .js [data-reveal="lines"].is-in .ln > span { transform: none; }
  .js [data-reveal="words"].is-in .w { opacity: 1; }

  .hero__slide.is-entering .lead, .hero__slide.is-entering .btn-row { animation: rise var(--dur-text) var(--ease-out) both; }
  .hero__slide.is-entering .btn-row { animation-delay: 90ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- 21. Responsive ---------- */
@media (max-width: 1240px) {
  .nav, .masthead__cta { display: none; }
  .burger { display: inline-flex; }
  .utility__contact .hide-md { display: none; }
}
@media (max-width: 1100px) {
  /* Hero recomposes: the image stays full-bleed but the scrim turns vertical
     so the copy reads against the lower part of the frame; the hero becomes as
     tall as its content rather than a fixed share of the viewport. */
  .hero__inner { grid-template-rows: auto auto; min-height: 0; gap: 2.75rem; padding-block: 3.5rem 2rem; }
  .hero__main { max-width: none; }
  .hero__foot { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__slides { min-height: 0; max-width: none; }
  /* Stacked hero: the scrim opens a window through which the photograph
     reads, then darkens progressively under the copy. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6,36,64,.90) 0%, rgba(6,36,64,.36) 15%, rgba(6,36,64,.26) 26%, rgba(6,36,64,.68) 45%, rgba(6,36,64,.90) 68%, rgba(6,36,64,.97) 100%),
      linear-gradient(90deg, rgba(6,36,64,.28) 0%, rgba(6,36,64,.04) 100%);
  }
  .hero__captions { display: none; }
  .prog { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prog__desc { grid-column: 2 / -1; grid-row: 2; padding-top: 0; }
  .prog__meta { grid-column: 3; grid-row: 1; }
  .plates { grid-template-columns: 1fr 1fr; }
  .plate { aspect-ratio: 3 / 4; }
  .who__lead { grid-column: 1 / span 8; }
  .who__figure { grid-column: 9 / span 4; }
  .news { grid-template-columns: 1fr 1fr; }
  .story:first-child { grid-column: 1 / -1; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__contact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .utility__contact { display: none; }
  .utility .wrap { justify-content: center; }
  .grid { grid-template-columns: 1fr; }
  .grid > * { grid-column: 1 / -1 !important; }
  .pillar2__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .news2 { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .partner2 + .partner2 { padding-left: 0; border-left: 0; }
  .who__grid { grid-template-columns: 1fr; }
  .who__lead, .who__figure { grid-column: 1 / -1; }
  .who__statement, .who__support { max-width: 46ch; }
  .who__figure { margin-top: 2.5rem; }
  .who__figure img { aspect-ratio: 3 / 2; object-position: center 30%; }
  .record { grid-template-columns: 1fr; }
  .record > li + li { padding-left: 0; border-left: 0; }
  .plates { grid-template-columns: 1fr; }
  .plate { aspect-ratio: 4 / 3; }
  .two-col, .three-col, .years, .vm, .form-grid { grid-template-columns: 1fr; }
  .vm > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head__title, .sec-head__aside { grid-column: 1 / -1; }
  .devstrip { grid-template-columns: 1fr; gap: .75rem; }
  .devstrip .link-arrow { justify-self: start; }
  .glance__grid, .voices__grid, .newsletter, .partners, .split, .split--rev, .profile, .empty, .accred { grid-template-columns: 1fr; }
  .split__label .h2 { position: static; }
  .profile__aside { position: static; max-width: 22rem; }
  .ledger__row { grid-template-columns: 1fr 1fr; }
  .ledger__label { grid-column: 1 / -1; }
  .pillars, .tracks { grid-template-columns: 1fr; }
  .pillar, .track { padding: 2rem 0 !important; border-left: 0 !important; }
  .pillar + .pillar, .track + .track { border-top: 1px solid var(--rule); }
  .voice { grid-template-columns: 5.5rem 1fr; gap: 1.25rem; }
  .join { grid-template-columns: 1fr; }
  .join a { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .partner-row { grid-template-columns: 1fr; }
  .partner + .partner { padding-left: 0; border-left: 0; }
  .values { grid-template-columns: 1fr 1fr; }
  .values li { padding: 1.5rem 1rem 1.5rem 0 !important; border-left: 0 !important; }
  .items > li { grid-template-columns: 1fr; }
  /* Header becomes content-height on small screens so the copy is never
     crowded, and the scrim turns vertical to keep the photograph readable
     above the text. */
  .phero__inner { min-height: 0; padding-block: 2.75rem 2rem; align-content: start; }
  .phero__copy { max-width: none; }
  .phero__scrim {
    background:
      linear-gradient(180deg, rgba(6,36,64,.90) 0%, rgba(6,36,64,.44) 22%, rgba(6,36,64,.34) 38%, rgba(6,36,64,.74) 72%, rgba(6,36,64,.94) 100%),
      linear-gradient(90deg, rgba(6,36,64,.28) 0%, rgba(6,36,64,.04) 100%);
  }
  .list-row { grid-template-columns: 1fr; gap: .5rem; }
  .factbar div + div { border-left: 0; padding-left: 0; }
  .factbar { grid-template-columns: 1fr 1fr; }
  .factbar div { border-bottom: 1px solid var(--rule-dark); padding-right: .5rem; }
}
@media (max-width: 600px) {
  .eyebrow { display: block; }
  .eyebrow::after { display: none; }

  .utility__links { display: none; }
  .hero__index { grid-template-columns: 1fr 1fr; row-gap: .5rem; }
  .hero__kicker { font-size: .68rem; }
  .hero__title { max-width: none; }
  .prog { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; }
  .prog__desc, .prog__meta { grid-column: 1; grid-row: auto; }

  .news, .people { grid-template-columns: 1fr; }
  .story2--side { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
  .modes { grid-template-columns: 1fr; }
  .sitemap, .footer__contact { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: .6rem; padding: 1.4rem 0; }
  .ledger__num { font-size: clamp(3rem, 15vw, 4.5rem); }
  .ledger__countries { gap: .45rem; }
  .voice { grid-template-columns: 1fr; }
  .voice .portrait-slot { max-width: 7rem; }
  .footer__legal { flex-direction: column; }
  /* Stacked layouts have no spare column, so the mark moves under the copy and
     sits wider than the text block to stay readable. */
  .footer .dots { right: -10%; bottom: 4%; left: auto; top: auto; width: 58%; }
  .glance .dots { top: auto; right: -14%; bottom: -4%; width: 52%; color: rgba(143,163,181,.22); }
}

/* ---------- 22. Red emphasis sizing ----------
   One red, sized for the job. Small interface text on dark keeps the brighter
   --accent-on-dark (5.12:1). Large display text may use the truer, deeper
   --accent-display (3.42:1, over the 3:1 required for large text), which sits
   much closer to the logo red. Declared last so it wins over component rules. */
.hero.on-dark .hero__title em,
.phero.on-dark .phero__title em,
.band.on-dark .band__copy .h1 em,
.ledger__countries b,
.voice__quote::before,
.voice__quote::after { color: var(--accent-display); }
/* The logo red at full strength, where only decoration is involved. */
.hero__kicker .rule,
.hero__tab::before { background: var(--accent-display); }

/* ---------- 23. Print ---------- */
@media print {
  .utility, .masthead, .drawer, .footer, .subnav, .newsletter { display: none !important; }
  body { background: #fff; }
}