/* ==========================================================================
   10K2ZERO — Child Suicide Prevention
   Design system extracted from HOME.pdf / ABOUT US.pdf (1920pt canvas)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — values taken from the Figma file */
  --sky:        #75BEF3;
  --ink:        #1C2033;
  --ink-soft:   #222F3F;
  --purple:     #5D45A8;
  --purple-dark:#4B3690;
  --mist:       #EDF5FA;
  --white:      #FFFFFF;
  --grey:       #D9D9D9;
  --rule:       rgba(28, 32, 51, .18);
  --rule-light: rgba(255, 255, 255, .35);

  /* Type */
  /* One variable family throughout. Headings are the condensed bold end of its
     axes (wdth 75 / wght 700); body copy is the default width at regular. */
  --font-display: "Special Gothic", "Arial Narrow", sans-serif;
  --font-head: "Special Gothic", "Arial Narrow", sans-serif;
  --font-body: "Special Gothic", "Helvetica Neue", Arial, sans-serif;
  --head-width: 75%;
  --head-weight: 700;

  /* Layout — design canvas is 1920 wide with a 1600 content column */
  --container: 1600px;
  --gutter: clamp(20px, 5.33vw, 60px);
  --header-h: 116px;

  /* Rhythm */
  /* Reference artboard marks a 100px grey block above each section and a
     178px block below; --section-y is the top, --section-y-b the bottom. */
  /* Width of the About hero's text panel, measured from the container's left
     edge. The prose columns below line up with the photograph beside it. */
  --aside-pad: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --hero-aside: clamp(200px, 22vw, 420px);

  --section-y: clamp(52px, 6.93vw, 100px);
  --section-y-b: clamp(80px, 12.4vw, 178px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.53vw, 22px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--purple); }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font: 700 14px/1 var(--font-body); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y) var(--section-y-b); }
.section--mist  { background: var(--mist); }
.section--tight { padding-block: clamp(48px, 6.67vw, 90px); }
/* Panels carry their own inner padding, so the wrapper only needs the gap below */
.section--flush { padding-block: 0 var(--section-y-b); }
/* The events block opens with a rule, which supplies its own top space */
.section--events { padding-block: 0; }

/* The Our Work hero: left-aligned title over a short lede, on white */
.workhero { padding-block: clamp(42px, 6.32vw, 91px) 0; }
/* Doubled class so this survives .lede's later `margin: 0`, which was resetting
   the auto side-margins and leaving the block stuck to the left. */
