/* ==========================================================================
   Mantra4Change US — design system
   Palette is taken verbatim from the Mantra4Change brandbook.
   Primary blues appear on every page; secondaries are accents only.
   ========================================================================== */

:root {
  /* Brand — primary */
  --navy:       #273f7d;
  --sky:        #00b1ff;

  /* Brand — secondary */
  --green:      #38c68b;
  --amber:      #ffcb37;
  --orange:     #f59a3d;
  --mist:       #c1ebf4;
  --steel:      #95b3d7;

  /* Derived neutrals (blue-tinted, never grey) */
  --ink:        #14203c;
  --navy-deep:  #1b2c58;
  --sky-deep:   #0090d4;
  --body:       #4a5a7a;
  --muted:      #6d7d9c;
  --line:       #dde6f2;
  --wash:       #f2f6fb;
  --wash-2:     #e7eefa;
  --paper:      #ffffff;

  /* Type */
  --display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --text:    "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Space + shape */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw:   1180px;
  --r-sm:   10px;
  --r:      18px;
  --r-lg:   28px;
  --shadow:    0 1px 2px rgba(39,63,125,.04), 0 4px 10px rgba(39,63,125,.05), 0 12px 28px rgba(39,63,125,.06);
  --shadow-lg: 0 2px 4px rgba(39,63,125,.04), 0 10px 24px rgba(39,63,125,.08), 0 30px 64px rgba(39,63,125,.12);
  --shadow-xl: 0 4px 8px rgba(39,63,125,.05), 0 18px 40px rgba(39,63,125,.10), 0 48px 100px rgba(39,63,125,.16);
  --ring:   0 0 0 3px rgba(0,177,255,.35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration-color: rgba(39,63,125,.3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* the biggest headings on every page carry the brand navy rather than near-black ink */
h1, h2 { color: var(--navy); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* ---------- type scale ---------- */
.t-hero  { font-size: clamp(2.5rem, 5.6vw, 4.25rem); font-weight: 800; letter-spacing: -0.035em; }
.t-h2    { font-size: clamp(2rem, 3.8vw, 2.9rem);    font-weight: 800; }
.t-h3    { font-size: clamp(1.3rem, 2vw, 1.6rem);    font-weight: 700; letter-spacing: -0.015em; }
.t-h4    { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; }
.lede    { font-size: clamp(1.075rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--body); }
.small   { font-size: .875rem; line-height: 1.6; }
.tnum    { font-variant-numeric: tabular-nums; }

/* Eyebrow: a section label, always tied to a real section name */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-deep);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--sky); flex: none;
}
.on-dark .eyebrow { color: var(--mist); }
.on-dark .eyebrow::before { background: var(--sky); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(4rem, 8vw, 7rem); }
.band--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.band--wash { background: var(--wash); }
.band--navy { background: var(--navy); }
.band--ink  { background: var(--ink); }

.on-dark, .on-dark p, .on-dark li { color: rgba(255,255,255,.82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.stack > * + * { margin-top: 1.1em; }
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1.05fr .95fr; align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: .95rem 1.7rem; border-radius: 100px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--sky); color: #04263a; box-shadow: 0 6px 18px rgba(0,177,255,.32); }
.btn--primary:hover { background: #24bcff; box-shadow: 0 10px 26px rgba(0,177,255,.42); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(39,63,125,.28); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--sg { background: #562d90; color: #fff; box-shadow: 0 6px 18px rgba(86,45,144,.32); }
.btn--sg:hover { background: #48257a; }
.btn--ghost { background: transparent; color: var(--navy); border-color: rgba(39,63,125,.28); }
.btn--ghost:hover { border-color: var(--navy); background: rgba(39,63,125,.05); }
.on-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.on-dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 1.5rem; height: 92px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.brand__name {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.15;
}
.brand__name span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--sky-deep); }

.nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--navy); text-decoration: none;
  padding: .55rem .8rem; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.nav__links a:hover { background: var(--wash-2); }
.nav__links a[aria-current="page"] { color: var(--sky-deep); background: rgba(0,177,255,.09); }
.nav__cta { margin-left: .6rem; padding: .65rem 1.35rem; font-size: .95rem; }

.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 10px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--navy); transition: transform .22s ease, opacity .18s ease;
}
.nav__toggle span::before { position: relative; top: -6px; }
.nav__toggle span::after  { position: relative; top: 4px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 92px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav__links[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: .8rem .6rem; font-size: 1.05rem; }
  .nav__cta { margin: .6rem 0 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -25%; height: 130%;
  background:
    radial-gradient(46% 42% at 22% 18%, rgba(0,177,255,.14), transparent 68%),
    radial-gradient(38% 40% at 78% 8%,  rgba(56,198,139,.11), transparent 66%),
    radial-gradient(50% 50% at 62% 92%, rgba(193,235,244,.4), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero__inner { padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero__title { margin-bottom: .55em; }
.hero__title em { font-style: normal; color: var(--sky-deep); }
.hero__lede { max-width: 34ch; margin-bottom: 2rem; }

/* subhero strip of quick facts */
.factstrip {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.factstrip__item { flex: 1 1 190px; padding: 1.5rem 1.5rem 1.5rem 0; }
.factstrip__item + .factstrip__item { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.factstrip__n {
  font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1;
}
.factstrip__l { font-size: .875rem; color: var(--muted); margin-top: .45rem; }
@media (max-width: 620px) {
  .factstrip__item, .factstrip__item + .factstrip__item { padding: 1.1rem 0; border-left: 0; }
  .factstrip__item + .factstrip__item { border-top: 1px solid var(--line); }
}

/* page hero for interior pages */
.pagehero { background: var(--navy); position: relative; overflow: hidden; }
.pagehero::after {
  content: ""; position: absolute; right: -8%; top: -60%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,177,255,.35), transparent 62%);
  pointer-events: none;
}
.pagehero .wrap { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); }
.pagehero__lede { max-width: 56ch; font-size: clamp(1.075rem, 1.5vw, 1.25rem); }

/* ---------- cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.5rem, 2.4vw, 2rem);
  font-size: 1rem;                 /* set here, not on `.card p`, so `.small` can still win */
  text-decoration: none;           /* cards are sometimes anchors */
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card--lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: var(--wash-2); color: var(--navy);
}
.card__icon svg { width: 23px; height: 23px; }
.card p { color: var(--body); }

/* accent variants — secondary colours used as accents only */
.a-sky    { --accent: var(--sky);    --accent-soft: rgba(0,177,255,.12); }
.a-green  { --accent: var(--green);  --accent-soft: rgba(56,198,139,.14); }
.a-amber  { --accent: var(--amber);  --accent-soft: rgba(255,203,55,.18); }
.a-orange { --accent: var(--orange); --accent-soft: rgba(245,154,61,.15); }
.a-navy   { --accent: var(--navy);   --accent-soft: rgba(39,63,125,.10); }
.a-steel  { --accent: var(--steel);  --accent-soft: rgba(149,179,215,.20); }
.card--accent { border-top: 4px solid var(--accent, var(--sky)); }
.card--accent .card__icon { background: var(--accent-soft, var(--wash-2)); color: var(--ink); }

/* ---------- challenge stats ---------- */
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 2.4vw, 2rem); position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: auto auto 0 0; width: 100%; height: 4px;
  background: var(--accent, var(--sky));
}
.stat__n {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1; color: var(--ink);
}
.stat__l { font-family: var(--display); font-weight: 700; color: var(--navy); margin-top: .5rem; }
.stat__src { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }

