@charset "UTF-8";
/* ==========================================================================
   Sheerah Verenda Full Life Initiative
   Art direction: "The Veranda" — a threshold where people gather.
   Architecture of arches, warm paper ground, deep teal mass, gold as light.
   Mobile-first. Brand palette preserved: #1C5D65 #C1E77F #E9A531 #F8F5F0 #2B2B2B
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
  /* Brand (unchanged) */
  --teal: #1C5D65;
  --lime: #C1E77F;
  --gold: #E9A531;
  --cream: #F8F5F0;
  --ink: #2B2B2B;

  /* Derived architecture */
  --teal-950: #08272C;
  --teal-900: #0D343A;
  --teal-800: #123F46;
  --teal-700: #164E56;
  --teal-500: #2C7A83;
  --teal-300: #7FB0B5;
  --teal-100: #D3E4E4;
  --teal-050: #EAF2F1;

  --gold-700: #8F5F13;
  --gold-600: #C9871F;
  --gold-300: #F2CE8C;
  --gold-100: #FAEBCE;

  --lime-700: #7FA843;
  --lime-500: #A6D45F;
  --lime-100: #ECF7D8;

  --paper: #FFFDF9;
  --sand: #F0E9DE;
  --sand-2: #E7DDCE;
  --shell: #FBF8F3;

  --text: #2B2B2B;
  --text-soft: #55605F;
  --text-mute: #68726F;
  --on-dark: #F2F4F1;
  --on-dark-soft: #B9CCCB;

  --line: rgba(18, 63, 70, .14);
  --line-soft: rgba(18, 63, 70, .08);
  --line-dark: rgba(255, 255, 255, .14);

  /* Type */
  --ff-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --shell-max: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.25rem, 8vw, 8.75rem);
  --section-y-lg: clamp(5rem, 10vw, 11rem);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;

  --header-h: 68px;
}

@media (min-width: 1080px) { :root { --header-h: 92px; } }

/* Decorative assets ------------------------------------------------------ */
:root {
  /* woven veranda lattice */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0 72V36a36 36 0 0 1 72 0v36'/%3E%3Cpath d='M-36 72V36a36 36 0 0 1 72 0v36'/%3E%3Cpath d='M36 72V36a36 36 0 0 1 72 0v36'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--ff-sans);
  font-size: clamp(1rem, .965rem + .16vw, 1.0625rem);
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--teal); color: #fff; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  background: var(--teal-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: 999px; transform: translateY(-160%); transition: transform .25s var(--ease);
  font-size: .85rem; font-weight: 600;
}
.skip-link:focus-visible { transform: none; }

/* -------------------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------------- */
/* Brand guide §4.2/4.3. Sizes are clamped between the guide's mobile floor and
   its desktop ceiling; weights are the guide's, not a uniform 500. */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--teal-900);
  text-wrap: balance;
}

/* H1  desktop 52–64px / mobile 34–40px, weight 700, line-height 1.15 */
.d1 { font-size: clamp(2.125rem, 1.3rem + 3.5vw, 4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
/* H2  desktop 36–44px / mobile 26–30px, weight 600, line-height 1.2 */
.d2 { font-size: clamp(1.625rem, 1.16rem + 1.98vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
/* H3  desktop 26–30px / mobile 20–22px, weight 400, line-height 1.3 */
.d3 { font-size: clamp(1.25rem, 1.07rem + .77vw, 1.75rem); font-weight: 400; line-height: 1.3; letter-spacing: -.012em; }
/* H4  card and widget titles — Open Sans SemiBold, 18–20px, line-height 1.4 */
.d4 {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0;
}

/* Body — Secondary / Intro: 18px desktop, 16px mobile, line-height 1.6 */
.lede {
  font-size: clamp(1rem, .96rem + .21vw, 1.15rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: pretty;
}
.body-lg { font-size: clamp(1rem, .96rem + .21vw, 1.15rem); line-height: 1.6; color: var(--text); }
p { text-wrap: pretty; }
p + p { margin-top: 1.05em; }

em, i { font-style: italic; }
.serif-em { font-family: var(--ff-display); font-style: italic; font-weight: 400; }

/* Eyebrow ---------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-700);
  line-height: 1.5;
  margin-bottom: 1.15rem;
}
.eyebrow__mark {
  width: 26px; height: 10px; flex: none; margin-top: .05rem;
  border: 1.25px solid var(--gold);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}
.eyebrow > span:not(.eyebrow__mark) { display: block; }
.eyebrow--light { color: var(--gold-300); }
.eyebrow--light .eyebrow__mark { border-color: var(--gold); }
.eyebrow--center { justify-content: center; }

/* -------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 900px; }
.shell--wide { max-width: 1560px; }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-sand  { background: var(--sand); }
.bg-shell { background: var(--shell); }

.bg-deep {
  background: var(--teal-900);
  color: var(--on-dark);
  position: relative;
  isolation: isolate;
}
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }
.bg-deep .lede, .bg-deep .body-lg, .bg-deep p { color: var(--on-dark-soft); }
.bg-deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice);
  background-size: 96px 96px;
  opacity: .05;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* Section header --------------------------------------------------------- */
.sec-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head__title + .sec-head__body { margin-top: 1.1rem; }
.sec-head--split {
  display: grid; gap: clamp(1.25rem, 3vw, 3.5rem);
  max-width: none; align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .sec-head--split .sec-head__body { padding-bottom: .35rem; }
}

/* Threshold divider ------------------------------------------------------ */
.threshold {
  position: relative; height: 1px; background: var(--line-soft);
  margin-inline: auto; max-width: var(--shell-max);
}
.threshold::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 54px; height: 27px; transform: translateX(-50%);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 54px 54px 0 0;
  background: linear-gradient(to bottom, transparent, var(--cream));
}

/* -------------------------------------------------------------------------
   5. Buttons & links
   ---------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: #fff;
  --btn-bd: var(--teal);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.25px solid var(--btn-bd);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn > span { position: relative; z-index: 2; }
.btn .ico-arrow {
  position: relative; z-index: 2; width: 17px; height: 17px; flex: none;
  transition: transform .4s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--teal-900);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover .ico-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--gold { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: #2A1C05; }
.btn--gold::before { background: #2A1C05; }
.btn--gold:hover { color: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--teal-800); --btn-bd: rgba(18,63,70,.28); }
.btn--ghost::before { background: var(--teal-900); }
.btn--ghost:hover { color: #fff; border-color: var(--teal-900); }

.btn--light { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.btn--light::before { background: #fff; }
.btn--light:hover { color: var(--teal-900); border-color: #fff; }

.btn--lime { --btn-bg: var(--lime); --btn-bd: var(--lime); --btn-fg: #22381A; }
.btn--lime::before { background: var(--teal-900); }
.btn--lime:hover { color: #fff; border-color: var(--teal-900); }

.btn--sm { min-height: 44px; padding: .65rem 1.2rem; font-size: .875rem; }
.btn--lg { min-height: 58px; padding: 1rem 2rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

/* Text link -------------------------------------------------------------- */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-700);
  padding-bottom: .35rem;
  border-bottom: 1.25px solid var(--gold);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.tlink .ico-arrow { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.tlink:hover { color: var(--gold-700); }
.tlink:hover .ico-arrow { transform: translateX(3px); }
.tlink--light { color: var(--gold-300); border-color: rgba(233,165,49,.5); }
.tlink--light:hover { color: #fff; border-color: var(--gold); }

/* -------------------------------------------------------------------------
   6. Header
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--cream);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line-soft);
}

.utility { display: none; background: var(--teal-900); color: var(--on-dark-soft); }
.utility__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 40px; font-size: .8rem;
}
.utility__contact { display: flex; gap: 1.75rem; }
.utility__contact a { display: inline-flex; align-items: center; gap: .5rem; transition: color .25s var(--ease); }
.utility__contact svg { width: 15px; height: 15px; color: var(--gold); }
.utility__contact a:hover { color: #fff; }
.utility__social { display: flex; align-items: center; gap: .85rem; }
.utility__social > span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.utility__social ul { display: flex; gap: .3rem; }
.utility__social a {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.utility__social svg { width: 14px; height: 14px; fill: currentColor; }
.utility__social a:hover { background: rgba(255,255,255,.12); color: #fff; }

.masthead { position: relative; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { flex: none; display: block; }
.brand img {
  width: auto; height: 44px; object-fit: contain;
  /* 255/237 = 1.076: just enough to clip the warm ground to white. */
  filter: brightness(1.09) saturate(1.06);
  mix-blend-mode: multiply;
}
.masthead__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.masthead__actions .btn { display: none; }
@media (min-width: 620px) { .masthead__actions .btn { display: inline-flex; } }

/* Burger ----------------------------------------------------------------- */
.burger {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .2rem .5rem .5rem; min-height: 44px;
  color: var(--teal-800);
}
.burger__box { position: relative; width: 26px; height: 14px; }
.burger__bar {
  position: absolute; left: 0; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: width .35s var(--ease), transform .35s var(--ease), opacity .25s var(--ease);
}
.burger__bar:nth-child(1) { top: 0; width: 26px; }
.burger__bar:nth-child(2) { bottom: 0; width: 17px; }
.burger:hover .burger__bar:nth-child(2) { width: 26px; }
.burger__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body.drawer-open .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.drawer-open .burger__bar:nth-child(2) { width: 26px; transform: translateY(-6px) rotate(-45deg); }

/* Overlay header (transparent over hero) --------------------------------- */
@media (min-width: 1080px) {
  .site-header--overlay { position: fixed; left: 0; right: 0; background: transparent; }
  .site-header--overlay .utility { background: rgba(8,39,44,.42); backdrop-filter: blur(6px); }
  /* No nameplate anywhere. The masthead floats over the hero as a translucent
     light bar, which is the one surface the supplied logo can blend into. */
  .site-header--overlay .brand { align-self: center; display: flex; align-items: center; }
  .site-header--overlay .masthead {
    background: var(--cream);
    box-shadow: 0 14px 44px -32px rgba(8, 39, 44, .7);
  }
  .site-header--overlay .nav__link { color: var(--teal-800); }
  .site-header--overlay .nav__item.is-active > .nav__link { color: var(--teal-900); }
  .site-header--overlay .burger { color: var(--teal-800); }
  body.has-overlay-header .site-header--overlay.is-stuck {
    background: rgba(248,245,240,.94);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 12px 40px -28px rgba(8,39,44,.55);
  }
  body.has-overlay-header .is-stuck .utility { background: var(--teal-900); }
  body.has-overlay-header .is-stuck .nav__link { color: var(--teal-800); }
  body.has-overlay-header .is-stuck .brand { background: transparent; padding-inline: 0; box-shadow: none; }
  body.has-overlay-header .is-stuck .brand img { mix-blend-mode: multiply; filter: none; }
  body.has-overlay-header .is-stuck .burger { color: var(--teal-800); }
}
.site-header.is-stuck { box-shadow: 0 12px 40px -30px rgba(8,39,44,.5); }

/* Desktop nav ------------------------------------------------------------ */
.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: block; flex: 1 1 auto; }
  .nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(.3rem, 1.1vw, 1.15rem); }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .65rem .2rem;
    font-size: .875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0;
    color: var(--teal-800);
    position: relative;
    transition: color .28s var(--ease);
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1.5px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .38s var(--ease-out);
  }
  .nav__item:hover > .nav__link::after,
  .nav__item.is-active > .nav__link::after { transform: scaleX(1); }
  .nav__caret { width: 9px; height: 6px; opacity: .55; transition: transform .3s var(--ease); }
  .nav__item:hover .nav__caret { transform: rotate(180deg); }

  .submenu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translate(-50%, 8px);
    min-width: 268px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s;
    z-index: 5;
  }
  .nav__item--has-children:hover .submenu,
  .nav__item--has-children:focus-within .submenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
  .submenu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  }
  .submenu__inner {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: .55rem;
    box-shadow: 0 30px 60px -32px rgba(8,39,44,.42), 0 2px 6px -2px rgba(8,39,44,.08);
  }
  .submenu__inner::before {
    content: ""; position: absolute; top: -5px; left: 50%; width: 12px; height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--paper); border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
    border-radius: 3px 0 0 0;
  }
  .submenu__list a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .85rem; border-radius: 10px;
    font-size: .875rem; font-weight: 500; color: var(--teal-800);
    transition: background-color .25s var(--ease), color .25s var(--ease);
  }
  .submenu__list .ico-arrow { width: 15px; height: 15px; opacity: 0; transform: translateX(-4px); transition: all .3s var(--ease-out); }
  .submenu__list a:hover { background: var(--teal-050); color: var(--teal-900); }
  .submenu__list a:hover .ico-arrow { opacity: .8; transform: none; }

  .utility { display: block; }
  .masthead__actions .btn { display: inline-flex; }
  .burger { display: none; }
  .brand img { height: 56px; }
}