.lede.workhero__lede {
  max-width: 21.5em;
  margin: 0 auto clamp(40px, 5.7vw, 82px);
  text-align: center;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
/* Full-strength dividers: 1px above the Events grid, 2px between About's sections */
/* 178 above, 56 below — the same rhythm the reference marks at section edges */
.rule--strong {
  border-top-color: var(--ink);
  margin-block: var(--section-y-b) clamp(30px, 3.87vw, 56px);
}
.rule--section { border-top: 2px solid var(--ink); margin-block: clamp(60px, 9.79vw, 141px) 0; }
.section--flush-b { padding-bottom: 0; }
/* About opens its prose sections with a deeper top margin than the standard rhythm */
.section--deep-t { padding-top: clamp(60px, 8.75vw, 126px); }
.section--flush-t { padding-top: clamp(24px, 3.55vw, 51px); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display,
.display--m,
.display--s,
.section-title {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  text-transform: uppercase;
  /* Special Gothic Condensed One, sized so cap heights match the artwork. */
  letter-spacing: -.018em;
  line-height: .905;
  margin: 0;
  color: var(--ink);
}

.display       { font-size: clamp(44px, 11.9vw, 171px); line-height: .895; letter-spacing: -.023em; }
.display--m    { font-size: clamp(38px, 8.27vw, 119px); letter-spacing: -.012em; }
.display--s    { font-size: clamp(32px, 5.84vw, 84px); }
.section-title { font-size: clamp(32px, 5.84vw, 84px); }

h2, h3, h4 { font-family: var(--font-head); margin: 0; }

.head-l, .head-m, .head-s {
  font-family: var(--font-head);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}

.head-l { font-size: clamp(26px, 3.4vw, 49px); line-height: 1.1; }
.head-m { font-size: clamp(22px, 2.77vw, 40px); line-height: 1.12; }
.head-s { font-size: clamp(19px, 2.08vw, 30px); line-height: 1.2; }

.eyebrow {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.19vw, 17px); font-weight: 500; letter-spacing: .05em;
  color: var(--ink); margin: 0;
  text-transform: uppercase;
}

/* Larger section label, as used above the partner grids */
.eyebrow--lg {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(18px, 2.15vw, 31px);
  letter-spacing: .008em;
}

.lede {
  font-size: clamp(22px, 2.51vw, 36px);
  line-height: 1.15;
  margin: 0;
}

.body-lg { font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4; margin: 0; }

p { margin: 0 0 .9em; }
/* bolded runs in body copy track with the purple links */
strong, b { letter-spacing: .01em; }
p:last-child { margin-bottom: 0; }

.measure    { max-width: 30em; }
.measure-sm { max-width: 22em; }

/* Inline link style used throughout the design: purple, underlined, bold */
.link {
  color: var(--purple);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .025em;
  font-size: clamp(16px, 1.45vw, 21px);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.link:hover { color: var(--ink); }

.link-inline {
  color: var(--purple);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--ink); }

/* Bulleted lists in the design use a small mid-dot marker */
.list {
  list-style: none;
  margin: 0; padding: 0;
}
.list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .06em;
}
.list li::before {
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .003em;
  font-size: clamp(15px, 1.53vw, 22px);
  line-height: 1;
  padding: clamp(14px, 1.45vw, 21px) clamp(20px, 2.23vw, 32px);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
}
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { background: var(--purple-dark); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

/* Purple outline, as the helplines band uses */
.btn--outline-purple { background: transparent; color: var(--purple); border-color: var(--purple); }
.btn--outline-purple:hover { background: var(--purple); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
/* The header travels with the page and slides away on the way down, then
   returns as soon as the reader scrolls back up. Sticky (not fixed) keeps it
   in flow, so revealing it never shifts the content underneath. */
.site-header {
  background: var(--sky);
  position: sticky; top: 0; z-index: 100;
  transition: transform .28s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Once it is overlapping content rather than sitting on the hero, it needs an
   edge to read against the white sections below. */
.site-header.is-floating { box-shadow: 0 2px 14px rgba(28, 32, 51, .14); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-header__logo img { width: 232px; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); }
.nav a {
  font-family: var(--font-head);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(20px, 2.22vw, 32px);
  line-height: .9;
  letter-spacing: .007em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  /* 4px ink rule, 12px clear of the text — measured off the HOME artboard */
  padding-bottom: 9px;
  border-bottom: 4px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px; cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 30px; height: 30px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 900px) {
  :root { --header-h: 84px; }
  .site-header__logo img { width: 176px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sky);
    flex-direction: column; align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    border-top: 1px solid rgba(28,32,51,.15);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 16px 0; font-size: 20px; }
}

/* --------------------------------------------------------------------------
   7. Hero (Home)
   -------------------------------------------------------------------------- */
.hero {
  background: var(--sky);
  text-align: center;
  padding-block: clamp(44px, 6.53vw, 94px) clamp(56px, 12.1vw, 175px);
}
.hero .display { max-width: 6.5em; margin-inline: auto; }
.hero__lede {
  max-width: 21.3em;
  margin: clamp(18px, 1.6vw, 23px) auto 0;
  font-size: clamp(22px, 2.51vw, 36px);
  line-height: 1.19;
}
.hero .btn-row { margin-top: clamp(26px, 3.2vw, 46px); }

/* --------------------------------------------------------------------------
   8. Statistic slider over photo
   -------------------------------------------------------------------------- */
.statband {
  position: relative;
  background: var(--ink-soft);
  min-height: clamp(380px, 55.2vw, 794px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 6.67vw, 90px) var(--gutter);
  overflow: hidden;
}
.statband__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  transform: scale(1.75);
  transform-origin: 50% 45%;
}
.statband::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(34, 47, 63, .46);
}
.statband__card {
  position: relative; z-index: 1;
  background: #fff;
  width: min(100%, 508px);
  min-height: clamp(330px, 36.5vw, 526px);
  padding: clamp(28px, 3.2vw, 46px) clamp(22px, 3.07vw, 44px) clamp(30px, 4.53vw, 66px);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.statband__slide { display: none; }
.statband__slide.is-active { display: block; }
.statband__stat {
  font-family: var(--font-head);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  letter-spacing: -.01em;
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: .95;
  margin: 0;
}
.statband__source {
  margin: clamp(20px, 2.44vw, 35px) 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .773em;      /* 17px against the 22px body */
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
}
.statband__nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: clamp(22px, 2.93vw, 36px);
}
.statband__btn {
  background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink);
  line-height: 0;
}
.statband__btn svg { width: 30px; height: 18px; }
.statband__btn:hover { color: var(--purple); }
.statband__count {
  font-family: var(--font-body);
  font-weight: 700; font-size: .8em; letter-spacing: .04em;
  min-width: 46px; text-align: center;
}
/* The nav is pinned to the foot of the card, as in the design */
.statband__card .statband__nav { margin-top: auto; padding-top: clamp(26px, 3.47vw, 50px); }

