/* ==========================================================================
   Dinaledi Leadership for Education — shared stylesheet (redesign 2026)
   One file for every page. No framework. See style-guide.html for usage.
   ========================================================================== */

/* ─── Web fonts ───
   Self-hosted (/fonts/), so no visitor request goes to Google and the text
   does not wait on a third-party stylesheet. Both families are variable and
   SIL Open Font Licence. latin-ext covers diacritics in names. The CSP in
   vercel.json allows fonts from this origin only. ─── */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design principles (2026-09 editorial pass) ───
   Premium comes from restraint: warm light grounds, ink type, generous space
   and hairline structure. Colour is an accent, never a block:
   - Deep teal (--teal-ink) is the one action colour: buttons and links, with
     white labels (5.97:1).
   - Brand teal and green appear as fine rules, small marks and the rings
     diagram. No saturated teal or green panels.
   - Radii are small (2px controls, 4px cards and photos). No drop shadows.
   - No decorative rings or dots. Any SVG must carry meaning.
   - Motion is quiet: a slow fade as sections arrive, nothing that loops. */
:root{
  /* Brand (fixed, from Brand Identity Guidelines) */
  --teal:#24A99F;        /* Pantone 7473 C. Rules, marks, diagram. Never text on white */
  --green:#94C950;       /* Pantone 367 C. Small marks only */
  --ink:#282828;         /* Pantone 426 C. All text */
  --black:#1D1D1B;
  --white:#FFFFFF;
  /* Derived */
  --teal-ink:#186F69;    /* action colour and teal text: 5.97:1 on white, white on it 5.97:1 */
  --teal-deep:#0E3D36;   /* deep teal from the brand brief: deep panels, white text 12.4:1 */
  --teal-hover:#135B55;  /* hover on --teal-ink buttons */
  --teal-1:#28BAAF;
  --teal-2:#1E8D85;
  --teal-tint:#EAF4F2;   /* the quietest teal wash */
  --teal-soft:#BFE2DE;
  --green-tint:#F1F6E8;
  --green-soft:#D4EBB5;
  --paper:#F2F5F4;       /* cool ground tinted from the brand teal (the warm cream read as generic AI-site paper) */
  --paper-deep:#E3EAE8;
  --ink-2:#454B4A;       /* secondary text: 8.9:1 on white, 8.1:1 on paper */
  --ink-3:#5E6664;       /* captions and labels: 5.9:1 on white, 5.4:1 on paper */
  --line:#DCE4E2;        /* hairlines */
  --line-strong:#C2CCC9;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Type scale (fluid between 390px and 1280px) */
  --t-display:clamp(2.75rem,1.55rem + 4.9vw,5.1rem);
  --t-h2:clamp(2rem,1.4rem + 2.5vw,3.25rem);
  --t-h3:clamp(1.3rem,1.18rem + .5vw,1.55rem);
  --t-quote:clamp(1.45rem,1.15rem + 1.25vw,2.2rem);
  --t-stat:clamp(3rem,2rem + 4vw,5rem);
  --t-lead:clamp(1.1rem,1.04rem + .3vw,1.25rem);
  --t-body:1.0625rem;
  --t-small:.9rem;
  --t-label:.72rem;

  /* Spacing: 4px base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --section:clamp(72px,6vw + 40px,136px);
  --gutter:clamp(20px,4vw,40px);
  --max:1200px;

  --r-sm:2px;--r-md:4px;--r-lg:4px;--r-pill:999px;
  --shadow:0 1px 2px rgba(40,40,40,.04),0 12px 32px -18px rgba(40,40,40,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--t-body)/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:2px}
.cta--teal :focus-visible,.card--teal :focus-visible{outline-color:var(--white)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:var(--t-display);line-height:1.03;letter-spacing:-.025em}
h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section--paper{background:var(--paper)}
.section--tight{padding-top:0}
.stack>*+*{margin-top:var(--s5)}
.stack-sm>*+*{margin-top:var(--s3)}
.split{display:grid;gap:var(--s7) var(--s9);grid-template-columns:minmax(0,1fr)}
.split>:only-child{grid-column:1/-1}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
  .split--top{align-items:start}
  .split--wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.section-head{max-width:720px;margin-bottom:var(--s8)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-top:var(--s4);color:var(--ink-2);font-size:var(--t-lead);line-height:1.55}

/* ---------- Text ---------- */
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.small{font-size:var(--t-small)}
/* Labels are quiet: sentence case, small, led by a short teal rule.
   The brand brief rules out tracked uppercase kickers as a template tell. */
.label{display:inline-flex;align-items:center;gap:10px;font:600 .82rem/1.3 var(--sans);letter-spacing:.01em;color:var(--teal-ink)}
.label::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:400}
.measure{max-width:34em}
.quote-line{font:italic 400 1.2rem/1.5 var(--serif);color:var(--ink);border-left:1px solid var(--teal);padding-left:var(--s5)}

/* ---------- Star marker (interlocking star) ---------- */
.star{width:1.1em;height:auto;aspect-ratio:180/189;flex:none;display:inline-block;vertical-align:-.2em}
.star--md{width:28px}
.star--lg{width:44px}
.star-row{display:flex;align-items:center;gap:var(--s3)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:14px 26px;border-radius:var(--r-sm);font:600 .95rem/1.1 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn--primary{background:var(--teal-ink);color:var(--white)}
.btn--primary:hover{background:var(--teal-hover);color:var(--white)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:var(--black);color:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--sm{min-height:44px;padding:10px 20px;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) 0 calc(100% - 10px)/100% 1px no-repeat;transition:background-size .3s var(--ease)}
.link-arrow::after{content:"→";color:var(--teal-ink);transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--ink);background-size:0 1px}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- Chips & tags ---------- */
/* .chip: a small inline tag, no box */
.chip{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:600 .82rem/1.3 var(--sans);color:var(--teal-ink)}
.chip .star{width:18px}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) 0;margin:0;padding:0;list-style:none;font:500 .9rem/1.3 var(--sans);color:var(--ink-2)}
.facts li{padding:0 var(--s4)}
.facts li:first-child{padding-left:0}
.facts li+li{border-left:1px solid var(--line-strong)}
.hero .facts{display:grid;grid-template-columns:repeat(2,max-content);gap:var(--s3) var(--s7)}
.hero .facts li{padding:0;border:0;display:flex;align-items:center;gap:12px}
.hero .facts li::before{content:"";width:14px;height:1px;background:var(--teal-2)}

/* ---------- Cards ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(28px,3.4vw,44px)}
.card--paper{background:var(--paper);border-color:transparent}
/* Tinted cards: paper grounds with a fine coloured top rule, not colour blocks */
.card--teal-tint,.card--green-tint,.card--green{background:var(--paper);border-color:transparent;border-top:2px solid var(--teal)}
.card--green-tint,.card--green{border-top-color:var(--green)}
.section--paper .card--teal-tint,.section--paper .card--green-tint,.section--paper .card--green{background:var(--white)}
.card--green .label,.card--green h3{color:inherit}
.card--green .label{color:var(--teal-ink)}
/* The one deep panel: brand teal at depth, white type */
.card--teal{background:var(--teal-deep);border-color:transparent;color:var(--white)}
.card--teal h2,.card--teal h3,.card--teal .quote,.card--teal p{color:var(--white)}
.card--teal .label{color:var(--teal-soft)}
.card--teal .muted,.card--teal .small{color:rgba(255,255,255,.78)}
.card--teal .ticks li::before{background:var(--green)}
.card--teal .btn--dark,.card--teal .btn--primary{background:var(--white);color:var(--teal-deep)}
.card--teal .btn--dark:hover,.card--teal .btn--primary:hover{background:var(--teal-tint);color:var(--teal-deep)}
.card--teal a:not(.btn){color:var(--white)}
.card--raised{border-color:var(--line)}
.card--top-green{border-top:2px solid var(--green)}

/* ---------- Photos ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--paper-deep);margin:0}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--3x2{aspect-ratio:3/2}
.photo--4x3{aspect-ratio:4/3}
.photo--4x5{aspect-ratio:4/5}
.photo--1x1{aspect-ratio:1/1}
.photo--3x4{aspect-ratio:3/4}
.photo--16x9{aspect-ratio:16/9}
/* The 2.33:1 group photographs keep their own ratio at every width: a taller
   crop cuts the people at both ends out of frame (see README, Photos). */
.photo--wide{aspect-ratio:7/3}
.photo picture{display:contents}
.photo--circle{aspect-ratio:1/1;border-radius:50%}
.photo figcaption{position:absolute;left:12px;bottom:12px;background:var(--white);color:var(--ink);font:500 .8rem/1.2 var(--sans);padding:6px 10px;border-radius:var(--r-sm)}