/* Scroll progress -------------------------------------------------------- */
.site-header .progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--lime));
  z-index: 3; transition: width .1s linear;
}

/* -------------------------------------------------------------------------
   7. Mobile drawer
   ---------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 1000; }
.drawer[hidden] { display: none; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(8,39,44,.5);
  opacity: 0; transition: opacity .4s var(--ease);
  backdrop-filter: blur(2px);
}
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(430px, 100%);
  background: var(--cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .52s var(--ease-out);
  box-shadow: -30px 0 80px -40px rgba(8,39,44,.6);
  overflow: hidden;
}
.drawer__panel::before {
  content: ""; position: absolute; right: -120px; bottom: -140px; width: 340px; height: 340px;
  border: 1px solid rgba(28,93,101,.16); border-bottom: 0;
  border-radius: 340px 340px 0 0; pointer-events: none; z-index: 0;
}
.drawer__head, .drawer__body { position: relative; z-index: 1; }
body.drawer-open .drawer__scrim { opacity: 1; }
body.drawer-open .drawer__panel { transform: none; }
body.drawer-open { overflow: hidden; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--gutter);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.brand--drawer img { height: 42px; filter: brightness(1.09) saturate(1.06); mix-blend-mode: multiply; }
.drawer__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--teal-800);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__close:hover { background: var(--teal-900); color: #fff; border-color: var(--teal-900); }

.drawer__body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.mnav__item { border-bottom: 1px solid var(--line-soft); }
.mnav__item { opacity: 0; transform: translateY(14px); }
body.drawer-open .mnav__item {
  animation: mnavIn .5s var(--ease-out) forwards;
  animation-delay: calc(60ms + var(--i) * 42ms);
}
@keyframes mnavIn { to { opacity: 1; transform: none; } }

.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mnav__link {
  display: block; padding: .95rem 0;
  font-family: var(--ff-display);
  font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em;
  color: var(--teal-900);
  flex: 1 1 auto;
  transition: color .25s var(--ease), transform .35s var(--ease-out);
}
.mnav__item.is-active > .mnav__link,
.mnav__item.is-active .mnav__row .mnav__link { color: var(--gold-700); }
.mnav__link:active { transform: translateX(3px); }
.mnav__toggle {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line); color: var(--teal-700);
  transition: transform .35s var(--ease), background-color .25s, color .25s;
}
.mnav__toggle svg { width: 16px; height: 16px; }
.mnav__toggle[aria-expanded="true"] { transform: rotate(135deg); background: var(--teal-900); color: #fff; border-color: var(--teal-900); }
.mnav__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.mnav__panel > ul { overflow: hidden; }
.mnav__panel.is-open { grid-template-rows: 1fr; }
.mnav__panel li a {
  display: block; padding: .62rem 0 .62rem 1.1rem;
  font-size: .95rem; color: var(--text-soft);
  border-left: 1.5px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease), padding-left .25s var(--ease);
}
.mnav__panel li:last-child a { padding-bottom: 1rem; }
.mnav__panel li a:hover { color: var(--teal-900); border-color: var(--gold); padding-left: 1.35rem; }

.drawer__cta { display: grid; gap: .6rem; margin-top: 1.75rem; }
.drawer__meta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.drawer__label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); margin-bottom: .6rem; }
.drawer__contact { display: block; font-size: 1rem; font-weight: 600; color: var(--teal-800); padding: .22rem 0; }
.drawer__addr { font-size: .9rem; color: var(--text-mute); margin-top: .55rem; line-height: 1.55; }

.social-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.15rem; }
.social-row a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--teal-700);
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.social-row svg { width: 16px; height: 16px; fill: currentColor; }
.social-row a:hover { background: var(--teal-900); border-color: var(--teal-900); color: #fff; transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   8. Arch & media treatments
   ---------------------------------------------------------------------- */
/* <picture> is a wrapper for format negotiation only — it must not become a
   containing block, or percentage heights on the inner <img> collapse. */
picture { display: contents; }
.media { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--radius); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--arch { border-radius: 999px 999px var(--radius-sm) var(--radius-sm); }
.media--arch-soft { border-radius: clamp(60px, 16vw, 150px) clamp(60px, 16vw, 150px) var(--radius-sm) var(--radius-sm); }
.media--r { border-radius: var(--radius); }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-5-4 { aspect-ratio: 5 / 4; }
.ratio-4-3 { aspect-ratio: 4 / 3; }

.media--plate {
  display: grid; place-items: center;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 58%, var(--shell) 100%);
}
.media--plate::before {
  content: ""; position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%);
  width: 62%; aspect-ratio: 1 / 1.28;
  border: 1px solid rgba(18,63,70,.13); border-bottom: 0; border-radius: 999px 999px 0 0;
}
.media--plate .plate__img {
  position: relative; z-index: 1;
  width: 100%; height: auto; max-height: 100%; object-fit: contain;
}

.media--tint::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(8,39,44,.06), rgba(8,39,44,.34));
  mix-blend-mode: multiply;
}
.media--frame { outline: 1px solid var(--line-soft); outline-offset: 10px; }

.media-zoom img { transition: transform 1.1s var(--ease-out), filter .6s var(--ease); }
a:hover .media-zoom img, .card:hover .media-zoom img { transform: scale(1.045); }

/* Decorative arch outline ------------------------------------------------ */
.arch-outline {
  position: absolute; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 999px 999px 0 0; pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. Hero
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--teal-950);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,39,44,.96) 0%, rgba(8,39,44,.87) 26%, rgba(8,39,44,.58) 48%, rgba(8,39,44,.16) 74%, rgba(8,39,44,.44) 100%),
    linear-gradient(105deg, rgba(8,39,44,.58) 0%, rgba(8,39,44,.05) 60%);
}
.hero__inner {
  position: relative;
  min-height: 74svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(3rem, 10vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero .eyebrow { color: var(--gold-300); }
.hero .eyebrow__mark { border-color: var(--gold); }
.hero__title { color: #fff; max-width: 13em; }
.hero__title .alt {
  display: block; font-style: italic; font-weight: 400;
  color: var(--lime);
}
.hero__body { margin-top: 1.35rem; max-width: 52ch; color: rgba(242,244,241,.9); font-size: clamp(1rem, .96rem + .21vw, 1.15rem); line-height: 1.6; }
.hero__actions { margin-top: 2rem; }
.hero__scroll {
  display: none; position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vw, 5rem);
  writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.62); align-items: center; gap: .8rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 54px; background: linear-gradient(rgba(255,255,255,.5), transparent); }
@media (min-width: 1080px) {
  .hero__scroll { display: flex; }
  .hero__inner { min-height: min(94svh, 960px); padding-top: calc(var(--header-h) + 5rem); }
}

/* Hero facts ribbon ------------------------------------------------------ */
.hero-facts { background: var(--teal-900); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.09); }
.hero-facts__inner { display: grid; grid-template-columns: repeat(2, 1fr); }
.hero-fact {
  padding: 1.35rem clamp(1rem, 3vw, 2rem);
  border-right: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.hero-fact:nth-child(2n) { border-right: 0; }
/* Five facts in a two-up grid: the last one takes the full final row. */
.hero-fact:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.hero-fact__n {
  font-family: var(--ff-display); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.85rem);
  line-height: 1; color: var(--gold-300); letter-spacing: -.02em;
}
.hero-fact__l { margin-top: .45rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); line-height: 1.45; }
@media (min-width: 1000px) {
  .hero-facts__inner { grid-template-columns: repeat(5, 1fr); }
  .hero-fact,
  .hero-fact:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.09); border-bottom: 0; }
  .hero-fact:last-child { grid-column: auto; border-right: 0; }
}

/* Page hero (interior) --------------------------------------------------- */
.phero {
  position: relative; background: var(--teal-900); color: #fff; isolation: isolate; overflow: hidden;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice); background-size: 110px 110px; opacity: .06;
}
.phero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -5%; top: 10%; width: min(44%, 600px); aspect-ratio: 1 / 1.2;
  border: 1px solid rgba(255,255,255,.11); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.phero--media::after { display: none; }
@media (max-width: 899px) { .phero::after { display: none; } }