/* --------------------------------------------------------------------------
   9. Generic two-column split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6.67vw, 96px);
  align-items: start;
}
.split--narrow-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

@media (max-width: 900px) {
  .split, .split--narrow-left { grid-template-columns: minmax(0, 1fr); }
}

/* Document thumbnail cards (policy brief / concept note) */
.docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.93vw, 36px);
}
.doc { text-decoration: none; display: block; }
.doc__label {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--purple);
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: .025em; font-size: clamp(16px, 1.45vw, 21px);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.doc__thumb {
  border: 1px solid var(--rule);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.doc:hover .doc__thumb { box-shadow: 0 10px 30px rgba(28,32,51,.14); transform: translateY(-3px); }
.doc:hover .doc__label { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Three focus areas
   -------------------------------------------------------------------------- */
.measure-center { max-width: 34em; margin-inline: auto; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4.53vw, 64px);
  margin-top: clamp(34px, 4.13vw, 60px);
  text-align: center;
}
.pillar__icon {
  width: clamp(90px, 10.8vw, 155px);
  height: auto;
  margin: 0 auto clamp(18px, 2vw, 28px);
  color: var(--sky);
}
.pillar p {
  margin: 16px auto 0;
  max-width: 19em;
  line-height: 1.5;
}
@media (max-width: 780px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   10b. Our Strategy — inside the mist band, title at the left of the grid
   -------------------------------------------------------------------------- */
.strategy__rule { margin-block: clamp(46px, 11.8vw, 170px) clamp(40px, 5.9vw, 85px); }
/* Four equal columns on a 408px pitch: the section title takes the first,
   the five cards run across the remaining three. 4x376 + 3x32 = 1600. */
.strategy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.22vw, 32px);
}
.strategy .section-title { margin: 0; }
.strategy__grid {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5.83vw, 84px) clamp(24px, 2.22vw, 32px);
}
.scard__icon {
  width: clamp(38px, 3.47vw, 50px);
  height: clamp(38px, 3.47vw, 50px);
  margin-bottom: clamp(6px, .69vw, 10px);
}
.scard__title {
  font-family: var(--font-head);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--sky);
  margin: 0;
}
@media (max-width: 860px) {
  .strategy { grid-template-columns: minmax(0, 1fr); }
  .strategy__grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .strategy__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   11. Timeline / milestone cards
   -------------------------------------------------------------------------- */
/* Three equal columns separated by a hairline centred in the gap, so every
   column gets the same measure (the artwork puts them at 160 / 704 / 1248). */
.milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 4.8vw, 69px);
  margin-top: clamp(34px, 4.8vw, 62px);
}
.milestone {
  position: relative;
  display: flex; flex-direction: column;
}
.milestone + .milestone::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(clamp(30px, 4.8vw, 69px) / -2);
  width: 1px;
  background: var(--rule);
}
/* Two-column variant, for the pages where the artwork's third column is empty */
.milestones--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.milestones--two .milestone .list { margin: 6px 0 0; }