/* compact metric tiles (impact rows) */
.metric { text-align: center; padding: 1.25rem .75rem; }
.metric__n {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1; color: var(--sky);
}
.on-light .metric__n { color: var(--navy); }
.metric__l { font-size: .9rem; margin-top: .5rem; color: inherit; opacity: .82; }

/* ---------- the Inspire / Enable / Transform ladder ---------- */
/* A real sequence, so the numbering carries meaning. */
.ladder { display: grid; gap: 0; counter-reset: step; }
.ladder__step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.ladder__step:last-child { border-bottom: 1px solid var(--line); }
.ladder__mark {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.03em; color: var(--accent, var(--sky));
  min-width: clamp(6.5rem, 14vw, 10rem); line-height: 1.15;
}
.ladder__mark small {
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: .3rem; font-weight: 700;
}
@media (max-width: 620px) { .ladder__step { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- footprint map ---------- */
.mapblock { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .mapblock { grid-template-columns: 1fr; } }

/* ---------- a light Shikshagraha-purple wash, for bands that sit beside the puzzle ---------- */
.band--sg-tint { background: #efe7f8; }

/* ---------- four-force puzzle: pieces in the Shikshagraha palette, converging on reveal ---------- */
.puzzle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; max-width: 340px; margin-inline: auto; }
.puzzle__piece {
  position: relative; background: var(--pc); color: #fff;
  border-radius: 14px; padding: 1rem .6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.puzzle__icon { width: 30px; height: 30px; }
.puzzle__icon img { width: 100%; height: 100%; object-fit: contain; }
.puzzle__label { font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: -.01em; color: #fff; margin: 0; }
.puzzle__hi { font-size: .7rem; font-style: italic; opacity: .85; }
/* a small knob where each piece meets the centre, hinting at the four joining as one */
.puzzle__piece::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--pc); z-index: 2; }
.puzzle__piece--tl::after { right: -6px; bottom: -6px; }
.puzzle__piece--tr::after { left: -6px; bottom: -6px; }
.puzzle__piece--bl::after { right: -6px; top: -6px; }
.puzzle__piece--br::after { left: -6px; top: -6px; }
/* converge in from each piece's own corner, like puzzle pieces settling into place */
.puzzle__piece[data-reveal] { opacity: 0; }
.puzzle__piece--tl[data-reveal] { transform: translate(-34px, -34px) rotate(-8deg); }
.puzzle__piece--tr[data-reveal] { transform: translate(34px, -34px) rotate(8deg); }
.puzzle__piece--bl[data-reveal] { transform: translate(-34px, 34px) rotate(8deg); }
.puzzle__piece--br[data-reveal] { transform: translate(34px, 34px) rotate(-8deg); }
.puzzle__piece[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- film, with a small award badge floating to its right ---------- */
.filmshowcase { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.filmshowcase .photo-wrap { width: clamp(140px, 16vw, 190px); }
@media (max-width: 760px) { .filmshowcase { grid-template-columns: 1fr; justify-items: center; } .filmshowcase .photo-wrap { width: 160px; } }

.map { width: 100%; max-width: 460px; margin-inline: auto; height: auto; overflow: visible; }
.map__state {
  fill: var(--wash-2); stroke: #fff; stroke-width: 1.6;
  transition: opacity .2s ease, stroke-width .2s ease;
}
/* Active states get their brand colour inline from JS, so selection is shown by
   receding the others rather than recolouring — each state keeps its identity. */
.map__state--active { cursor: pointer; }
.map__state--active:hover { opacity: .82; }
.map--haspick .map__state--active { opacity: .32; }
.map--haspick .map__state--active[data-selected="true"] { opacity: 1; }
.map__state[data-selected="true"] { stroke: var(--ink); stroke-width: 3; }
.map__state--active:focus-visible { outline: none; box-shadow: none; stroke: var(--ink); stroke-width: 3; }
.on-dark .map__state { fill: rgba(255,255,255,.09); stroke: var(--navy); }

/* load-in animation for the hero map */
.map--animate .map__state--active { opacity: 0; animation: popin .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes popin { to { opacity: 1; } }

.mapinfo { min-height: 250px; }
.mapinfo__hint { color: var(--muted); font-size: .95rem; }
.mapinfo__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,2.6vw,2.1rem); color: var(--ink); letter-spacing: -.03em; margin-bottom: 1rem; }
.mapinfo__nums { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 1.1rem; }
.mapinfo__num b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.65rem; color: var(--sky-deep); letter-spacing: -.03em; line-height: 1.1; }
.mapinfo__num span { font-size: .8rem; color: var(--muted); }
.mapinfo__note { border-left: 3px solid var(--green); padding-left: 1rem; font-size: .975rem; }

.statepills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.statepill {
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  padding: .45rem .95rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.statepill:hover { border-color: var(--sky); }
.statepill[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- accordion (FAQ) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.35rem 0; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.075rem; letter-spacing: -.01em;
}
.faq__q:hover { color: var(--sky-deep); }
.faq__sign { flex: none; width: 26px; height: 26px; position: relative; margin-top: 2px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  background: var(--sky-deep); border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.faq__sign::before { width: 14px; height: 2px; }
.faq__sign::after  { width: 2px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height .28s ease; }
.faq__a > div { padding: 0 3rem 1.5rem 0; color: var(--body); }

/* ---------- tabs (board page) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .35rem; background: var(--wash); border-radius: 100px; width: fit-content; margin-inline: auto; }
.tab {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  padding: .7rem 1.4rem; border-radius: 100px; border: 0; cursor: pointer;
  background: transparent; color: var(--navy);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab:hover { color: var(--sky-deep); }
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.tabpanel[hidden] { display: none; }

/* ---------- people ---------- */
.person {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}
.person--clickable { cursor: pointer; }
.person--clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.person__avatar {
  width: 86px; height: 86px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em;
  color: var(--navy); background: var(--accent-soft, var(--wash-2));
  border: 2px solid var(--accent, var(--steel));
}
.person__name { font-family: var(--display); font-weight: 700; font-size: 1.075rem; color: var(--ink); margin-bottom: .3rem; }
.person__role { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.person__links { display: flex; gap: .5rem; justify-content: center; margin-top: .9rem; }
.person__links a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--wash); color: var(--navy); }
.person__links a:hover { background: var(--navy); color: #fff; }
.person__links svg { width: 16px; height: 16px; }
.person__more { margin-top: .8rem; font-family: var(--display); font-weight: 700; font-size: .8125rem; color: var(--sky-deep); }

/* ---------- modal ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(20,32,60,.55); backdrop-filter: blur(4px);
}
.modal__box {
  background: #fff; border-radius: var(--r-lg); max-width: 620px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg); position: relative;
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px;
  border: 1px solid var(--line); background: #fff; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--navy); font-size: 1.25rem; line-height: 1;
}
.modal__close:hover { background: var(--wash); }

/* ---------- programme list ---------- */
.prog {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem;
  padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.prog:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky); }
.prog__tag {
  font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .06em;
  padding: .5rem .75rem; border-radius: 8px; min-width: 62px; text-align: center;
  background: var(--accent-soft, var(--wash-2)); color: var(--ink);
}
.prog__name { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; }
.prog__desc { display: block; font-size: .925rem; color: var(--muted); margin: .2rem 0 0; }
.prog__go { color: var(--sky-deep); font-size: 1.2rem; flex: none; }
@media (max-width: 620px) { .prog { grid-template-columns: auto 1fr; } .prog__go { display: none; } }

/* ---------- give options ---------- */
.give { display: grid; gap: .35rem; }
.give__amt {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--ink); letter-spacing: -.03em; line-height: 1;
}
.give__what { font-family: var(--display); font-weight: 700; color: var(--sky-deep); font-size: .95rem; }

/* ---------- callout / CTA band ---------- */
.cta {
  background: linear-gradient(135deg, var(--navy) 0%, #1d3168 55%, #10225a 100%);
  position: relative; overflow: hidden;
}
.cta::after {
  content: ""; position: absolute; left: -6%; bottom: -70%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,177,255,.4), transparent 62%);
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; max-width: 22ch; }

.note {
  background: var(--wash); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: var(--r-sm); padding: 1.1rem 1.35rem; font-size: .95rem;
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); }
.site-footer .wrap { padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer__h { font-family: var(--display); font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__list a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .95rem; }
.footer__list a:hover { color: var(--sky); }
.social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
.social a:hover { background: var(--sky); color: #04263a; }
.social svg { width: 18px; height: 18px; }
.footer__bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
.badge501 {
  display: inline-block; font-size: .8rem; padding: .45rem .85rem; border-radius: 8px;
  background: rgba(56,198,139,.14); color: var(--green); font-weight: 600; margin-top: 1rem;
}

/* ---------- scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- utilities ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.hr { border: 0; border-top: 1px solid var(--line); margin: clamp(2.5rem,5vw,4rem) 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; }
  [data-reveal] { opacity: 1; transform: none; }
  .puzzle__piece[data-reveal] { opacity: 1; transform: none; }
  .map--animate .map__state--active { opacity: 1; animation: none; }
}


/* ==========================================================================
   LAYER 2 — depth, motif and section-rhythm variation
   Added to break up the flat stacked-band rhythm of the first build.
   ========================================================================== */

/* ---------- brand lockup in the header / footer ---------- */
.brand__logo { height: 62px; width: auto; display: block; }
.site-footer .brand__logo { height: 62px; }
@media (max-width: 620px) { .brand__logo { height: 42px; } }

/* ---------- the birds motif: connective tissue between sections ---------- */
/* Taken from the logo's ascending bird. Always flies up and to the right,
   echoing the arrow in the wordmark. Decorative only. */
.birds {
  position: absolute; pointer-events: none; user-select: none;
  width: clamp(90px, 12vw, 180px); opacity: .9;
}
.birds--sm { width: clamp(64px, 7vw, 104px); }
.birds--soft { opacity: .16; }
.birds--float { animation: drift 9s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -14px) rotate(-3deg); }
}