/* Collage: one 3:2 lead image + a smaller 4:3 image overlapping a corner */
.collage{position:relative;padding:0 0 16% 0}
.collage .photo:first-child{width:84%}
.collage .photo:nth-child(2){position:absolute;right:0;bottom:0;width:42%;outline:8px solid var(--white)}
.section--paper .collage .photo:nth-child(2){outline-color:var(--paper)}

/* Formerly a photo set in decorative rings; now a plain frame */
.ring-frame{position:relative}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:76px}
.logo img{height:36px;width:auto}
.nav{display:none}
.nav ul{display:flex;gap:var(--s2);margin:0;padding:0;list-style:none}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 10px;font:500 .92rem/1 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .2s}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;background:var(--teal-ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--white);cursor:pointer}
.nav-toggle span{width:18px;height:1.5px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.header-cta{display:none}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--white);padding:var(--s3) var(--gutter) var(--s6);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
.mobile-nav ul{list-style:none;margin:0 0 var(--s5);padding:0}
.mobile-nav a[aria-current="page"]{color:var(--teal-ink)}
.mobile-nav a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 1.35rem/1.2 var(--serif)}
.mobile-nav .btn{width:100%}
.nav-open .mobile-nav{display:block}
@media (min-width:1080px){
  .nav,.header-cta{display:flex}
  .nav-toggle,.mobile-nav,.nav-open .mobile-nav{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--paper);padding:clamp(48px,7vw,112px) 0 clamp(56px,7vw,104px);overflow:hidden}
.hero .split{align-items:center}
.hero h1{max-width:12ch}
.hero .lead{max-width:32em;margin-top:var(--s5)}
.hero .btn-row{margin-top:var(--s7)}
.hero .facts{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.hero .chip{margin-bottom:var(--s5)}
.hero .stack>.chip+*{margin-top:0}
.hero-photo{max-width:500px;margin-left:auto;width:100%}
.hero .photo--3x2,.hero .photo--16x9{aspect-ratio:2/1;margin-top:var(--s7)}
.hero .photo--3x2 img,.hero .photo--16x9 img{object-position:50% 30%}
@media (max-width:759px){.hero .photo--3x2,.hero .photo--16x9{aspect-ratio:3/2}}
@media (max-width:979px){.hero-photo{max-width:none;aspect-ratio:4/3}}

/* ---------- Stats ---------- */
/* Numbers carry themselves: a hairline above, a serif numeral, a small label */
.stat{padding:var(--s5) 0 0;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:var(--s4);background:none}
.stat__num{font:400 var(--t-stat)/.95 var(--serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.stat__num small{display:block;margin-bottom:.4em;font:italic 400 .32em/1 var(--serif);letter-spacing:0;color:var(--teal-ink)}
.stat__label{font:500 .95rem/1.45 var(--sans);color:var(--ink-2);max-width:20em}
.stat--teal .stat__num,.stat--tint .stat__num{color:var(--teal-ink)}
.stat-inline{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8)}
.stat-inline div{display:flex;flex-direction:column;gap:6px}
.stat-inline strong{font:400 clamp(2.2rem,1.8rem + 1.5vw,3rem)/1 var(--serif);color:var(--teal-ink);letter-spacing:-.02em}
.stat-inline>div>span{font:500 .9rem/1.4 var(--sans);color:var(--ink-2)}

/* ---------- Numbered rows / steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--line);font-weight:400}
.steps li::before{content:"";width:14px;height:1px;background:var(--teal);transform:translateY(-.3em)}
.steps--cols{border-top:0}
@media (min-width:980px){.steps--cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s7)}.steps--cols li{grid-template-columns:minmax(0,1fr);gap:var(--s4);border-top:1px solid var(--ink);border-bottom:0;padding:var(--s5) 0 0;font-size:1.05rem}.steps--cols li::before{display:none}}

/* ---------- Big figure card (81%) ---------- */
.figure-card{display:grid;gap:var(--s5);align-content:space-between;height:100%}
.figure-card__num{font:400 clamp(5rem,3rem + 8vw,8.5rem)/.85 var(--serif);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:lining-nums}
.figure-card__src{font:italic 400 .95rem/1.3 var(--serif);color:var(--ink-3)}

/* ---------- Quote ---------- */
.quote{font:italic 400 var(--t-quote)/1.35 var(--serif);color:var(--ink);letter-spacing:-.01em;margin:0}
.quote-card{position:relative}
.quote-card .star{width:28px}
.cite{display:flex;flex-direction:column;gap:4px;margin-top:var(--s6);font-style:normal}
.cite strong{font:600 .95rem/1.3 var(--sans);color:var(--ink)}
.cite span{font-size:.92rem;color:var(--ink-3)}

/* ---------- Rings diagram ----------
   Line art on white: each layer is a hairline circle; the selected layer
   takes a quiet teal wash; the learner is the one solid mark, in brand green. */
.system{display:grid;gap:var(--s8);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:980px){.system{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.system__svg{width:100%;max-width:560px;margin:0 auto;display:block;overflow:visible}
.system__svg .ring{cursor:pointer;fill:var(--white);stroke:var(--teal-2);stroke-width:1;stroke-opacity:.55;transition:fill .5s var(--ease),stroke-opacity .3s;outline:none}
.section--paper .system__svg .ring{fill:var(--paper)}
.system__svg .ring[data-ring="learner"]{fill:var(--green);stroke:none}
.system__svg .ring:hover{stroke-opacity:1}
.system__svg .ring.is-active{fill:var(--teal-tint);stroke:var(--teal-ink);stroke-opacity:1;stroke-width:1.5}
.system__svg .ring[data-ring="learner"].is-active{fill:var(--green);stroke:var(--teal-ink);stroke-width:2}
.system__svg .ring:focus-visible{stroke:var(--teal-ink);stroke-opacity:1;stroke-width:3}
.system__svg text{font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none;fill:var(--ink-2);pointer-events:none}
.system__svg .inward{display:none}
.system__panel{padding:0 0 0 var(--s6);border-left:1px solid var(--line-strong);min-height:220px}
.system__panel .label{margin-bottom:var(--s4)}
.system__panel h3{font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem)}
.system__panel .system__title{margin-top:var(--s4);font:italic 400 1.2rem/1.4 var(--serif);color:var(--teal-ink)}
.system__panel .system__body{margin-top:var(--s3);color:var(--ink-2)}
.system__panel ul{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:6px 0;font:500 .9rem/1.3 var(--sans);color:var(--ink-2)}
.system__panel li+li::before{content:"·";padding:0 10px;color:var(--teal)}
.system__keys{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s6);border-bottom:1px solid var(--line)}
.system__keys button{position:relative;font:500 .92rem/1 var(--sans);padding:0 2px;min-height:44px;border:0;background:none;color:var(--ink-3);cursor:pointer}
.system__keys button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal-ink);transform:scaleX(0);transition:transform .3s var(--ease)}
.system__keys button:hover{color:var(--ink)}
.system__keys button[aria-pressed="true"]{color:var(--ink)}
.system__keys button[aria-pressed="true"]::after{transform:scaleX(1)}
.inward-label{display:flex;align-items:center;gap:var(--s3);font:italic 400 1.05rem/1.2 var(--serif);color:var(--ink-2);margin-top:var(--s5)}
.inward-label::before{content:"";width:32px;height:1px;background:var(--teal)}

/* ---------- Logo grid ----------
   A hairline grid, logos in their own colours. */
.logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:760px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.logos li{min-height:132px;display:grid;place-items:center;padding:var(--s5);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.logos img{max-height:56px;max-width:78%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
/* Western Cape Government supplies a reversed (white) lockup: it keeps its own blue */
.logos li.logo--wcg{background:#001489}
.logos li.logo--wcg img{mix-blend-mode:normal}
.logos .logo--tall img{max-height:68px}
.logo-ph{font:500 1rem/1.2 var(--serif);color:var(--ink-3);text-align:center}

/* ---------- People ---------- */
.people-grid{display:grid;gap:var(--s7) var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.people-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:inherit}
.person .photo--3x4{margin-bottom:var(--s3);background:var(--paper)}
.person .photo img{transition:transform .8s var(--ease)}
.person:hover .photo img{transform:scale(1.02)}
.person h3{font-size:1.3rem}
.person__tenure{font:600 .8rem/1.3 var(--sans);color:var(--teal-ink)}
.person__quote{font:italic 400 1rem/1.45 var(--serif);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person__quals{font-size:.85rem;line-height:1.45;color:var(--ink-3)}
.person .link-arrow{font-size:.9rem;margin-top:var(--s1)}
.initials{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper-deep);font:400 clamp(2.4rem,4vw,3.2rem)/1 var(--serif);color:var(--teal-ink)}
.initials--green{background:var(--paper-deep);color:var(--teal-ink)}

.team{display:grid;gap:0 var(--s7);grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:760px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.member{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s4);align-items:start;background:none;border-bottom:1px solid var(--line);padding:var(--s5) 0}
.avatar{display:block;flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--paper-deep);position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.avatar--sm{width:52px;height:52px}
.avatar .initials{font-size:1.05rem}
.member h3{font-size:1.2rem}
.member__role{font:600 .8rem/1.3 var(--sans);color:var(--teal-ink);margin:2px 0 var(--s2)}
.member p:last-child{font-size:.95rem;color:var(--ink-2);line-height:1.55}

.board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
@media (min-width:560px){.board{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}}
.board li{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.board strong{display:block;font:400 1.15rem/1.2 var(--serif);color:var(--ink)}
.board li>span:last-child>span{font:600 .78rem/1.3 var(--sans);color:var(--teal-ink)}

/* ---------- Values ----------
   Six values in a hairline grid: the name in serif, the gloss in italic. */
.values{display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:640px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.values{grid-template-columns:repeat(3,minmax(0,1fr))}}
.value{padding:var(--s7) var(--s6) var(--s7) 0;min-height:0;display:flex;flex-direction:column;gap:var(--s3);border-bottom:1px solid var(--line);background:none}
@media (min-width:640px){.value{padding-left:var(--s6)}.values>.value:nth-child(2n+1){padding-left:0}}
@media (min-width:980px){.values>.value:nth-child(2n+1){padding-left:var(--s6)}.values>.value:nth-child(3n+1){padding-left:0}.value+.value{border-left:1px solid var(--line)}.values>.value:nth-child(3n+1){border-left:0}}
.value h3{font-size:clamp(1.6rem,1.3rem + 1vw,2rem)}
.value p{font:italic 400 1.1rem/1.45 var(--serif);color:var(--teal-ink)}
.value--teal,.value--green,.value--teal-tint,.value--green-tint,.value--paper,.value--white{background:none;color:inherit;border-top:0;border-right:0}

/* ---------- Convictions ---------- */
.convictions{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.convictions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.convictions{grid-template-columns:repeat(6,minmax(0,1fr))}.convictions>*{grid-column:span 2}.convictions>*:nth-child(4){grid-column:2/span 2}}
.conviction{background:var(--white);border-top:1px solid var(--ink);padding:var(--s5) var(--s5) var(--s6) 0;display:flex;flex-direction:column;gap:var(--s4)}
.section--paper .conviction{background:none}
.conviction p:not(.label){font:400 1.2rem/1.45 var(--serif);color:var(--ink)}

/* ---------- Timeline ----------
   Without JS: a vertical list. With JS (dinaledi.js adds .is-rail) it becomes
   an interactive year rail: pick a year, the rail fills to it, and its story
   opens beside it. Arrow keys step through the years. */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.timeline li{position:relative;padding:0 0 var(--s6) 40px}
.timeline li::before{content:"";position:absolute;left:5px;top:10px;bottom:-4px;width:1px;background:var(--line-strong)}
.timeline li:last-child::before{display:none}
.timeline .node{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--white);border:1px solid var(--teal-2)}
.timeline li.is-key .node{background:var(--teal-ink);border-color:var(--teal-ink)}
.timeline li.is-future .node{border-style:dashed;border-color:var(--green)}
.timeline .year{font:400 2rem/1 var(--serif);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.timeline li.is-future .year{font-style:italic;color:var(--teal-ink)}
.timeline h3{font:400 1.25rem/1.3 var(--serif);color:var(--ink);margin:var(--s2) 0 var(--s2)}
.timeline p{color:var(--ink-2);line-height:1.6;max-width:36em}

.tl{display:grid;gap:var(--s7)}
.tl__rail{position:relative;display:flex;justify-content:space-between;gap:var(--s2);margin:0;padding:0 0 0;list-style:none;overflow-x:auto;scrollbar-width:none}
.tl__rail::-webkit-scrollbar{display:none}
.tl__rail::before,.tl__fill{content:"";position:absolute;left:6px;right:6px;top:21px;height:1px;background:var(--line-strong)}
.tl__fill{right:auto;background:var(--teal-ink);width:0;transition:width .7s var(--ease);z-index:1}
.tl__stop{position:relative;z-index:2;flex:1 0 auto;min-width:72px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:14px 0 6px;border:0;background:none;cursor:pointer;font:500 .88rem/1 var(--sans);color:var(--ink-3);text-align:left;white-space:nowrap}
.tl__stop:last-child{align-items:flex-end;text-align:right}
.tl__stop i{display:block;width:13px;height:13px;border-radius:50%;background:var(--white);border:1px solid var(--line-strong);transition:background .4s,border-color .4s,transform .4s var(--ease)}
.tl__stop:hover{color:var(--ink)}
.tl__stop:hover i{border-color:var(--teal-ink)}
.tl__stop.is-past i{background:var(--teal-ink);border-color:var(--teal-ink)}
.tl__stop[aria-selected="true"]{color:var(--ink)}
.tl__stop[aria-selected="true"] i{background:var(--white);border:3px solid var(--teal-ink);transform:scale(1.35)}
.tl__stop.is-future i{border-style:dashed;border-color:var(--green)}
.tl__panel{display:grid;gap:var(--s5) var(--s9);grid-template-columns:minmax(0,1fr);align-items:start;min-height:220px}
@media (min-width:980px){.tl__panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.tl__year{font:400 clamp(4rem,2.6rem + 5.4vw,7.5rem)/.9 var(--serif);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:lining-nums}
.tl__year.is-future{font-style:italic;color:var(--teal-ink);font-size:clamp(3rem,2rem + 4vw,5.5rem)}
.tl__body h3{font:400 var(--t-h3)/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--s4)}
.tl__body p{color:var(--ink-2);font-size:var(--t-lead);line-height:1.6}
.tl__nav{display:flex;gap:var(--s2);margin-top:var(--s6)}
.tl__nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:none;cursor:pointer;color:var(--ink);font:400 1.1rem/1 var(--sans);transition:border-color .2s,background .2s}
.tl__nav button:hover:not(:disabled){border-color:var(--ink)}
.tl__nav button:disabled{opacity:.35;cursor:default}
.tl__panel>*{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.tl__panel.is-swapping>*{opacity:0;transform:translateY(8px)}
.timeline.is-rail{display:none}
@media (max-width:640px){.tl__stop{min-width:64px}.tl__rail{justify-content:flex-start;gap:var(--s4)}.tl__stop:last-child{align-items:flex-start;text-align:left}}

/* ---------- CTA ---------- */
.cta{border-radius:var(--r-md);padding:clamp(40px,6vw,88px);display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);position:relative;overflow:hidden;background:var(--paper)}
@media (min-width:980px){.cta{grid-template-columns:minmax(0,1.3fr) auto;align-items:end}}
.cta h2{max-width:16ch}
.cta p{margin-top:var(--s4);max-width:32em;color:var(--ink-2)}
/* The deep panel: brand teal at depth, white type, white button */
.cta--teal{background:var(--teal-deep);color:var(--white)}
.cta--teal h2,.cta--teal p{color:var(--white)}
.cta--teal p{color:rgba(255,255,255,.82)}
.cta--teal .btn--dark,.cta--teal .btn--primary{background:var(--white);color:var(--teal-deep)}
.cta--teal .btn--dark:hover,.cta--teal .btn--primary:hover{background:var(--teal-tint);color:var(--teal-deep)}
.cta--teal .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.45)}
.cta--teal .btn--ghost:hover{border-color:var(--white);color:var(--white);background:transparent}
.cta--teal .label{color:var(--teal-soft)}
.cta--green-tint{background:var(--paper);border-top:2px solid var(--green)}
.section--paper .cta--green-tint{background:var(--white)}

/* ---------- Footer ---------- */
/* A compact footer: brand, links and contact sit together on the left
   two-thirds instead of being pushed to opposite edges of the page. */
.site-footer{background:var(--paper);padding:var(--s7) 0 var(--s4);border-top:1px solid var(--line);font-size:.92rem}
.footer-grid{display:grid;gap:var(--s6) var(--s8);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.footer-grid{grid-template-columns:minmax(0,300px) auto auto;justify-content:start;align-items:start}}
.site-footer .label::before{display:none}
.site-footer .label{color:var(--ink);font-weight:600}
.site-footer ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:0}
.site-footer nav ul{grid-template-columns:repeat(2,auto);column-gap:var(--s6)}
.site-footer li a{display:inline-block;padding:6px 0}
.footer-brand img{height:36px;width:auto}
.site-footer a{color:var(--ink-2);text-decoration:none}
.site-footer a:hover{color:var(--ink)}
.site-footer .reg{margin-top:var(--s4);font-size:.82rem;color:var(--ink-3);line-height:1.7;max-width:34em}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.social{display:flex;gap:var(--s1)}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.social a:hover{color:var(--teal-ink);text-decoration:none}
.social svg{width:17px;height:17px}

/* ---------- Motion ---------- */
/* The page is complete without script. dinaledi.js arms only blocks that are
   still below the fold when it runs, so a slow or failed script never leaves
   a section invisible, and nothing already on screen flashes. */