.milestone__date {
  align-self: flex-start;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700; font-size: .82em; letter-spacing: .015em;
  line-height: 1;
  text-transform: uppercase;
  padding: 10px 17px;
  margin-bottom: 20px;
}
/* Dated milestones use an outlined chip; open-ended ones a filled chip */
.milestone__date--outline {
  background: none;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.milestone .head-l { margin-bottom: 14px; }
.milestone p { line-height: 1.5; }
.milestone__media {
  background: var(--grey);
  aspect-ratio: 16 / 9;
  margin: clamp(22px, 2.8vw, 40px) 0 8px;
  width: 100%;
  object-fit: cover;
}
.milestone__links {
  margin-top: clamp(18px, 1.95vw, 28px);
  display: flex; flex-wrap: wrap; gap: 22px;
}
@media (max-width: 900px) {
  .milestones { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .milestone + .milestone {
    border-top: 1px solid var(--rule);
    padding-top: 32px;
  }
  .milestone + .milestone::before { content: none; }
}

/* --------------------------------------------------------------------------
   12. Closing call to action
   -------------------------------------------------------------------------- */
.cta {
  background: var(--sky);
  text-align: center;
  padding-block: clamp(60px, 9.33vw, 120px) clamp(70px, 11.5vw, 166px);
}
.cta .display--s { max-width: 6em; margin-inline: auto; }
.cta__lede {
  max-width: 22.5em;
  margin: clamp(22px, 2.93vw, 36px) auto 0;
  font-size: clamp(21px, 2.43vw, 35px);
  line-height: 1.19;
}
.cta__sub { margin: clamp(14px, 1.6vw, 23px) 0 0; }
.cta__ways {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: clamp(20px, 2.2vw, 32px) 0 0; padding: 0;
}
.cta__ways li + li::before { content: "|"; margin-right: clamp(10px, 1.2vw, 18px); opacity: .55; }
.cta__ways a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cta__ways a:hover { border-bottom-color: var(--ink); }
.cta .btn-row { margin-top: clamp(26px, 3.47vw, 42px); }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
/* The crisis-support band separates the footer from the closing CTA, so the
   footer carries no divider of its own. */
.site-footer {
  background: var(--sky);
  padding-block: clamp(48px, 8.68vw, 125px) clamp(40px, 5.6vw, 80px);
}
.site-footer__grid {
  display: grid;
  /* Columns size to their content so the logo row can never wrap; the widths
     below are the design's, scaled from the 1920 artboard. */
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}
/* The "an initiative by" label sits above its logos, which would leave the
   10K2Zero mark sitting higher than the partner marks. Reserving the same label
   height on the left column puts all three logos on one centre line. */
.site-footer__initiative .eyebrow,
.site-footer__logo::before {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.site-footer__logo::before { content: "\00a0"; font-size: clamp(13px, .89vw, 17px); }
.site-footer__logo { display: flex; flex-direction: column; }
.site-footer__logo img { width: clamp(210px, 23.7vw, 455px); margin-block: auto; }
.site-footer__initiative { display: flex; flex-direction: column; }
.org-logos { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px); flex-wrap: nowrap; flex: 1; }
.org-logos img { width: clamp(116px, 13.1vw, 252px); height: auto; }
/* The Quicksand mark is a disc inset in a square file, so it needs a taller box
   to read at the same size as the CMHLP lockup beside it. */
.org-logos img[src*="quicksand"] { width: clamp(68px, 7.66vw, 147px); }
.site-footer__contact { justify-self: end; text-align: left; }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__contact { justify-self: start; }
}

.socials { display: flex; gap: clamp(10px, 1.47vw, 21px); margin-bottom: clamp(20px, 2.93vw, 42px); }
.socials a {
  width: clamp(38px, 3.47vw, 50px); height: clamp(38px, 3.47vw, 50px); border-radius: 50%;
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color .18s ease, color .18s ease;
}
.socials a:hover { background: var(--ink); color: var(--sky); }
.socials svg { width: 46%; height: 46%; }

.site-footer__mail {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(22px, 2.92vw, 42px);
  line-height: .9;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
}
.site-footer__mail:hover { text-decoration: underline; }

.site-footer__legal {
  margin-top: clamp(38px, 5.33vw, 64px);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  justify-content: space-between;
  font-size: .8em;
  color: rgba(28,32,51,.8);
}
.site-footer__legal a { color: rgba(28,32,51,.8); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.pagehero {
  /* The title aligns to the container gutter, which keeps growing on very wide
     screens. Size the panel as gutter + a bounded content column so the title
     always keeps its clearance from the photo instead of running into it. */
  display: grid;
  grid-template-columns: calc(var(--aside-pad) + var(--hero-aside)) minmax(0, 1fr);
  background: var(--mist);
  align-items: stretch;
}
.pagehero__title {
  display: flex; align-items: flex-end;
  padding: clamp(40px, 6.13vw, 88px) clamp(16px, 1.8vw, 34px) clamp(34px, 5.73vw, 82px);
  padding-left: var(--aside-pad);
}
.pagehero__title .display {
  font-size: clamp(34px, 6.1vw, 111px);
  line-height: .9;
}
.pagehero__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.9; }
@media (max-width: 860px) {
  .pagehero { grid-template-columns: minmax(0, 1fr); }
  .pagehero__title { padding-inline: var(--gutter); }
}

/* --------------------------------------------------------------------------
   15. About-page specifics
   -------------------------------------------------------------------------- */
/* Centred on the page at any zoom, per the update brief (783px) */
.prose-col { max-width: 783px; margin-inline: auto; }
.prose-col .section-title { margin-bottom: clamp(18px, 2.4vw, 30px); }
.prose-col .head-l { margin: clamp(30px, 4vw, 50px) 0 14px; }
.prose-col .head-m { margin: clamp(26px, 3.47vw, 42px) 0 14px; }
.prose-col .list { margin-top: 18px; }

.stakeholders {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--mist);
  align-items: stretch;
}
.stakeholders__text {
  padding-block: clamp(44px, 6.67vw, 92px);
  padding-right: clamp(20px, 5.73vw, 82px);
  padding-left: var(--aside-pad);
}
.stakeholders__text p { max-width: 25.8em; line-height: 1.5; }
.stakeholders__text .head-l { line-height: 1.0; }
.stakeholders__img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
/* Stakeholder groups: condensed sky-blue name, explanation beneath */
.stakeholder-list { margin: clamp(24px, 3.47vw, 46px) 0 0; }
.stakeholder-list dt {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  text-transform: uppercase;
  color: var(--sky);
  font-size: clamp(22px, 2.64vw, 38px);
  letter-spacing: -.012em;
  line-height: 1;
}
.stakeholder-list dd {
  margin: 6px 0 clamp(16px, 2vw, 28px);
  max-width: 25.8em;
  line-height: 1.5;
}
.stakeholder-list dd:last-child { margin-bottom: 0; }