.phero__inner {
  padding-top: clamp(3.5rem, 9vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 6.5rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.phero__title {
  color: #fff; max-width: 12em;
  font-size: clamp(2.125rem, 1.45rem + 2.85vw, 3.4rem);
  line-height: 1.15; letter-spacing: -.022em;
}
.phero__lede { margin-top: 1.2rem; max-width: 56ch; color: rgba(242,244,241,.82); }
.phero__media { position: relative; }
.phero--media .phero__inner { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .phero--media .phero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
.phero__figure { position: relative; }
.phero__figure .media { box-shadow: 0 40px 80px -50px rgba(0,0,0,.7); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.4rem; }
.crumbs a, .crumbs > span { display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--gold-300); }
.crumbs span { opacity: .5; }

/* -------------------------------------------------------------------------
   10. Marquee
   ---------------------------------------------------------------------- */
.marquee {
  background: var(--sand);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
  padding-block: .95rem;
}
.marquee--dark { background: var(--teal-950); border-color: rgba(255,255,255,.08); }
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-inline: clamp(.75rem, 2vw, 1.5rem);
  font-family: var(--ff-display);
  font-size: clamp(1rem, .9rem + .55vw, 1.5rem);
  color: var(--teal-800);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.marquee--dark .marquee__item { color: rgba(255,255,255,.78); }
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* -------------------------------------------------------------------------
   11. Intro / editorial split
   ---------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
  .split--55 { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .split--45 { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .split--sticky > .split__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.split__figure { position: relative; }

.aside-note {
  margin-top: 1.5rem; padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.aside-note__q {
  font-family: var(--ff-display); font-style: italic; font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem);
  line-height: 1.45; color: var(--teal-700); letter-spacing: -.012em;
}
.aside-note__m {
  margin-top: .9rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}

.pillar-list { margin-top: 2.25rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pillar-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.pillar-list__n {
  font-family: var(--ff-display); font-size: .95rem; color: var(--gold-700);
  letter-spacing: .04em;
}
.pillar-list__t { font-weight: 700; color: var(--teal-900); font-size: 1.02rem; letter-spacing: -.01em; }
.pillar-list__b { grid-column: 2; font-size: .95rem; color: var(--text-soft); margin-top: .2rem; }

/* Stat block ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--cream); padding: clamp(1.25rem, 3vw, 2.15rem); }
.stat__n { font-family: var(--ff-display); font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1; color: var(--teal); letter-spacing: -.03em; }
.stat__l { margin-top: .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); line-height: 1.5; }
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.bg-paper .stat { background: var(--paper); }
.bg-sand .stat { background: var(--sand); }

/* -------------------------------------------------------------------------
   12. Cards
   ---------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.85rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.card:hover { border-color: rgba(18,63,70,.22); transform: translateY(-4px); box-shadow: 0 34px 60px -46px rgba(8,39,44,.55); }
.card__media { position: relative; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--contain {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.15rem, 3.2vw, 2.1rem);
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 58%, var(--shell) 100%);
}
.card__media--contain::before {
  content: ""; position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%);
  width: 66%; aspect-ratio: 1 / 1.3;
  border: 1px solid rgba(18,63,70,.13); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.card__media--contain::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: radial-gradient(120% 90% at 50% 100%, rgba(233,165,49,.12), transparent 70%);
}
.card__media--contain { aspect-ratio: 3 / 2; }
.card__media--contain img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.card:hover .card__media--contain img { transform: none; }
.card__body { padding: clamp(1.25rem, 3vw, 1.85rem); display: flex; flex-direction: column; flex: 1 1 auto; gap: .7rem; }
.card__kicker { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold-700); }
.card__title { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.card__text { font-size: 1rem; color: var(--text); line-height: 1.7; }
.card__foot { margin-top: auto; padding-top: 1rem; }
.card__link::after { content: ""; position: absolute; inset: 0; }

.card--tile {
  background: var(--teal-900); border-color: var(--teal-900);
  color: var(--on-dark-soft); isolation: isolate; overflow: hidden;
  justify-content: center; min-height: 260px;
}
.card--tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice); background-size: 92px 92px; opacity: .07;
}
.card--marked .card__watermark {
  position: absolute; z-index: -1; pointer-events: none;
  left: 7%; right: 7%; bottom: 20%; aspect-ratio: 1000 / 404;
  background-image: var(--wm); background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Drops the artwork's white ground and keeps the green and gold. */
  filter: url(#wm-alpha);
  opacity: .26;
}
@media (min-width: 620px) { .card--marked .card__watermark { bottom: 22%; } }
.card--marked .card__body { position: relative; }
.card--tile .card__kicker { color: var(--gold-300); }
.card--tile .card__title { color: #fff; }
.card--tile .card__text { color: var(--on-dark-soft); }
.card--tile:hover { border-color: var(--gold); }

.card--flat { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.card--flat:hover { transform: none; box-shadow: none; }

/* Programme card --------------------------------------------------------- */
.pcard .card__media { aspect-ratio: 3 / 2; }
.pcard__index {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--cream);
  padding: .55rem .95rem .6rem;
  border-radius: 0 0 12px 0;
  font-family: var(--ff-display); font-size: .95rem; color: var(--teal-700);
}
.pcard--feature { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .pcard--feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .pcard--feature .card__media { aspect-ratio: auto; min-height: 420px; }
  .pcard--feature .card__body { padding: clamp(2rem, 4vw, 3.25rem); justify-content: center; }
  .pcard--feature .card__title { font-size: 1.25rem; }
  .pcard--feature .card__text { font-size: 1.05rem; }
}

/* SDG card --------------------------------------------------------------- */
.sdg-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .sdg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sdg-grid { grid-template-columns: repeat(3, 1fr); } }
.sdg {
  background: var(--paper); padding: clamp(1.35rem, 3vw, 2rem);
  display: flex; gap: 1.1rem; align-items: flex-start;
  transition: background-color .4s var(--ease);
}
.sdg:hover { background: var(--shell); }
.sdg__icon { flex: none; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--sand); }
.sdg__icon img { width: 100%; height: 100%; object-fit: cover; }
.sdg__t { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.sdg__b { margin-top: .45rem; font-size: .92rem; color: var(--text-soft); line-height: 1.6; }

/* SDG chips -------------------------------------------------------------- */
.sdg-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sdg-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .32rem .8rem .32rem .32rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--teal-800);
  background: var(--paper);
}
.sdg-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bg-deep .sdg-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); }

/* Value cards ------------------------------------------------------------ */
.values { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value {
  background: var(--cream); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: .6rem; min-height: 190px;
  position: relative; overflow: hidden;
  transition: background-color .45s var(--ease);
}
.value::after {
  content: ""; position: absolute; right: -34px; bottom: -34px; width: 120px; height: 120px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 120px 120px 0 0;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.value:hover { background: var(--paper); }
.value:hover::after { opacity: 1; transform: none; }
.value__n { font-family: var(--ff-display); font-size: .9rem; color: var(--gold-700); letter-spacing: .06em; }
.value__t { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.value__b { font-size: .93rem; color: var(--text-soft); line-height: 1.62; }
.bg-paper .value { background: var(--paper); }
.bg-paper .value:hover { background: var(--shell); }

/* Approach (dark numbered) ----------------------------------------------- */
.approach { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .approach { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } }
.appr { position: relative; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18); }
.appr__n {
  font-family: var(--ff-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
  line-height: 1; color: rgba(255,255,255,.22); letter-spacing: -.03em; margin-bottom: .85rem;
  transition: color .5s var(--ease);
}
.appr:hover .appr__n { color: var(--gold); }
.appr__t { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); color: #fff; margin-bottom: .7rem; }
.appr__b { font-size: 1rem; color: var(--on-dark-soft); line-height: 1.7; }
.appr__link { margin-top: 1.15rem; display: inline-flex; }

/* -------------------------------------------------------------------------
   13. Pillar rows (Our Work)
   ---------------------------------------------------------------------- */
.prow { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.prow:first-of-type { border-top: 0; }
@media (min-width: 900px) {
  .prow { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .prow:nth-child(even) .prow__figure { order: 2; }
}
.prow__figure { position: relative; }
.prow__n {
  position: absolute; z-index: 2; top: -.35em; left: -.06em;
  font-family: var(--ff-display); font-size: clamp(2.6rem, 1.9rem + 3vw, 4.6rem);
  line-height: 1; color: #B4761A; letter-spacing: -.04em;
  text-shadow: 0 1px 14px rgba(248,245,240,.85);
}
.prow__body { position: relative; }
.prow__kicker { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold-700); margin-bottom: .9rem; }
.prow__title { margin-bottom: 1rem; }
.prow__meta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* Related programmes — the destination is named on the control itself, so a
   thematic pillar never sends you to a differently-titled page unannounced. */
.prow__rel { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.prow__rel-label {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--text-mute); margin-bottom: .85rem;
}
.prow__note { margin-top: .9rem; font-size: .9rem; color: var(--text-mute); line-height: 1.55; }

.linkpills { display: flex; flex-wrap: wrap; gap: .6rem; }
.linkpill {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.05rem;
  border: 1.25px solid var(--line); border-radius: 999px;
  background: var(--paper);
  font-size: .9rem; font-weight: 600; color: var(--teal-800);
  line-height: 1.2;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.linkpill .ico-arrow { width: 15px; height: 15px; flex: none; opacity: .5; transition: transform .35s var(--ease-out), opacity .3s var(--ease); }
.linkpill:hover {
  background: var(--teal-900); border-color: var(--teal-900); color: #fff; transform: translateY(-2px);
}
.linkpill:hover .ico-arrow { opacity: 1; transform: translateX(3px); }
.bg-deep .linkpill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.9); }
.bg-deep .linkpill:hover { background: var(--gold); border-color: var(--gold); color: #2A1C05; }

/* Podcast player ---------------------------------------------------------- */
.podcast-player {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #101010;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -55px rgba(0,0,0,.85);
}
.podcast-player iframe { width: 100%; height: 352px; border: 0; display: block; }
@media (max-width: 619px) { .podcast-player iframe { height: 232px; } }
.podcast-note {
  margin-top: 1rem; font-size: .84rem; color: var(--on-dark-soft); letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
   14. Timeline
   ---------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 0; margin-top: 2rem; }
.tl {
  position: relative; padding: 1.5rem 0 1.5rem 3.25rem;
  border-bottom: 1px solid var(--line);
}
.tl:first-child { border-top: 1px solid var(--line); }
.tl::before {
  content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.tl:first-child::before { top: 1.85rem; }
.tl:last-child::before { bottom: auto; height: 1.85rem; }
.tl::after {
  content: ""; position: absolute; left: 4px; top: 1.7rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--cream); border: 1.5px solid var(--gold);
}
.tl__y { font-family: var(--ff-display); font-size: 1.4rem; color: var(--teal); line-height: 1; margin-bottom: .35rem; letter-spacing: -.01em; }
.tl__b { font-size: .98rem; color: var(--text-soft); }
.bg-paper .tl::after { background: var(--paper); }

/* -------------------------------------------------------------------------
   15. Feature quote / partners
   ---------------------------------------------------------------------- */
.quote-feature { position: relative; text-align: center; max-width: min(100%, 960px); margin-inline: auto; }
.quote-feature__mark {
  width: 46px; height: 23px; margin: 0 auto 1.75rem;
  border: 1.5px solid var(--gold); border-bottom: 0; border-radius: 46px 46px 0 0;
}
.quote-feature__q {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.24; letter-spacing: -.02em;
  color: #fff; text-wrap: balance;
}
.quote-feature__c { margin-top: 1.75rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); }

.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 5vw, 4.5rem); }
.partners { row-gap: clamp(1.5rem, 4vw, 3rem); }
.partner { display: block; }
.partner img {
  height: clamp(26px, 5vw, 44px); width: auto; max-width: min(160px, 28vw); object-fit: contain;
  filter: grayscale(1); opacity: .55; mix-blend-mode: multiply;
  transition: filter .4s var(--ease), opacity .4s var(--ease);
}
.partner:hover img { filter: none; opacity: 1; }
.bg-deep .partner img { mix-blend-mode: normal; filter: grayscale(1) brightness(1.9); opacity: .7; }

/* -------------------------------------------------------------------------
   16. Journal / posts
   ---------------------------------------------------------------------- */
.post-feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .post-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.post-meta__cat { color: var(--gold-700); font-weight: 700; }
.post-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; }

.post-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.post-row {
  position: relative; display: grid; gap: 1rem 1.4rem;
  grid-template-columns: 88px 1fr;
  padding: 1.35rem 0; border-bottom: 1px solid var(--line);
  align-items: center;
  transition: padding-left .4s var(--ease);
}
.post-row:hover { padding-left: .6rem; }
.post-row__media { border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--sand); }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.post-row:hover .post-row__media img { transform: scale(1.07); }
.post-row__t { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.post-row__m { margin-top: .4rem; }
.post-row__link::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 620px) { .post-row { grid-template-columns: 116px 1fr; } }