/* ---------- decorative arc, from the logo's spiral ---------- */
.arc {
  position: absolute; pointer-events: none; border-radius: 50%;
  border: 1.5px solid rgba(39,63,125,.10);
}
.arc--sky { border-color: rgba(0,177,255,.18); }
.on-dark .arc { border-color: rgba(255,255,255,.10); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero2 { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero2::before {
  content: ""; position: absolute; inset: -40% -20% auto -30%; height: 150%;
  background:
    radial-gradient(40% 38% at 20% 20%, rgba(0,177,255,.15), transparent 70%),
    radial-gradient(34% 34% at 82% 6%,  rgba(56,198,139,.12), transparent 68%),
    radial-gradient(46% 44% at 60% 96%, rgba(193,235,244,.42), transparent 72%);
  pointer-events: none;
}
.hero2 .wrap { position: relative; z-index: 2; }
.hero2__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.02fr .98fr; align-items: center;
}
@media (max-width: 940px) { .hero2__grid { grid-template-columns: 1fr; } }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .02em; padding: .5rem 1rem .5rem .6rem;
  border-radius: 100px; background: #fff; color: var(--navy);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pill__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; margin-left: .25rem; }
.on-dark .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }

.hero2__title { font-size: clamp(2.5rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.037em; margin: 1.25rem 0 .5em; }
.hero2__title em { font-style: normal; color: var(--sky); }
.hero2__lede { max-width: 36ch; margin-bottom: 2rem; }

/* trust row under the CTAs */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-top: 2rem; font-size: .875rem; color: var(--muted); }
.trust__item { display: inline-flex; align-items: center; gap: .45rem; }
.trust__item svg { width: 16px; height: 16px; color: var(--green); flex: none; }