.stakeholder-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(24px, 4vw, 56px);
  margin-top: 26px;
}
.stakeholder-cols p {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  text-transform: uppercase;
  color: var(--sky);
  font-size: clamp(26px, 3.4vw, 49px);
  letter-spacing: -.012em;
  line-height: .94;
  max-width: none;
}
@media (max-width: 900px) {
  .stakeholders { grid-template-columns: minmax(0, 1fr); }
  .stakeholders__text { padding-inline: var(--gutter); }
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule);
  margin-top: clamp(24px, 3.47vw, 44px);
}
.org-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.org-cell {
  border-left: 1px solid var(--rule);
  padding: clamp(26px, 4vw, 52px);
  display: grid; place-items: center; min-height: clamp(190px, 34.3vw, 493px);
}
.org-cell:first-child { border-left: 0; }
.org-cell img { max-height: clamp(78px, 15.5vw, 223px); width: auto; }
.org-cell { position: relative; overflow: hidden; }
.org-cell__logo { transition: opacity .25s ease; }

/* Hovering a cell swaps the logo for the organisation's name and description.
   :focus-within covers keyboard users reaching the link inside. */
.org-cell__reveal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: clamp(8px, .8vw, 14px);
  padding: clamp(22px, 2.6vw, 46px);
  background: var(--purple);
  color: #fff;
  text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.org-cell__reveal .head-m { color: #fff; font-size: clamp(24px, 3.33vw, 48px); line-height: .95; }
.org-cell__reveal p { font-size: .82em; line-height: 1.45; margin: 0; }
.org-cell__reveal .link { color: #fff; align-self: flex-start; margin-top: auto; }
.org-cell__reveal .link:hover { color: var(--sky); }

.org-cell:hover .org-cell__logo,
.org-cell:focus-within .org-cell__logo { opacity: 0; }
.org-cell:hover .org-cell__reveal,
.org-cell:focus-within .org-cell__reveal { opacity: 1; visibility: visible; }

/* No hover to give (touch, mostly): show logo and description together */
@media (hover: none) {
  .org-cell { display: block; }
  .org-cell__logo { margin: 0 auto clamp(18px, 2vw, 28px); }
  .org-cell__reveal {
    position: static;
    opacity: 1; visibility: visible;
    background: none; color: var(--ink);
    padding: 0;
  }
  .org-cell__reveal .head-m { color: var(--ink); }
  .org-cell__reveal .link { color: var(--purple); }
}

@media (max-width: 780px) {
  .org-grid, .org-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .org-cell { border-left: 0; border-top: 1px solid var(--rule); }
  .org-cell:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   16. Our Work — pillar panels
   -------------------------------------------------------------------------- */
.wpanels { display: grid; gap: clamp(24px, 3.87vw, 56px); }

.wpanel {
  background: var(--mist);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(0px, 66vw, 950px);
  padding-block: clamp(38px, 4.59vw, 66px);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.wpanel__aside {
  display: flex;
  flex-direction: column;
  text-align: center;
  border-right: 1px solid var(--ink);
  padding-inline: clamp(20px, 2.67vw, 38px);
}
.wpanel__aside .section-title { margin: 0; }

.wpanel__icon {
  width: min(100%, clamp(150px, 31.5vw, 454px));
  height: auto;
  margin: auto;
}

.wpanel__body {
  padding-left: clamp(20px, 4.44vw, 64px);
  padding-right: clamp(20px, 4.59vw, 66px);
}
.wpanel__body > p, .wsub p { max-width: 30em; }
.wpanel__body > p:first-child { margin-bottom: 0; }

.wsub { margin-top: clamp(22px, 2.51vw, 36px); }
.wsub .head-l { margin-bottom: 0; }
.wsub + .wsub { margin-top: clamp(12px, 1.11vw, 16px); }

@media (max-width: 860px) {
  .wpanel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-inline: clamp(20px, 6.67vw, 40px);
  }
  .wpanel__aside {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 clamp(26px, 6.67vw, 40px);
  }
  .wpanel__icon { width: min(70%, 300px); }
  .wpanel__body { padding: clamp(26px, 6.67vw, 40px) 0 0; }
}

/* --------------------------------------------------------------------------
   17. Get Involved
   -------------------------------------------------------------------------- */
/* Hero: title, full-width photo, then the standfirst */
.gihero { padding-block: clamp(42px, 7.77vw, 112px) clamp(56px, 9.09vw, 131px); }
.gihero .display--m { margin: 0; }
.gihero__img {
  width: 100%;
  aspect-ratio: 1600 / 897;
  object-fit: cover;
  object-position: 50% 100%;
  margin-top: clamp(26px, 5.2vw, 75px);
}
.gihero__lede {
  text-align: center;
  margin-inline: auto;
  max-width: 30em;
  margin-top: clamp(24px, 7.33vw, 106px);
}

/* The three route-in cards. Row two carries a single card, as in the artwork. */
.gi-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.93vw, 42px) clamp(16px, 2.29vw, 33px);
  margin-top: clamp(34px, 5.73vw, 83px);
}
.gi-card {
  border: 1px solid var(--ink);
  min-height: clamp(0px, 68.5vw, 987px);
  padding: clamp(28px, 4.17vw, 60px) clamp(24px, 5.07vw, 73px) clamp(30px, 4.72vw, 68px);
  display: flex;
  flex-direction: column;
}
/* 168px box: the artwork inside each 500-viewBox lands at the artboard's
   size (Collaborate 153x126, Fund 121x131) at that scale. Each drawing sits
   at a different offset inside its viewBox, so the box is pulled left by that
   offset to stand the artwork flush with the text, as in the artwork. */
.gi-cards { --gi-icon: clamp(110px, 11.67vw, 168px); }
.gi-card__icon {
  width: var(--gi-icon);
  height: var(--gi-icon);
  margin-bottom: clamp(5px, .69vw, 10px);
  margin-left: calc(var(--gi-icon) * -1 * var(--gi-icon-inset, 0));
}
#collaborate { --gi-icon-inset: .0476; }
#fund        { --gi-icon-inset: .1696; }
#advocate    { --gi-icon-inset: .1458; }
.gi-card .section-title { margin: 0; }

.gi-card__sub {
  border-top: 1px solid var(--ink);
  margin-top: clamp(24px, 3.4vw, 49px);
  padding-top: clamp(12px, 1.53vw, 22px);
}
.gi-card__sub:first-of-type { margin-top: clamp(30px, 4.03vw, 58px); }
.gi-card__label {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(20px, 2.19vw, 31px);
  letter-spacing: .008em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 clamp(5px, 0.56vw, 8px);
}
.gi-card__sub p { margin: 0; }

.gi-card__intro { margin: clamp(24px, 4.59vw, 66px) 0 0; }

.gi-card__list {
  list-style: none;
  margin: clamp(22px, 3.2vw, 46px) 0 0;
  padding: 0;
  /* The list runs to a narrower measure than the intro above it, so the
     wraps match the artwork (500px of text + the 36px bullet indent). */
  max-width: clamp(300px, 37.2vw, 536px);
}
/* Bold body copy, set solid: the artwork runs every line on the same 33px
   rhythm, so items sit one line apart with no extra margin between them. */
.gi-card__list li {
  position: relative;
  padding-left: clamp(26px, 2.5vw, 36px);
  margin-bottom: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(17px, 1.53vw, 22px);
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}
.gi-card__list li::before {
  content: "";
  position: absolute; left: clamp(10px, 1.04vw, 15px); top: .66em;
  width: 5px; height: 5px;
  background: currentColor;
}

.gi-card__foot {
  margin-top: auto;
  padding-top: clamp(26px, 4vw, 58px);
  text-align: right;
}
/* Advocate: the form link sits beside the social icons, on their left */
.gi-card__foot--split {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.22vw, 32px);
}
.gi-card__foot p { margin: 0 0 4px; }
.gi-card__foot .link { font-size: clamp(16px, 1.52vw, 22px); letter-spacing: .015em; }