/* -------------------------------------------------------------------------
   17. Events
   ---------------------------------------------------------------------- */
.event { position: relative; display: grid; gap: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
@media (min-width: 720px) { .event { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.event__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.event__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) { .event__media { aspect-ratio: auto; height: 100%; min-height: 220px; } }
.event__body { padding: clamp(1.3rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.event__badge {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--teal-800); background: var(--lime-100); border: 1px solid rgba(127,168,67,.35);
  padding: .3rem .7rem; border-radius: 999px;
}
.event__when { font-size: .8rem; color: var(--text-mute); letter-spacing: .04em; display: flex; align-items: center; gap: .5rem; }
.event__when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* -------------------------------------------------------------------------
   18. Giving tiers
   ---------------------------------------------------------------------- */
.tiers { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.15rem); position: relative; overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.tier:hover { border-color: rgba(18,63,70,.24); transform: translateY(-4px); box-shadow: 0 34px 60px -46px rgba(8,39,44,.5); }
.tier__cat { font-size: .67rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold-700); }
.tier__amt { font-family: var(--ff-display); font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.35rem); line-height: 1; color: var(--teal); letter-spacing: -.025em; }
.tier__alt { font-size: .82rem; color: var(--text-mute); letter-spacing: .04em; }
.tier__t { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.tier__b { font-size: .93rem; color: var(--text-soft); line-height: 1.62; }
.tier__foot { margin-top: auto; padding-top: 1.1rem; }
.tier__rule { height: 1px; background: var(--line); }

/* -------------------------------------------------------------------------
   19. Forms
   ---------------------------------------------------------------------- */
.field { display: grid; gap: .45rem; }
.field label, .form-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--teal-800);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  font-size: 1rem;
  min-height: 52px;
  color: var(--text);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23164E56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.field input::placeholder, .field textarea::placeholder { color: #6F7A77; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(44,122,131,.14);
}
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: #C0552F; box-shadow: 0 0 0 3px rgba(192,85,47,.12); }
.field__err { font-size: .8rem; color: #A5411F; letter-spacing: 0; text-transform: none; font-weight: 500; }

.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } .form-grid .full { grid-column: 1 / -1; } }
.form-note { font-size: .88rem; color: var(--teal-700); margin-top: .4rem; }
.form-note.is-ok { color: var(--lime-700); font-weight: 600; }
.form-note.is-err { color: #A5411F; }

.form-card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

/* Newsletter ------------------------------------------------------------- */
.newsletter { max-width: 46rem; }
.newsletter__title { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); color: var(--teal-900); }
.newsletter__body { margin-top: .9rem; color: var(--text-soft); font-size: 1rem; }
.newsletter__form { margin-top: 1.5rem; display: grid; gap: .7rem; }
.newsletter__form input {
  width: 100%; min-height: 54px; padding: .9rem 1.15rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 1rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.newsletter__form input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(44,122,131,.14); }
.newsletter__form .form-note { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .newsletter__form { grid-template-columns: 1fr auto; align-items: center; }
}

/* -------------------------------------------------------------------------
   20. Footer
   ---------------------------------------------------------------------- */
.site-footer { position: relative; }
.footer-top { background: var(--sand); border-top: 1px solid var(--line-soft); }
.footer-top__inner {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 900px) { .footer-top__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.footer-brand__plaque { display: inline-block; }
.footer-brand__plaque img { height: 62px; width: auto; filter: brightness(1.09) saturate(1.06); mix-blend-mode: multiply; }
.footer-brand__tag {
  margin-top: 1.1rem; font-family: var(--ff-display); font-style: italic;
  font-size: 1.2rem; color: var(--teal-700); letter-spacing: -.01em;
}

.footer-main { background: var(--teal-900); color: var(--on-dark-soft); position: relative; isolation: isolate; }
.footer-main::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice); background-size: 120px 120px; opacity: .045;
}
.footer-main__inner {
  padding-block: clamp(3rem, 7vw, 5rem);
  display: grid; gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 700px) { .footer-main__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .footer-main__inner { grid-template-columns: 1.45fr 1fr 1.15fr 1.2fr; gap: clamp(2rem, 3vw, 3.5rem); } }
.footer-h {
  font-family: var(--ff-sans); font-size: .72rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 700; color: #fff; margin-bottom: 1.15rem; line-height: 1.5;
}
.footer-col--about .footer-h { font-family: var(--ff-display); font-size: 1.2rem; letter-spacing: -.01em; text-transform: none; line-height: 1.3; }
.footer-about { font-size: .93rem; line-height: 1.7; color: rgba(185,204,203,.9); }
.footer-links li + li { margin-top: .1rem; }
.footer-links a {
  display: inline-block; padding: .32rem 0; font-size: .875rem;
  color: rgba(185,204,203,.92); position: relative;
  transition: color .28s var(--ease), transform .28s var(--ease);
}
.footer-links a::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.footer-links a:hover { color: #fff; transform: translateX(12px); }
.footer-links a:hover::before { transform: scaleX(1); }

.footer-address { font-style: normal; display: grid; gap: .5rem; font-size: .95rem; margin-bottom: 1.5rem; }
.footer-address__line { color: rgba(185,204,203,.9); line-height: 1.6; }
.footer-address a { color: rgba(185,204,203,.92); transition: color .25s var(--ease); }
.footer-address a:hover { color: var(--gold-300); }
.social-row--footer a { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.social-row--footer a:hover { background: var(--gold); border-color: var(--gold); color: #2A1C05; }

.footer-base { background: var(--teal-950); color: rgba(185,204,203,.7); }
.footer-base__inner {
  min-height: 64px; padding-block: 1rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.footer-base__meta { font-style: italic; color: var(--gold-300); }

.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 800; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal-900); color: #fff;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  transition: all .4s var(--ease-out);
  box-shadow: 0 16px 30px -18px rgba(8,39,44,.8);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: #2A1C05; }

/* -------------------------------------------------------------------------
   21. CTA band
   ---------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--teal-800); color: #fff; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice); background-size: 130px 130px; opacity: .07;
}
.cta-band__arch {
  position: absolute; z-index: -1; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: min(760px, 92%); aspect-ratio: 3 / 2;
  border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.cta-band__inner { padding-block: clamp(3.5rem, 8vw, 6.5rem); text-align: center; }
.cta-band__title { color: #fff; max-width: 12.5em; margin-inline: auto; }
.cta-band__body { margin-top: 1.15rem; max-width: 60ch; margin-inline: auto; color: rgba(242,244,241,.8); }
.cta-band .btn-row { margin-top: 2rem; justify-content: center; }

/* -------------------------------------------------------------------------
   22. Misc blocks
   ---------------------------------------------------------------------- */
.checklist { display: grid; gap: .85rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; font-size: 1rem; color: var(--text-soft); line-height: 1.6; }
.checklist li::before {
  content: ""; width: 18px; height: 9px; margin-top: .5rem;
  border: 1.5px solid var(--gold); border-bottom: 0; border-radius: 18px 18px 0 0;
}
.bg-deep .checklist li { color: var(--on-dark-soft); }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-flex; padding: .42rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--teal-800);
  background: var(--paper);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
a.tag:hover { background: var(--teal-900); color: #fff; border-color: var(--teal-900); }
.bg-deep .tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.85); }

/* Definition list (bank details, spec rows) */
.deflist { border-top: 1px solid var(--line); }
.deflist > div {
  display: grid; gap: .2rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.deflist dt {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--text-mute);
}
.deflist dd { margin: 0; font-weight: 600; color: var(--teal-900); }
@media (min-width: 560px) {
  .deflist > div { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
  .deflist dt { padding-top: .1rem; }
}

.note-panel {
  border: 1px dashed rgba(18,63,70,.28); border-radius: var(--radius);
  padding: clamp(1.15rem, 3vw, 1.75rem); background: rgba(233,165,49,.07);
  font-size: .96rem; color: var(--text-soft);
}
.note-panel strong { color: var(--teal-900); }

.contact-tile {
  display: flex; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .35s var(--ease), transform .45s var(--ease-out);
}
.contact-tile:hover { border-color: rgba(18,63,70,.24); transform: translateY(-3px); }
.contact-tile__ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-050); color: var(--teal-700);
}
.contact-tile__ico svg { width: 20px; height: 20px; }
.contact-tile > span { min-width: 0; }
.contact-tile__l { display: block; font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); }
.contact-tile__v {
  display: block; margin-top: .45rem; font-size: .98rem; color: var(--teal-900);
  font-weight: 600; line-height: 1.5; overflow-wrap: anywhere;
}

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--sand); }
.map-wrap iframe { width: 100%; height: clamp(280px, 46vw, 460px); border: 0; display: block; filter: grayscale(.25) contrast(1.02); }

/* Video facade ----------------------------------------------------------- */
.video {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--teal-950);
  aspect-ratio: 16 / 9; cursor: pointer; border: 1px solid rgba(255,255,255,.12);
}
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .5s var(--ease), transform 1.2s var(--ease-out); }
.video:hover img { opacity: .85; transform: scale(1.03); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
}
.video__btn {
  width: clamp(64px, 12vw, 88px); height: clamp(64px, 12vw, 88px); border-radius: 50%;
  background: rgba(248,245,240,.94); color: var(--teal-900);
  display: grid; place-items: center;
  transition: transform .45s var(--ease-out), background-color .35s var(--ease);
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.7);
}
.video:hover .video__btn { transform: scale(1.08); background: var(--gold); }
.video__btn svg { width: 26px; height: 26px; margin-left: 4px; }
.video__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: linear-gradient(to top, rgba(8,39,44,.9), transparent);
  color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}