/* ---------- layered hero composition ---------- */
.compose { position: relative; }
.compose__arc {
  position: absolute; inset: auto auto -8% -12%; width: 78%; aspect-ratio: 1;
  border: 1.5px solid rgba(0,177,255,.2); border-radius: 50%; pointer-events: none;
}
.compose__arc--2 { inset: -10% -14% auto auto; width: 56%; border-color: rgba(56,198,139,.22); }

/* Rounded-square photo frame with an offset colour block behind it. */
.figure { position: relative; border-radius: var(--r-lg); }
.figure::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border-radius: var(--r-lg); background: var(--accent, var(--sky)); opacity: .2; z-index: 0;
}
.figure__img {
  position: relative; z-index: 1; display: block; width: 100%;
  aspect-ratio: var(--ar, 4/3); object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  background: var(--wash-2);
}
/* Placeholder shown until a real photo is dropped in */
.figure__slot {
  position: relative; z-index: 1; display: grid; place-items: center; gap: .6rem;
  width: 100%; aspect-ratio: var(--ar, 4/3); padding: 2rem; text-align: center;
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  background:
    linear-gradient(135deg, rgba(0,177,255,.10), rgba(39,63,125,.10)),
    repeating-linear-gradient(45deg, var(--wash) 0 12px, var(--wash-2) 12px 24px);
  border: 2px dashed rgba(39,63,125,.22); color: var(--navy);
}
.figure__slot svg { width: 34px; height: 34px; opacity: .55; }
.figure__slot b { font-family: var(--display); font-size: .95rem; }
.figure__slot span { font-size: .8rem; color: var(--muted); max-width: 30ch; }