/* Share targets — flat circles until the destinations are decided */
/* Same icon set as the footer, in the artwork's filled purple circles */
.gi-share {
  display: flex; justify-content: flex-end;
  gap: clamp(9px, 1.25vw, 18px);
}
.gi-share a {
  width: clamp(30px, 3.55vw, 51px);
  height: clamp(30px, 3.55vw, 51px);
  border-radius: 50%;
  background: var(--purple);
  display: grid; place-items: center;
  color: #fff;
  transition: background-color .18s ease;
}
.gi-share a:hover { background: var(--purple-dark); }
.gi-share svg { width: 46%; height: 46%; }

/* Enquiry band. The form itself is not built yet — the space is reserved. */
.gi-band {
  background: var(--sky);
  padding-block: clamp(40px, 4.24vw, 61px);
  min-height: clamp(300px, 38.8vw, 559px);
}
.gi-band .display--s {
  text-transform: none;
  letter-spacing: -.012em;
  max-width: 9.5em;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 860px) {
  .gi-cards { grid-template-columns: minmax(0, 1fr); }
  .gi-card { min-height: 0; }
  .gi-band { min-height: 0; padding-block: clamp(48px, 10.7vw, 90px); }
}

/* --------------------------------------------------------------------------
   17c. Campaign landing page (#OneChangeForZero)
   -------------------------------------------------------------------------- */
