/* ==========================================================================
   Labour Education Organization (LEO)
   Design system adapted from the PMEye Management Consulting site: same
   typographic and component discipline, LEO's own colour taken from its mark.
   Structure note: FLEXBOX ONLY, no CSS grid. Every block maps to a native
   Elementor widget - flex container, heading, text editor, image, button,
   icon box, accordion, gallery.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --green:       #0A6B2D;  /* LEO mark green */
  --green-deep:  #075020;  /* AA 4.5+ for small text on light backgrounds */
  --green-dark:  #04381A;
  --green-light: #86D9A2;  /* the mark green lifted to read on --ink backgrounds */
  --glyph-green: rgba(63,191,106,.62);   /* hero watermark: vivid enough to read as green */
  --glyph-white: rgba(255,255,255,.72);  /* the one element picked out against it */
  --clay:        #A83000;  /* the burnt orange of the target rings, used sparingly */
  --ink:         #0E1311;
  --ink-soft:    #161D19;
  --ink-2:       #232C27;
  --mist:        #DFE4E1;
  --paper:       #FFFFFF;
  --paper-2:     #F5F7F6;
  --paper-3:     #EBEFEC;
  --muted:       #55605A;
  --muted-light: #5C6862;  /* AA 4.5+ on white and paper tones */
  --line:        #DFE4E1;
  --line-dark:   #2A332E;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gap:       32px;
  --radius:    3px;
  --shell:     1240px;
  --section-y: clamp(52px, 5.4vw, 84px);   /* was 64-120: stacked padding left ~224px of white between sections */
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-deep); }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.014em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.1875rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--ink); }