/* stat card that floats over the photo edge */
.floatcard {
  position: absolute; z-index: 3; background: #fff;
  border-radius: var(--r); padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  display: flex; align-items: center; gap: .9rem;
}
.floatcard--br { right: -8px; bottom: -22px; }
.floatcard--tl { left: -42px; top: 5%; }
.floatcard__n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--navy); line-height: 1; }
.floatcard__l { display: block; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.floatcard__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft, rgba(0,177,255,.12)); color: var(--navy); flex: none; }
.floatcard__icon svg { width: 19px; height: 19px; }
@media (max-width: 620px) {
  .floatcard--tl { left: -6px; }
  .floatcard--br { right: -4px; bottom: -16px; }
}

/* ---------- fact rail: horizontal, ticked, not a boxy grid ---------- */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line); position: relative;
}
.rail__item { padding: 1.6rem 1.25rem 0 0; position: relative; }
.rail__item::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 34px; height: 3px;
  border-radius: 2px; background: var(--accent, var(--sky));
}
.rail__item + .rail__item { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.rail__item + .rail__item::before { left: 1.5rem; }
.rail__n { font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 2.9vw, 2.4rem); letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.rail__l { font-size: .85rem; color: var(--muted); margin-top: .45rem; }
@media (max-width: 720px) {
  .rail { grid-auto-flow: row; grid-auto-columns: auto; }
  .rail__item, .rail__item + .rail__item { padding: 1.1rem 0 1.1rem 1.25rem; border-left: 0; }
  .rail__item::before, .rail__item + .rail__item::before { left: 0; top: 1.35rem; width: 3px; height: 26px; }
  .rail__item + .rail__item { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   ICON CHIPS — used far more widely than the first build
   ========================================================================== */
.ico {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent-soft, var(--wash-2)); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(39,63,125,.06);
}
.ico svg { width: 25px; height: 25px; }
.ico--sm { width: 40px; height: 40px; border-radius: 12px; }
.ico--sm svg { width: 19px; height: 19px; }
.ico--lg { width: 64px; height: 64px; border-radius: 20px; }
.ico--lg svg { width: 30px; height: 30px; }
.ico--round { border-radius: 50%; }
.on-dark .ico { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* ==========================================================================
   STAGGERED STAT BLOCK — deliberately not a tidy equal grid
   ========================================================================== */
.stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.stagger > :nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.25rem); }
.stagger > :nth-child(3) { margin-top: clamp(2.5rem, 6vw, 5rem); }
@media (max-width: 820px) {
  .stagger { grid-template-columns: 1fr; }
  .stagger > :nth-child(2), .stagger > :nth-child(3) { margin-top: 0; }
}

.bignum {
  font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  color: var(--accent, var(--sky));
  overflow-wrap: break-word;      /* never let a long figure escape its column */
}
.bigstat__l { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-top: .6rem; color: #fff; }
.bigstat__src { font-size: .8rem; opacity: .55; margin-top: .4rem; }
.bigstat { position: relative; padding-left: 1.25rem; border-left: 2px solid rgba(255,255,255,.16); }

/* ==========================================================================
   SPLIT WITH STICKY HEADING — breaks the "heading on top" rhythm
   ========================================================================== */
.sticky-split { display: grid; grid-template-columns: 1fr 1.22fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.sticky-split__head { position: sticky; top: 120px; }
/* headings sit in a narrower measure here, so cap them a step down */
.sticky-split__head .t-h2 { font-size: clamp(1.85rem, 2.9vw, 2.4rem); }
@media (max-width: 900px) {
  .sticky-split { grid-template-columns: 1fr; }
  .sticky-split__head { position: static; }
}

/* ---------- ladder with a drawn connector ---------- */
.flow { position: relative; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.flow::before {
  content: ""; position: absolute; left: 25px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--sky), var(--green) 50%, var(--orange));
  opacity: .3; border-radius: 2px;
}
.flow__step {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  transition: transform .22s ease, box-shadow .22s ease;
}
.flow__step:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.flow__step .ico { box-shadow: 0 0 0 6px #fff, inset 0 0 0 1px rgba(39,63,125,.06); }
.flow__word { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--accent, var(--sky)); }
.flow__step h3 { font-size: 1.05rem; margin: .15rem 0 .4rem; }
.flow__step p { font-size: .975rem; margin: 0; }
@media (max-width: 560px) { .flow::before { display: none; } .flow__step { grid-template-columns: 1fr; } }

/* ==========================================================================
   IMPACT — map as a background element, numbers laid over it
   ========================================================================== */
.impact2 { position: relative; overflow: hidden; }
.impact2__map {
  position: absolute; right: -4%; top: 50%; translate: 0 -50%;
  width: min(46%, 520px); opacity: .17; pointer-events: none;
}
.impact2__map .map__state { fill: #fff; stroke: transparent; }
.impact2__map .map__state--active { fill: var(--sky); }
@media (max-width: 900px) { .impact2__map { right: -18%; width: 70%; opacity: .1; } }

.metricgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .metricgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .metricgrid { grid-template-columns: 1fr; } }
.metric2 { border-top: 2px solid rgba(255,255,255,.16); padding-top: 1.1rem; }
.metric2__n { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.035em; line-height: 1; color: var(--sky); }
.metric2__l { font-size: .9rem; opacity: .78; margin-top: .5rem; }

/* ==========================================================================
   OFFSET FEATURE — text one side, icon rows the other
   ========================================================================== */
.featrow { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; padding: 1.25rem 0; }
.featrow + .featrow { border-top: 1px solid var(--line); }
.featrow h3 { font-size: 1.075rem; margin: .3rem 0 .35rem; }
.featrow p { font-size: .975rem; margin: 0; }
.on-dark .featrow + .featrow { border-color: rgba(255,255,255,.14); }

/* ---------- pull quote ---------- */
.quote {
  position: relative; padding: clamp(1.5rem, 3vw, 2rem) 0 0 clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; color: var(--ink);
}
.quote::before {
  content: "\201C"; position: absolute; left: 0; top: -.1em;
  font-size: clamp(4rem, 8vw, 6rem); line-height: 1; color: var(--sky); opacity: .3;
}
.on-dark .quote { color: #fff; }
.quote__src { display: block; margin-top: .9rem; font-family: var(--text); font-weight: 400; font-size: .875rem; color: var(--muted); }
.on-dark .quote__src { color: rgba(255,255,255,.6); }

/* ==========================================================================
   BOARD — square rounded photo cards
   ========================================================================== */
.people { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.1rem, 2.2vw, 1.75rem); }
@media (max-width: 1000px) { .people { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px)  { .people { grid-template-columns: 1fr; } }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .75rem .75rem 1.25rem; text-align: left;
  transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease;
}
.pcard--clickable { cursor: pointer; font: inherit; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* the square, rounded-corner frame */
.pcard__frame {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px;
  overflow: hidden; background: var(--accent-soft, var(--wash-2)); margin-bottom: 1rem;
}
.pcard__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pcard__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.03em;
  color: var(--navy); background: var(--accent-soft, var(--wash-2));
}
.pcard__frame::after {          /* subtle inner edge so photos sit properly in the frame */
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(39,63,125,.08); pointer-events: none;
}
.pcard__body { padding-inline: .5rem; flex: 1; display: flex; flex-direction: column; }
.pcard__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; color: var(--ink); margin-bottom: .3rem; }
.pcard__role { font-size: .85rem; line-height: 1.5; color: var(--muted); flex: 1; }
.pcard__foot { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.pcard__li {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--wash); color: var(--navy); flex: none; transition: background-color .16s ease, color .16s ease;
}
.pcard__li:hover { background: #0a66c2; color: #fff; }
.pcard__li svg { width: 17px; height: 17px; }
.pcard__read { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--sky-deep); }

/* group header */
.grouphead { display: grid; gap: .5rem; max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.grouphead__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding-inline: .5rem; border-radius: 9px;
  background: var(--navy); color: #fff; font-family: var(--display); font-weight: 800; font-size: .9rem;
}
.grouphead__row { display: flex; align-items: center; gap: .75rem; }

/* ---------- bio modal with photo ---------- */
.biohead { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.biohead__frame { width: 104px; height: 104px; border-radius: 22px; overflow: hidden; position: relative; background: var(--wash-2); flex: none; }
.biohead__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.biohead__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: var(--navy); }
@media (max-width: 520px) { .biohead { grid-template-columns: 1fr; } }

/* ==========================================================================
   SECTION TRANSITIONS — soften the hard band edges
   ========================================================================== */
.band--flushtop { padding-top: 0; }
.pull-up { margin-top: clamp(-5.5rem, -7vw, -3.5rem); position: relative; z-index: 5; }
.band--curve { border-radius: 0 0 clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px); }
.band--curve-top { border-radius: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0 0; }
.band--rel { position: relative; overflow: hidden; }