.cmphero { background: var(--sky); padding-block: clamp(28px, 3.33vw, 48px) clamp(60px, 10.49vw, 151px); }
.cmphero__grid {
  display: block;
  position: relative;
}
/* Lockup and hand are fractions of the content column (698/1600 and 969/1600
   in the artwork), not of the viewport. Sized in vw they both kept their
   1600-column values on a narrower window, where the column is smaller — and
   the hand ran straight through the title. */
.cmphero__lockup { max-width: 43.63%; }
.cmphero__eyebrow {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(20px, 2.85vw, 49px);
  line-height: .94;
  letter-spacing: -.012em;
  text-align: center;
  margin: 0 0 clamp(22px, 2.5vw, 36px);
}
.cmphero__title {
  font-family: var(--font-display);
  font-stretch: var(--head-width);
  font-weight: var(--head-weight);
  font-size: clamp(58px, 11.63vw, 200px);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--purple);
  margin: 0;
}
.cmphero__title > span { display: block; }
.cmphero__hash, .cmphero__zero { color: #fff; }
.cmphero__hash { display: inline; }
/* The pointing hand is a sky-filled shape with a white outline, so the fill
   reads as background and only the contour shows. It sits flush with the
   hero's lower edge, which crops the wrist as in the artwork. */
.cmphero { position: relative; overflow: hidden; }
.cmphero__media {
  position: absolute;
  /* Absolute percentages resolve against the container's padding box, so the
     gutters are subtracted back out to land on the content column itself. */
  /* The drawing sits ~8 of its 985 viewBox units inside the frame (half the
     8-unit stroke), so the box is sized and nudged by that inset to put the
     ink itself on the artwork's 969px width and the column's right edge. */
  right: calc(var(--gutter) - (100% - 2 * var(--gutter)) * .005);
  bottom: calc(-1 * clamp(60px, 10.49vw, 151px));
  width: calc((100% - 2 * var(--gutter)) * .61563);
}
.cmphero__lockup { position: relative; z-index: 1; }
.cmphero__media img { width: 100%; height: auto; display: block; }

/* The hero is shorter than a standard section, so the question below it opens
   deeper to keep its heading on the artboard's y=1212. */
.cmphero + .section { padding-top: clamp(70px, 8.58vw, 123.5px); padding-bottom: clamp(80px, 9.76vw, 140.5px); }

/* Campaign headings run at section-title size but keep their own casing,
   so the markup carries the capitalisation and CSS leaves it alone. */
.cmp-q,
.cmp-cols .section-title,
.cmp-outcome .section-title { text-transform: none; }
.cmp-q { max-width: 15em; margin-bottom: clamp(38px, 4.17vw, 60px); }
/* Doubled with .lede so it outranks the later .mt-m utility */
.lede.cmp-intro { max-width: 32.4em; margin-top: clamp(22px, 2.33vw, 33.5px); }
.cmp-rule { margin-block: clamp(80px, 10.97vw, 158px) clamp(34px, 4.1vw, 59px); }

.cmp-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 5.2vw, 75px);
}
.cmp-col--divided { position: relative; }
.cmp-col--divided::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(clamp(30px, 5.2vw, 75px) / -2);
  width: 1px;
  background: var(--ink);
}
/* Body copy in the two columns runs to a measure well inside the column,
   as in the artwork (~645px at full size), not the full column width. */
