/* ==========================================================================
   PURE Power Africa — site stylesheet
   Palette derives from the Gigawatt PURE Power house style:
   navy #1F3A5F · green #2E6B4F · orange #E67E22 / #F2802B · charcoal #2E2824
   ========================================================================== */

:root{
  --ink:      #0B1F33;
  --ink-2:    #123049;
  --navy:     #1F3A5F;
  --steel:    #1F5C87;
  --green:    #2E6B4F;
  --green-lt: #3E8A66;
  --orange:   #E67E22;
  --orange-b: #F2802B;
  --orange-d: #B9520C;
  --sand:     #F7F3EC;
  --sand-2:   #EFE9DF;
  --paper:    #FFFFFF;
  --charcoal: #2E2824;
  --grey:     #5A5A5A;
  --grey-lt:  #8A8F94;
  --hair:     #D6DDE6;
  --hair-warm:#E2DACD;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--sand);
  color:var(--charcoal);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:var(--steel); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- language switching ------------------------------------------ */
html[data-lang="en"] .l-fr{ display:none !important; }
html[data-lang="fr"] .l-en{ display:none !important; }

/* ---------- layout ------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:880px; margin:0 auto; padding-inline:var(--gut); }
section{ padding-block:clamp(56px,7vw,104px); }
.sec-tight{ padding-block:clamp(40px,5vw,72px); }

.band-ink{ background:var(--ink); color:#EAF0F5; }
.band-navy{ background:var(--navy); color:#EAF0F5; }
.band-paper{ background:var(--paper); }
.band-sand2{ background:var(--sand-2); }
.band-green{ background:var(--green); color:#EAF5EE; }

.band-ink a, .band-navy a, .band-green a{ color:#FBC98E; }

/* ---------- type --------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; margin:0; letter-spacing:-0.015em; }

.h-hero{
  font-size:clamp(2.35rem, 6.0vw, 4.9rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-0.03em;
}
.h-page{
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-0.028em;
}
.h-sec{
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-0.022em;
  color:var(--navy);
}
.band-ink .h-sec, .band-navy .h-sec, .band-green .h-sec{ color:#fff; }

.h-card{ font-size:1.14rem; line-height:1.3; font-weight:700; letter-spacing:-0.01em; color:var(--navy); }

.band-ink > .wrap > .h-card, .band-navy > .wrap > .h-card{ color:#fff; }

.eyebrow{
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange-b);
  margin:0 0 18px;
}
.eyebrow-q{ color:var(--green); }

.lede{
  font-size:clamp(1.1rem,1.9vw,1.35rem);
  line-height:1.52;
  color:#3D4750;
  max-width:60ch;
}
.band-ink .lede, .band-navy .lede{ color:#BFD1E0; }

p{ margin:0 0 1.15em; max-width:74ch; }
.prose p:last-child{ margin-bottom:0; }
.strap{ font-family:var(--f-serif); font-style:italic; color:var(--grey); }
.band-ink .strap{ color:#9FB6C8; }

.pull{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.85rem);
  line-height:1.32;
  letter-spacing:-0.02em;
  color:var(--navy);
  max-width:34ch;
}
.band-ink .pull, .band-navy .pull, .band-green .pull{ color:#fff; }

.rule{ height:3px; width:64px; background:var(--orange-b); border:0; margin:0 0 26px; }
.rule-c{ margin-inline:auto; }

/* ---------- wordmark ----------------------------------------------------- */
.mark{ display:inline-block; line-height:1; text-decoration:none !important; text-align:center; }
.mark-l1, .mark-l2{
  font-family:var(--f-display);
  font-weight:800;
  display:block;
  white-space:nowrap;
}
/* AFRICA is set slightly larger than PURE POWER, at the same weight, close-set
   and centered beneath it. The negative right margin cancels the trailing
   letter-space so the optical centering is exact. */
.mark-l1{ color:var(--charcoal); letter-spacing:.10em; margin-right:-.10em; }
.mark-l2{ color:var(--orange-b); letter-spacing:.12em; margin-right:-.12em; }
.mark-strap{
  font-family:var(--f-serif);
  font-style:italic;
  color:var(--grey);
  display:block;
  white-space:nowrap;
}
.mark-on-dark .mark-l1{ color:#fff; }
.mark-on-dark .mark-strap{ color:#9FB6C8; }

.sphere{
  display:inline-block;
  vertical-align:baseline;
  width:.86em; height:.86em;
  margin-inline:.02em;
  position:relative; top:.035em;
}

/* header lockup size */
.mark-hd .mark-l1{ font-size:1.16rem; }
.mark-hd .mark-l2{ font-size:1.32rem; margin-top:.18em; }
.mark-hd .mark-strap{ font-size:.78rem; margin-top:.36em; letter-spacing:.005em; }

/* footer / hero lockup size */
.mark-lg .mark-l1{ font-size:clamp(1.6rem,3.4vw,2.5rem); }
.mark-lg .mark-l2{ font-size:clamp(1.83rem,3.88vw,2.85rem); margin-top:.18em; }
.mark-lg .mark-strap{ font-size:clamp(.95rem,1.55vw,1.24rem); margin-top:.52em; }

/* ---------- header ------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(247,243,236,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--hair-warm);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:12px var(--gut);
  display:flex; align-items:center; gap:24px;
}
.hdr-nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(10px,1.7vw,26px); }
.hdr-nav a.nl{
  font-family:var(--f-display); font-weight:600; font-size:.86rem;
  color:var(--navy); letter-spacing:.005em; padding:8px 2px; border-bottom:2px solid transparent;
}
.hdr-nav a.nl:hover{ text-decoration:none; border-bottom-color:var(--orange-b); }
.hdr-nav a.nl[aria-current="page"]{ border-bottom-color:var(--orange-b); }

.lang{ display:flex; align-items:center; border:1px solid var(--hair); border-radius:999px; overflow:hidden; background:#fff; }
.lang button{
  font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.09em;
  padding:6px 11px; border:0; background:transparent; color:var(--grey); cursor:pointer; line-height:1;
}
.lang button[aria-pressed="true"]{ background:var(--navy); color:#fff; }

.burger{ display:none; border:1px solid var(--hair); background:#fff; border-radius:8px; padding:8px 10px; cursor:pointer; }
.burger span{ display:block; width:19px; height:2px; background:var(--navy); margin:4px 0; }

@media (max-width: 940px){
  .burger{ display:block; margin-left:auto; order:3; }
  .hdr-nav{ order:4; width:100%; margin-left:0; display:none; flex-direction:column; align-items:flex-start; gap:2px; padding-top:10px; border-top:1px solid var(--hair-warm); margin-top:10px; }
  .hdr-nav.open{ display:flex; }
  .hdr-nav a.nl{ width:100%; padding:11px 0; font-size:1rem; }
  .hdr-in{ flex-wrap:wrap; }
  .lang{ margin-left:auto; order:2; }
}

/* ---------- announcement bar --------------------------------------------- */
.annc{ background:var(--green); color:#EAF5EE; font-size:.86rem; }
.annc-in{ max-width:var(--maxw); margin:0 auto; padding:9px var(--gut); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.annc b{ font-family:var(--f-display); letter-spacing:.10em; text-transform:uppercase; font-size:.68rem; color:#FFD9AE; }
.annc a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- hero --------------------------------------------------------- */
.hero{
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(230,126,34,.20), transparent 62%),
    radial-gradient(760px 520px at 6% 108%, rgba(46,107,79,.30), transparent 60%),
    var(--ink);
  color:#fff;
  padding-block:clamp(64px,10vw,132px);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 46px; pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-accent{ color:var(--orange-b); }
.hero-lede{ color:#BFD1E0; margin-top:26px; }

.btnrow{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn{
  font-family:var(--f-display); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  padding:14px 24px; border-radius:3px; display:inline-block; border:2px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; }
.btn-pri{ background:var(--orange-b); color:#20130A !important; }
.btn-pri:hover{ background:#FF9440; }
.btn-sec{ border-color:rgba(255,255,255,.42); color:#fff !important; }
.btn-sec:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-dark{ background:var(--navy); color:#fff !important; }
.btn-dark:hover{ background:var(--steel); }
.btn-out{ border-color:var(--navy); color:var(--navy) !important; }
.btn-out:hover{ background:var(--navy); color:#fff !important; }

/* page hero (interior) */
.phero{ background:var(--navy); color:#fff; padding-block:clamp(52px,7vw,92px);
  background-image:radial-gradient(900px 420px at 88% -20%, rgba(230,126,34,.24), transparent 60%); }
.phero .lede{ color:#C6D6E4; margin-top:20px; }

/* ---------- stat band ---------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border-block:1px solid var(--hair); }
.stat{ background:var(--sand); padding:30px clamp(16px,2.2vw,30px); }
.stat b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1; letter-spacing:-.03em; color:var(--navy); }
.stat span{ display:block; margin-top:12px; font-size:.88rem; line-height:1.45; color:var(--grey); }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .stats{ grid-template-columns:1fr;} }

/* ---------- grids & cards ------------------------------------------------ */
.grid{ display:grid; gap:clamp(16px,2.2vw,26px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .g3,.g4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .g2,.g3,.g4{ grid-template-columns:1fr;} }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.split-13{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width:900px){ .split,.split-13{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--hair); border-radius:4px;
  padding:clamp(20px,2.6vw,30px);
}
.card p, .newscard p{ margin-bottom:0; font-size:.95rem; color:#46505A; }
.card .h-card, .newscard .h-card{ margin-bottom:10px; color:var(--navy); }
.card .date, .newscard .date{ color:var(--green); }
.card .ticks li{ color:#46505A; }
.card-ink{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.16); }
.card-ink p{ color:#B9CBDA; }
.card-ink .h-card{ color:#fff; }
.card-ink .date{ color:#8FD5B2; }
.card-num{
  font-family:var(--f-display); font-weight:800; font-size:.78rem; letter-spacing:.14em;
  color:var(--orange-b); display:block; margin-bottom:12px;
}
.card-top{ border-top:3px solid var(--orange-b); }

/* dated news card */
.newscard{ display:block; background:var(--paper); border:1px solid var(--hair); border-radius:4px; padding:clamp(20px,2.4vw,28px); color:inherit; }
.newscard:hover{ text-decoration:none; border-color:var(--orange-b); }
.date{
  font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green); display:block; margin-bottom:12px;
}
.band-ink .date{ color:#8FD5B2; }

/* list of ticks */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:12px; font-size:.97rem; color:#46505A; }
.ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; background:var(--orange-b); border-radius:50%; }
.band-ink .ticks li{ color:#B9CBDA; }

/* pill row */
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.pills li{
  font-family:var(--f-display); font-weight:600; font-size:.82rem;
  border:1px solid var(--hair); background:#fff; border-radius:999px; padding:8px 16px; color:var(--navy);
}
.band-ink .pills li, .band-navy .pills li{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#DCE8F1; }

/* table */
.tbl{ width:100%; border-collapse:collapse; font-size:.93rem; background:#fff; border:1px solid var(--hair); }
.tbl th{
  background:var(--navy); color:#fff; text-align:left; font-family:var(--f-display); font-weight:700;
  font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; padding:13px 16px;
}
.tbl td{ padding:14px 16px; border-top:1px solid var(--hair); vertical-align:top; color:#46505A; }
.tbl tbody tr:nth-child(odd) td{ background:#F5F8FB; }
.tbl td:first-child{ font-family:var(--f-display); font-weight:700; color:var(--navy); min-width:8.5rem; }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* figure */
figure{ margin:0; }
figcaption{ font-size:.83rem; color:var(--grey); margin-top:12px; line-height:1.5; }
.band-ink figcaption{ color:#8FA6B8; }
.shot{ border-radius:4px; overflow:hidden; border:1px solid var(--hair); }
.band-ink .shot{ border-color:rgba(255,255,255,.18); }

/* wheel + diagram sizing */
.dia{ width:100%; height:auto; }

/* alignment strip */
.align-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); }
.align-row div{ background:var(--ink); padding:22px 20px; }
.align-row b{ display:block; font-family:var(--f-display); font-size:.94rem; color:#fff; margin-bottom:6px; }
.align-row span{ font-size:.84rem; color:#9FB6C8; line-height:1.45; }
@media (max-width:860px){ .align-row{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .align-row{ grid-template-columns:1fr;} }

/* ---------- form --------------------------------------------------------- */
.form{ display:grid; gap:16px; }
.field label{ display:block; font-family:var(--f-display); font-weight:600; font-size:.82rem; color:var(--navy); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:.98rem; color:var(--charcoal);
  padding:12px 14px; border:1px solid var(--hair); border-radius:3px; background:#fff;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--orange-b); outline-offset:1px; border-color:var(--orange-b); }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .f2{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; }

/* ---------- footer ------------------------------------------------------- */
.ftr{ background:var(--ink); color:#9FB6C8; padding-block:clamp(48px,6vw,72px); font-size:.9rem; }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(24px,4vw,48px); }
@media (max-width:880px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr .ftr-h{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin-bottom:14px; font-weight:700; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:9px; }
.ftr a{ color:#BFD1E0; }
.ftr a:hover{ color:#fff; }
.ftr-btm{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8rem; color:#7E96AA; }

/* utility */
.mt0{ margin-top:0 !important; } .mb0{ margin-bottom:0 !important; }
.mt16{ margin-top:16px; } .mt24{ margin-top:24px; } .mt32{ margin-top:32px; } .mt48{ margin-top:48px; }
.center{ text-align:center; }
.center .lede, .center p{ margin-inline:auto; }
.nowrap{ white-space:nowrap; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px; border:2px solid var(--orange-b); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ==========================================================================
   Landing-page components — v02
   ========================================================================== */

/* hero lockup */
.mark-hero .mark-l1{ font-size:clamp(2.1rem,6.4vw,4.6rem); }
.mark-hero .mark-l2{ font-size:clamp(2.40rem,7.30vw,5.25rem); margin-top:.13em; }
.mark-hero .mark-strap{ font-size:clamp(1.02rem,2.05vw,1.62rem); margin-top:.58em; }
@media (max-width:520px){
  .mark-hero .mark-l1{ letter-spacing:.06em; margin-right:-.06em; }
  .mark-hero .mark-l2{ letter-spacing:.09em; margin-right:-.09em; }
}

.hero-home{ padding-block:clamp(52px,8vw,104px); }
/* the tagline: short enough to sit large and land in one breath */
.h-hero-sm{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.85rem,4.4vw,3.5rem); line-height:1.08; letter-spacing:-0.028em;
  max-width:26ch; text-wrap:balance;
}

/* status chips under the hero */
.chips{ list-style:none; margin:38px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  font-size:.84rem; line-height:1.35; color:#CFE0EC;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 16px;
  background:rgba(255,255,255,.05);
}
.chips li::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--orange-b); margin-right:9px; vertical-align:middle; }

/* full-width diagram figures */
.figwide{ max-width:1000px; margin-inline:auto; }
.figwide .dia{ display:block; width:100%; height:auto; }

/* the two context figures beside the consolidation diagram */
.figures{ display:grid; gap:20px; align-content:start; }
.fig{ border-left:3px solid var(--orange-b); padding-left:18px; }
.fig b{ display:block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1; letter-spacing:-.03em; color:var(--navy); }
.fig span{ display:block; margin-top:10px; font-size:.9rem; line-height:1.5; color:var(--grey); }

/* four-tier strip */
.tier-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px;
  border-top:1px solid rgba(255,255,255,.2); }
.tier{ padding:24px 22px 4px 0; border-right:1px solid rgba(255,255,255,.14); padding-right:22px; }
.tier:last-child{ border-right:0; }
.tier-n{ display:block; font-family:var(--f-display); font-weight:800; font-size:.78rem;
  letter-spacing:.14em; color:var(--orange-b); margin-bottom:10px; }
.tier .h-card{ color:#fff; margin-bottom:9px; font-size:1.02rem; }
.tier p{ font-size:.9rem; color:#B9CBDA; margin:0; }
@media (max-width:900px){ .tier-strip{ grid-template-columns:repeat(2,1fr);} .tier{ padding-right:20px; }
  .tier:nth-child(2){ border-right:0; } }
@media (max-width:560px){ .tier-strip{ grid-template-columns:1fr;} .tier{ border-right:0;
  border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:22px; } .tier:last-child{ border-bottom:0; } }

/* access ladder */
.ladder{ list-style:none; margin:36px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,26px); }
.step{ position:relative; padding-top:30px; border-top:2px solid var(--hair); }
.step::before{ content:""; position:absolute; top:-8px; left:0; width:14px; height:14px;
  border-radius:50%; background:var(--orange-b); }
.step-n{ display:block; font-family:var(--f-display); font-weight:800; font-size:.78rem;
  letter-spacing:.14em; color:var(--orange-b); margin-bottom:10px; }
.step .h-card{ margin-bottom:10px; font-size:1.05rem; }
.step p{ font-size:.93rem; color:#46505A; margin:0; }
@media (max-width:900px){ .ladder{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ladder{ grid-template-columns:1fr;} }

/* the seventeen goals */
.sdg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sdg{ background:#fff; border:1px solid var(--hair); border-left:5px solid var(--sdg,#1F3A5F);
  border-radius:3px; padding:16px 18px; }
.sdg-n{ display:block; font-family:var(--f-display); font-weight:800; font-size:.76rem;
  letter-spacing:.13em; color:var(--sdg,#1F3A5F); margin-bottom:7px; }
.sdg-t{ font-family:var(--f-display); font-weight:700; font-size:.98rem; line-height:1.22;
  color:var(--navy); margin:0 0 7px; letter-spacing:-.01em; }
.sdg-d{ font-size:.84rem; line-height:1.45; color:var(--grey); margin:0; }
@media (max-width:1000px){ .sdg-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .sdg-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .sdg-grid{ grid-template-columns:1fr;} }

/* goal 17 closes the grid as a full-width capstone */
.sdg-grid > .sdg:last-child{ grid-column:1 / -1; display:grid;
  grid-template-columns:auto minmax(0,1fr); column-gap:20px; align-items:baseline; }
.sdg-grid > .sdg:last-child .sdg-n{ margin-bottom:0; }
.sdg-grid > .sdg:last-child .sdg-t{ grid-column:2; margin-bottom:4px; }
.sdg-grid > .sdg:last-child .sdg-d{ grid-column:2; }
@media (max-width:460px){ .sdg-grid > .sdg:last-child{ grid-template-columns:1fr; }
  .sdg-grid > .sdg:last-child .sdg-t, .sdg-grid > .sdg:last-child .sdg-d{ grid-column:1; }
  .sdg-grid > .sdg:last-child .sdg-n{ margin-bottom:7px; } }

/* diagram legends — the words move out of the SVG on small screens */
.dia-legend{ display:none; }
@media (max-width:820px){
  .dia .dia-lbl{ display:none; }
  /* the label zones are trimmed away and the wheel scaled up; the vertical
     padding gives the scaled artwork room so nothing is clipped off the top */
  .dia-crop{ overflow:hidden; padding-block:12%; }
  .dia-crop .dia-hub{ transform:scale(1.3); transform-origin:50% 50%; }
  .dia-legend{
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px;
    list-style:none; margin:22px 0 0; padding:0;
  }
  .dia-legend li{ border-top:1px solid var(--hair); padding-top:10px; }
  .dia-legend b{ display:block; font-family:var(--f-display); font-weight:700;
    font-size:.95rem; color:var(--navy); line-height:1.25; }
  .dia-legend span{ display:block; font-size:.84rem; color:var(--grey); margin-top:3px; line-height:1.4; }
  .band-ink .dia-legend li{ border-top-color:rgba(255,255,255,.2); }
  .band-ink .dia-legend b{ color:#fff; }
  .band-ink .dia-legend span{ color:#B9CBDA; }
  .dia-legend-2{ grid-template-columns:1fr; }
}
@media (max-width:460px){ .dia-legend{ grid-template-columns:1fr; } }

/* ==========================================================================
   Partner marks — shown with the permission of their owners
   ========================================================================== */
.plogos{ margin-top:clamp(40px,5vw,64px); }
.pl-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px);
}
.pl-item{
  background:#fff; border:1px solid var(--hair); border-radius:4px;
  padding:26px 22px 22px; text-align:center;
  display:grid; grid-template-rows:112px minmax(2.5em,auto) auto; align-content:start; gap:4px;
}
.pl-mark{ display:flex; align-items:center; justify-content:center; height:112px; }
.pl-mark img{ max-height:112px; width:auto; max-width:100%; }
.pl-mark img.pl-wide{ max-height:64px; }
.pl-type{ display:block; line-height:1.15; }
.pl-type b{
  display:block; font-family:var(--f-display); font-weight:800; font-size:2.1rem;
  letter-spacing:.06em; color:var(--navy);
}
.pl-type i{
  display:block; font-family:var(--f-serif); font-style:italic;
  font-size:.78rem; color:var(--grey); margin-top:5px; line-height:1.3;
}
.pl-name{
  display:block; font-family:var(--f-display); font-weight:700; font-size:.95rem;
  color:var(--navy); line-height:1.25; margin-top:16px; align-self:start;
}
.pl-role{ display:block; font-size:.82rem; color:var(--grey); line-height:1.4; margin-top:5px; }
.pl-foot{ font-size:.82rem; color:var(--grey); margin:20px 0 0; max-width:none; }

.band-ink .pl-foot, .band-navy .pl-foot{ color:#9FB6C8; }

@media (max-width:820px){ .pl-list{ grid-template-columns:1fr; } }

/* ==========================================================================
   Hero: lockup across the top, then the argument beside the hub contents
   ========================================================================== */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,64px); align-items:start; margin-top:8px;
}
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; gap:34px; } }

.hero-grid .lede{ max-width:none; font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.6; }

/* what is inside a hub — the panel that answers "produce what?" */
.hubpanel{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.17);
  border-radius:4px; padding:0 0 22px;
  margin-top:clamp(30px,3.4vw,42px);
}
.hubpanel-h{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.02rem,1.55vw,1.32rem); letter-spacing:.06em; text-transform:uppercase;
  color:#20130A; background:var(--orange-b);
  margin:0; padding:13px 22px; border-radius:3px 3px 0 0; max-width:none;
}
.hubpanel-list{
  list-style:none; margin:20px 0 0; padding:0 22px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px 20px;
}
.hubpanel-list li{
  position:relative; padding-left:16px;
  font-size:.92rem; line-height:1.32; color:#DCE8F1;
}
.hubpanel-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--orange-b);
}
.hubpanel-f{
  margin:20px 22px 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.15);
  font-family:var(--f-serif); font-style:italic; font-size:.9rem; color:#9FB6C8; max-width:none;
}
@media (max-width:420px){ .hubpanel-list{ grid-template-columns:1fr; } }

/* colour key beneath the four-level diagram */
.dia-key{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
}
.dia-key li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:.86rem; color:var(--navy);
}
.band-ink .dia-key li, .band-navy .dia-key li{ color:#DCE8F1; }
.k-dot{ width:13px; height:13px; border-radius:50%; display:inline-block; flex:none; }