/* soft fade between a wash band and white */
.fadeband { position: relative; }
.fadeband::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none;
}

/* whole-card hit area for bios; sits under the LinkedIn link so both work */
.pcard--clickable { cursor: pointer; }
.pcard__hit {
  position: absolute; inset: 0; z-index: 1;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r-lg);
}
.pcard__hit:focus-visible { box-shadow: var(--ring); }
.pcard__foot > * { position: relative; z-index: 2; }

/* On small screens the floating stat cards sit over the photo slot, so trim the
   placeholder copy back to icon + title and give the frame more height. */
@media (max-width: 620px) {
  .figure__slot { --ar: 3/2; padding: 1.25rem; }
  .figure__slot span { display: none; }
  .floatcard { padding: .7rem .9rem; gap: .6rem; }
  .floatcard__n { font-size: 1.2rem; }
  .floatcard__icon { width: 32px; height: 32px; border-radius: 9px; }
  .floatcard__icon svg { width: 16px; height: 16px; }
  .birds { opacity: .7; }
}

/* ==========================================================================
   FULL-BLEED IMAGE BAND — a visual break between content sections
   ========================================================================== */
.imgband { position: relative; overflow: hidden; }
.imgband__media { display: block; width: 100%; height: clamp(300px, 40vw, 520px); object-fit: cover; object-position: center 38%; }
.imgband__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,60,.10) 0%, rgba(20,32,60,.20) 40%, rgba(20,32,60,.86) 100%);
  display: flex; align-items: flex-end;
}
.imgband__inner { width: 100%; padding-block: clamp(1.75rem, 4vw, 3rem); }
.imgband__q {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem); line-height: 1.35; color: #fff;
  max-width: 34ch; margin: 0;
}
.imgband__cap {
  display: block; margin-top: .8rem;
  font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.72);
}
.imgband .birds { z-index: 2; }