.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-armed{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.is-armed{opacity:1;transform:none}
}

/* ==========================================================================
   Components added for the rest of the site (Approach, Programmes, Impact,
   Partner, Contact, Privacy, 404). Same tokens, same rules.
   ========================================================================== */

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:100;padding:12px 18px;border-radius:var(--r-sm);background:var(--ink);color:var(--white);font:600 .95rem/1 var(--sans);text-decoration:none}
.skip-link:focus{top:var(--s3);color:var(--white)}

/* ---------- Inner-page hero ---------- */
.hero--inner h1{max-width:18ch}
.hero--center{text-align:center}
.hero--center h1,.hero--center .lead{margin-left:auto;margin-right:auto}
.hero--center .btn-row{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;font:italic 400 1rem/1.3 var(--serif);color:var(--ink-3)}

/* ---------- Tick lists: short points led by a fine teal rule ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ticks li{position:relative;padding-left:26px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--teal-2)}
.card--teal .ticks li::before{background:var(--teal-soft)}

/* ---------- Tabs (Programmes): serif titles on a hairline ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:0 var(--s7);border-bottom:1px solid var(--line-strong);margin-bottom:var(--s8)}
.tablist [role="tab"]{position:relative;min-height:56px;padding:0;border:0;background:none;color:var(--ink-3);font:400 clamp(1.1rem,1rem + .5vw,1.4rem)/1.2 var(--serif);cursor:pointer;transition:color .25s}
.tablist [role="tab"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal-ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.tablist [role="tab"]:hover{color:var(--ink)}
.tablist [role="tab"][aria-selected="true"]{color:var(--ink)}
.tablist [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
[role="tabpanel"][hidden]{display:none}
@media (max-width:640px){.tablist{flex-direction:column;border-bottom:0;border-left:1px solid var(--line-strong);gap:0}.tablist [role="tab"]{min-height:48px;padding-left:var(--s4);text-align:left}.tablist [role="tab"]::after{left:-1px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0)}.tablist [role="tab"][aria-selected="true"]::after{transform:scaleY(1)}}
.meta-row{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin:var(--s5) 0 0;padding:0;list-style:none}
.meta-row dt,.meta-row .meta__k{font:500 .85rem/1.2 var(--sans);color:var(--ink-3)}
.meta-row dd,.meta-row .meta__v{margin:6px 0 0;font:400 1.35rem/1.2 var(--serif);color:var(--ink)}

/* ---------- FAQ (native details/summary): hairline rows, a thin plus ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);min-height:44px;padding:var(--s5) 0;cursor:pointer;font:400 1.3rem/1.35 var(--serif);color:var(--ink);transition:color .2s}
.faq summary:hover{color:var(--teal-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23186F69' stroke-width='1.25'%3E%3Cpath d='M9 1v16M1 9h16'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 var(--s6);color:var(--ink-2);max-width:62ch}
.faq details>div>*+*{margin-top:var(--s3)}

/* ---------- Forms (Contact) ---------- */
.form{display:grid;gap:var(--s5)}
.form-row{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:var(--s2)}
.field label{font:500 .92rem/1.3 var(--sans);color:var(--ink)}
.field .hint{font-size:var(--t-small);color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #8C9795;border-radius:var(--r-sm);background:var(--white);color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field textarea{min-height:160px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--teal-ink);outline-offset:1px}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#B3261E}
.form-note{font-size:var(--t-small);color:var(--ink-2)}
.form-status{padding:var(--s4) var(--s5);border-left:2px solid var(--teal-ink);background:var(--paper);color:var(--ink)}
.form-status:empty{display:none}
.form-status.is-error{border-left-color:#B3261E;background:#FBF1EF}
.form-hp{display:none}
.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Long-form text (Privacy) ---------- */
.prose{max-width:68ch}
.prose>*+*{margin-top:var(--s4)}
.prose h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.prose h3{margin-top:var(--s6)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:var(--s2)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;background:var(--paper)}
.toc{position:sticky;top:96px;display:grid;gap:4px;list-style:none;margin:0;padding:0}
.toc a{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:.95rem}
.toc a:hover{background:var(--paper)}

/* ---------- Profile dialog (Our People) ---------- */
.person__open{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 .9rem/1 var(--sans);color:var(--teal-ink)}
.person__open::after{content:"→";transition:transform .2s}
.person__open:hover{color:var(--ink)}
.person__open:hover::after{transform:translateX(4px)}
.person__open:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:4px}
.profile{width:min(720px,calc(100% - 2*var(--gutter)));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--r-lg);background:var(--white);color:var(--ink);box-shadow:0 24px 64px -16px rgba(29,29,27,.35)}
.profile::backdrop{background:rgba(29,29,27,.45)}
.profile__inner{display:grid;gap:var(--s6);padding:clamp(24px,4vw,40px)}
@media (min-width:640px){.profile__inner{grid-template-columns:200px minmax(0,1fr);align-items:start}}
.profile__photo{border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;background:var(--paper);position:relative}
.profile__photo img{width:100%;height:100%;object-fit:cover}
.profile h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem)}
.profile .person__tenure{margin-top:var(--s2)}
.profile blockquote{margin:var(--s5) 0 0;font:italic 400 1.15rem/1.5 var(--serif);color:var(--ink)}
.profile .quals{margin-top:var(--s5)}
.profile__close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;display:grid;place-items:center}
.profile__close::before,.profile__close::after{content:"";position:absolute;width:16px;height:2px;background:var(--ink);transform:rotate(45deg)}
.profile__close::after{transform:rotate(-45deg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips{gap:4px 0}
.chips li{font:500 .88rem/1.4 var(--sans);color:var(--ink-2)}
.chips li+li::before{content:"·";padding:0 10px;color:var(--teal)}

/* ---------- Case study (Impact) ---------- */
.case{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr);padding:var(--s7) 0;border-top:1px solid var(--ink)}
@media (min-width:980px){.case{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8)}}
.case__meta{display:grid;gap:var(--s2);align-content:start}
.case__meta .label{margin-bottom:var(--s2)}
.case__photos{display:grid;gap:var(--s3);grid-template-columns:repeat(3,minmax(0,1fr))}
.case__photos .photo{border-radius:var(--r-sm)}

/* ---------- Document card (evidence, reports) ---------- */
.doc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);align-items:start}
.doc__icon{width:56px;height:56px;border-radius:var(--r-sm);border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--teal-ink)}
.doc__icon svg{width:24px;height:24px}


/* ---------- 404 ---------- */
.error-code{font:400 clamp(6rem,4rem + 10vw,12rem)/.85 var(--serif);letter-spacing:-.04em;color:var(--teal-ink)}


/* ==========================================================================
   Page sections. Components used by one page only, prefixed by page where
   they are page-specific (oa- Our Approach, pg- Programmes, im- Impact,
   pa- Partner, ct- Contact, pv- Privacy). Same tokens as everything above.
   ========================================================================== */