.cmp-cols p,
.cmp-cols .list { max-width: 29.3em; }
/* Column rhythm measured off the artboard: the steps and the bulleted list
   run tighter than the site defaults. */
.cmp-step { margin-top: clamp(24px, 2.85vw, 41px); }
.cmp-step:first-of-type { margin-top: clamp(18px, 2.01vw, 29px); }
.cmp-step .head-l { margin-bottom: 0; }
.cmp-step p { margin-bottom: 0; }
.cmp-step .btn { margin-top: clamp(14px, 1.55vw, 22.3px); }

.cmp-col > p.mt-m:first-of-type { margin-top: clamp(22px, 2.26vw, 32.5px); }
.cmp-col .list.mt-m { margin-top: clamp(16px, 1.67vw, 24px); }
.cmp-col > p.mt-m:last-of-type { margin-top: clamp(18px, 1.79vw, 25.8px); }
.cmp-col .list li { margin-bottom: 0; }
.cmp-tag { color: var(--purple); }

.cmp-outcome { text-align: center; }
.cmp-outcome .section-title { max-width: 8.5em; margin-inline: auto; }
/* The rule below the columns opens and closes tighter than the one above it */
.cmp-cols + .cmp-rule { margin-block: clamp(70px, 9.27vw, 133.5px) clamp(36px, 4.38vw, 63px); }

/* The closing paragraphs run at body size in the artwork, not lede size */
.cmp-outcome .lede {
  font-size: clamp(17px, 1.53vw, 22px);
  line-height: 1.5;
  max-width: 31.4em;
  margin-inline: auto;
  margin-top: clamp(17px, 1.7vw, 24.5px);
}
.cmp-outcome .lede:first-of-type { margin-top: clamp(35px, 3.47vw, 50px); }

@media (max-width: 860px) {
  .cmphero__grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the hand would run through the title in white-on-white,
     so below this width it drops under the lockup instead. */
  .cmphero__media {
    position: static;
    width: 100%;
    margin-top: clamp(24px, 6vw, 48px);
    margin-bottom: calc(-1 * clamp(60px, 12.1vw, 174px));
  }
  .cmp-cols { grid-template-columns: minmax(0, 1fr); row-gap: clamp(34px, 6vw, 56px); }
  .cmp-col--divided::before {
    left: 0; right: 0; top: calc(clamp(34px, 6vw, 56px) / -2);
    bottom: auto; width: auto; height: 1px;
  }
}

/* --------------------------------------------------------------------------
   17b. Crisis support band — sits above the footer on every page
   -------------------------------------------------------------------------- */
.support {
  background: var(--mist);
  padding-block: clamp(46px, 5.28vw, 76px) clamp(60px, 10.8vw, 155px);
}
.support__grid {
  /* 64px gutters with the hairline centred in them, so the text keeps equal
     clearance on both sides of every divider. */
  --support-gap: clamp(24px, 4.44vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.093fr;
  column-gap: var(--support-gap);
}
/* hairline before the third and fourth columns, as in the artwork */
.support__col:nth-child(3),
.support__col:nth-child(4) { position: relative; }
.support__col:nth-child(3)::before,
.support__col:nth-child(4)::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--support-gap) / -2);
  width: 1px;
  background: var(--ink);
}
.support__title {
  color: var(--ink);
  text-transform: none;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
}
.support__col .head-l {
  text-transform: uppercase;
  font-size: clamp(22px, 2.22vw, 32px);
  line-height: .9;
  margin-bottom: clamp(14px, 1.9vw, 27px);
}
.support__col p { margin: 0; line-height: 1.5; }
.support__tel {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 3.05vw, 44px);
  color: var(--purple);
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
.support__tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.support__tel svg { width: 1.1em; height: 1.1em; flex: none; }
.support__col .btn { margin-top: clamp(22px, 3.05vw, 44px); }

@media (max-width: 900px) {
  .support__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 5vw, 46px); }
  .support__col:nth-child(3)::before,
  .support__col:nth-child(4)::before {
    left: 0; right: 0; top: calc(clamp(30px, 5vw, 46px) / -2);
    bottom: auto; width: auto; height: 1px;
  }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: clamp(30px, 4.53vw, 56px); }
.center { text-align: center; }
.stack > * + * { margin-top: 18px; }