/* photo inside a split section */
.photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 4/3); }
.photo__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: 100px; padding: .5rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--navy);
}
/* offset accent block, same device as the hero figure */
.photo-wrap { position: relative; }
.photo-wrap::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border-radius: var(--r-lg); background: var(--accent, var(--sky)); opacity: .2;
}
.photo-wrap .photo { position: relative; z-index: 1; }

/* Decorative offset blocks can bleed past the viewport on narrow screens.
   `overflow-x: clip` contains them without creating a scroll container, so
   position:sticky inside these sections keeps working (overflow:hidden would break it). */
.band { overflow-x: clip; }


/* ==========================================================================
   LAYER 3 — content-feedback pass
   Removed the letterspaced kicker labels and status pills; icons now come from
   the Future Readiness hand-drawn set rather than generic stroke glyphs.
   ========================================================================== */

/* The `.eyebrow` kicker is retired. Section headings carry their own weight,
   so give the first heading in a block a little more room instead. */
.eyebrow { display: none; }

/* ---------- brand icons ---------- */
.ico { background: var(--accent-soft, var(--wash-2)); box-shadow: none; }
.ico img { width: 74%; height: 74%; object-fit: contain; display: block; }
.ico--sm img { width: 78%; height: 78%; }
.on-dark .ico img { filter: brightness(0) invert(1); }
.floatcard__icon img { width: 78%; height: 78%; object-fit: contain; }

/* ---------- quiet fact list, replacing the ticked trust row ---------- */
.facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
  list-style: none; margin: 2rem 0 0; padding: 0;
  font-size: .875rem; color: var(--muted);
}
.facts li { display: inline-flex; align-items: center; }
.facts li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--steel); margin-right: 1rem;
}