.container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section--paper { background: var(--paper-2); }
.section--mist  { background: var(--paper-3); }
.section--ink   { background: var(--ink); color: rgba(255,255,255,.78); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink strong { color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* --- Type helpers --------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 14px;
}
.section--ink .eyebrow { color: #6FCF8E; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); }
.section--ink .lede { color: rgba(255,255,255,.86); }
.muted { color: var(--muted); }
.small { font-size: .9375rem; }
.tiny  { font-size: .8125rem; line-height: 1.5; color: var(--muted-light); }
.section-head { max-width: 74ch; margin-bottom: clamp(28px, 3vw, 40px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Layout (flex only) ---------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.row--lg { gap: clamp(32px, 4vw, 56px); }
.row--tight { gap: 16px; }
.row--middle { align-items: center; }
/* Cards size to their own content instead of stretching to the tallest in the
   row - otherwise a long district leaves a void inside every short one. */
.row--top { align-items: flex-start; }
.col-half    { flex: 1 1 380px; min-width: 0; }
.col-third   { flex: 1 1 280px; min-width: 0; }
.col-quarter { flex: 1 1 210px; min-width: 0; }
.col-two-thirds { flex: 2 1 460px; min-width: 0; }
/* A two-thirds cell that must OWN the rest of its flex line (basis high enough
   that no col-third can join the line), holding a nested pair of cards plus a
   figure beneath them. Used on where-we-work's district grid. */
.cell-fill { flex: 2 1 620px; min-width: 0; }
.cell-fill .row .card { flex: 1 1 260px; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 94px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* The mark carries a strapline under the wordmark, so it needs real height to
   stay legible. Clamped so it does not swamp a narrow header on mobile. */
.brand img { height: clamp(48px, 4.6vw, 66px); width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.nav-list { display: flex; align-items: center; gap: 22px; }
.nav-list a {
  position: relative;
  font-size: .9375rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding: 6px 0 8px;
  transition: color .18s ease;
}
/* The underline is a pseudo-element rather than a border so it can sweep in from
   the left instead of snapping on. 2px tall and 8px of padding below the text
   reproduce exactly the space the old 2px border occupied, so nothing shifts. */
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left center;
  transition: transform .24s cubic-bezier(.2,.7,.3,1);
}
.nav-list a:hover { color: var(--green-deep); }
.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--green-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  padding: 13px 24px; border-radius: var(--radius);
  background: var(--green); color: #fff; border: 1.5px solid var(--green);
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(10,107,45,.24); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(10,107,45,.20); }
.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--outline { background: transparent; color: var(--green-deep); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(14,19,17,.45);
}
.nav-backdrop.is-open { display: block; }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 0; right: 0; z-index: 45;
    width: min(320px, 84vw); height: 100vh;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 8px; padding: 88px 28px 28px;
    background: var(--paper); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .nav-list a { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 18px; width: 100%; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: clamp(520px, 78vh, 740px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two scrims, not one. The horizontal pass anchors the headline against a dark
   field on the left so white type never has to compete with the banner behind
   it; the vertical pass keeps the header and the section join clean. The right
   stays open so the photograph still reads as a photograph. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,16,14,.92) 0%, rgba(11,16,14,.86) 30%, rgba(11,16,14,.55) 55%, rgba(11,16,14,.18) 82%, rgba(11,16,14,.10) 100%),
    linear-gradient(180deg, rgba(14,19,17,.62) 0%, rgba(14,19,17,.24) 38%, rgba(14,19,17,.58) 76%, rgba(14,19,17,.92) 100%);
}
/* Narrow screens put the text across the full width, so the side-weighted pass
   would leave the right-hand words unbacked. Flatten it there. */
@media (max-width: 820px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(11,16,14,.90) 0%, rgba(11,16,14,.84) 60%, rgba(11,16,14,.72) 100%),
      linear-gradient(180deg, rgba(14,19,17,.58) 0%, rgba(14,19,17,.34) 40%, rgba(14,19,17,.62) 78%, rgba(14,19,17,.92) 100%);
  }
}
.hero .container { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 68px; color: #fff; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero .lede { color: rgba(255,255,255,.9); max-width: 62ch; margin-top: 20px; }
.hero .eyebrow { color: #86D9A2; }
.hero .btn-row { margin-top: 32px; }

.page-hero { position: relative; background: var(--ink); color: rgba(255,255,255,.78); padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero .lede { color: rgba(255,255,255,.84); max-width: 68ch; margin-top: 18px; }
.page-hero .eyebrow { color: var(--green-light); }

/* The black banner carries the mark's green, not just white type. Two layers:
   a wide radial wash that lifts the right side off the ink, and the glyph
   itself stroked in green. The mark green (#0A6B2D) is too dark to read on
   --ink, so both use --green-light; all the alpha lives in the colour rather
   than on the container, so the two layers can be tuned independently. */
.page-hero::after {
  content: ""; position: absolute; right: -6%; top: 50%;
  width: 620px; height: 620px; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(134,217,162,.10) 0%, rgba(134,217,162,.04) 45%, transparent 70%);
  pointer-events: none;
}
/* Sits fully inside the banner. It used to be at right:-40px with the hero's
   overflow:hidden cropping it, which read as a zoomed-in fragment rather than a
   mark. The clamp keeps it clear of the right edge at every width. */
.page-hero__glyph { position: absolute; right: clamp(28px, 5vw, 90px); top: 50%; transform: translateY(-50%); width: clamp(220px, 23vw, 300px); height: clamp(220px, 23vw, 300px); pointer-events: none; z-index: 1; }
.page-hero__glyph svg { width: 100%; height: 100%; fill: none; stroke: var(--glyph-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Both mark colours in one glyph: green rings with the innermost element picked
   out in white. Every one of these glyphs is drawn outside-in, so :last-child is
   reliably the inner detail — the small circle, the shield's tick, the page's
   text lines. :not(:only-child) is load-bearing: the what-we-do water drop is a
   single path and would otherwise turn entirely white, losing the green. */
.page-hero__glyph svg .g-accent { stroke: var(--glyph-white); }

.page-hero .container { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .page-hero__glyph { width: 190px; height: 190px; right: 20px; }
  .page-hero__glyph svg { stroke: rgba(63,191,106,.30); }
  .page-hero__glyph svg .g-accent { stroke: rgba(255,255,255,.38); }
  .page-hero::after { width: 380px; height: 380px; }
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  flex: 1 1 280px; min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
}
.card--flat { border-top-color: var(--line); background: var(--paper-2); }
.card--ink { background: var(--ink-2); border-color: var(--line-dark); border-top-color: var(--green); color: rgba(255,255,255,.76); }
.card--ink h3 { color: #fff; }
.card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card__num {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
}
.card--ink .card__num { color: #6FCF8E; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .9688rem; }
.card__foot { margin-top: 18px; }

.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.card-link:hover { border-top-color: var(--green-deep); transform: translateY(-2px); }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 46px;
  border: 1.5px solid var(--green); border-radius: 50%;
}
.icon svg { width: 21px; height: 21px; fill: none; stroke: var(--green-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card--ink .icon { border-color: rgba(111,207,142,.6); }
.card--ink .icon svg { stroke: #6FCF8E; }

/* --- Lists ---------------------------------------------------------------- */
.checklist li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--muted); }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.section--ink .checklist li { color: rgba(255,255,255,.76); }
/* Variant where each item carries its own icon instead of the shared tick. */
.checklist--icons li { padding-left: 0; display: flex; align-items: flex-start; margin-bottom: 16px; }
.checklist--icons li::before { display: none; }
.checklist--icons .ti { vertical-align: 0; margin-top: -2px; }

/* --- District cards: legend, status chips, itemised lists ------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.legend__item { display: flex; align-items: center; font-size: .8125rem; color: var(--muted); }
.legend__item .ti { width: 22px; height: 22px; flex: 0 0 22px; margin-right: 8px; vertical-align: 0; }
.legend__item .ti svg { width: 13px; height: 13px; }
.chip {
  display: inline-flex; align-items: center; font-family: var(--sans);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 2px; padding: 3px 8px;
}
.chip--current { color: var(--green-deep); background: rgba(10,107,45,.09); border: 1px solid rgba(10,107,45,.28); }
.chip--historic { color: var(--muted); background: var(--paper-2); border: 1px solid var(--line); }
.dlist { list-style: none; margin: 0; padding: 0; }
.dlist li {
  display: flex; align-items: flex-start; padding: 11px 0;
  border-top: 1px solid var(--line); font-size: .9063rem; line-height: 1.5; color: var(--muted);
}
.dlist li:first-child { border-top: 0; }
.dlist .ti { vertical-align: 0; margin-top: -1px; }
.dlist__txt { flex: 1 1 auto; min-width: 0; }
.yr {
  display: inline-block; font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .07em; color: var(--green-deep); background: rgba(10,107,45,.08);
  border-radius: 2px; padding: 1px 6px; margin-left: 7px; white-space: nowrap; vertical-align: 1px;
}
.card--flat .yr { color: var(--muted); background: rgba(14,19,17,.05); }
.dlist li:hover .ti { background: var(--green); }
.dlist li:hover .ti svg { stroke: #fff; }
.dashlist li { position: relative; padding-left: 22px; margin-bottom: 9px; color: var(--muted); font-size: .9688rem; }
.dashlist li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--green); }
.section--ink .dashlist li { color: rgba(255,255,255,.74); }

/* --- Stats (evidence strip) ------------------------------------------------ */
.stat { flex: 1 1 190px; min-width: 0; border-top: 3px solid var(--green); padding-top: 18px; }
.stat__num { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat__num .unit { font-size: .5em; color: var(--green); vertical-align: super; }
.stat__label { margin: 12px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.stat__src { display: block; margin-top: 10px; font-size: .75rem; line-height: 1.4; color: var(--muted-light); border-top: 1px solid var(--line); padding-top: 8px; }
.section--ink .stat__num { color: #fff; }
.section--ink .stat__label { color: rgba(255,255,255,.72); }
.section--ink .stat__src { color: rgba(255,255,255,.5); border-top-color: var(--line-dark); }

/* --- Figures -------------------------------------------------------------- */
.figure { margin: 0; }
/* height:auto is load-bearing. The img tags carry width/height attributes (which
   reserve layout space and stop the page jumping as images load). Without
   height:auto the browser pairs the CSS width with the HTML height attribute and
   squashes the picture. */
.figure img { width: 100%; height: auto; border-radius: var(--radius); }
/* For portrait-ish frames. A 4:3 photograph at the full 1240px container is over
   900px tall and swamps the page; capping the width keeps it a figure. */
.container > .figure { max-width: 900px; margin-left: auto; margin-right: auto; }
/* Registration certificate: a document, not a photograph, so it gets a mount
   rather than sitting flush. Capped small - it is evidence beside the table,
   and the anchor opens the full 940px scan for anyone who wants to read it. */
.cert { max-width: 320px; }
.cert img { border: 1px solid var(--line); padding: 8px; background: var(--paper); border-radius: var(--radius); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cert a { display: block; }
.cert:hover img { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14,19,17,.10); }
.figure--narrow { max-width: 645px; margin-left: auto; margin-right: auto; }
.figure figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.5; color: var(--muted-light); }

/* --- Board of trustees ------------------------------------------------------
   Portraits arrive one trustee at a time, so a tile has to look deliberate
   while it is still just initials. The monogram occupies exactly the square the
   photograph will fill, so the row does not reflow as pictures drop in — swap
   the <span> for an <img> and nothing else moves. */
.trustee__photo {
  width: 100%; aspect-ratio: 1 / 1; margin-bottom: 16px; overflow: hidden;
  background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.trustee__photo img { width: 100%; height: 100%; object-fit: cover; }
.trustee__photo span { font-family: var(--serif); font-size: 1.75rem; letter-spacing: .06em; color: var(--green); }
.trustee h3 { font-size: 1.0625rem; margin: 0; }
.trustee__role { margin-top: 5px; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--green-deep); }
.section--ink .trustee__photo { background: var(--ink-2); border-color: var(--line-dark); }
.section--ink .trustee__photo span,
.section--ink .trustee__role { color: var(--green-light); }
.section--ink .figure figcaption { color: rgba(255,255,255,.55); border-top-color: var(--line-dark); }

/* --- Steps / flow --------------------------------------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: 26px; }
.step { flex: 1 1 190px; min-width: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.step__num { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--green); line-height: 1; margin-bottom: 12px; }
.step h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.step p { font-size: .9375rem; color: var(--muted); }
.section--ink .step { border-top-color: var(--line-dark); }
.section--ink .step p { color: rgba(255,255,255,.72); }

/* --- Record (key/value) ---------------------------------------------------- */
.record li { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.record li:first-child { border-top: 1px solid var(--line); }
.record__key { flex: 0 0 190px; font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green-deep); padding-top: 3px; }
.record__val { flex: 1 1 260px; color: var(--ink-2); font-size: .9688rem; }
.section--ink .record li { border-color: var(--line-dark); }
.section--ink .record__key { color: #6FCF8E; }
.section--ink .record__val { color: rgba(255,255,255,.8); }

/* --- Data table (impact) --------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--paper); }
table.data th, table.data td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .9375rem; vertical-align: top; }
table.data thead th { background: var(--paper-2); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green-deep); }
table.data td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* --- Notes / flags --------------------------------------------------------- */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  background: var(--paper-2); border-radius: var(--radius);
  padding: 20px 24px; font-size: .9375rem; color: var(--muted);
}
.flag {
  display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay); border: 1px solid rgba(168,48,0,.4); background: rgba(168,48,0,.06);
  border-radius: 2px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px;
}

/* --- Accordion (Elementor Accordion widget) -------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--sans); font-size: 1.3rem; color: var(--green); flex: 0 0 auto; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion details > *:not(summary) { padding-bottom: 22px; color: var(--muted); font-size: .9688rem; }

/* --- Map ------------------------------------------------------------------- */
.map-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: clamp(20px, 3vw, 34px); }
/* The viewBox is nearly square, because KP is a tall province. At full container
   width the map ran past 1100px tall and had to be scrolled to be seen whole.
   Capping the drawn width fixes that, but it shrinks the type with it - so the
   label sizes inside the SVG were raised to compensate. Change one without the
   other and the district names stop being readable. */
.map-panel svg { display: block; width: 100%; height: auto; }
.map-aside { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.map-aside__title { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 12px; }
.pk-inset { display: block; width: 100%; max-width: 250px; height: auto; }
.map-key--ring { background: transparent; border: 2px solid var(--clay); border-radius: 50%; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.map-legend li { display: flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--muted); }
.map-key { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
.map-key--core { background: var(--green); }
.map-key--hist { background: #A9D9BC; }

/* --- CTA band -------------------------------------------------------------- */
.cta-band { background: var(--green-dark); color: rgba(255,255,255,.84); padding: clamp(52px, 6vw, 84px) 0; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,.86); }
.cta-band .eyebrow { color: #86D9A2; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.68); padding: clamp(52px, 6vw, 78px) 0 0; }
.site-footer h3 { color: #fff; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { height: 68px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: .9375rem; max-width: 42ch; }
.footer-col li { margin-bottom: 10px; font-size: .9375rem; }
.footer-facts { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: clamp(34px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: .8125rem; color: rgba(255,255,255,.56); }
.footer-facts strong { color: rgba(255,255,255,.86); }
.footer-bottom { margin-top: 28px; border-top: 1px solid var(--line-dark); padding: 20px 0 26px; font-size: .8125rem; color: rgba(255,255,255,.5); }

/* --- Utility --------------------------------------------------------------- */
.arrow-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: .9375rem; color: var(--green-deep); text-decoration: none; border-bottom: 1px solid rgba(10,107,45,.35); padding-bottom: 3px; }
.arrow-link:hover { border-bottom-color: var(--green); }
.arrow-link .chev { transition: transform .15s ease; }
.arrow-link:hover .chev { transform: translateX(3px); }
.mt-lg { margin-top: clamp(28px, 3.2vw, 44px); }
.mt-md { margin-top: 26px; }

/* --- Organogram -------------------------------------------------------------
   Flexbox only, like everything else here. Connectors are pseudo-elements on
   dedicated .orgdrop spacers rather than borders on the nodes, so a tier can
   wrap on a narrow screen without leaving a line pointing at nothing. */
.orgchart { max-width: 900px; margin-left: auto; margin-right: auto; }
.orgtier  { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.orgdrop  { display: flex; justify-content: center; }
.orgdrop::after { content: ""; width: 2px; height: 30px; background: var(--line); }

.orgnode {
  flex: 1 1 260px; max-width: 380px; text-align: center;
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--green); border-radius: var(--radius);
  padding: 17px 20px;
  transition: border-top-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.orgnode:hover { border-top-color: var(--green-deep); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(14,19,17,.07); }
.orgnode__tag { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 7px; }
.orgnode h4 { font-size: 1.0625rem; margin: 0 0 6px; }
.orgnode p  { font-size: .875rem; line-height: 1.5; color: var(--muted-light); margin: 0; }
.orgnode--lead  { background: var(--paper-2); border-top-color: var(--green-dark); }
.orgnode--trust { border-top-color: var(--clay); }
.orgnode--trust .orgnode__tag { color: var(--clay); }
.orgnode--trust:hover { border-top-color: var(--clay); }

/* Rule with the label sitting in the gap, marking where the custodian body ends
   and the elected chain begins. */
.orgsplit {
  display: flex; align-items: center; gap: 16px;
  margin: 30px 0 26px; color: var(--muted-light);
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.orgsplit::before, .orgsplit::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.orgfan { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
/* Basis chosen so six roles wrap 3 + 3 in the 900px chart rather than 5 + 1,
   which left one role stranded on its own row. */
.orgrole {
  flex: 1 1 235px; max-width: 275px;
  border-top: 2px solid var(--green); padding-top: 12px;
  transition: border-top-color .18s ease, transform .18s ease;
}
.orgrole:hover { border-top-color: var(--green-dark); transform: translateY(-2px); }
.orgrole h5 { font-family: var(--serif); font-size: .9375rem; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.orgrole span { font-size: .8125rem; color: var(--muted-light); }

/* --- Partner band -----------------------------------------------------------
   Wordmarks, not logos. Nothing here reproduces a third party's mark: none is
   held in the project folder and none is cleared for use. Each tile is sized so
   an <img> can be dropped in above the name later without the row reflowing. */
.partners { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
/* Basis sized so all six sit in one row at full width instead of wrapping 5 + 1
   and stranding the last one. */
.partner {
  flex: 1 1 152px; max-width: 184px; min-height: 108px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  text-align: center; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.partner:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,19,17,.06); }
.partner img { max-height: 40px; width: auto; margin-bottom: 2px; }
.partner__name { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.partner__role { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
.partner--current { background: var(--paper-2); border-top: 3px solid var(--green); }
.partner--current .partner__role { color: var(--green-deep); }
.partner--network { border-top: 3px solid var(--mist); }

/* Grouped stakeholder rows: a labelled band per relationship type (donor,
   government, civil society, technical). Same tiles, one label above each row. */
.partner-group { margin-bottom: 26px; }
.partner-group:last-child { margin-bottom: 0; }
.partner-group__label {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light);
}
.partner-group__label::before, .partner-group__label::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--line);
}
.partner--gov { border-top: 3px solid var(--clay); }
.partner--gov .partner__role { color: var(--clay); }
.partner--tech { border-top: 3px solid var(--green-deep); background: var(--paper-2); }
.partner--tech .partner__role { color: var(--green-deep); }

/* Partner marks (added 2026-09-03 on the Chairman's instruction). Rest in
   greyscale so seven different brand palettes do not fight the page; the mark
   comes up in full colour on hover or keyboard focus. */
.partner__logo {
  display: block; width: 150px; max-width: 100%; height: auto; margin: 0 auto 8px;
  filter: grayscale(1); opacity: .78;
  transition: filter .28s ease, opacity .28s ease, transform .28s ease;
}
.partner:hover .partner__logo, .partner:focus-within .partner__logo { filter: none; opacity: 1; transform: scale(1.04); }
a.partner { text-decoration: none; color: inherit; }
a.partner:focus-visible, a.logo-tile:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.partner { flex-basis: 196px; max-width: 220px; }
.logo-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.logo-tile {
  flex: 1 1 200px; max-width: 250px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.logo-tile img { width: 100%; height: auto; filter: grayscale(1); opacity: .78; transition: filter .28s ease, opacity .28s ease, transform .28s ease; }
.logo-tile span { font-size: .8rem; color: var(--muted-light); text-align: center; line-height: 1.3; }
.logo-tile:hover, .logo-tile:focus-visible { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(14,19,17,.08); }
.logo-tile:hover img, .logo-tile:focus-visible img { filter: none; opacity: 1; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .partner__logo, .logo-tile, .logo-tile img { transition: none; } }

/* --- Timeline ---------------------------------------------------------------
   A single rail down the left with a marker per entry. Flex, not grid. */
.timeline { border-left: 2px solid var(--line); padding-left: 28px; margin-left: 6px; }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -37px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--green);
  transition: background .18s ease, transform .18s ease;
}
.tl-item:hover::before { background: var(--green); transform: scale(1.25); }
.tl-item__year { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--green-deep); line-height: 1.2; }
.tl-item h4 { font-size: 1rem; margin: 4px 0 5px; }
.tl-item p { font-size: .9375rem; line-height: 1.55; color: var(--muted-light); margin: 0; }
.section--ink .timeline { border-left-color: var(--line-dark); }
.section--ink .tl-item::before { background: var(--ink); }
.section--ink .tl-item__year { color: var(--green-light); }
.section--ink .tl-item p { color: rgba(255,255,255,.72); }

/* Journey markers: an icon badge where the story starts and where it is now,
   replacing the plain dot on those two entries, and an arrowhead where the
   second rail runs out so the line reads as a path, not a list. */
.tl-item--start::before, .tl-item--now::before { display: none; }
.tl-badge {
  position: absolute; left: -46px; top: -3px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--green);
}
.tl-badge svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tl-item--now .tl-badge { background: var(--clay); box-shadow: 0 0 0 2px var(--clay); }
.tl-item--now .tl-badge::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--clay); opacity: 0;
  animation: tl-pulse 2.4s ease-out infinite;
}
@keyframes tl-pulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
.tl-item__tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-deep); background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px 9px;
}
.tl-item--now .tl-item__tag { color: var(--clay); border-color: rgba(168,48,0,.35); background: rgba(168,48,0,.06); }
.timeline--now { position: relative; padding-bottom: 22px; }
.timeline--now::after {
  content: ""; position: absolute; left: -7px; bottom: -2px;
  width: 12px; height: 12px; border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay);
  transform: rotate(45deg);
}
.timeline--now { border-image: linear-gradient(to bottom, var(--line) 60%, var(--clay)) 1; }
@media (prefers-reduced-motion: reduce) { .tl-item--now .tl-badge::after { animation: none; opacity: .35; transform: none; } }

/* --- Vision, mission, values ------------------------------------------------
   The organisation's core, so it gets real design rather than body copy. Two
   statement cards, then one tile per value with its own mark. */
.vm {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--green); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  transition: border-top-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vm:hover { border-top-color: var(--green-deep); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(14,19,17,.07); }
.vm__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 50%; background: rgba(10,107,45,.09);
  transition: background .2s ease;
}
.vm__icon svg { width: 25px; height: 25px; fill: none; stroke: var(--green-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.vm:hover .vm__icon { background: var(--green); }
.vm:hover .vm__icon svg { stroke: #fff; }
.vm__statement { font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.4; color: var(--ink); margin: 0; }

/* Tiles, not a list. Flex with a fixed basis so ten wrap evenly. */
.values { display: flex; flex-wrap: wrap; gap: 14px; }
.value {
  flex: 1 1 210px; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.value:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,19,17,.06); }
.value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: rgba(10,107,45,.09); transition: background .2s ease;
}
.value__icon svg { width: 19px; height: 19px; fill: none; stroke: var(--green-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease; }
.value:hover .value__icon { background: var(--green); }
.value:hover .value__icon svg { stroke: #fff; }
.value__body { display: flex; flex-direction: column; min-width: 0; }
.value__name { font-size: .9375rem; font-weight: 500; color: var(--ink-soft); line-height: 1.35; }
/* Each value carries its definition in the markup, so screen readers and search
   always have it. Sighted users get it on hover; devices with no hover at all
   simply show it, which is the only honest fallback for touch. */
.value__def {
  font-size: .8125rem; line-height: 1.45; color: var(--muted);
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .24s ease, margin-top .3s ease;
}
.value:hover .value__def,
.value:focus-within .value__def { max-height: 9em; opacity: 1; margin-top: 7px; }
@media (hover: none) {
  .value__def { max-height: none; opacity: 1; margin-top: 7px; overflow: visible; }
}

/* --- Hover life -------------------------------------------------------------
   Progressive polish only: every page works identically without any of this,
   and the prefers-reduced-motion rule below switches the whole lot off.
   ---------------------------------------------------------------------------*/

/* Banner mark. The glyph is pointer-events:none, so the whole hero band is the
   hover target - moving anywhere across the banner wakes it. The white inner
   element pushes out further than the green rings, so it reads as the mark
   opening rather than simply scaling. transform-box:fill-box is required for
   SVG children to scale about their own centre rather than the viewBox origin. */
.page-hero__glyph { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.page-hero__glyph svg { transition: stroke .35s ease; }
.page-hero__glyph svg > * {
  transform-box: fill-box; transform-origin: center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), stroke .35s ease;
}
.page-hero::after { transition: transform .55s ease; }
.page-hero:hover .page-hero__glyph { transform: translateY(-50%) scale(1.05); }
.page-hero:hover .page-hero__glyph svg { stroke: rgba(63,191,106,.92); }
.page-hero:hover .page-hero__glyph svg .g-accent { stroke: #fff; transform: scale(1.12); }
/* Some accents SPAN their shape rather than sitting inside it - the envelope
   flap runs corner to corner. Scaling those pushes their ends outside the
   artwork, so they brighten without growing. */
.page-hero:hover .page-hero__glyph svg .g-accent--span { transform: none; }
/* Accents that sit ON TOP of their shape (the padlock shackle) must grow from
   their base, or scaling drives their feet down into the outline below. */
.page-hero__glyph svg .g-accent--rise { transform-origin: 50% 100%; }
.page-hero:hover::after { transform: translateY(-50%) scale(1.12); }

/* Cards that are not links still respond, so a row of them feels of a piece. */
.card { transition: border-top-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card:hover { border-top-color: var(--green-deep); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(14,19,17,.07); }
.card--ink:hover { box-shadow: 0 10px 26px rgba(0,0,0,.28); }

.accordion summary { transition: color .18s ease; }
.accordion summary:hover { color: var(--green-deep); }
.accordion summary::after { transition: transform .22s ease; }
.accordion summary:hover::after { transform: scale(1.22); }

/* A quiet tint makes a long key/value list easier to track across. */
.record li { transition: background .16s ease; }
.record li:hover { background: rgba(10,107,45,.035); }
.section--ink .record li:hover { background: rgba(255,255,255,.045); }

.trustee__photo { transition: border-color .18s ease, transform .18s ease; }
.trustee__photo span { transition: transform .25s ease; }
.trustee:hover .trustee__photo { border-color: var(--green); transform: translateY(-3px); }
.trustee:hover .trustee__photo span { transform: scale(1.08); }
/* Seven officers wrapped 3+3+1, stranding one. A narrower basis than
   .col-third gives 4+3. */
.person { flex-basis: 248px; transition: border-top-color .18s ease; }
.person:hover { border-top-color: var(--green-dark); }

.footer-col a, .footer-bottom a { transition: color .16s ease; }
.footer-col a:hover { color: var(--green-light); }

/* Figures lift; they are never scaled up. The source files are 873-1280px wide
   and any zoom past 100% would show. */
.figure img { transition: transform .3s ease, box-shadow .3s ease; }
.figure:hover img { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14,19,17,.10); }

/* Map districts respond so a reader can pick one out of the province. */
.d { transition: fill .18s ease; }
.d:hover { fill: #DCE7E0; }
.d--hist:hover { fill: #8FCBA6; }
.d--core:hover { fill: var(--green-deep); }

/* Section mark: standalone above the eyebrow on What We Do. Larger than the card
   icon so it reads as a section header, not a chip. */
.icon--sec { width: 52px; height: 52px; flex: 0 0 52px; margin-bottom: 16px; }
.icon--sec svg { width: 25px; height: 25px; }

/* Headline figures take a small mark above the number, with NO ring - the
   number is already the loud element and a second circle would fight it. */
.stat__icon { display: block; margin-bottom: 12px; }
.stat__icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--green);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}

/* Icons fill in from the hover of their whole card or section, not of the icon
   itself - a 46px target is too small to be the thing you have to find. */
.icon { transition: background .2s ease, border-color .2s ease, transform .25s cubic-bezier(.2,.7,.3,1); }
.icon svg { transition: stroke .2s ease; }
.card:hover .icon,
.section:hover .icon--sec { background: var(--green); border-color: var(--green); transform: translateY(-2px) scale(1.06); }
.card:hover .icon svg,
.section:hover .icon--sec svg { stroke: #fff; }
.card--ink:hover .icon { background: var(--green-light); border-color: var(--green-light); }
.card--ink:hover .icon svg { stroke: var(--ink); }

.stat { transition: border-top-color .18s ease, transform .18s ease; }
.stat:hover { border-top-color: var(--green-dark); transform: translateY(-3px); }
.stat:hover .stat__icon svg { stroke: var(--green-deep); transform: scale(1.12); }

/* Ticks grow and dashes extend, so a long list reacts under the pointer. */
.checklist li, .dashlist li { transition: color .16s ease; }
.checklist li::before { transition: transform .22s ease, border-color .2s ease; }
.checklist li:hover::before { transform: rotate(-45deg) scale(1.28); }
.checklist li:hover { color: var(--ink-2); }
.checklist--icons li:hover .ti { background: var(--green); }
.checklist--icons li:hover .ti svg { stroke: #fff; }
.section--ink .checklist li:hover { color: #fff; }
.dashlist li::before { transition: width .22s ease; }
.dashlist li:hover::before { width: 19px; }
.dashlist li:hover { color: var(--ink-2); }
.section--ink .dashlist li:hover { color: #fff; }

.step { transition: border-top-color .18s ease; }
.step__num { transition: transform .22s ease, color .18s ease; }
.step:hover { border-top-color: var(--green); }
.step:hover .step__num { transform: translateY(-3px); color: var(--green-deep); }
.section--ink .step:hover { border-top-color: var(--green-light); }

/* Timeline markers fill as you move down the years. */
.tl-item h4 { transition: color .18s ease; }
.tl-item:hover h4 { color: var(--green-deep); }
.section--ink .tl-item:hover h4 { color: var(--green-light); }

.nav-toggle { transition: border-color .18s ease, background .18s ease; }
.nav-toggle:hover { border-color: var(--green); background: rgba(10,107,45,.05); }

/* On the dark bands a green glow reads as dirt; use a plain shadow instead. */
.btn--outline-light:hover { box-shadow: 0 7px 20px rgba(0,0,0,.32); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- Named people (board and team) -----------------------------------------
   Biographies carry qualifications and professional experience only. The CVs
   these are drawn from contain CNIC numbers, dates of birth, home addresses and
   personal phone numbers - none of that belongs on a public page. */
.person { border-top: 2px solid var(--green); padding-top: 14px; }
.person__role { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 7px; }
.person h3 { font-size: 1.0625rem; margin: 0 0 7px; }
.person p { font-size: .9375rem; line-height: 1.55; color: var(--muted-light); margin: 0; }
.section--ink .person { border-top-color: var(--green-light); }
.section--ink .person p { color: rgba(255,255,255,.72); }
/* --- Table row icons --------------------------------------------------------
   Inline-flex rather than making the cell a flex container: turning a <td> into
   a flex box takes it out of the table layout and the columns stop aligning. */
.ti {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px; margin-right: 11px;
  vertical-align: -8px; border-radius: 50%; background: rgba(10,107,45,.08);
  transition: background .18s ease;
}
.ti svg {
  width: 15px; height: 15px; fill: none; stroke: var(--green-deep);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
table.data tbody tr { transition: background .16s ease; }
table.data tbody tr:hover { background: rgba(10,107,45,.035); }
table.data tbody tr:hover .ti { background: var(--green); }
table.data tbody tr:hover .ti svg { stroke: #fff; }