/* PAIR Kenya: concept v2, "listen, then act".
   The site is organised around what PAIR actually does (listen through COHI, act on what
   communities prioritise, measure again) rather than the old eight thematic areas.
   Visual language carried over from v1: paper and grain, Instrument Serif display type,
   beadwork colour, stone-shaped photo masks. */

:root {
  --paper: #F4ECDF;
  --paper-2: #EBDFCA;
  --sand: #D9C4A3;
  --ink: #1E1814;
  --ink-2: #4E4238;
  --ink-3: #74655A;
  --rule: rgba(30, 24, 20, .14);
  --red: #B10932;          /* PAIR red, from the vector logo */
  --red-2: #E30C40;
  --ochre: #C57A2A;
  --bead-yellow: #E7B023;
  --bead-blue: #2A56A4;
  --bead-green: #3A7A45;
  --dusk: #1F1712;
  --dusk-2: #2C211A;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;

  --gutter: clamp(16px, 4.5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: url(../img/grain.png) var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--red-2); outline-offset: 3px; border-radius: 2px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 16px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); }
section { position: relative; }
.pad { padding-block: clamp(64px, 9vw, 128px); }
.pad-sm { padding-block: clamp(40px, 6vw, 80px); }

/* ---------- type ---------- */
.label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.label::before {
  content: ""; flex: none; width: 44px; height: 8px;
  background:
    radial-gradient(circle at 4px 4px, var(--red) 3.4px, transparent 3.9px),
    radial-gradient(circle at 13px 4px, var(--bead-yellow) 3.4px, transparent 3.9px),
    radial-gradient(circle at 22px 4px, var(--bead-blue) 3.4px, transparent 3.9px),
    radial-gradient(circle at 31px 4px, #FFFDF8 2.6px, var(--ink-3) 2.7px, var(--ink-3) 3.4px, transparent 3.9px),
    radial-gradient(circle at 40px 4px, var(--bead-green) 3.4px, transparent 3.9px),
    linear-gradient(var(--ink-3), var(--ink-3)) 0 50% / 100% 1px no-repeat;
}
.on-dark .label { color: rgba(244, 236, 223, .8); }
.on-dark .label::before { background:
    radial-gradient(circle at 4px 4px, var(--red-2) 3.4px, transparent 3.9px),
    radial-gradient(circle at 13px 4px, var(--bead-yellow) 3.4px, transparent 3.9px),
    radial-gradient(circle at 22px 4px, #4C7BD0 3.4px, transparent 3.9px),
    radial-gradient(circle at 31px 4px, #FFFDF8 3.4px, transparent 3.9px),
    radial-gradient(circle at 40px 4px, #52A060 3.4px, transparent 3.9px),
    linear-gradient(rgba(244,236,223,.4), rgba(244,236,223,.4)) 0 50% / 100% 1px no-repeat; }

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
.display { font: 400 clamp(44px, 7vw, 104px)/.95 var(--serif); letter-spacing: -.02em; margin: 0 0 24px; }
.h2 { font: 400 clamp(36px, 5vw, 72px)/1 var(--serif); letter-spacing: -.015em; margin: 0 0 24px; }
.h3 { font: 400 clamp(26px, 2.6vw, 36px)/1.08 var(--serif); margin: 0 0 12px; }
.display em, .h2 em, .h3 em { color: var(--red); }
.on-dark .display em, .on-dark .h2 em, .on-dark .h3 em { color: var(--bead-yellow); }
.lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 38em; margin: 0 0 24px; }
.on-dark .lede { color: rgba(244, 236, 223, .8); }
.small { font-size: 14px; color: var(--ink-3); }
.on-dark .small { color: rgba(244, 236, 223, .62); }
.hand { font: 600 24px/1.1 var(--hand); color: var(--red); }
.prose { max-width: 40em; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { font: 400 clamp(30px, 3.2vw, 44px)/1.05 var(--serif); margin: 56px 0 16px; }
.prose h3 { font: 600 18px/1.3 var(--sans); margin: 32px 0 8px; color: var(--ink); }
.prose ul { padding-left: 1.1em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--red); }

/* "to confirm": everything PAIR still has to confirm is visibly marked in the concept */
.tk {
  display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  background: var(--bead-yellow); color: var(--ink); padding: 4px 7px 3px; border-radius: 3px;
  vertical-align: .2em; margin-left: 4px; white-space: nowrap; cursor: help;
}
.tk--block { display: block; width: fit-content; margin: 10px 0 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; transition: background .2s, color .2s, border-color .2s;
}
.btn--red { background: var(--red); border-color: var(--red); color: #FFF8EE; }
.btn--red:hover { background: var(--red-2); border-color: var(--red-2); }
.btn--ink:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-dark .btn--ink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.link {
  font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; gap: 8px; align-items: center;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 1.5px; }
.link::after { content: "→"; transition: transform .3s var(--ease); }
.link:hover::after { transform: translateX(4px); }
.link--ext::after { content: "↗"; }
.on-dark .link { color: var(--bead-yellow); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- nav ---------- */
.nav {
  position: sticky; transition: transform .45s var(--ease), border-color .3s; top: 0; z-index: 50; background: rgba(244, 236, 223, .9);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav__in { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 40px; height: 43px; background: url(../img/pair-symbol.svg) center / contain no-repeat; flex: none; }
.brand__word { font: 800 22px/1 var(--sans); letter-spacing: .04em; color: var(--red); }
.brand__full { font: 600 10.5px/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--rule); padding-left: 12px; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a {
  text-decoration: none; font: 500 15px/1 var(--sans); padding: 10px 12px; border-radius: 999px; color: var(--ink-2);
  transition: background .2s, color .2s;
}
.nav__links a:hover { background: rgba(30, 24, 20, .06); color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--red); background: rgba(177, 9, 50, .08); }
.nav__social { display: flex; gap: 2px; }
.nav__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-2); }
.nav__social a:hover { background: rgba(30, 24, 20, .06); color: var(--red); }
.nav__social svg { width: 17px; height: 17px; }
.nav__menu { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: none; border-radius: 50%; cursor: pointer; position: relative; }
.nav__menu i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__menu i:first-of-type { top: 19px; } .nav__menu i:last-of-type { top: 27px; }
.nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; inset: 76px 0 0; top: 76px; z-index: 49; background: var(--paper); padding: 24px var(--gutter) 40px; overflow: auto; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { font: 400 34px/1.1 var(--serif); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.menu .nav__social { margin-top: 24px; gap: 8px; }
.menu .nav__social a { width: 48px; height: 48px; border: 1px solid var(--rule); }
.menu .btn { margin-top: 24px; }

@media (max-width: 1180px) { .brand__full { display: none; } }
@media (max-width: 1020px) { .nav__social--bar { display: none; } }
@media (max-width: 900px) {
  .nav__links, .nav__in > .btn { display: none; }
  .nav__menu { display: block; }
}

/* ---------- photos ---------- */
figure { margin: 0; }
.ph { position: relative; overflow: hidden; background: var(--sand); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--stone { clip-path: url(#mask-stone); }
.ph--land { clip-path: url(#mask-land); }
.ph--r { border-radius: 6px; }
figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 10px; }
figcaption a { color: inherit; }
.on-dark figcaption { color: rgba(244, 236, 223, .6); }
.src { font-size: 12px; letter-spacing: .02em; }

/* ---------- home: hero ---------- */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 6vw, 88px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__kicker { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }
.hero__mission { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); max-width: 34em; margin: 0 0 28px; padding-left: 16px; border-left: 3px solid var(--red); }
.hero__photo { aspect-ratio: 5 / 5.2; }
.hero__photo img { object-position: 42% 50%; }
.hero__note { position: absolute; right: 4%; bottom: 8%; transform: rotate(-4deg); background: var(--paper); padding: 8px 14px; border-radius: 4px; box-shadow: 0 8px 24px rgba(30,24,20,.18); }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { aspect-ratio: 4 / 3.2; order: -1; }
}

/* ---------- home: the cycle (how we work, one story) ---------- */
.cycle__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.cycle__head .lede { margin: 0; }
.cycle__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); position: relative; }
.cycle__steps::before {  /* the dotted track that links the steps */
  content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px;
  background: radial-gradient(circle, var(--line, #9C7A55) 1.2px, transparent 1.6px) 0 50% / 10px 2px repeat-x;
}
.step { position: relative; }
.step__n {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper);
  border: 1.5px solid var(--ink); font: 400 22px/1 var(--serif); position: relative; z-index: 1; margin-bottom: 18px;
}
.step:nth-child(3) .step__n { background: var(--red); border-color: var(--red); color: #FFF8EE; }
.step__verb { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.step h3 { font: 400 26px/1.1 var(--serif); margin: 0 0 10px; }
.step p { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; }
.step .ph { aspect-ratio: 4 / 3; border-radius: 4px; }
.step__stat { font: 400 44px/1 var(--serif); color: var(--red); margin: 6px 0 4px; }
.step__stat small { font: 500 14px/1.3 var(--sans); color: var(--ink-3); display: block; margin-top: 4px; }
@media (max-width: 980px) {
  .cycle__head { grid-template-columns: 1fr; gap: 0; }
  .cycle__steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .cycle__steps::before { display: none; }
}
@media (max-width: 560px) { .cycle__steps { grid-template-columns: 1fr; } }

/* ---------- flagships ---------- */
.flag { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2vw, 24px); }
.card {
  position: relative; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; background: #FBF6EE; border: 1px solid var(--rule);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(30,24,20,.35); }
.card .ph { aspect-ratio: 16 / 10; }
.card__body { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body p { margin: 0; color: var(--ink-2); }
.card__tag { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.card .link { margin-top: auto; padding-top: 8px; width: fit-content; }
.card--dark { background: var(--dusk); color: var(--paper); border-color: transparent; }
.card--dark .card__body p { color: rgba(244, 236, 223, .78); }
.card--dark .card__tag, .card--dark .link { color: var(--bead-yellow); }
.card--dark .ph { aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .flag { grid-template-columns: 1fr; } }

/* ---------- equal voices: parity grid ---------- */
.parity { background: var(--dusk); color: var(--paper); }
.parity__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.parity__grid:has(.parity__say) { align-items: center; }
.parity__say { border-left: 3px solid var(--bead-yellow); padding: 8px 0 8px clamp(20px, 3vw, 40px); }
.parity__big { font: 400 clamp(34px, 3.8vw, 58px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--paper); margin: 0 0 22px; text-wrap: balance; }
.parity__big em { color: var(--bead-yellow); }
.parity__sub { font-size: 17px; color: rgba(244, 236, 223, .72); margin: 0; max-width: 34ch; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; }
.facts li { display: grid; grid-template-columns: 7.2ch 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(244, 236, 223, .16); }
.facts b { font: 400 40px/1 var(--serif); color: var(--bead-yellow); }
.facts span { color: rgba(244, 236, 223, .82); font-size: 16px; }
.facts .tk { margin-left: 0; }
@media (max-width: 900px) {
  .parity__grid { grid-template-columns: 1fr; }
  .dots__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- also in the field ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split .ph { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

.planned { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 40px; }
.pill { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px 5px; border-radius: 999px; width: fit-content; }
.pill--live { background: rgba(58, 122, 69, .14); color: var(--bead-green); }
.pill--planned { background: rgba(231, 176, 35, .22); color: #7A5A06; }
.pill--next { background: rgba(42, 86, 164, .12); color: var(--bead-blue); }
.mini { padding: 22px; border-radius: 8px; border: 1px dashed rgba(30, 24, 20, .28); display: grid; gap: 8px; align-content: start; }
.mini h3 { font: 400 24px/1.1 var(--serif); }
.mini p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* ---------- notes from the field ---------- */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.note { display: flex; flex-direction: column; text-decoration: none; border-radius: 8px; overflow: hidden; background: #FBF6EE; border: 1px solid var(--rule); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.note:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(30,24,20,.35); }
.note .ph { aspect-ratio: 3 / 2; }
.note__body { padding: 18px 20px 22px; display: grid; gap: 8px; }
.note__meta { display: flex; gap: 10px; align-items: center; font: 600 12px/1 var(--sans); color: var(--ink-3); letter-spacing: .04em; }
.note__src { display: inline-flex; gap: 6px; align-items: center; color: var(--red); }
.note__src svg { width: 13px; height: 13px; }
.note h3 { font: 400 25px/1.1 var(--serif); }
.note p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.note--lead { grid-column: span 2; flex-direction: row; }
.note--lead .ph { aspect-ratio: auto; flex: 1.1; min-height: 320px; }
.note--lead .note__body { flex: 1; align-content: center; padding: 28px; }
.note--lead h3 { font-size: clamp(30px, 3vw, 42px); }
@media (max-width: 980px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .notes { grid-template-columns: 1fr; }
  .note--lead { grid-column: auto; flex-direction: column; }
  .note--lead .ph { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---------- follow band ---------- */
.follow { background: var(--red); color: #FFF8EE; }
.follow__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.follow .h2 em { color: var(--bead-yellow); }
.follow .lede { color: rgba(255, 248, 238, .85); }
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 10px; text-decoration: none;
  background: rgba(255, 248, 238, .1); border: 1px solid rgba(255, 248, 238, .22); transition: background .2s, transform .3s var(--ease);
}
.social:hover { background: rgba(255, 248, 238, .18); transform: translateY(-2px); }
.social svg { width: 26px; height: 26px; flex: none; }
.social b { display: block; font: 600 17px/1.2 var(--sans); }
.social span { font-size: 14px; opacity: .8; }
.socials--light .social { background: #FBF6EE; border-color: var(--rule); color: var(--ink); }
.socials--light .social svg { color: var(--red); }
@media (max-width: 900px) { .follow__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .socials { grid-template-columns: 1fr; } }

/* ---------- inner pages ---------- */
.phead { padding: clamp(32px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
.phead__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.phead .ph { aspect-ratio: 4 / 3; }
.crumb { font: 600 13px/1 var(--sans); color: var(--ink-3); text-decoration: none; display: inline-block; margin-bottom: 20px; }
.crumb:hover { color: var(--red); }
@media (max-width: 900px) { .phead__grid { grid-template-columns: 1fr; } }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.aside { position: sticky; top: 100px; display: grid; gap: 16px; }
.box { padding: 22px; border-radius: 10px; background: #FBF6EE; border: 1px solid var(--rule); }
.box h3 { font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.box dl { margin: 0; display: grid; gap: 10px; }
.box dt { font-size: 13px; color: var(--ink-3); }
.box dd { margin: 0; font-weight: 600; }
.box--dark { background: var(--dusk); color: var(--paper); border: 0; }
.box--dark h3 { color: rgba(244, 236, 223, .6); }
.box--dark p { color: rgba(244, 236, 223, .8); }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; } .aside { position: static; } }

.quote { margin: 40px 0; padding: 0 0 0 24px; border-left: 3px solid var(--red); }
.quote p { font: 400 clamp(24px, 2.4vw, 32px)/1.25 var(--serif); color: var(--ink); margin: 0 0 12px; }
.quote footer { font-size: 14px; color: var(--ink-3); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 24px 0; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 26px/1 var(--serif); color: var(--red); }
.steps b { display: block; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--ink-2); }

.findings { display: grid; gap: 14px; margin: 24px 0; }
.finding { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.finding > div { padding: 18px 20px; border-radius: 8px; background: #FBF6EE; border: 1px solid var(--rule); }
.finding > div:last-child { background: var(--dusk); color: var(--paper); border-color: transparent; }
.finding > div:last-child p { color: rgba(244, 236, 223, .8); }
.finding__arrow { align-self: center; font: 400 30px/1 var(--serif); color: var(--red); }
.finding h4 { margin: 0 0 6px; font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.finding > div:last-child h4 { color: var(--bead-yellow); }
.finding p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 700px) { .finding { grid-template-columns: 1fr; } .finding__arrow { transform: rotate(90deg); justify-self: start; margin-left: 20px; } }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.tier { padding: 20px; border-radius: 8px; border: 1px solid var(--rule); background: #FBF6EE; }
.tier b { display: block; font: 400 38px/1 var(--serif); color: var(--red); margin: 6px 0; }
.tier span { font-size: 14px; color: var(--ink-3); }
.tiers--4 { grid-template-columns: repeat(2, 1fr); }
.tiers--4 .tier b { font-size: 30px; }
.tiers__h { margin: 24px 0 -8px; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) { .tiers, .tiers--4 { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 32px 0; }
.gallery figure { grid-column: span 2; }
.gallery figure.w3 { grid-column: span 3; }
.gallery .ph { aspect-ratio: 4 / 3; border-radius: 6px; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure, .gallery figure.w3 { grid-column: span 1; } }

.video {
  aspect-ratio: 16 / 9; border-radius: 10px; background: var(--dusk) center / cover; position: relative; display: grid; place-items: center;
  color: var(--paper); text-align: center; overflow: hidden;
}
.video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,23,18,.2), rgba(31,23,18,.8)); }
.video > * { position: relative; }
.video__play { width: 72px; height: 72px; border-radius: 50%; background: var(--red); display: grid; place-items: center; margin: 0 auto 14px; }
.video__play::after { content: ""; border-left: 20px solid #FFF8EE; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }

/* timeline (field page) */
.feed { display: grid; gap: 0; }
.entry { display: grid; grid-template-columns: 130px minmax(0, 1fr) 280px; gap: clamp(16px, 3vw, 40px); padding: 32px 0; border-top: 1px solid var(--rule); align-items: start; }
.entry time { font: 600 13px/1.3 var(--sans); color: var(--ink-3); letter-spacing: .04em; }
.entry h2 { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); margin: 6px 0 10px; }
.entry p { margin: 0 0 12px; color: var(--ink-2); }
.entry .ph { aspect-ratio: 4 / 3; border-radius: 6px; }
@media (max-width: 900px) { .entry { grid-template-columns: 1fr; } .entry .ph { order: -1; } }

/* form (support page) */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea { min-height: 48px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(30, 24, 20, .28); background: #FFFDF8; width: 100%; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; gap: 4px; padding: 16px; border-radius: 8px; border: 1.5px solid rgba(30, 24, 20, .2); background: #FFFDF8; cursor: pointer; height: 100%; }
.choice span b { font: 400 26px/1 var(--serif); }
.choice span small { color: var(--ink-3); font-size: 13.5px; }
.choice input:checked + span { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.choice input:focus-visible + span { outline: 2px solid var(--red-2); outline-offset: 2px; }

/* sources page */
.srcgroup { padding: 32px 0; border-top: 1px solid var(--rule); }
.srcgroup h2 { font: 400 28px/1.1 var(--serif); margin: 0 0 6px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 16px; }
.thumbs a { display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--sand); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.notice { padding: 20px 22px; border-radius: 10px; background: rgba(231, 176, 35, .18); border: 1px solid rgba(231, 176, 35, .5); }
.notice p { margin: 0; }

/* ---------- footer ---------- */
.foot { background: var(--dusk); color: var(--paper); padding: clamp(56px, 7vw, 96px) 0 28px; position: relative; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--bead-yellow); }
.foot__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(244, 236, 223, .14); }
.foot .foot__big { font: 400 clamp(40px, 5vw, 72px)/.98 var(--serif); margin: 0; }
.foot__big em { color: var(--bead-yellow); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 40px 0; }
.foot h4 { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 236, 223, .55); margin: 0 0 14px; }
.foot p, .foot li { margin: 0; color: rgba(244, 236, 223, .85); font-size: 15px; line-height: 1.7; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot .nav__social a { color: var(--paper); border: 1px solid rgba(244, 236, 223, .25); width: 44px; height: 44px; }
.foot .nav__social { gap: 8px; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 24px; border-top: 1px solid rgba(244, 236, 223, .14); font-size: 13px; color: rgba(244, 236, 223, .55); }
.foot__base p { font-size: 13px; color: inherit; }
.foot__mark { width: 30px; height: 32px; background: var(--paper); -webkit-mask: url(../img/pair-symbol.svg) center / contain no-repeat; mask: url(../img/pair-symbol.svg) center / contain no-repeat; }
.beads { display: grid; grid-template-columns: 3fr 1fr 2fr 1fr 2fr; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; }
.beads i:nth-child(1) { background: var(--red); } .beads i:nth-child(2) { background: var(--bead-yellow); }
.beads i:nth-child(3) { background: var(--bead-blue); } .beads i:nth-child(4) { background: #FFFDF8; } .beads i:nth-child(5) { background: var(--bead-green); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__cols { grid-template-columns: 1fr; } }

.concept { background: var(--ink); color: var(--paper); font-size: 13px; text-align: center; padding: 8px 16px; }
.concept a { color: var(--bead-yellow); }

/* =====================================================================
   Carried over from concept v1: bead progress bar, the hand-drawn route,
   the tagline hero, the mission that inks in, the self-drawing map,
   counters with bead bands, gift stones. Rebuilt for the v2 structure.
   ===================================================================== */
:root { --line: #9C7A55; --dust: #C2AE93; }

/* bead scroll progress: the four colour bands of a beaded collar */
.beadbar { position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.beadbar i { transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.beadbar i:nth-child(1) { background: var(--red); }
.beadbar i:nth-child(2) { background: var(--bead-yellow); transform: scaleX(calc(var(--p, 0) * .985)); }
.beadbar i:nth-child(3) { background: var(--bead-blue); transform: scaleX(calc(var(--p, 0) * .97)); }
.beadbar i:nth-child(4) { background: var(--bead-green); transform: scaleX(calc(var(--p, 0) * .955)); }

/* nav tucks away on the way down, returns on the way up */
.nav.is-hidden { transform: translateY(-100%); }

/* labels thread their beads one by one as they reveal */
.js .label[data-reveal]::before, .js [data-reveal] .label::before { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(5, jump-none) .15s; }
.js .label.is-in::before, .js .is-in .label::before, .js-late .label::before { clip-path: inset(0 0 0 0); }

/* the route: one hand-drawn herd track through the home page (desktop only) */
.route { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; pointer-events: none; z-index: 1; contain: strict; }
.route svg { display: block; overflow: visible; }
.route__line { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-dasharray: 1 7.5; stroke-linecap: round; }
.route__pt circle { fill: var(--paper); stroke: var(--line); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s var(--ease); }
.route__pt circle + circle { fill: var(--red); stroke: none; transition-delay: .12s; }
.route__pt.is-on circle { transform: scale(1); }
.wp { position: absolute; width: 1px; height: 1px; pointer-events: none; }
/* dark bands sit above the track, so it passes under them like a road under a bridge */
.parity, .follow, .foot, .card--dark { position: relative; z-index: 2; }
main > section { z-index: auto; }
.wrap { z-index: 2; }
@media (max-width: 900px) { .route { display: none; } }

/* load-in */
@keyframes rise { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes riseLine { from { transform: translateY(105%); } to { transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.load { display: inline-block; animation: rise 1.1s var(--ease) var(--d, 0s) both; }
.line { display: block; overflow: hidden; padding: .04em .14em .16em; margin: -.04em -.14em -.16em; }
.line > .load { animation-name: riseLine; }

/* the tagline hero */
.thero { position: relative; height: calc(100svh - 110px); min-height: 520px; max-height: 1000px; color: #fff; overflow: hidden; background: var(--dusk); }
.thero__media { position: absolute; inset: -4% 0 0; will-change: transform; overflow: hidden; }
.thero__media::before { content: ""; position: absolute; inset: -40px; background: var(--lqip) 50% 58% / cover; filter: blur(24px); }
.thero__media img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.js .thero__media img { opacity: 0; }
.js .thero__media img.is-loaded { animation: settle 1.6s var(--ease) both; }
.thero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(20, 14, 10, .5) 0%, rgba(20, 14, 10, 0) 26%),
  linear-gradient(90deg, rgba(24, 16, 10, .74) 0%, rgba(24, 16, 10, .34) 48%, rgba(24, 16, 10, 0) 72%),
  linear-gradient(0deg, rgba(40, 26, 14, .55) 0%, rgba(40, 26, 14, 0) 40%),
  radial-gradient(60% 55% at 82% 8%, rgba(255, 196, 110, .22), transparent 70%); }
.thero__content { position: absolute; left: var(--gutter); right: var(--gutter); top: 40px; bottom: clamp(70px, 15vh, 180px); max-width: 1100px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 3; }
.thero__title { margin: 0 0 clamp(16px, 3.4vh, 30px); font: 400 clamp(52px, min(10.4vw, 15.5vh), 160px)/.86 var(--serif); letter-spacing: -.025em; }
.thero__title em { color: var(--bead-yellow); padding-right: .08em; }
.thero__sub { font: 400 clamp(22px, min(2.6vw, 3.6vh), 36px)/1.15 var(--serif); margin: 0 0 clamp(18px, 3vh, 28px); max-width: 22em; color: #FFF8EE; }
.thero__sub em { color: var(--bead-yellow); }
.thero__foot { display: flex; gap: 16px 32px; align-items: center; flex-wrap: wrap; }
.thero .btn--ink { color: #FFF8EE; }
.thero .btn--ink:hover { background: #FFF8EE; color: var(--ink); border-color: #FFF8EE; }
.thero__edge { pointer-events: none; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, min(14vw, 20vh), 200px); z-index: 2; }
.thero__contour { fill: none; stroke: rgba(244, 236, 223, .75); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: drawIn 2.4s var(--ease) .5s forwards; }
.thero__contour:nth-child(2) { animation-delay: .7s; stroke: rgba(244, 236, 223, .55); }
.thero__contour:nth-child(3) { animation-delay: .9s; stroke: rgba(244, 236, 223, .4); }
.thero__ground { fill: var(--paper); }
.thero__credit { position: absolute; right: var(--gutter); top: 18px; z-index: 3; font-size: 12px; color: rgba(255, 248, 238, .7); }
@media (max-height: 620px) { .thero__sub { display: none; } }

/* mission: words ink in as you read */
.mission { padding: clamp(72px, 10vw, 150px) 0 clamp(72px, 9vw, 130px); }
.mission__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; }
.mission__grid > .label { grid-column: 1 / -1; }
.statement { grid-column: 1 / 12; margin: 0; font: 400 clamp(32px, 4.4vw, 68px)/1.08 var(--serif); letter-spacing: -.012em; text-wrap: pretty; }
.statement .w { color: var(--dust); transition: color .35s linear; }
.statement .w.on { color: var(--ink); }
.statement em .w.on { color: var(--red); }
.mission__fig { grid-column: 1 / 7; margin-top: 40px; position: relative; }
.mission__fig .ph { aspect-ratio: 4 / 3; }
.mission__fig .hand { position: absolute; right: -230px; top: -40px; transform: rotate(-4deg); }
.mission__fig .annot { position: absolute; right: -150px; top: -6px; width: 170px; }
.annot path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.4s var(--ease) .5s; }
.is-in .annot path, .js-late .annot path { stroke-dashoffset: 0; }
.mission__aside { grid-column: 8 / 12; align-self: end; padding-bottom: 12px; }
.mission__vision { font: 400 clamp(22px, 1.9vw, 28px)/1.3 var(--serif); margin: 0 0 24px; color: var(--ink-2); }
@media (max-width: 1100px) { .mission__fig .hand, .mission__fig .annot { display: none; } }
@media (max-width: 900px) { .statement, .mission__fig, .mission__aside { grid-column: 1 / -1; } .mission__fig { margin-top: 0; } }

/* where we work: the map draws itself */
.land { background: radial-gradient(90% 70% at 85% 10%, rgba(231, 176, 35, .16), transparent 60%), url(../img/grain.png) var(--paper-2); overflow: hidden; }
.land__texture { position: absolute; inset: 0; background: url(../img/contours.svg) center / cover; opacity: .2; pointer-events: none; }
.land__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 6vw, 110px); align-items: center; }
.places { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.places li { border-bottom: 1px solid var(--rule); }
.places button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 14px 4px; }
.places button:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }
.places b { display: block; font: 400 26px/1.1 var(--serif); transition: color .3s; }
.places span.d { display: block; font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }
.places i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); margin-top: 8px; position: relative; }
.places i.hollow { background: var(--paper-2); border: 3px solid var(--ink); }
.places i.next { background: none; border: 2px dashed var(--bead-blue); }
.places button:hover b, .places button.is-active b { color: var(--red); }
.land__map { margin: 0; position: relative; }
.land__map svg { width: 100%; height: auto; max-height: 84vh; display: block; overflow: visible; }
.map__counties path { fill: none; stroke: rgba(78, 66, 56, .22); stroke-width: 1.2; stroke-dasharray: 2 5; }
.map__outline { fill: rgba(244, 236, 223, .55); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.map__focus g { color: var(--red); }
.map__focus path { fill: url(#hatch); fill-opacity: 0; stroke: var(--red); stroke-width: 2.4; stroke-linejoin: round; transition: fill-opacity .8s var(--ease), stroke-width .4s; }
.map__focus g.is-drawn path { fill-opacity: .42; }
.map__focus g.is-active path { fill-opacity: .9; stroke-width: 4; }
.map__focus text { font: 600 64px var(--hand); fill: var(--ink); text-anchor: middle; opacity: 0; transition: opacity .6s .3s; pointer-events: none; paint-order: stroke; stroke: var(--paper-2); stroke-width: 8px; stroke-linejoin: round; }
.map__focus g.is-drawn text { opacity: 1; }
.map__places circle { fill: var(--ink); transition: r .3s var(--ease); }
.map__places circle.hollow { fill: var(--paper-2); stroke: var(--ink); stroke-width: 5; }
.map__places circle.next { fill: none; stroke: var(--bead-blue); stroke-width: 5; stroke-dasharray: 7 6; }
.map__places text { font: 600 34px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--paper-2); stroke-width: 8px; }
.map__places g { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--ease); }
.land__map.is-drawn .map__places g { opacity: 1; transform: none; }
.land__map.is-drawn .map__places g:nth-child(2) { transition-delay: .15s; } .land__map.is-drawn .map__places g:nth-child(3) { transition-delay: .3s; }
.map__places g.is-active circle { r: 17; }
.map__places g.is-active text { fill: var(--red); }
@media (max-width: 900px) { .land__grid { grid-template-columns: 1fr; } .land__map svg { max-height: 70vh; } }

/* counters with bead bands (parity facts) */
.facts b { font-variant-numeric: lining-nums tabular-nums; }
.facts li { position: relative; }
.facts li::after { content: ""; position: absolute; left: 0; top: -1px; width: 7.2ch; height: 3px;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--bead-yellow) 25% 50%, #4C7BD0 50% 75%, #52A060 75%);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease); }
.facts.is-in li::after { transform: scaleX(1); }
.facts.is-in li:nth-child(2)::after { transition-delay: .12s; } .facts.is-in li:nth-child(3)::after { transition-delay: .24s; } .facts.is-in li:nth-child(4)::after { transition-delay: .36s; }
/* dots land one row at a time */
.js .dots__row svg { opacity: 0; transform: translateX(-8px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .dots.is-in .dots__row svg, .js-late .dots__row svg { opacity: 1; transform: none; }

/* the cycle's step markers pop in as the route reaches them */
.step__n { transition: transform .6s var(--ease), background-color .4s, color .4s, border-color .4s; }
.js .step:not(.is-in) .step__n { transform: scale(.6); }

/* gift stones: grow with the amount (support page) */
.stones { border: 0; margin: 8px 0 0; padding: 0 0 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; position: relative; }
.stones::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 1px; background: rgba(30, 24, 20, .2); z-index: 0; }
.stones label { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; position: relative; z-index: 1; flex: 1; text-align: center; }
.stones input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.stone { width: calc(var(--s) * 78px); aspect-ratio: 1.18; background: var(--sand); border-radius: 52% 48% 46% 54% / 60% 58% 42% 40%; transition: background-color .4s, transform .5s var(--ease), box-shadow .4s; box-shadow: inset -4px -5px 0 rgba(30, 24, 20, .08); }
.stones label:hover .stone { transform: translateY(-4px) rotate(-4deg); }
.stones b { font: 600 15px/1.1 var(--sans); color: var(--ink-3); transition: color .3s; }
.stones small { font-size: 12.5px; color: var(--ink-3); margin-top: -6px; }
.stones input:checked ~ .stone { background: var(--red); transform: translateY(-6px); box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .18), 0 10px 16px -8px rgba(177, 9, 50, .6); }
.stones input:checked ~ b { color: var(--ink); }
.stones input:focus-visible ~ .stone { outline: 2px solid var(--ink); outline-offset: 4px; }
.give__out { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); margin: 4px 0 0; min-height: 2.4em; }
.give__out.swap { animation: rise .6s var(--ease); }
.give__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cur { position: relative; }
.cur select { appearance: none; -webkit-appearance: none; font: 600 14px/1 var(--sans); letter-spacing: .06em; background: var(--paper-2); border: 1px solid rgba(30, 24, 20, .18); border-radius: 999px; padding: 10px 34px 10px 16px; cursor: pointer; min-width: 96px; }
.cur::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* how your gift travels: a stone runs down the route to the stop your gift reaches */
.journey { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: radial-gradient(circle, var(--line) 1.2px, transparent 1.6px) 50% 0 / 2px 9px repeat-y; }
.journey li { position: relative; padding: 0 0 22px 44px; }
.journey li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 1.6px solid var(--line); transition: background-color .4s, border-color .4s; }
.journey li.is-on::before { background: var(--red); border-color: var(--red); }
.journey b { display: block; font: 400 22px/1.15 var(--serif); }
.journey p { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.journey__stone { position: absolute; left: 3px; top: 0; width: 22px; height: 19px; background: var(--red); border-radius: 52% 48% 46% 54% / 60% 58% 42% 40%; box-shadow: 0 6px 12px -6px rgba(177, 9, 50, .7); transition: transform 1.1s var(--ease); z-index: 1; }

/* page heads rise in line by line */


/* parallax targets */
[data-parallax] { will-change: transform; }

/* ---------- reveal ---------- */
.js:not(.js-late) [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--rd, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js:not(.js-late) [data-reveal] { opacity: 1; transform: none; transition: none; }
  .load, .line > .load, .js .thero__media img.is-loaded { animation: none; opacity: 1; }
  .js .thero__media img { opacity: 1; }
  .thero__contour { animation: none; stroke-dashoffset: 0; }
  .card, .note, .social, .journey__stone { transition: none; }
}

/* fixes after review */
.step .step__stat { font: 400 44px/1 var(--serif); color: var(--red); margin: 6px 0 4px; }
@media (min-width: 901px) { .cycle__steps::before { display: none; } }  /* the route threads the steps instead */
.mission__fig .hand { top: -78px; right: -250px; }

/* ---------- grouped nav (v2.2) ---------- */
.nav__links { align-items: center; }
.dd { position: relative; }
.dd__btn, .nav__plain {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 500 15px/1 var(--sans); padding: 11px 13px; border-radius: 999px; color: var(--ink-2); transition: background .2s, color .2s;
}
.dd__btn:hover, .nav__plain:hover, .dd__btn[aria-expanded="true"] { background: rgba(30, 24, 20, .06); color: var(--ink); }
.dd__btn[aria-current], .nav__plain[aria-current] { color: var(--red); }
.dd__btn i { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.dd__btn[aria-expanded="true"] i { transform: translateY(1px) rotate(225deg); }
.dd__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 340px; margin-left: -170px; z-index: 60;  /* margin, not transform: the open animation owns transform */
  background: #FBF6EE; border: 1px solid var(--rule); border-radius: 12px; padding: 8px; display: grid; gap: 2px;
  box-shadow: 0 24px 50px -20px rgba(30, 24, 20, .35); animation: ddIn .28s var(--ease);
}
.dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--bead-yellow) 25% 50%, var(--bead-blue) 50% 75%, var(--bead-green) 75%); }
.dd__panel::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }  /* hover bridge */
.dd__panel[hidden] { display: none; }
.dd__panel a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.dd__panel a:hover, .dd__panel a:focus-visible { background: rgba(177, 9, 50, .07); }
.dd__panel b { font: 400 21px/1.15 var(--serif); }
.dd__panel a:hover b { color: var(--red); }
.dd__panel span { font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
@media (max-width: 1180px) { .dd__btn, .nav__plain { padding: 10px 9px; font-size: 14.5px; } }

.menu details { border-bottom: 1px solid var(--rule); }
.menu summary { list-style: none; cursor: pointer; font: 400 32px/1.1 var(--serif); padding: 14px 0; display: flex; justify-content: space-between; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--red); transition: transform .3s var(--ease); }
.menu details[open] summary::after { transform: rotate(45deg); }
.menu details div { display: grid; padding: 0 0 14px 2px; }
.menu details div a { font: 500 17px/1.3 var(--sans); padding: 9px 0; border: 0; text-decoration: none; color: var(--ink-2); }
.menu nav > a.menu__plain { font: 400 32px/1.1 var(--serif); padding: 14px 0; }

/* ---------- split hero: PAIR's own photo on the right, tagline on the land ---------- */
.thero--split { background: var(--dusk); }
.thero--split::before { content: ""; position: absolute; inset: 0; background: url(../img/contours.svg) 0 60% / 1100px auto no-repeat; opacity: .13; filter: invert(1); z-index: 0; }
.thero--split .thero__media { inset: 0 0 0 36%; clip-path: url(#mask-hero); }
.thero--split .thero__media img { object-position: 72% 38%; }
.thero--split .thero__shade { background: linear-gradient(0deg, rgba(31, 23, 18, .55) 0%, rgba(31, 23, 18, 0) 30%); left: 36%; clip-path: url(#mask-hero); }
/* contour lines trace the cut, drawing in after the photo settles */
.thero__seam { position: absolute; top: 0; bottom: 0; left: 36%; width: 64%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.thero__seam path { fill: none; stroke: var(--bead-yellow); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawIn 2.2s var(--ease) .6s forwards; }
.thero__seam path:nth-child(2) { stroke: rgba(244, 236, 223, .45); animation-delay: .8s; }
.thero__seam path:nth-child(3) { stroke: rgba(244, 236, 223, .22); animation-delay: 1s; }
.thero--split .thero__content { max-width: min(46%, 640px); }
.thero--split .thero__title { font-size: clamp(50px, min(7.6vw, 14vh), 128px); }
.thero__credit { top: auto; bottom: clamp(80px, 13vw, 190px); right: var(--gutter); }
@media (max-width: 900px) {
  .thero--split { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .thero--split .thero__media { position: relative; inset: auto; height: 46vh; min-height: 260px; order: -1; clip-path: none; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); }
  .thero__seam { display: none; }
  .thero--split .thero__media img { object-position: 64% 30%; }
  .thero--split .thero__shade { display: none; }
  .thero--split .thero__content { position: relative; inset: auto; max-width: none; padding: 0 var(--gutter) 120px; margin-top: -40px; }
  .thero__credit { bottom: auto; top: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
}

/* compact sources list, people lists */
.srclist { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.srclist li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.srclist span { color: var(--ink-3); white-space: nowrap; }
.people, .prose .people { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.people li { padding: 16px 18px; border-radius: 8px; background: #FBF6EE; border: 1px solid var(--rule); margin: 0; }
.people b { display: block; font: 400 22px/1.15 var(--serif); color: var(--ink); }
.people span { font-size: 14px; color: var(--ink-3); }

@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- the cycle: calm. The number you're on fills in; nothing else moves. ---------- */
@media (hover: hover) {
  .step:hover .step__n { background: var(--red); border-color: var(--red); color: #FFF8EE; }
}
.step__n { cursor: default; }

/* ---------- map: hover the land as well as the list ---------- */
.map__focus g, .map__places g { cursor: pointer; }
.map__focus g:hover path { fill-opacity: .75; }
.places button.is-hinted b { color: var(--red); }
.places button.is-hinted i { transform: scale(1.3); }
.places i { transition: transform .3s var(--ease); }
.map__tip { position: absolute; left: 0; bottom: 36px; max-width: 280px; background: #FBF6EE; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; box-shadow: 0 16px 36px -18px rgba(30, 24, 20, .4); font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.map__tip.is-on { opacity: 1; transform: none; }
.map__tip b { display: block; font: 400 24px/1.1 var(--hand); color: var(--red); margin-bottom: 4px; }
.map__tip ul { margin: 0; padding-left: 16px; color: var(--ink-2); }

/* ---------- step 3: Diana, carved out, standing on a stone ---------- */
.scholar { position: relative; height: 300px; margin: 44px 0 0; }
.scholar__stone { position: absolute; left: 0; right: 16%; bottom: 0; height: 60%; background: var(--red); border-radius: 52% 48% 46% 54% / 60% 58% 42% 40%; transform: rotate(-3deg); transition: transform .6s var(--ease); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .12); }
.scholar img { position: absolute; left: 5%; bottom: 7%; height: 106%; width: auto; max-width: none; transition: transform .6s var(--ease);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 14%); mask-image: linear-gradient(0deg, transparent 0, #000 14%); transform-origin: 50% 100%; }
.scholar__note { position: absolute; right: -34px; top: -58px; margin: 0; transform: rotate(-5deg); text-align: right; font-size: 25px; line-height: 1.05; color: var(--red); }
.scholar__arrow { position: absolute; right: 6%; top: 6px; width: 84px; }
.js .scholar img { opacity: 0; transform: translateY(24px); }
.js .scholar.is-in img, .js-late .scholar img { opacity: 1; transform: none; transition: opacity .8s var(--ease) .1s, transform 1s var(--ease) .1s; }

@media (max-width: 560px) { .scholar { height: 340px; max-width: 360px; } }
.scholar--lg { height: min(560px, 62vh); margin: 40px 0 0; }
.scholar--lg img { left: 12%; }
.scholar--lg .scholar__note { font-size: 30px; right: 0; top: -10px; }
.scholar--lg .scholar__arrow { width: 110px; right: 10%; top: 70px; }
@media (max-width: 900px) { .scholar--lg { height: 420px; margin-top: 60px; } .scholar__note { right: 0; } }
@media (max-width: 900px) {
  .scholar--lg { height: 400px; margin-top: 80px; }
  .scholar--lg img { left: 0; height: 96%; }
  .scholar--lg .scholar__note { top: -64px; right: 0; font-size: 23px; }
  .scholar--lg .scholar__arrow { top: -4px; right: 4%; width: 80px; }
}
@media (max-width: 560px) {
  .scholar { overflow: visible; }
  .scholar img { max-width: 100%; height: auto; max-height: 104%; }
  .scholar__note { top: -64px; right: 0; font-size: 22px; }
}

/* ---------- parity: figures, not dots ---------- */
.dots__lede { font: 400 clamp(20px, 1.7vw, 25px)/1.3 var(--serif); color: rgba(244, 236, 223, .82); margin: 0 0 22px; height: 2.6em; overflow: hidden; }
.dots__lede b { font-weight: 400; color: var(--bead-yellow); }
.dots__row { transition: opacity .35s var(--ease); border-radius: 6px; }
.dots__row svg { overflow: visible; }
.fig { pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .2s var(--ease), filter .2s; }
@media (hover: hover) {
  .dots:hover .dots__row:not(:hover) { opacity: .28; }
  .dots__row:hover .dots__name { color: var(--paper); }
  .fig.is-on { transform: scale(1.7); filter: drop-shadow(0 0 3px rgba(255, 248, 238, .6)); }
  .dots__row { cursor: crosshair; }
}
.key__fig { width: 9px; height: 18px; vertical-align: -4px; margin-right: 7px; overflow: visible; }

/* ---------- office map ---------- */
.offices { padding-bottom: 12px; }
.minimap { margin: 4px 0 8px; position: relative; border-radius: 8px; overflow: hidden; background: radial-gradient(80% 70% at 30% 20%, rgba(231, 176, 35, .18), transparent 70%), #F1E7D6; }
.minimap::before { content: ''; position: absolute; inset: 0; background: url(../img/contours.svg) center / 220% auto; opacity: .22; }
.minimap svg { position: relative; width: 100%; height: 280px; display: block; overflow: visible; }
.minimap__land { fill: rgba(244, 236, 223, .9); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.minimap__pin { cursor: pointer; opacity: 0; transition: opacity .6s; }
.minimap.is-drawn .minimap__pin { opacity: 1; }
.minimap__pin circle:not(.minimap__halo) { fill: var(--red); }
.minimap__pin circle.hollow { fill: #FBF6EE; stroke: var(--red); stroke-width: 16; }
.minimap__halo { fill: rgba(177, 9, 50, .16); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .45s var(--ease); }
.minimap__pin.is-on .minimap__halo { transform: scale(1); animation: halo 1.6s ease-out infinite; }
@keyframes halo { 70% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }
.minimap__pin text { font: 600 120px var(--hand); fill: var(--ink); paint-order: stroke; stroke: #FBF6EE; stroke-width: 12px; stroke-linejoin: round; }
.minimap__pin.is-on text { fill: var(--red); }
.offices__list { list-style: none; margin: 0; padding: 0; }
.offices__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--rule); border-radius: 6px; transition: background .25s; }
.offices__list li.is-on { background: rgba(177, 9, 50, .06); }
.offices__list i { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--red); }
.offices__list i.hollow { background: #FBF6EE; border: 3px solid var(--red); }
.offices__list b { display: block; font-weight: 600; }
.offices__list span { display: block; font-size: 14.5px; color: var(--ink-2); }
.offices__list a { font-size: 13.5px; font-weight: 600; color: var(--red); text-decoration: none; }
.offices__list a:hover { text-decoration: underline; }
/* rows touch (padding, not gaps) so moving between them never un-dims the chart */
.dots { gap: 0; }
.dots__row { padding: 5px 0; }

/* step 3's note stays inside its own column */
.step .scholar__note { right: 4%; top: -62px; font-size: 22px; }
.step .scholar__arrow { right: 12%; }
.fig[opacity].is-on { opacity: 1; }

@media (max-width: 900px) { .wp { display: none; } }

/* ---------- hero v3: PAIR's photo in the land, the people rising out of it ---------- */
.thero--pop { background: var(--dusk); }
.thero--pop::before { content: ""; position: absolute; inset: 0; background: url(../img/contours.svg) 0 60% / 1100px auto no-repeat; opacity: .13; filter: invert(1); }
.thero__people { position: absolute; right: 0; bottom: 0; width: min(66%, 1100px); height: 100%; z-index: 1; will-change: transform; }
.thero__people img { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.js .thero__people img { opacity: 0; }
.js .thero__people img.is-loaded { animation: rise 1.4s var(--ease) .15s both; }
.thero--pop .thero__content { max-width: min(44%, 620px); }
.thero--pop .thero__title { font-size: clamp(50px, min(7.6vw, 14vh), 128px); }
@media (max-width: 900px) {
  .thero--pop { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; padding-top: 12px; }
  .thero__people { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; order: -1; }
  .thero--pop .thero__content { position: relative; inset: auto; max-width: none; padding: 0 var(--gutter) 120px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .js .thero__people img, .js .thero__people img.is-loaded { opacity: 1; animation: none; } }

/* ---------- Diana: rising out of the stone ---------- */
.scholar { height: auto; aspect-ratio: 685 / 862; width: min(100%, 290px); margin: 64px auto 0 0; }
.scholar__stone { left: -6%; right: -6%; bottom: 0; height: 52%; border-radius: 50%; transform: none; box-shadow: inset -10px -12px 0 rgba(0, 0, 0, .12); }
.scholar img { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; max-width: none; max-height: none; -webkit-mask-image: none; mask-image: none; clip-path: url(#clip-pop); }
.step .scholar__note { right: -18%; top: -58px; }
.step .scholar__arrow { right: -6%; top: -6px; width: 72px; }
.scholar--lg { width: min(100%, 420px); height: auto; margin: 40px 0 0 auto; }
.scholar--lg img { left: 0; }
.scholar--lg .scholar__note { right: -12%; top: -24px; }
.scholar--lg .scholar__arrow { right: -2%; top: 44px; }
@media (max-width: 900px) { .scholar--lg { height: auto; margin: 80px auto 0; } .scholar--lg img { height: 100%; } }
@media (max-width: 560px) { .scholar { width: min(78%, 290px); } .scholar img { height: 100%; max-height: none; } .step .scholar__note { right: -26%; } }
/* step 3: the note sits above-left of Diana so it never reaches step 4 */
.step .scholar__note { left: -2px; right: auto; top: -70px; text-align: left; }
.step .scholar__arrow { left: 38%; right: auto; top: -22px; transform: scaleX(-1); }
@media (max-width: 560px) { .step .scholar__note { right: auto; } }
.step .scholar { margin-top: 92px; }

/* people: minimal motion, a quiet fade only */
.js .thero__people img.is-loaded { animation: fadeIn .8s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.js .scholar img { transform: none; }
.js .scholar.is-in img, .js-late .scholar img { transform: none; transition: opacity .8s ease; }
.thero__people { will-change: auto; }

/* step 3: the arrow leaves the note, swings round her hair and points at her from the right */
.scholar__point { position: absolute; left: 60%; top: -48px; width: 110px; height: 210px; overflow: visible; }
.scholar__point path { stroke-width: 2.2; }
@media (max-width: 560px) { .scholar__point { left: 62%; } }

/* equal voices figures: subtle hover (no growth, no glow) */
@media (hover: hover) {
  .fig.is-on { transform: none; filter: brightness(1.35); }
  .dots:hover .dots__row:not(:hover) { opacity: .55; }
}
.fig { transition: filter .15s ease; }
.dots__row { transition: opacity .25s ease; }

.step figure figcaption { font-size: 12.5px; }
.gallery figcaption { font-size: 12.5px; margin-top: 6px; }

/* PAIR's own lockup (symbol, PAIR and the full name), in their brand red #B10932 */
.brand__logo { display: block; height: 72px; width: auto; }
.nav__in { min-height: 92px; }
.foot__logo { width: 150px; aspect-ratio: 2056 / 1347; background: var(--paper); -webkit-mask: url(../img/pair-lockup.svg) center / contain no-repeat; mask: url(../img/pair-lockup.svg) center / contain no-repeat; }
@media (max-width: 900px) { .brand__logo { height: 58px; } .nav__in { min-height: 80px; } }

/* the "to confirm" list in the concept bar */
.concept { position: relative; z-index: 70; }
.tkbar { display: inline-block; }
.tkbar summary { cursor: pointer; list-style: none; display: inline; font-weight: 600; }
.tkbar summary::-webkit-details-marker { display: none; }
.tkbar__panel { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); margin-top: 6px; text-align: left;
  background: #FBF6EE; color: var(--ink); border-radius: 10px; padding: 10px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .45); }
.tkbar__panel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
.tkbar__panel a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.tkbar__panel a:hover { background: rgba(231, 176, 35, .18); }
.tkbar__panel b { font-weight: 600; font-size: 14px; }
.tkbar__panel span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.tkbar__panel p { margin: 8px 10px 4px; font-size: 12.5px; color: var(--ink-3); }
.tkbar__panel p a { display: inline; padding: 0; color: var(--red); text-decoration: underline; }
.tk.is-target { animation: tkFlash 1.1s ease 3; box-shadow: 0 0 0 4px rgba(231, 176, 35, .45); }
@keyframes tkFlash { 50% { box-shadow: 0 0 0 10px rgba(231, 176, 35, .2); } }
@media (max-width: 560px) { .tkbar__panel a { flex-direction: column; gap: 2px; } }

.video--player { display: block; width: 100%; background: #1F1712; object-fit: contain; }
.video--player::before { content: none; }

/* YouTube, click to play: a still image until pressed, so no YouTube code loads on page view */
.yt { margin: 28px 0; }
.yt__play, .yt iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; overflow: hidden; background: #1a1410; }
.yt__play { position: relative; padding: 0; cursor: pointer; }
.yt__play img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s; }
.yt__play:hover img, .yt__play:focus-visible img { opacity: 1; }
.yt__icon { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.yt__icon svg { width: 30px; height: 30px; margin-left: 4px; }
.yt figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
/* A story without a photo: the words take the image column too */
.entry--quote { grid-template-columns: 130px minmax(0, 1fr); }
.entry--quote .quote { margin: 4px 0 14px; }
.entry--quote .quote p { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; max-width: 48ch; }

/* Give in: KES / USD */
.givein { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: #EFE4D2; font: 600 13px/1 var(--sans); }
.givein > span { padding: 0 8px 0 10px; color: var(--ink-3); font-weight: 500; }
.givein label { position: relative; cursor: pointer; }
.givein input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.givein b { display: block; padding: 8px 14px; border-radius: 999px; color: var(--ink-2); }
.givein input:checked + b { background: var(--red); color: #fff; }
.givein input:focus-visible + b { outline: 2px solid var(--ink); outline-offset: 2px; }