/* ---------- board cards: no dead space under the LinkedIn mark ---------- */
/* The role no longer stretches, so the card hugs its content and the grid
   rows stay even without leaving a gap beneath the icon. */
.pcard { padding-bottom: .9rem; }
.pcard__role { flex: 0 1 auto; }
.pcard__foot { margin-top: .8rem; }
.pcard--clickable .pcard__name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .18s ease; }
.pcard--clickable:hover .pcard__name { text-decoration-color: var(--sky); }
.grouphead { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ==========================================================================
   VIDEO — click-to-play facade
   ========================================================================== */
.videolead { max-width: 56ch; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.video {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--navy) 0%, #21386e 45%, #0f2350 100%);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-xl);
}
.video--hasposter::after {          /* keep the play control legible over the poster */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,60,.25), rgba(20,32,60,.55));
}
.video--playing::after { display: none; }

.video__hit {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: none; border: 0; cursor: pointer; width: 100%; color: #fff;
}
.video__play {
  display: grid; place-items: center;
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sky); color: #04263a;
  box-shadow: 0 10px 30px rgba(0,177,255,.45);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.video__play svg { width: 42%; height: 42%; margin-left: 6%; }
.video__hit:hover .video__play { transform: scale(1.08); box-shadow: 0 14px 40px rgba(0,177,255,.6); }
.video__label {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #fff;
  display: grid; gap: .2rem; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.video__label small { font-weight: 400; font-size: .8rem; opacity: .75; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Cards hug their content rather than stretching to the tallest in the row, so
   the space under the LinkedIn mark is the card padding and nothing more.
   Photos and names still align across the row, so the ragged base reads fine. */
.people { align-items: start; }

/* icon chip sitting above a card heading */
.card > .ico { margin-bottom: 1rem; }


/* ==========================================================================
   HERO CAROUSEL — crossfading photographs
   ========================================================================== */
.carousel { position: relative; z-index: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--wash-2); }
.carousel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.carousel__slide:first-child { position: relative; }
.carousel__slide.is-on { opacity: 1; }
.carousel__viewport { position: relative; width: 100%; aspect-ratio: var(--ar, 4/3); }

.carousel__dots {
  /* bottom-LEFT, not centred: the bottom-right floating stat card overlaps a
     centred dot strip and swallows the clicks. */
  position: absolute; left: .9rem; bottom: .9rem; z-index: 4;
  display: flex; gap: .4rem; padding: .4rem .6rem; border-radius: 100px;
  background: rgba(20,32,60,.4); backdrop-filter: blur(6px);
}
.carousel__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background-color .2s ease, width .25s ease;
}
.carousel__dot[aria-current="true"] { background: #fff; width: 20px; border-radius: 100px; }
.carousel__dot:focus-visible { box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
}

/* ---------- photo band inside a section, with caption ---------- */
.photoduo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 700px) { .photoduo { grid-template-columns: 1fr; } }
.photoduo .photo img { aspect-ratio: 4/3; }

/* ---------- video grid: several films side by side ---------- */
.videogrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); }
@media (max-width: 720px) { .videogrid { grid-template-columns: 1fr; } }

.video--sm { aspect-ratio: 16/9; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.video--sm .video__play { width: clamp(48px, 5vw, 62px); }
.video--sm .video__label { font-size: .95rem; }
.videocap {
  display: block; margin-top: .75rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink);
}
.videocap small { display: block; font-family: var(--text); font-weight: 400; font-size: .85rem; color: var(--muted); margin-top: .15rem; }


/* ==========================================================================
   BOARD CARDS v2 — full bio on the card, every box the same size
   Bios are held to a narrow length band in tools/gen_data.py, and the card is a
   flex column with the bio flexing, so the LinkedIn mark pins to the bottom and
   every card in a row ends on exactly the same line.
   ========================================================================== */
.people {
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch;                 /* overrides the earlier `start` */
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
@media (max-width: 1080px) { .people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 660px)  { .people { grid-template-columns: 1fr; } }

.pcard {
  height: 100%;
  display: flex; flex-direction: column;
  padding: .75rem .75rem 1.1rem;
}
.pcard:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }

.pcard__frame { margin-bottom: 1.1rem; }
.pcard__body { flex: 1; display: flex; flex-direction: column; padding-inline: .6rem; }
.pcard__name { font-size: 1.075rem; margin: 0 0 .15rem; }
.pcard__role {
  font-family: var(--display); font-weight: 700; font-size: .875rem;
  color: var(--sky-deep); margin: 0 0 .8rem;
}
.pcard__bio {
  flex: 1;                              /* absorbs the slack, pinning the foot */
  margin: 0; font-size: .9rem; line-height: 1.6; color: var(--body);
}
.pcard__foot { margin-top: 1rem; }