/* ---------- Home ---------- */
/* Stats row: three across from 760px, so there is no 2 + 1 orphan. */
@media (min-width:760px){.grid-3--even{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 81% card: the sentence that follows the figure, set off by a hairline. */
.figure-card__note{padding-top:var(--s4);border-top:1px solid var(--line-strong);color:var(--ink-2)}

/* Dinaledi's own statement: large serif, upright, no quote marks. */
.statement{font:400 var(--t-quote)/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink);padding-left:var(--s6);border-left:1px solid var(--teal)}

/* Rings diagram: smaller two-line label that fits the Learner disc. */
.system__svg text.t-sm{font-size:15px}

/* Quote card as a figure: no UA margin, roomier padding, readable measure. */
figure.quote-card{margin:0;padding:clamp(36px,6vw,88px)}
.quote-card .quote{max-width:24em;margin-top:var(--s5)}

/* Funder logos: the square JPEG files carry wide white margins, so they need
   more height than the 56px default to read at the same visual size. */
.logos .logo--sq{padding:var(--s3)}
.logos .logo--sq img{max-height:96px}

/* Single-column stats on phones: drop the tall card minimum. */
@media (max-width:759px){.grid-3--even .stat{min-height:0}}

/* Without JS the ring keys do nothing (every ring's text is shown instead). */
html:not(.js) .system__keys{display:none}

/* ---------- Our People ---------- */
/* Faculty head: the three figures sit under "The faculty.", set off by a hairline. */
.people-stats{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}

/* Faculty card: "View profile" hugs its label and lines up along each row. */
.person__open{align-self:flex-start;margin-top:auto}

/* Profile dialog: rhythm between the label, statement, credentials and link. */
.profile__label{margin-top:var(--s5)}
.profile blockquote{margin-top:var(--s3)}
.profile__link{margin-top:var(--s5)}
@media (max-width:639px){.profile__photo{width:136px}}

/* Without JS the dialogs cannot open: show every full profile in place instead. */
html:not(.js) .person__open,html:not(.js) .profile__close{display:none}
html:not(.js) .profiles{display:grid;gap:var(--s5);margin-top:var(--s8)}
html:not(.js) .profile{display:block;position:static;width:100%;max-height:none;margin:0;box-shadow:none;border:1px solid var(--line)}

/* Section heads set as the first cell of their grid, so 17 coaches and
   7 leaders fill whole rows with no orphan card:
   faculty 1 + 17 = 18 cells (2 and 3 columns), head spans 2 at 4 columns
   (19 cells: four full rows and three cards on the last);
   team 1 + 7 = 8 cells (2 columns), head spans 2 at 3 columns. */
.grid-head{margin-bottom:0;align-self:start}
@media (min-width:1080px){
  .grid-head--faculty{grid-column:span 2}
  .grid-head--team{grid-column:span 2;align-self:center;padding-right:var(--s7)}
}

/* ---------- Our People: faculty cards ----------
   Restored at the owner's request to the pre-redesign dark cards, with their
   hover, tap and keyboard profile overlay (rendered by the page script). */
/* ==========================================================================
   Our People: the faculty cards, restored as they were before the 2026
   redesign (our-people.html at 3220a09). Dark #2F2F2F ground, portrait,
   serif name, teal tenure line, italic statement teaser, outlined credential
   tags, "View profile" cue and the slide-up full-profile overlay.

   Loaded after /css/dinaledi.css. Every rule is scoped under
   .coaches-grid-section so nothing leaks into the rest of the site. The old
   tokens from the deleted styles.css are pinned here as literals (private
   --fc-* properties) so a rewrite of dinaledi.css cannot shift the look.
   The first block neutralises the dinaledi.css base rules (h2/h3/h4, p, a,
   .photo, .container, :focus-visible, body line-height) that the old
   stylesheet did not have.
   ========================================================================== */

.coaches-grid-section {
  --fc-dark:   #282828;   /* old --dark / --ink */
  --fc-card:   #2F2F2F;   /* old --card */
  --fc-teal:   #24A99F;   /* old --teal */
  --fc-accent: #94C950;   /* old --accent */
  --fc-display: 'Newsreader', Georgia, serif;                                  /* old --display */
  --fc-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* old --sans */

  /* The old page body: white text, 16px, no line-height (normal), no smoothing */
  color: #fff;
  font-family: var(--fc-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: auto;
  text-rendering: auto;

  background: var(--fc-card);
  padding: 80px 0 100px;
}

/* ─── Old base rules, re-established inside the section ─── */
.coaches-grid-section .container {
  width: auto;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.coaches-grid-section h2,
.coaches-grid-section h3,
.coaches-grid-section h4,
.coaches-grid-section p {
  margin: 0;
  text-wrap: wrap;
  letter-spacing: normal;
}
.coaches-grid-section a { text-decoration: none; color: inherit; }
.coaches-grid-section img { display: block; max-width: 100%; }
.coaches-grid-section button {
  cursor: pointer; background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; color: inherit;
}
.coaches-grid-section a:focus-visible,
.coaches-grid-section button:focus-visible {
  outline: 2px solid var(--fc-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Heading ─── */
.coaches-grid-section .coaches-grid-section__head { max-width: 760px; margin-bottom: 48px; }
.coaches-grid-section .coaches-grid-section__h2 {
  font-family: var(--fc-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; color: #fff;
  margin-bottom: 18px;
}
.coaches-grid-section .coaches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ─── Coach card ─── */
.coaches-grid-section .coach-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(36,169,159,0.14);
  transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.38s ease;
  cursor: pointer;
  outline: none;
}
.coaches-grid-section .coach-card:hover,
.coaches-grid-section .coach-card.overlay-open {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(36,169,159,0.4);
}
.coaches-grid-section .coach-card:focus-visible {
  outline: 2px solid var(--fc-teal);
  outline-offset: 3px;
}
/* Info-pending card: photo + name only, no interaction affordance */
.coaches-grid-section .coach-card--static { cursor: default; }
.coaches-grid-section .coach-card--static:hover { transform: none; box-shadow: none; }
.coaches-grid-section .coach-card--static:hover .coach-photo-wrap img { transform: none; }

/* ─── Photo ─── */
.coaches-grid-section .coach-photo-wrap {
  width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden; position: relative;
  margin: 0;
  border-radius: 0;
}
/* Real photo: the old shared .photo + .photo--natural treatment (full colour) */
.coaches-grid-section .coach-photo-wrap.photo {
  isolation: isolate;
  background: linear-gradient(160deg, #1B4340 0%, #14312F 100%);
}
.coaches-grid-section .coach-photo-wrap.photo::before,
.coaches-grid-section .coach-photo-wrap.photo::after { display: none; }
.coaches-grid-section .coach-photo-wrap.photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.4s ease;
}
.coaches-grid-section .coach-card:hover .coach-photo-wrap img,
.coaches-grid-section .coach-card.overlay-open .coach-photo-wrap img { transform: scale(1.04); }

/* Word mark (no photo available): serif monogram over faint rings */
.coaches-grid-section .photo-placeholder {
  width: 100%; height: 100%;
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #383838 0%, #292929 62%, #222222 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: transform 0.6s ease;
}
.coaches-grid-section .coach-card:hover .photo-placeholder,
.coaches-grid-section .coach-card.overlay-open .photo-placeholder { transform: scale(1.04); }
.coaches-grid-section .ph-rings {
  position: absolute; inset: 0; margin: auto;
  width: 78%; height: 78%;
}
.coaches-grid-section .ph-rings circle { fill: none; stroke: rgba(36,169,159,0.18); stroke-width: 1; }
.coaches-grid-section .photo-initials {
  position: relative;
  font-family: var(--fc-display); font-weight: 600;
  font-size: 56px; color: rgba(240,250,250,0.9);
  letter-spacing: 0.08em; user-select: none;
}
.coaches-grid-section .ph-rule {
  position: relative; width: 44px; height: 1px;
  background: linear-gradient(90deg, rgba(36,169,159,0), rgba(36,169,159,0.8), rgba(36,169,159,0));
}

/* ─── Card body ─── */
.coaches-grid-section .coach-body {
  background: var(--fc-card);
  padding: 28px;
}
.coaches-grid-section .coach-name {
  font-family: var(--fc-display); font-weight: 600; letter-spacing: -0.018em;
  font-size: 22px; color: #fff; line-height: 1.2; margin-bottom: 8px;
}
.coaches-grid-section .coach-role {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0; color: var(--fc-teal);
  margin-bottom: 14px;
}
.coaches-grid-section .coach-statement {
  font-family: var(--fc-display); font-style: italic;
  font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coaches-grid-section .coach-base-creds {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.coaches-grid-section .coach-cue {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fc-sans);
  font-size: 13px; font-weight: 600;
  color: var(--fc-teal);
  letter-spacing: 0.04em;
  transition: gap 0.2s;
}
.coaches-grid-section .coach-card:hover .coach-cue,
.coaches-grid-section .coach-card.overlay-open .coach-cue { gap: 10px; }
.coaches-grid-section .coach-cue::after {
  content: '→';
  transition: transform 0.2s;
}
.coaches-grid-section .cred-tag {
  font-size: 11px; padding: 4px 10px;
  border-radius: 3px; border: 1px solid;
}
.coaches-grid-section .cred-tag--coaching  { color: var(--fc-teal);   border-color: rgba(36,169,159,0.4); }
.coaches-grid-section .cred-tag--education { color: var(--fc-accent); border-color: rgba(147,200,80,0.4); }

/* ─── Overlay ─── */
.coaches-grid-section .coach-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;               /* works after JS fixes card height */
  z-index: 10;
  background: rgba(23,37,31,0.97);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94), visibility 0s 0.38s;
  padding: 20px 24px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.coaches-grid-section .coach-card.overlay-open .coach-overlay {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
}

.coaches-grid-section .overlay-toprow {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 10px; flex-shrink: 0;
}
.coaches-grid-section .overlay-label {
  font-size: 12px; font-weight: 600; font-style: italic;
  font-family: var(--fc-display); color: var(--fc-teal);
}
.coaches-grid-section .overlay-close {
  width: 44px; height: 44px; flex-shrink: 0;
  margin: -10px -10px 0 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); font-size: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.coaches-grid-section .overlay-close:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: var(--fc-teal); }

.coaches-grid-section .overlay-name {
  font-family: var(--fc-display); font-weight: 600; letter-spacing: -0.018em;
  font-size: 18px; color: #fff; line-height: 1.2;
  margin-bottom: 3px; flex-shrink: 0;
}
.coaches-grid-section .overlay-duration {
  font-size: 12px; color: rgba(255,255,255,0.5);
  margin-bottom: 12px; flex-shrink: 0;
}
.coaches-grid-section .overlay-bio {
  font-weight: 300; font-size: 13px; line-height: 1.7; font-style: italic;
  color: rgba(255,255,255,0.68); margin-bottom: 14px; flex-shrink: 0;
}
.coaches-grid-section .overlay-creds-wrap {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 16px; flex-shrink: 0;
}
.coaches-grid-section .overlay-cred {
  font-size: 11px; padding: 4px 10px;
  border-radius: 3px; border: 1px solid;
}
.coaches-grid-section .overlay-cred--coaching  { color: var(--fc-teal);   border-color: rgba(36,169,159,0.4); }
.coaches-grid-section .overlay-cred--education { color: var(--fc-accent); border-color: rgba(147,200,80,0.4); }

.coaches-grid-section .linkedin-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--fc-teal); border: 1.5px solid var(--fc-teal);
  padding: 8px 16px; border-radius: 8px;
  transition: background 0.2s, color 0.2s; flex-shrink: 0;
  align-self: flex-start;
}
.coaches-grid-section .linkedin-btn:hover { background: var(--fc-teal); color: var(--fc-dark); }

/* ─── Responsive (old breakpoints) ─── */
@media (max-width: 1023px) {
  .coaches-grid-section .coaches-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .coaches-grid-section .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 639px) {
  .coaches-grid-section .coaches-grid { grid-template-columns: 1fr; }
  .coaches-grid-section { padding: 56px 0 80px; }
}

/* Reduced motion: the old stylesheet cut every transition to ~0 */
@media (prefers-reduced-motion: reduce) {
  .coaches-grid-section *,
  .coaches-grid-section *::before,
  .coaches-grid-section *::after { transition-duration: 0.001ms !important; }
}

/* ---------- Our Approach (incl. the stakeholder web drawn by /systems-tier1.js) ---------- */
/* Bridge: the "deep by design" paragraph as a raised card. */
.oa-bridge{color:var(--ink-2)}
.oa-depth{font:400 1.2rem/1.5 var(--serif);color:var(--ink)}

/* Goal card: roomy, with the statement set large. */
.oa-goal{padding:clamp(32px,5vw,64px)}
.oa-goal .quote{max-width:18em}

/* How change happens: the intro stays in view beside the steps on wide screens. */
@media (min-width:980px){.oa-sticky{position:sticky;top:112px}}
.oa-steps li{align-items:start;font-weight:400}
.oa-steps h3{font-size:1.3rem}
.oa-steps p{color:var(--ink-2)}

/* Horizons: three across from 760px (no 2 + 1 orphan). */
@media (min-width:760px) and (max-width:979px){.oa-horizons>:last-child{grid-column:1/-1}}
.oa-horizon h3{margin-top:var(--s2)}
.oa-horizon .ticks{margin-top:var(--s5)}

/* ---------- Stakeholder web (systems-tier1.js) on a light ground ---------- */
.t1-figure{margin:0}
.t1-stage{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);padding:clamp(6px,3vw,40px) 0}
#t1svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
@media (max-width:979px){#t1svg{max-width:460px}}
html:not(.js) .t1-stage,html:not(.js) .t1-legend,html:not(.js) .t1-slot{display:none}
body:not(.reduced) #t1svg{animation:t1fade 1s ease both}
@keyframes t1fade{from{opacity:0}to{opacity:1}}

/* Background zones: the wider system, and the school inside it */
.t1-zone--wider{fill:var(--paper);stroke:var(--teal-soft);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.t1-zone--school{fill:var(--teal-tint);stroke:var(--teal-soft);stroke-width:1.5}

/* Links */
.t1-link{stroke:#7CCBC4;stroke-width:2;opacity:1;transition:stroke .3s ease,opacity .3s ease}
.t1-link.dim{opacity:.25}
.t1-link.lit{stroke:var(--teal-ink);stroke-width:2.5}
.t1-entry{stroke:var(--ink);stroke-width:2;fill:none;stroke-dasharray:6 6;stroke-linecap:round;transition:opacity .3s ease}
.t1-entry.dim{opacity:.2}

/* Nodes */
.t1-dot--learner{fill:var(--green)}
.t1-dot--inner{fill:#7CCBC4}
.t1-dot--outer{fill:var(--teal-soft);stroke:#7CCBC4;stroke-width:1.5}
.t1-dot--lever{fill:var(--teal);stroke:var(--green);stroke-width:3}
.t1-halo{stroke:var(--green);stroke-width:1.5;opacity:.6}
.t1-learner-ring{stroke:rgba(255,255,255,.6)}
.t1-badge{fill:var(--green);stroke:var(--black)}
.t1-particle{fill:var(--teal-ink)}
.t1-particle--entry{fill:var(--green)}

/* Text: ink on a white halo, so every label keeps its contrast over lines and zones */
.t1-label,.t1-sub,.t1-ringcap{paint-order:stroke;stroke:var(--white);stroke-width:5px;stroke-linejoin:round}
.t1-label{font-family:var(--sans);font-weight:700;letter-spacing:.07em;fill:var(--ink)}
.t1-label--learner{fill:var(--black);stroke:none}
.t1-sub{font-family:var(--sans);font-weight:500;letter-spacing:.02em;fill:var(--ink-2)}
.t1-enters{fill:var(--teal-ink);font-weight:600}
.t1-ringcap{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:var(--teal-ink);stroke:var(--paper)}
.t1-entrybadge{font-family:var(--sans);font-weight:700;fill:var(--black);text-anchor:middle}

/* Interaction */
.t1-node{cursor:pointer;outline:none}
.t1-node:focus-visible .t1-hit{stroke:var(--teal-ink);stroke-width:3;stroke-dasharray:4 4}
.t1-dot{transition:transform .28s cubic-bezier(.34,1.56,.64,1),filter .28s ease,opacity .3s ease;transform-box:fill-box;transform-origin:center}
.t1-node:hover .t1-dot,.t1-node:focus-visible .t1-dot{transform:scale(1.13);filter:drop-shadow(0 2px 6px rgba(24,111,105,.35))}
.t1-node.lit .t1-dot{filter:drop-shadow(0 2px 7px rgba(24,111,105,.4))}
/* Dimmed nodes fade their shapes only; the labels stay readable. */
.t1-node.dim .t1-dot,.t1-node.dim .t1-halo{opacity:.3}
.t1-node.dim .t1-label,.t1-node.dim .t1-sub{fill:var(--ink-2);font-weight:500}
body:not(.reduced) .t1-node{animation:t1nodeIn .55s cubic-bezier(.22,1,.36,1) backwards}
@keyframes t1nodeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
body:not(.reduced) .t1-static{opacity:0;animation:t1fade .9s ease .15s forwards}

/* Caption, takeaway, legend, hint */
.t1-figure figcaption{max-width:720px;margin:var(--s5) auto 0;text-align:center}
.t1-slot{display:grid;min-height:3.2em;align-items:center}
.t1-slot>*{grid-area:1/1}
@media (max-width:640px){.t1-slot{min-height:4.8em}}
.t1-cap.show+.t1-hint{opacity:0}
.t1-cap{color:var(--ink-2);opacity:0;transition:opacity .3s ease}
.t1-cap.show{opacity:1}
.t1-cap b{color:var(--ink);font-weight:600}
.t1-cap .lime{color:var(--teal-ink);font-weight:600}
.t1-takeaway{margin-top:var(--s3);font:500 var(--t-h3)/1.3 var(--serif);color:var(--ink);letter-spacing:-.01em}
.t1-takeaway b{font-weight:500;background:linear-gradient(transparent 62%,var(--green-soft) 62%)}
.t1-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s6);margin-top:var(--s5);font-size:var(--t-small);color:var(--ink-2)}
.t1-legend__row{display:flex;align-items:center;gap:10px}
.t1-legend__row b{color:var(--ink);font-weight:600}
.t1-legend__link{stroke:#7CCBC4;stroke-width:2.5}
.t1-legend__entry{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5}
.t1-hint{transition:opacity .3s ease;font-size:var(--t-small);color:var(--ink-2)}
.t1-hint b{color:var(--ink);font-weight:600}
.t1-noscript{max-width:560px;margin:var(--s4) auto 0;color:var(--ink-2)}
/* Standalone evidence link: a full 44px target */
.oa-sticky .link-arrow{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.oa-steps li{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* ---------- Programmes ---------- */
/* Tabs sit full width above the panels. */
.pg-tabs{display:block}

/* Panel entrance (the global reduced-motion rule switches it off). */
.js [role="tabpanel"]:not([hidden]){animation:pg-fade .45s ease}
@keyframes pg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[role="tabpanel"]:focus-visible{outline-offset:8px;border-radius:var(--r-md)}

/* Without JS every panel shows, one after another, and the tabs are hidden. */
html:not(.js) [role="tabpanel"][hidden]{display:block}
html:not(.js) .pg-tabs{display:none}
html:not(.js) [role="tabpanel"]+[role="tabpanel"]{margin-top:var(--s9);padding-top:var(--s9);border-top:1px solid var(--line)}

.pg-tagline{font:italic 400 var(--t-lead)/1.4 var(--serif);color:var(--teal-ink)}
.pg-panel__body{margin-top:var(--s8)}
.pg-panel h3{margin-bottom:var(--s4)}
.pg-intro{color:var(--ink-2);margin-bottom:var(--s5)}
.pg-steps li{align-items:start;font-weight:400}
.pg-steps strong{display:block;font:400 1.15rem/1.3 var(--serif);color:var(--ink);margin-bottom:4px}
.pg-steps span{display:block;color:var(--ink-2);font-size:.975rem;line-height:1.5}
@media (min-width:760px){.pg-steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Outcomes: a paper card with a fine green rule. */
.pg-outcome{position:relative;display:flex;flex-direction:column;gap:var(--s5)}
.pg-outcome h3{margin-bottom:0}
.pg-outcome .chip{align-self:flex-start;white-space:normal;margin-top:auto}
.pg-outcome .chip b{font:600 .82rem/1 var(--sans);color:var(--teal-ink)}

/* District photo: its source is 724px, so it never shows wider than 362px. */
.pg-photo--sm{max-width:362px;margin-left:auto;margin-right:auto}

/* Methodology: unit-of-work comparison. */
.pg-units{list-style:none;margin:0;padding:0}
.pg-unit{display:flex;flex-direction:column;gap:var(--s3);height:100%}
.pg-unit svg{width:56px;height:56px;display:block;margin-bottom:var(--s2)}
.pg-unit svg circle{fill:none;stroke:var(--teal-ink);stroke-width:1;stroke-opacity:.6}
.pg-unit svg .dot{fill:var(--green);stroke:none}
.pg-unit{border-top:1px solid var(--ink);padding-top:var(--s5)}
#programmes{scroll-margin-top:72px}
.pg-unit a{display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;font:400 1.4rem/1.2 var(--serif);color:var(--ink);text-decoration:none}
.pg-unit a:hover{color:var(--teal-ink);text-decoration:underline}
.pg-unit .label{margin-top:auto}
.pg-unit .meta__v{font:italic 400 1.15rem/1.3 var(--serif);color:var(--teal-ink)}
.pg-method{margin-top:var(--s8)}
.pg-deep{font:400 1.2rem/1.5 var(--serif);color:var(--ink)}
@media (max-width:759px){
  .pg-unit{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s4);row-gap:2px;align-items:center}
  .pg-unit svg{grid-row:1/4;margin:0}
  .pg-unit .label{margin-top:0}
}

/* ---------- Impact ---------- */
/* Case studies: two photos side by side, each capped at half its source width. */
.im-case-body>*+*{margin-top:var(--s5)}
.im-case-body .stat-inline>div>span{max-width:17em;line-height:1.35}
.im-case-body>.photo{max-width:560px}
.case__meta h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.case__meta .meta-row{margin-top:var(--s3)}
.im-ba .label{margin-bottom:var(--s3)}
.im-ba p:not(.label){font-size:1rem;line-height:1.55}

/* Evidence: the document card is one link. */
.im-doc{text-decoration:none;color:var(--ink);transition:border-color .3s}
.im-doc:hover{color:var(--ink);border-color:var(--teal-ink)}
.im-doc__title{display:block;font:400 1.3rem/1.3 var(--serif);color:var(--ink)}
.im-doc__meta{display:block;margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-2)}
.im-doc .link-arrow{margin-top:var(--s4)}
.im-findings{margin-top:var(--s8)}
.im-findings h3{margin-bottom:var(--s5)}
.im-findings .figure-card p:not(.figure-card__num){font:400 1.05rem/1.5 var(--sans);color:var(--ink-2);max-width:24em}
.im-findings .quote-line{margin-top:var(--s6);max-width:40em}

/* Voices: smaller quote size for cards set two to a column. */
.im-quote{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.im-voices{display:grid;gap:var(--s5)}
.im-voices figure{margin:0}

/* ---------- Partner ---------- */
/* Two paths: equal-height panels, CTA pinned to the bottom. */
.pa-path{display:flex;flex-direction:column;position:relative;padding:clamp(32px,4.5vw,56px)}
.pa-path>*{position:relative}
.pa-path h3{font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem)}
.pa-path .ticks{gap:var(--s4)}
.pa-path>*+*{margin-top:var(--s5)}
.pa-path>.pa-path__cta{margin-top:auto;padding-top:var(--s6)}

/* What follows: four stages, each under a fine rule. */
.pa-step{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) 0 0;border:0;border-top:1px solid var(--ink);border-radius:0;background:none}
.pa-step h3{font-size:1.4rem}
.pa-step p{color:var(--ink-2);font-size:1rem}

/* Heading column beside a wider content column (logos, FAQ). */
@media (min-width:980px){
  .pa-split{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .pa-sticky{position:sticky;top:112px}
}

/* Funder logos: nine tiles. Two across on phones with the wide WCG lockup
   spanning the last row; three across (3 x 3) from 760px. */
.pa-logos{grid-auto-rows:1fr}
.pa-logos li{aspect-ratio:auto;min-height:120px}
.pa-logos li:last-child{grid-column:1/-1}
@media (min-width:760px){
  .pa-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pa-logos li:last-child{grid-column:auto}
}

/* Giving: the three points as a list with hairlines between. */
.pa-points{list-style:none;margin:0;padding:0}
.pa-points li{position:relative;padding:var(--s5) 0 var(--s5) 40px;border-top:1px solid var(--line)}
.pa-points li:first-child{border-top:0;padding-top:0}
.pa-points li:last-child{padding-bottom:0}
.pa-points li::before{content:"";position:absolute;left:0;top:calc(var(--s5) + .8em);width:18px;height:1px;background:var(--teal-2)}
.pa-points li:first-child::before{top:.8em}

.pa-stages{list-style:none;margin:0;padding:0}

/* ---------- Contact ---------- */
/* Form: heading column beside the form card; required marks. */
@media (min-width:980px){
  .ct-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .ct-sticky{position:sticky;top:112px}
}
.ct-req{color:var(--teal-ink)}
.field label .hint{font-weight:400}

/* Links to #contactForm land clear of the sticky header. */
#contactForm{scroll-margin-top:120px}

/* ---------- Privacy ---------- */
/* Contents column beside the notice: narrow, sticky, hidden on small screens
   (the notice is short enough to read straight through on a phone). */
.pv-toc-col{display:none}
@media (min-width:980px){
  .pv-split{grid-template-columns:220px minmax(0,1fr);gap:var(--s8)}
  .pv-toc-col{display:grid;border-left:1px solid var(--line-strong);padding-left:var(--s3)}
  .pv-toc-col a{font-size:.9rem;line-height:1.35;min-height:44px;display:flex;align-items:center}
}

/* Anchored headings clear the sticky header; the first one sits flush. */
.prose h2{scroll-margin-top:96px}
.prose>:first-child{margin-top:0}
.prose h2+p,.prose h3+p{margin-top:var(--s3)}
.prose .card>*+*{margin-top:var(--s3)}
.prose .ticks{padding-left:0}

/* Hero: title and summary sit close on phones; the standard split gap is too wide there. */
.pv-hero-split{row-gap:var(--s5)}


/* ==========================================================================
   Site-wide refinements found in review
   ========================================================================== */
/* 44px targets for standalone text links and the footer's inline links */
.footer-base a{display:inline-flex;align-items:center;min-height:44px}
.logo{display:inline-flex;align-items:center;min-height:44px}
/* Stacked splits: the 64px desktop gap is too heavy on one column */
@media (max-width:979px){.split{row-gap:var(--s6)}}
/* A photo inside a .stack keeps the stack's rhythm (.photo resets margin) */
.stack>*+.photo,.stack>*+figure{margin-top:var(--s5)}

/* ==========================================================================
   Refinements after independent review (2026-09)
   One accent rule, one column grid, one closing panel, one button family.
   ========================================================================== */

/* Colour: no shuffled teal and lime top rules. Lime belongs to the learner
   (rings diagram) alone; cards and panels are plain paper or white. */
.card--teal-tint,.card--green-tint,.card--green,.card--top-green,.cta--green-tint{border-top:0}
.pg-unit svg .dot{fill:var(--teal-ink)}
.timeline li.is-future .node,.tl__stop.is-future i{border-color:var(--teal-2)}
li{text-wrap:pretty}

/* One column grid: every two-column section starts its right column on the
   same line as .split */
.tl__panel,.case,.ct-split,.pa-split,.system{column-gap:var(--s9)}
@media (min-width:980px){
  .tl__panel,.case,.system{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .ct-split,.pa-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.grid-2{align-items:start}

/* Buttons: one filled style, one outline */
.btn--dark{background:var(--teal-ink);color:var(--white)}
.btn--dark:hover{background:var(--teal-hover);color:var(--white)}
.btn--ghost{border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}

/* Labels: small teal text, no leading rule */
.label::before{display:none}

/* Big figures: breathing room above, a sane line box */
.figure-card__num{line-height:1}
.card:has(.figure-card){padding-top:clamp(40px,4vw,56px)}
.im-findings .figure-card__num{font-size:var(--t-stat)}

/* Stats: one colour, "Nearly" set inline on the baseline */
.stat--teal .stat__num,.stat--tint .stat__num{color:var(--ink)}
.stat__num small{display:inline;margin:0 .25em 0 0;vertical-align:baseline;font-size:.36em}

/* Hero facts fit a phone */
@media (max-width:759px){.hero .facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}}

/* Convictions: a ruled list, label left and belief right */
.convictions{display:block;border-top:1px solid var(--ink)}
.convictions>.conviction,.conviction.card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s5) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
@media (min-width:760px){.convictions>.conviction,.conviction.card{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:var(--s9);align-items:baseline}}
.conviction .label{font-size:.95rem}

/* Timeline rail: tidy on phones, square controls, no dead space */
.tl__panel{min-height:0}
.tl__nav button{border-radius:var(--r-sm)}
@media (max-width:640px){
  .tl__rail{gap:var(--s5);justify-content:flex-start}
  .tl__rail::before{display:none}
  .tl__stop{min-width:88px}
  .tl__stop::before{content:"";position:absolute;top:21px;left:0;right:calc(-1*var(--s5));height:1px;background:var(--line-strong);z-index:-1}
  .tl__stop:last-child::before{right:0}
  .tl__fill{display:none}
  .tl__stop.is-past::before{background:var(--teal-ink)}
  .tl__panel>div:first-child{display:contents}
  .tl__nav{order:3;margin-top:0}
}

/* Closing panels: one deep-teal treatment, a readable measure, buttons under the text */
.cta{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.cta{grid-template-columns:minmax(0,1fr);align-items:start}}
.cta h2{max-width:22ch}
.cta--green-tint{background:var(--teal-deep);color:var(--white)}
.cta--green-tint h2{color:var(--white)}
.cta--green-tint p{color:rgba(255,255,255,.82)}
.cta--green-tint .btn--dark,.cta--green-tint .btn--primary{background:var(--white);color:var(--teal-deep)}
.cta--green-tint .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.45)}
.cta--green-tint .btn--ghost:hover{border-color:var(--white);background:transparent}
.cta--green-tint :focus-visible{outline-color:var(--white)}
.cta .btn-row{justify-content:flex-start}

/* Rings diagram: readable labels on phones; one rule wraps panel and keys */
@media (max-width:759px){.system__svg text{font-size:26px}}
.system__panel{border-left:0;padding-left:0}
.system>div:last-child{padding-left:var(--s6);border-left:1px solid var(--line-strong)}
@media (max-width:979px){.system>div:last-child{padding-left:var(--s5)}}

/* Logos sized by shape: marks and wordmarks read at one optical size */
.logos img{max-width:65%}
.logos .logo--sq img{max-height:84px}

/* Impact: meta in two columns; the document card loses its icon box */
.case__meta .meta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.doc{grid-template-columns:minmax(0,1fr)}
.doc__icon{display:none}
/* Impact: a publication card shows the first page of the article as its cover */
.doc.doc--cover{grid-template-columns:112px minmax(0,1fr);gap:var(--s5)}
.doc--cover picture{display:block}
.doc__cover{display:block;width:100%;height:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);transition:transform .3s var(--ease)}
.im-doc:hover .doc__cover{transform:translateY(-3px)}
.im-doc .label{margin-bottom:var(--s2)}
@media (max-width:479px){.doc.doc--cover{grid-template-columns:minmax(0,1fr);gap:var(--s4)}.doc--cover picture{width:88px}}

/* Footer: registration numbers never break mid-number */
.site-footer .reg .nw{white-space:nowrap}

/* Our Approach stakeholder web: the same quiet language as the Home rings */
.t1-label,.t1-ringcap{text-transform:none;letter-spacing:0;font-family:var(--serif);font-style:italic;font-weight:400}
.t1-ringcap{fill:var(--ink-2)}
.t1-entrybadge,.t1-badge{display:none}
.t1-takeaway b{background:none}
.t1-dot--learner{fill:var(--green)}
.t1-dot--inner{fill:var(--white);stroke:var(--teal-2);stroke-width:1}
.t1-dot--outer{fill:var(--white);stroke:var(--teal-2);stroke-width:1;stroke-opacity:.6}
.t1-dot--lever{fill:var(--teal-ink);stroke:none}
.t1-zone--wider{fill:none;stroke:var(--line-strong);stroke-dasharray:none}
.t1-zone--school{fill:var(--teal-tint);stroke:none}
.t1-link{stroke:var(--teal-2);stroke-width:1;stroke-opacity:.45}
.t1-link.lit{stroke:var(--teal-ink);stroke-width:1.5;stroke-opacity:1}
.t1-halo{display:none}
.t1-core{display:none}
.hero .split--top>.lead{margin-top:.5em}
.hero .photo--3x2 img{object-position:60% 30%}
/* Impact voices: a single quote, set at reading measure */
.im-voices{grid-template-columns:minmax(0,1fr);max-width:52rem}

/* Home: one verifiable figure, sourced, directly under the stats */
.proof-line{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);max-width:52rem;font:400 var(--t-lead)/1.5 var(--serif);color:var(--ink)}
.proof-line .link-arrow{font:600 .95rem/1 var(--sans);margin-left:var(--s2);white-space:nowrap}

/* ==========================================================================
   Motion (2026-09). Each piece plays once or only on a click, uses opacity
   and transform only, and ends in the design as drawn. See README, Motion.
   ========================================================================== */

/* Moving between pages: the header holds still, the page crossfades and the
   current-page line glides to its new place. Browsers without cross-document
   view transitions (Firefox, older Safari) load pages as before. The global
   reduced-motion switch does not reach ::view-transition, hence the query. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.site-header{view-transition-name:site-header}
.nav__mark{position:absolute;left:10px;right:10px;bottom:8px;height:1px;background:var(--teal-ink);view-transition-name:nav-mark}
.nav a[aria-current="page"]::after{display:none}
::view-transition-group(*){animation-duration:400ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root){animation:vt-out 240ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in 400ms cubic-bezier(.2,.7,.2,1) 90ms both}
::view-transition-old(nav-mark),::view-transition-new(nav-mark){animation:none}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* Impact: the 3.4 to 4.2 shift drawn on its own one-to-five scale.
   A value v sits at (v-1)/4 of the width: 3.4 at 60%, 4.2 at 80%. */
.shift{width:22rem;max-width:100%;margin-top:4px}
.shift__track{position:relative;height:11px}
.shift i{position:absolute;display:block}
.shift__axis{left:0;right:0;top:5px;height:1px;background:var(--line-strong)}
.shift__tick{top:3px;width:1px;height:5px;background:var(--line-strong)}
.shift__tick:nth-child(2){left:0}.shift__tick:nth-child(3){left:25%}.shift__tick:nth-child(4){left:50%}.shift__tick:nth-child(5){left:75%}.shift__tick:nth-child(6){right:0}
.shift__seg{left:60%;width:20%;top:4.5px;height:2px;background:var(--teal-ink);transform-origin:0 50%}
.shift__ring,.shift__dot{top:0;width:11px;height:11px;margin-left:-5.5px;border-radius:50%}
.shift__ring{left:60%;border:1.5px solid var(--teal-ink);background:var(--white)}
.shift__run{position:absolute;inset:0;display:block}
.shift__dot{left:80%;background:var(--teal-ink)}
.shift__ends{position:relative;height:1.2em;margin-top:4px;font:500 .75rem/1.2 var(--sans);color:var(--ink-3)}
.shift__ends span{position:absolute;top:0;transform:translateX(-50%)}
.shift__ends span:first-child{left:0}
.shift__ends span:last-child{left:100%}
.stat-inline>div{min-width:0}
.shift.is-armed .shift__seg{transform:scaleX(0)}
.shift.is-armed .shift__run{transform:translateX(-20%)}

/* Home: a hundred learners behind the 81%. The 81 who cannot read for
   meaning are outlines, the 19 who can are solid. The faint start dots are
   one background under the grid, so the start state costs nothing. */
.hundred__marks{--p:13px;display:grid;grid-template-columns:repeat(20,6px);grid-auto-rows:6px;gap:calc(var(--p) - 6px);width:max-content;max-width:100%;background:radial-gradient(circle at 3px 3px,var(--line) 2.5px,transparent 3px) 0 0/var(--p) var(--p)}
@media (min-width:1100px){.hundred__marks{--p:16px}}
.hundred__marks i{display:block;border-radius:50%;border:1px solid var(--ink-3);background:var(--paper)}
.hundred__marks i:nth-child(n+82){border-color:var(--teal-ink);background:var(--teal-ink)}
.hundred__cap{margin-top:var(--s3);font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.hundred.is-armed i{opacity:0}