/* Gallery ---------------------------------------------------------------- */
.gallery { display: grid; gap: clamp(.65rem, 1.6vw, 1.1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery .media { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .gallery > *:nth-child(1) { grid-row: span 2; }
  .gallery > *:nth-child(1) .media { aspect-ratio: 3 / 4; height: 100%; }
}

/* Board ------------------------------------------------------------------ */
.board { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .board { grid-template-columns: repeat(3, 1fr); } }
.member__media { position: relative; overflow: hidden; border-radius: 999px 999px var(--radius-sm) var(--radius-sm); aspect-ratio: 4 / 5; background: var(--sand); }
.member__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1s var(--ease-out), filter .6s var(--ease); filter: saturate(.92); }
.member:hover .member__media img { transform: scale(1.05); filter: none; }
.member { display: flex; flex-direction: column; }
.member__role { margin-top: auto; }
.member__name { margin-top: 1.1rem; font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.member__role { margin-top: .35rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }

/* Board roster (profiles with bios) */
.roster { display: grid; gap: clamp(2rem, 4.4vw, 3.25rem); max-width: 58rem; margin-inline: auto; }
.roster__item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "media head" "bio bio";
  gap: 1.15rem clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4.4vw, 3.25rem);
  border-bottom: 1px solid var(--line-soft);
}
.roster__item:last-child { border-bottom: 0; padding-bottom: 0; }
.roster__media {
  grid-area: media; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand);
  border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
}
.roster__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.94); }
.roster__head { grid-area: head; }
.roster__name { font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; letter-spacing: 0; color: var(--teal-900); }
.roster__role { margin-top: .45rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.roster__bio { grid-area: bio; }
.roster__bio p { color: var(--text); }
@media (min-width: 760px) {
  .roster__item {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "media head" "media bio";
    align-content: start; align-items: start;
    row-gap: .9rem;
  }
  .roster__bio { padding-bottom: .25rem; }
}

/* Anchor offset ---------------------------------------------------------- */
.anchor { position: relative; top: calc(-1 * (var(--header-h) + 20px)); display: block; height: 0; }

/* -------------------------------------------------------------------------
   23. Reveal animation
   ---------------------------------------------------------------------- */
/* The hidden state is scoped to .js, applied by an inline script in <head>.
   If the script never runs, every element stays visible — a JS failure can
   never blank the page. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }

/* The wipe is applied to the CHILD, never to the observed element itself.
   Chrome factors clip-path into intersection geometry, so clipping the
   observed node to zero height meant it could never report as visible and
   the reveal could never fire. */
.js [data-reveal="mask"] { opacity: 1; transform: none; }
.js [data-reveal="mask"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track { animation: none; }
}

/* -------------------------------------------------------------------------
   24. Mobile-specific refinements
   ---------------------------------------------------------------------- */
@media (max-width: 619px) {
  :root { --section-y: clamp(3.25rem, 11vw, 4.25rem); --section-y-lg: clamp(3.75rem, 12vw, 5rem); }
  .hero__inner { min-height: 70svh; }
  .hero__title { max-width: 14ch; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .btn-row { gap: .6rem; }
  .btn { min-height: 50px; }
  .sec-head { margin-bottom: 1.75rem; }
  .prow { padding-block: 2.25rem; }
  .prow__n { font-size: 2.8rem; top: -.2rem; }
  .media--arch { border-radius: 220px 220px var(--radius-sm) var(--radius-sm); }
  .footer-base__inner { justify-content: flex-start; }
  .to-top { width: 42px; height: 42px; }

  /* Horizontal rails — six programme cards become one swipeable shelf
     instead of six full screens of scrolling. */
  .grid--rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-bottom: .35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .grid--rail::-webkit-scrollbar { display: none; }
  .grid--rail > * { scroll-snap-align: start; grid-column: auto !important; }
  .grid--rail .card:hover { transform: none; box-shadow: none; }
  .grid--rail .pcard--feature .card__media { aspect-ratio: 3 / 2; min-height: 0; }
  .grid--rail .pcard--feature .card__body { padding: 1.25rem; }
  .grid--rail .pcard--feature .card__title { font-size: 1.125rem; }
  .grid--rail .pcard--feature .card__text { font-size: .95rem; }
  .rail-hint { display: flex; }

  /* Flat list treatment for simple cards */
  .grid--flat-m { gap: 0; }
  .grid--flat-m .card {
    background: transparent !important; border: 0; border-top: 1px solid var(--line);
    border-radius: 0; transform: none !important; box-shadow: none !important;
  }
  .grid--flat-m .card__body { padding: 1.15rem 0 1.35rem; gap: .45rem; }
  .grid--flat-m .card__title { font-size: 1.125rem; }

  /* SDG rows */
  .sdg { padding: 1.15rem 1.1rem; gap: .9rem; }
  .sdg__icon { width: 44px; height: 44px; }
  .sdg__t { font-size: 1.05rem; }
  .sdg__b { font-size: .89rem; }

  /* Footer link columns pair up */
  .footer-main__inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .footer-col--about, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-links a { font-size: .875rem; padding: .28rem 0; }
  .footer-top__inner { padding-block: 2.5rem; }
}

.rail-hint {
  display: none; align-items: center; gap: .5rem; margin-top: .9rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}
.rail-hint::after {
  content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent);
}
.bg-deep .rail-hint { color: var(--on-dark-soft); }

/* Tablet ----------------------------------------------------------------- */
@media (min-width: 620px) and (max-width: 1079px) {
  .hero__inner { min-height: 78svh; }
  /* Portrait crops become landscape when a split collapses to one column,
     so a single image never eats a whole screen. */
  .split__aside .ratio-3-4, .split__aside .ratio-4-5 { aspect-ratio: 16 / 10; }
  .split__aside .media--arch-soft { border-radius: 90px 90px var(--radius-sm) var(--radius-sm); }
  .phero__figure .ratio-5-4 { aspect-ratio: 16 / 9; }
  .prow__figure .ratio-5-4 { aspect-ratio: 4 / 3; }
}

/* Large ------------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root { --shell-max: 1360px; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .site-header, .drawer, .to-top, .marquee, .site-footer .footer-top { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* Ecosystem diagram ------------------------------------------------------- */
.ecosystem { margin: 0; }
.ecosystem__svg { width: 100%; height: auto; display: block; overflow: visible; }
.eco-centre {
  font-family: var(--ff-display); font-size: 35px; font-weight: 600;
  fill: #2A1C05; letter-spacing: -.5px;
}
.eco-centre-sub {
  font-family: var(--ff-sans); font-size: 13px; font-weight: 700;
  fill: #6B4A0C; letter-spacing: 2.2px; text-transform: uppercase;
}
.eco-n {
  font-family: var(--ff-display); font-size: 19px; fill: var(--gold-300); letter-spacing: .5px;
}
.eco-n--dark { fill: #5E7A2E; }
.eco-l {
  font-family: var(--ff-display); font-size: 21px; fill: #fff; letter-spacing: -.2px;
}
.eco-l--dark { fill: #22381A; }
.ecosystem__cap {
  margin-top: 1.1rem; text-align: center;
  font-size: .82rem; color: var(--text-mute); letter-spacing: .04em;
}
@media (max-width: 619px) {
  .eco-centre { font-size: 38px; }
  .eco-l { font-size: 23px; }
  .eco-n { font-size: 20px; }
  .eco-centre-sub { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   OUR ROOTS — long-form archive article
   ------------------------------------------------------------------------- */

/* Article masthead — a deep teal plate with an archival marker. */
.ahero {
  position: relative; isolation: isolate;
  background: var(--teal-900); color: var(--on-dark);
  padding-top: calc(var(--header-h) + clamp(2.6rem, 6vw, 5rem));
  padding-bottom: clamp(2.8rem, 6vw, 5.25rem);
  overflow: hidden;
}
.ahero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--lattice); background-size: 132px 132px;
  opacity: .07;
}
.ahero::after {
  content: ''; position: absolute; z-index: -1;
  right: -14%; top: -34%; width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, rgba(201, 135, 31, .3), transparent 62%);
}
.ahero__inner { max-width: 54rem; }
.ahero .crumbs { margin-bottom: clamp(1.4rem, 3vw, 2.1rem); }
.ahero__marker {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .8rem;
  border: 1px solid rgba(242, 206, 140, .38); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-300);
}
.ahero__marker-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-300);
  box-shadow: 0 0 0 4px rgba(242, 206, 140, .18);
}
.ahero__title { margin-top: 1.35rem; color: #fff; max-width: 17em; text-wrap: balance; }
.ahero__meta {
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.15rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--line-dark);
  font-size: .8rem; letter-spacing: .05em; color: var(--on-dark-soft);
}
.ahero__meta li { position: relative; }
.ahero__meta li + li::before {
  content: ''; position: absolute; left: -.75rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5;
}
/* On narrow screens the row wraps, which would strand a dot at the start of a
   line — stack the facts instead. */
@media (max-width: 619px) {
  .ahero__meta { display: grid; gap: .35rem; }
  .ahero__meta li + li::before { display: none; }
}

/* Body ------------------------------------------------------------------- */
.art { --measure: 40rem; }
.art__inner > * { max-width: var(--measure); margin-inline: auto; }
.art__inner > .art__bleed { max-width: min(100%, 62rem); }
.art__inner > * + * { margin-top: 1.25rem; }
.art__inner p { font-size: clamp(1rem, .97rem + .14vw, 1.0625rem); line-height: 1.7; color: var(--text); }
.art__inner p a { color: var(--teal-700, var(--teal-800)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(28, 93, 101, .35); }
.art__inner p a:hover { text-decoration-color: currentColor; }
.art__standfirst {
  font-family: var(--ff-display); font-size: clamp(1.22rem, 1.06rem + .68vw, 1.6rem) !important;
  line-height: 1.42 !important; color: var(--teal-900) !important; letter-spacing: -.012em;
  padding-left: clamp(1rem, 2.4vw, 1.5rem);
  border-left: 3px solid var(--gold-600);
}
.art__inner .art__label {
  margin-top: clamp(2.6rem, 5vw, 3.9rem) !important;
  font-size: .8125rem; font-weight: 600; line-height: 1.5; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-700);
}
.art__label + p, .art__label + ul { margin-top: .9rem; }
.art-list { display: grid; gap: .85rem; padding-left: 0; list-style: none; }
.art-list li {
  position: relative; padding-left: 1.7rem;
  font-size: clamp(1rem, .97rem + .14vw, 1.0625rem); line-height: 1.7; color: var(--text);
}
.art-list li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .7rem; height: 1px; background: var(--gold-600);
}

/* Figures ---------------------------------------------------------------- */
.art-fig { margin-top: clamp(2.2rem, 4.5vw, 3.25rem) !important; }
.art-fig .media { border-radius: var(--radius); }
.art-fig img { width: 100%; height: auto; display: block; }
.art-fig figcaption {
  margin-top: .85rem; max-width: 46rem;
  font-size: .84rem; line-height: 1.6; color: var(--text-mute);
}
.art-duo { display: grid; gap: clamp(1.1rem, 2.6vw, 1.85rem); margin-top: clamp(2.2rem, 4.5vw, 3.25rem) !important; }
.art-duo .art-fig { margin-top: 0 !important; }
@media (min-width: 760px) { .art-duo { grid-template-columns: 1fr 1fr; } }

/* Stat row --------------------------------------------------------------- */
.art-stats {
  display: grid; gap: clamp(.6rem, 1.4vw, .9rem);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}
@media (min-width: 860px) { .art-stats { grid-template-columns: repeat(4, 1fr); } }
.art-stat {
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  background: var(--shell); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  border-top: 3px solid var(--gold-600);
}
.art-stat__n {
  font-family: var(--ff-display); font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  line-height: 1; color: var(--teal-900); letter-spacing: -.02em;
}
.art-stat__l {
  margin-top: .6rem; font-size: .8rem !important; line-height: 1.5 !important;
  color: var(--text-mute) !important;
}

/* Student questions ------------------------------------------------------ */
.art-qs { display: grid; gap: .8rem; margin-top: clamp(1.5rem, 3vw, 2.2rem) !important; }
@media (min-width: 860px) { .art-qs { grid-template-columns: 1fr 1fr; } }
.art-q {
  margin: 0 !important; max-width: none !important;
  padding: clamp(1.05rem, 2.2vw, 1.45rem) clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--lime-100); border-left: 3px solid var(--lime-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--ff-sans); font-style: italic;
  font-size: clamp(1rem, .95rem + .25vw, 1.15rem) !important;
  line-height: 1.6 !important; color: #2E3D18 !important;
}
.art-q::before { content: '“'; }
.art-q::after { content: '”'; }

/* School table ----------------------------------------------------------- */
.art-table-wrap {
  margin-top: clamp(1.5rem, 3vw, 2.2rem) !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.art-scroll-hint {
  margin-top: 1.4rem !important; margin-bottom: -.5rem;
  font-size: .74rem !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute) !important; font-weight: 700;
}
@media (min-width: 720px) { .art-scroll-hint { display: none; } }
.art-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .88rem; }
.art-table th, .art-table td { padding: .78rem .95rem; text-align: left; }
.art-table thead th {
  background: var(--teal-900); color: #fff;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap;
}
.art-table thead th:nth-child(n+3), .art-table td:nth-child(n+3), .art-table tfoot td { text-align: right; }
.art-table tbody th { font-weight: 600; color: var(--teal-900); }
.art-table tbody td { color: var(--text-soft); }
.art-table tbody tr + tr th, .art-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.art-table tbody tr:nth-child(even) { background: rgba(240, 233, 222, .38); }
.art-table tfoot th, .art-table tfoot td {
  background: var(--gold-100); color: var(--gold-700);
  font-weight: 700; border-top: 2px solid var(--gold-600);
}

/* Quote ------------------------------------------------------------------ */
.art-quote {
  margin-top: clamp(2.4rem, 5vw, 3.5rem) !important;
  padding-left: clamp(1.1rem, 2.6vw, 1.75rem);
  border-left: 3px solid var(--gold-600);
}
.art-quote p {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(1.18rem, 1.02rem + .68vw, 1.55rem) !important;
  line-height: 1.45 !important; color: var(--teal-900) !important; letter-spacing: -.012em;
}
.art-quote cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-700);
}

/* Report footer ---------------------------------------------------------- */
.art-foot {
  margin-top: clamp(2.6rem, 5vw, 3.75rem) !important;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  background: var(--sand); border-radius: var(--radius-sm);
}
.art-foot p {
  font-size: .84rem !important; line-height: 1.7 !important;
  color: var(--text-soft) !important; font-style: italic;
}

/* Our Roots cards (Knowledge Hub) ---------------------------------------- */
.roots-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 800px) { .roots-grid { grid-template-columns: 1fr 1fr; } }
.rootcard {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease-out);
}
.rootcard:hover { border-color: rgba(242, 206, 140, .42); background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.rootcard__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 0; }
.rootcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rootcard__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 52, 58, .94) 0%, rgba(13, 52, 58, .8) 14%, rgba(13, 52, 58, 0) 56%);
}
.rootcard__year {
  position: absolute; left: clamp(.9rem, 2vw, 1.25rem); bottom: clamp(.8rem, 2vw, 1.1rem); z-index: 1;
  font-family: var(--ff-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1; color: var(--gold-300); letter-spacing: -.01em;
}
.rootcard__body { padding: clamp(1.35rem, 3vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.rootcard__kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-300);
}
.rootcard__title { margin-top: .7rem; color: #fff; }
.rootcard__link { color: inherit; }
.rootcard__link::after { content: ''; position: absolute; inset: 0; }
.rootcard:hover .rootcard__title { color: var(--gold-300); }
.rootcard__text { margin-top: .85rem; color: var(--on-dark-soft); font-size: 1rem; line-height: 1.7; }
.rootcard__foot { margin-top: auto; padding-top: 1.35rem; }

/* Hero fact ribbon note --------------------------------------------------- */
.hero-facts__note {
  padding: clamp(1rem, 2.2vw, 1.35rem) 0 clamp(1.15rem, 2.4vw, 1.5rem);
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .78rem; line-height: 1.65; color: var(--on-dark-soft);
}
.hero-facts__note a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.hero-facts__note a:hover { color: #fff; }

/* "More from the archive" — horizontal next-report card ------------------- */
.nextgrid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 900px) { .nextgrid:not(.nextgrid--solo) { grid-template-columns: 1fr 1fr; } }
.nextcard {
  position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 1.5rem);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease-out);
}
.nextcard:hover { border-color: rgba(201, 135, 31, .4); box-shadow: 0 18px 44px -30px rgba(13, 52, 58, .45); transform: translateY(-2px); }
@media (min-width: 700px) { .nextgrid--solo .nextcard { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.nextcard__media { position: relative; aspect-ratio: 16 / 10; }
.nextcard__media img { width: 100%; height: 100%; object-fit: cover; }
.nextcard__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 52, 58, .96) 0%, rgba(13, 52, 58, .88) 24%, rgba(13, 52, 58, 0) 58%);
}
.nextcard__year {
  position: absolute; z-index: 1; left: .9rem; bottom: .7rem;
  font-family: var(--ff-display); font-size: 1.75rem; line-height: 1; color: var(--gold-300);
}
.nextcard__body { padding: clamp(.25rem, 1vw, .75rem) clamp(.25rem, 1.4vw, 1rem) clamp(.5rem, 1vw, .75rem); }
.nextcard__kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-700);
}
.nextcard__title { margin-top: .7rem; color: var(--teal-900); }
.nextcard__link { color: inherit; }
.nextcard__link::after { content: ''; position: absolute; inset: 0; }
.nextcard:hover .nextcard__title { color: var(--gold-700); }
.nextcard__text { margin-top: .85rem; color: var(--text-soft); line-height: 1.7; max-width: 46ch; }
.nextcard__foot { margin-top: 1.35rem; }

/* Even heights in the paired article figures. */
.art-duo .media { aspect-ratio: 4 / 3; }
.art-duo .media img { width: 100%; height: 100%; object-fit: cover; }

/* Announced-but-unpublished writing ------------------------------------- */
.pending {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.pending__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-700);
}
.pending__list { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .1rem; }
.pending__list li {
  display: grid; gap: .15rem .9rem; align-items: baseline;
  padding: .85rem 0; border-top: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .pending__list li { grid-template-columns: 12rem minmax(0, 1fr); } }
.pending__cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mute);
}
.pending__t {
  font-family: var(--ff-sans); font-weight: 600; font-size: clamp(1rem, .96rem + .18vw, 1.25rem);
  line-height: 1.4; color: var(--teal-900); letter-spacing: 0;
}
.pending__note { margin-top: 1.1rem; font-size: .82rem; color: var(--text-mute); }

/* Partner strip: unlinked entries keep the linked entries' box metrics. */
span.partner { cursor: default; }

/* Memorial panel (FFJ-ESS) ----------------------------------------------- */
.memorial {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 60rem;
  padding: clamp(1.6rem, 3.4vw, 2.5rem);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center;
}
@media (min-width: 700px) { .memorial { grid-template-columns: 200px minmax(0, 1fr); } }
.memorial__crest { width: 148px; justify-self: start; }
@media (min-width: 700px) { .memorial__crest { width: 200px; } }
.memorial__crest img { width: 100%; height: auto; display: block; }
.memorial__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-700);
}
.memorial__body {
  margin-top: 1rem;
  font-family: var(--ff-display); font-size: clamp(1.02rem, .96rem + .34vw, 1.22rem);
  line-height: 1.6; color: var(--teal-900); letter-spacing: -.008em;
}


/* The footer newsletter band is light, so the light eyebrow fails there. */
.footer-top .eyebrow--light { color: var(--gold-700); }
.footer-top .eyebrow--light .eyebrow__mark { border-color: var(--gold-700); }


/* Brand guide §4.6 — paragraphs are never centred; only headings and CTAs are. */
.sec-head--center .sec-head__body,
.sec-head--center p:not(.eyebrow) { text-align: left; }
.sec-head--center .sec-head__body { margin-inline: auto; }


/* H4 ceiling holds on the feature card too (brand guide §4.2). */
.pcard--feature .card__title { font-size: 1.25rem; }

/* Programme-documentation video, sitting with the figure it evidences -------- */
.factvid {
  display: grid; gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 0 clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 640px) { .factvid { grid-template-columns: minmax(0, 232px) minmax(0, 1fr); } }
.factvid__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: var(--teal-800);
}
.factvid__media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .4s var(--ease), transform .7s var(--ease-out); }
.factvid__media:hover img, .factvid__media:focus-visible img { opacity: 1; transform: scale(1.03); }
.factvid__kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-300); line-height: 1.5;
}
.factvid__t {
  margin-top: .5rem;
  font-family: var(--ff-sans); font-weight: 600;
  font-size: clamp(1rem, .96rem + .18vw, 1.25rem); line-height: 1.4; color: #fff;
}
.factvid__b {
  margin-top: .5rem; max-width: 62ch;
  font-size: .9375rem; line-height: 1.7; color: var(--on-dark-soft);
}
.video__btn--sm { width: 46px; height: 46px; }



/* Learn more expander ----------------------------------------------------- */
.more { margin-top: .9rem; }
.more__toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-700);
  border-bottom: 1px solid rgba(143, 95, 19, .35);
  align-self: flex-start; width: fit-content;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle:hover { color: var(--teal-800); border-color: var(--teal-800); }
.more__toggle .ico-arrow { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.more[open] .more__toggle .ico-arrow { transform: rotate(90deg); }
.more__close { display: none; }
.more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }
.more__body { padding-top: .35rem; }
.more__body > p + p { margin-top: 1.05em; }
.more[open] .more__body { animation: moreIn .45s var(--ease-out) both; }
@keyframes moreIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .more[open] .more__body { animation: none; } }

/* ========================================================================
   AUDIT FIXES — desktop + mobile pass
   Each rule below overrides an earlier declaration at equal specificity.
   Grouped by defect so the reason for every override stays legible.
   ===================================================================== */

/* A1. Button labels disappeared while keyboard-focused: the ::before fill slid
   in on :focus-visible but the compensating colour change existed only on
   :hover, leaving 1.00:1 text. Mirror every hover colour onto focus. */
.btn--gold:focus-visible  { color: #fff; }
.btn--ghost:focus-visible { color: #fff; border-color: var(--teal-900); }
.btn--light:focus-visible { color: var(--teal-900); border-color: #fff; }
.btn--lime:focus-visible  { color: #fff; border-color: var(--teal-900); }

/* A2. Collapsed mobile-drawer accordions kept 22 focusable links in the tab
   order with zero visible height. Remove them from the tab order while shut. */
.mnav__panel > ul { visibility: hidden; transition: visibility 0s .42s; }
.mnav__panel.is-open > ul { visibility: visible; transition-delay: 0s; }

/* A3. Breadcrumbs sat at 2.5:1 — the .62 alpha and the .5 opacity compounded. */
.crumbs { color: rgba(255,255,255,.84); }
.crumbs span { opacity: 1; }
.crumbs span[aria-hidden="true"] { opacity: .58; }

/* A4. Form fields removed the site focus ring and replaced it with a 1.20:1
   glow — the weakest indicator on the site, exactly where users type. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
  border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(44,122,131,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #5F6B68; }

/* A5. The video facade's label wrapped to four lines on phones and printed
   itself across the near-white play button (1.56:1). Cap the label and lift
   the button clear of it. */
.video__label {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 700px) {
  .video__play { align-items: start; padding-top: 14%; }
}

/* A6. Hero scrim thinned to .16 alpha at the 74% stop; on short mobile heroes
   the kicker and headline landed in that band over a daylight photograph. */
.hero::after {
  background:
    linear-gradient(to top, rgba(8,39,44,.96) 0%, rgba(8,39,44,.89) 28%,
                            rgba(8,39,44,.70) 54%, rgba(8,39,44,.42) 80%,
                            rgba(8,39,44,.52) 100%),
    linear-gradient(105deg, rgba(8,39,44,.58) 0%, rgba(8,39,44,.05) 60%);
}
@media (max-width: 619px) { .hero .eyebrow { color: var(--gold-100, #F7E3BE); } }

/* A7. Text-only zoom to 200% forced horizontal scrolling on every route:
   grid items default to min-width:auto and the contact email is unbreakable. */
.footer-main__inner > *, .footer-top__inner > *, .footer-col { min-width: 0; }
.footer-address, .footer-address > *, .footer-about { overflow-wrap: anywhere; }
.hero-facts__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* NOTE: the 5-column desktop rule lives in a media query ABOVE this block, so
   it must be restated here or this unconditional rule would win. */
@media (min-width: 1000px) { .hero-facts__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hero-fact, .hero-fact__l, .deflist dt, .deflist dd { min-width: 0; overflow-wrap: anywhere; }
.btn { min-width: 0; }

/* A8. The SDG grid draws its dividers as 1px gaps over a dark backing colour,
   so the empty cell left by 8 items in a 3-column track rendered as a solid
   grey block. One filler cell, only at the width where the hole exists. */
.sdg-grid::after { content: none; }
@media (min-width: 1000px) {
  .sdg-grid::after { content: ""; display: block; background: var(--paper); }
}

/* A9. Partner logos are width:auto with no intrinsic size until the (remote)
   file lands, so the strip collapsed and then jumped. Reserve the box. */
.partner { display: grid; place-items: center; min-width: 88px; min-height: 44px; }

/* A10. Focus rings were clipped by overflow:hidden card and rail ancestors. */
.rootcard__media:focus-visible, .card__link:focus-visible,
.nextcard__media:focus-visible, .card .tlink:focus-visible { outline-offset: -3px; }

/* A11. Sub-11px labels are below the practical floor on a phone. */
.event__badge, .pending__cat, .contact-tile__l, .prow__rel-label,
.tier__cat, .drawer__label, .utility__social > span { font-size: .7rem; }
@media (max-width: 619px) {
  .event__badge, .pending__cat, .contact-tile__l,
  .prow__rel-label, .tier__cat, .drawer__label { font-size: .75rem; }
}

/* A12. "Follow" in the utility bar dropped to 2.53:1 over the hero photo. */
.utility__social > span { opacity: 1; }

/* A13. Ecosystem diagram labels on /about-us/ were 3.49:1 and 3.79:1. */
.eco-n--dark { fill: #46601F; }
.eco-centre-sub { fill: #4E3505; }

/* A14. Skip link landed 22px under the sticky masthead on desktop. */
#main { scroll-margin-top: calc(var(--header-h, 84px) + 18px); }

/* A15. Desktop submenu was unreachable when Tab was held down, because
   `visibility` was in the transition list and flips discretely at the end. */
.submenu { transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility 0s .3s; }
.nav__item--has-children:hover .submenu,
.nav__item--has-children:focus-within .submenu { transition-delay: 0s; }
.nav__item--has-children.is-dismissed .submenu {
  visibility: hidden; opacity: 0; pointer-events: none; transition-delay: 0s;
}

/* A16. Content already in the first viewport is shown immediately rather than
   faded in: the 0.85s opacity / 1.05s clip-path transitions were holding LCP
   roughly a second behind first paint on every interior route. */
[data-reveal].is-in--now { transition: none; animation: none; }

/* A17. Spotify facade. The embed previously loaded a full third-party player
   (its own JS, fonts and images) as soon as it neared the viewport; it is now
   click-to-load. It must READ as a player, not as an empty card: it sits on a
   dark band, so it takes the same dark treatment as the embed it replaces and
   holds exactly the embed's height, so nothing shifts when it loads. */
.spot {
  display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: center;
  width: 100%; height: 352px; padding: clamp(1.1rem, 3vw, 1.75rem);
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.spot:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.spot__art { display: block; border-radius: var(--radius-sm); overflow: hidden; background: rgba(0,0,0,.2); min-height: 0; }
.spot__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot__body { display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-width: 0; }
.spot__k {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-300); font-weight: 600;
}
.spot__t {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.85rem); line-height: 1.2; color: #fff;
}
.spot__b { font-size: .95rem; color: var(--on-dark-soft); line-height: 1.55; }
.spot__cta {
  display: inline-flex; align-items: center; gap: .6rem; align-self: start;
  margin-top: .85rem; padding: .7rem 1.35rem; border-radius: 999px;
  background: #1DB954; color: #06301A; font-weight: 700; font-size: .92rem;
  transition: transform .35s var(--ease-out);
}
.spot:hover .spot__cta { transform: translateY(-2px); }
.spot__cta svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
@media (min-width: 760px) {
  .spot { grid-template-columns: 320px 1fr; grid-template-rows: 1fr; }
}
@media (max-width: 619px) {
  .spot { height: auto; min-height: 232px; grid-template-rows: 168px auto; }
}
.video__fallback {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 3;
  padding: .6rem 1.1rem; border-radius: 999px; background: var(--gold);
  color: #2A1C05; font-size: .82rem; font-weight: 600; text-decoration: none;
}

/* A18. Last sub-11px label. */
.hero__scroll { font-size: .72rem; }

/* A7b. The remaining 200%-text-zoom overflow: grid items default to
   min-width:auto, so a single long word set at 32px root font-size sized its
   whole track wider than the viewport (a 240px .split resolved a 384px track).
   Let items shrink below their min-content, and let long words break when
   they genuinely cannot fit. Neither has any effect at normal text sizes. */
.split > *, .grid > *, .approach > *, .form-grid > *, .roster > *,
.sdg-grid > *, .deflist > div > *, .pending__list li > *, .event > *,
.hero-facts__inner > *, .contact-grid > * { min-width: 0; }
h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption,
blockquote, cite, label, .btn span, .tlink { overflow-wrap: break-word; }

/* A5b. On the narrowest phones the play button still met the two-line label:
   percentage padding resolves against width, so 14% was ~39px on a 280px box.
   Pin it to the top instead and take the button down a size. */
@media (max-width: 700px) {
  .video__play { align-items: start; padding-top: .7rem; }
  .video__btn { width: 54px; height: 54px; }
  .video__btn svg { width: 20px; height: 20px; }
}

/* A7c. Same min-content problem, remaining containers. Kept as an explicit
   list rather than a universal selector so normal layout is untouched. */
.phero__inner > *, .roster > *, .members > *, .prow > *, .tier > *,
.contact-tile > *, .form-card > *, .split__aside > *, .sec-head > *,
.quote-feature > *, .factvid > *, .memorial > * { min-width: 0; }
.roster, .members { max-width: min(58rem, 100%); }

/* A7d. .board tracks were repeat(2, 1fr) with min-width:auto items, so a long
   board member's name at 200% text zoom pushed both tracks past the viewport
   (a 240px grid resolved 197px + 144px). Also drop to one column on the
   narrowest phones, where two portrait cards were never comfortable. */
.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board > * { min-width: 0; }
@media (min-width: 900px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .board { grid-template-columns: minmax(0, 1fr); } }

/* Publications ----------------------------------------------------------- */
/* Real downloadable documents in the Knowledge Hub: cover, metadata, summary,
   download. Stacks to a single column on phones with the cover on top. */
.pubs {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
}
.pub {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
@media (min-width: 700px) { .pub { grid-template-columns: 220px minmax(0, 1fr); } }
.pub__cover {
  display: block; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 18px 44px -26px rgba(18,63,70,.55);
  max-width: 220px; transition: transform .5s var(--ease-out);
}
.pub__cover:hover { transform: translateY(-3px); }
.pub__cover img { width: 100%; height: auto; display: block; }
.pub__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .55rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-700, #8A6512); font-weight: 600;
}
.pub__meta span + span::before { content: "·"; margin-right: .55rem; opacity: .6; }
.pub__title {
  margin-top: .55rem;
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); line-height: 1.25; color: var(--teal-900);
}
.pub__text { margin-top: .8rem; color: var(--text-soft); line-height: 1.7; }
.pub__credit { margin-top: .8rem; font-size: .85rem; color: var(--text-soft); opacity: .85; }

/* WordPress form handling ------------------------------------------------ */
/* Honeypot: off-screen rather than display:none, so bots that check for
   visibility still fill it in. Never shown to a real visitor. */
.sv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note--ok {
  margin-bottom: 1.1rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm);
  background: rgba(44,122,131,.1); border: 1px solid rgba(44,122,131,.34);
  color: var(--teal-900); font-weight: 600;
}
.form-note--err {
  margin-bottom: 1.1rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm);
  background: rgba(165,65,31,.08); border: 1px solid rgba(165,65,31,.34);
  color: #8A3618; font-weight: 600;
}

/* ========================================================================
   GALLERY PAGE
   The visual record, grouped by project. Photographs here carry captions,
   so the grid sizes to the picture and lets the caption run under it
   rather than forcing every cell to the same height.
   ===================================================================== */
.gallery__more { margin-top: clamp(1.4rem, 3vw, 2.2rem); text-align: center; }

/* Sticky year/section jump bar. */
.gjump { position: sticky; top: 0; z-index: 20; background: rgba(248, 245, 240, .92); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); }
.gjump__inner { display: flex; gap: clamp(.5rem, 2vw, 1.5rem); overflow-x: auto; scrollbar-width: none; padding-block: .7rem; }
.gjump__inner::-webkit-scrollbar { display: none; }
.gjump__link {
  flex: 0 0 auto; display: grid; gap: .1rem; padding: .45rem .9rem;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--teal-900);
  transition: background .25s var(--ease);
}
.gjump__link:hover, .gjump__link:focus-visible { background: rgba(18, 63, 70, .07); }
.gjump__y { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.gjump__t { font-family: var(--ff-display); font-size: .98rem; line-height: 1.2; }

/* Group header: title left, standfirst right on wide screens. */
.ggroup__head { display: grid; gap: clamp(1rem, 2.5vw, 2.5rem); margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
@media (min-width: 900px) { .ggroup__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.ggroup__title { margin-top: .6rem; }
.ggroup__body > * + * { margin-top: 1rem; }

/* The grid itself. */
.ggrid { display: grid; gap: clamp(1rem, 2.4vw, 1.9rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gfig { min-width: 0; }
.gfig .media { aspect-ratio: 4 / 3; }
.gfig__cap {
  margin-top: .7rem; font-size: .82rem; line-height: 1.5;
  color: var(--text-mute); text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .gjump { backdrop-filter: none; }
}

/* A card for a piece that is announced but not yet published. */
.card__flag {
  position: absolute; left: .8rem; top: .8rem; z-index: 2;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(13, 52, 58, .88); color: #fff;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: saturate(140%) blur(6px);
}



/* ========================================================================
   LISTEN — the podcast band on Unsilenced Voices That Matter.
   The newest episode is the whole point, so it gets the full width of the
   column. Everywhere else you can listen sits underneath as three equal
   choices; the Spotify one swaps itself for the embedded archive in place.
   ===================================================================== */
.plisten { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }
.plisten__stage { max-width: 62rem; margin-inline: auto; width: 100%; }
.plisten__stage .video { border-radius: var(--radius-lg); }
.plisten__stage iframe { display: block; width: 100%; border: 0; border-radius: var(--radius-lg); }

.plisten__ways { max-width: 62rem; margin-inline: auto; width: 100%; }
.plisten__k {
  margin-bottom: .9rem; text-align: center;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.plisten__row { display: grid; gap: clamp(.7rem, 1.6vw, 1rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .plisten__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pbtn {
  display: flex; align-items: center; gap: .85rem; min-width: 0;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; text-align: left; text-decoration: none; cursor: pointer;
  font: inherit; width: 100%;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pbtn:hover, .pbtn:focus-visible { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
.pbtn__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.pbtn__ico svg { width: 21px; height: 21px; fill: currentColor; }
.pbtn__txt { display: grid; gap: .12rem; min-width: 0; }
.pbtn__n { font-family: var(--ff-display); font-size: 1.02rem; line-height: 1.2; }
.pbtn__s { font-size: .8rem; line-height: 1.35; color: var(--on-dark-soft); text-wrap: pretty; }

/* Spotify leads, because it is the one that plays without leaving the page. */
.pbtn--spotify { background: #1DB954; border-color: #1DB954; color: #06301A; }
.pbtn--spotify:hover, .pbtn--spotify:focus-visible { background: #1ed760; border-color: #1ed760; }
.pbtn--spotify .pbtn__ico { background: rgba(0, 0, 0, .14); }
.pbtn--spotify .pbtn__s { color: rgba(6, 48, 26, .78); }

@media (prefers-reduced-motion: reduce) { .pbtn:hover, .pbtn:focus-visible { transform: none; } }

/* Episode caption beneath the player. */
.plisten__cap {
  margin-top: 1rem; color: #fff; font-family: var(--ff-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.28rem); line-height: 1.35; text-wrap: pretty;
}
.plisten__capk {
  display: block; margin-bottom: .3rem;
  font-family: var(--ff-body); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}

/* ========================================================================
   AUDIT FIXES, round 2
   Findings from the full sweep at 320/360/390/768/1024/1440 and at 200%
   text zoom. Each rule below names the check it answers.
   ===================================================================== */

/* 1. Gallery jump bar: the year sat in --gold on the cream bar at 1.95:1.
      WCAG 1.4.3 wants 4.5:1 for text this size. --gold-700 on cream is 6.4:1. */
.gjump__y { color: var(--gold-700); }

/* 2. The year stamps on the archive cards sit directly on a photograph, so
      their contrast depends on whichever picture is behind them. A scrim
      under the glyphs makes them legible over a light frame as well as a
      dark one, without changing the look on the dark ones. */
.rootcard__year,
.nextcard__year {
  padding: .18em .5em;
  border-radius: var(--radius-sm);
  background: rgba(8, 39, 44, .58);
  backdrop-filter: saturate(140%) blur(3px);
}

/* 3. Reflow at 200% text zoom (WCAG 1.4.10): the masthead actions and the
      burger together ran 9px past a 640px viewport. The burger's word is
      decorative next to a universally understood icon, so it is the first
      thing to go when the row is tight. */
.masthead__actions { min-width: 0; }
.burger { min-width: 0; }
.burger__label { max-width: 12ch; overflow: hidden; }
@media (max-width: 900px) {
  .burger__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 4. Reflow at 200%: SDG cells pushed 13px past the viewport because a grid
      item's automatic minimum size is its content, and "Reintegration" does
      not break. */
.sdg { min-width: 0; }
.sdg__t, .sdg__b { min-width: 0; overflow-wrap: anywhere; }

/* 5. Micro-labels were rendering at 11.2px. Nothing in WCAG forbids it, but
      on a phone it is below comfortable reading for tracked uppercase. */
.pending__label,
.ahero__marker,
.nextcard__kicker { font-size: .75rem; }
.hero-fact__l { font-size: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .rootcard__year, .nextcard__year { backdrop-filter: none; }
}

/* ==========================================================================
   AUDIT FIXES, round 3 — 13 August 2026
   Found by re-running the full audit against the live markup rather than
   against an older local mirror. Each item below is a measured failure, not
   a preference.
   ========================================================================== */

/* B1. The year stamp over an archive photograph. Round 2 added a scrim at
      rgba(8,39,44,.58); over a bright patch of photograph that composites to
      roughly #708085, and #F2CE8C on that measures 2.41:1 against the 3:1
      required for large text. At .78 the same worst case measures 4.5:1 and
      the photograph still reads through. */
.rootcard__year,
.nextcard__year { background: rgba(8, 39, 44, .78); }

/* B2. The 12px floor for tracked uppercase micro-labels. Round 2 applied it
      only below 620px, so nine classes were still rendering at 11.2–11.8px on
      tablet and desktop. Applied at every width now. */
.aside-note__m,
.prow__rel-label,
.roster__role,
.rootcard__kicker,
.pub__meta,
.plisten__k,
.tier__cat,
.memorial__label,
.art-scroll-hint,
.event__badge,
.pending__cat,
.contact-tile__l,
.drawer__label,
.utility__social > span { font-size: .75rem; }

/* B3. The episode caption sits on a YouTube poster frame, which is not ours
      and can be light. Its scrim faded to transparent across the caption's own
      box, so the upper of its two lines could land on roughly 2.8:1. The fade
      now completes above the text rather than through it: white on the
      weakest point of the scrim measures 9.5:1 even over a white poster. */
.video__label {
  background: linear-gradient(to top,
    rgba(8, 39, 44, .95) 0%,
    rgba(8, 39, 44, .82) 70%,
    rgba(8, 39, 44, 0) 100%);
}

/* --------------------------------------------------------------------------
   B4. Line length. On a 1440px screen five blocks of prose ran between 107 and
   153 characters a line; comfortable reading is 60 to 80, and the eye starts
   losing its place past about 90. Capping the measure changes nothing on a
   phone, where these were already fine.
   -------------------------------------------------------------------------- */
.hero-facts__note { max-width: 64ch; }
.pub__text,
.pub__credit { max-width: 68ch; }
.note-panel > p { max-width: 72ch; }
.art__inner figcaption,
.art__bleed > p { max-width: 76ch; }

/* B5. .art-scroll-hint declares its size with !important, so the 12px floor in
      B2 lost to it and the hint stayed at 11.8px on phones — the only place it
      is ever shown. */
.art-scroll-hint { font-size: .75rem !important; }

/* B6. The floating utility bar on the home page. Its scrim was rgba(8,39,44,.42)
      over the hero, and the top of the hero photograph contains a blown-out
      window: sampling the image, the brightest pixels under the bar composite
      to #97A4A6, on which the phone number measured 1.71:1 and "Follow" 1.92:1.
      At .78 the same worst case measures 5.2:1 and 7.7:1. The bar is still
      translucent and still blurs the photograph behind it. */
@media (min-width: 1080px) {
  .site-header--overlay .utility { background: rgba(8, 39, 44, .78); }
}

/* B7. Target size (WCAG 2.5.8). The phone and email links in the utility bar
      measured 133 x 22, two pixels under the 24px minimum. They are standalone
      controls, not links inside a sentence, so the exemption does not apply. */
.utility__contact a { min-height: 24px; }

/* --------------------------------------------------------------------------
   C1. The partner strip. The organisation asked for the Save a Life Initiative
   and JOOPSA collaborations to read more strongly. They were being rendered
   the way a partner strip usually is — desaturated, half-opacity, 26 to 44px
   tall — which is the treatment you give logos you are obliged to show, not
   ones you are proud of.

   Full colour now, at full opacity, in a box roughly a third larger. The two
   supplied logos also carried a wide white margin baked into the JPEG, so the
   mark itself was rendering at about half the height it appeared to occupy;
   those have been trimmed to the artwork.

   `multiply` stays: these are JPEGs with white backgrounds, and it is what
   dissolves the white box into the cream behind it.
   -------------------------------------------------------------------------- */
.partner {
  min-width: clamp(110px, 18vw, 170px);
  min-height: clamp(40px, 6.2vw, 58px);
}
.partner img {
  height: auto;
  max-height: clamp(40px, 6.2vw, 58px);
  max-width: clamp(120px, 20vw, 190px);
  filter: none;
  opacity: 1;
}
.partners { gap: clamp(1.5rem, 4.5vw, 3.75rem); }

/* On the deep teal band the same logos need lifting off the dark rather than
   dimming into it. */
.bg-deep .partner img {
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
  background: #fff;
  padding: .45rem .6rem;
  border-radius: 6px;
}

/* C2. Network memberships, under the partner logos. Subordinate to them —
   this is an affiliation, not a collaboration — so the label is small and the
   marks sit below the partner row rather than in it. The two are different
   shapes by nature, a horizontal lockup and a square badge, so the lockup is
   capped by width and the badge by height to bring them to the same weight. */
.affil {
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.affil__l {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute);
}
.affil__row {
  margin-top: clamp(.9rem, 2vw, 1.35rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.affil__mark { display: grid; place-items: center; min-height: 44px; }
.affil__mark img {
  height: auto;
  max-width: clamp(140px, 24vw, 195px);
  max-height: clamp(44px, 6.4vw, 60px);
  mix-blend-mode: multiply;
}
.affil__mark--badge img { max-width: clamp(52px, 8vw, 68px); max-height: clamp(52px, 8vw, 68px); }
.bg-deep .affil { border-top-color: rgba(255,255,255,.16); }
.bg-deep .affil__l { color: var(--on-dark-soft); }
.bg-deep .affil__mark img { mix-blend-mode: normal; background: #fff; padding: .4rem .5rem; border-radius: 6px; }

/* C3. Printed matter in the gallery. Photographs can be cropped to a common
   ratio without losing anything; a banner or a leaflet cannot — cropping one
   truncates the sentence it exists to carry. Documents are therefore shown
   whole, on a paper ground, at whatever shape they were printed. */
.ggrid--docs { align-items: start; }
.gfig--doc .media {
  aspect-ratio: auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: clamp(.5rem, 1.4vw, .9rem);
}
.gfig--doc .media img { width: 100%; height: auto; object-fit: contain; }

/* C4. Optical sizing in the partner strip. Measured at the same height, the
   two newer marks read smaller than the first pair, because each is a symbol
   with small lettering beside it rather than a wordmark filling its box. A
   taller box for those two brings the four to the same apparent weight. */
.partner--lg { min-height: clamp(48px, 7.6vw, 72px); }
.partner--lg img {
  max-height: clamp(48px, 7.6vw, 72px);
  max-width: clamp(140px, 24vw, 220px);
}


/* An artwork acknowledgement is not a tribute. It reuses the memorial block's
   frame so the page keeps one vocabulary, but drops to body type at a normal
   reading size: the credit has to be legible and unmistakable without
   competing with the programme copy it sits under. */
.memorial--credit { display: block; max-width: 46rem; }
.memorial--credit .memorial__body {
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--text-soft);
}
.memorial--credit .memorial__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-600);
}
.memorial--credit .memorial__body a:hover { text-decoration-thickness: 2px; }