/* ═══════════════════════════════════════════════════════════════════════
   EDGE WORLDWIDE — EDITORIAL HUMANISM / INSTITUTIONAL CONFIDENCE
   Design system layer. Loads after style.css and motion.css.

   Four colour families, no more: forest/ink (institutional depth),
   parchment/sage (reading surfaces), terracotta (emphasis), moss
   (supporting detail). No gold, no gradient text, no glass, no grain.

   Contract with the existing failure protections — do not break these:
   · Reveal states stay gated on html.js.motion-ready, never on .js alone.
   · Navigation lives entirely in style.css so every page shares it and the
     four JavaScript degradation states behave identically.
   · No infinite motion. Depth comes from surfaces, rules and composition.
   · No remote font, script or asset is referenced.
   ═══════════════════════════════════════════════════════════════════════ */

.rd{
  --f-forest:#2a3226;--f-forest2:#333c2e;--f-forest3:#414a3b;
  --f-ink:#191a16;--f-ink2:#3a3c35;--f-body:#5a5a52;
  --f-parch:#f3f3ee;--f-sage:#e7eae1;
  --f-terra:#92492b;--f-terra-d:#7a3a20;--f-terra-l:#cf9878;
  --f-moss:#a3ab8d;--f-moss-d:#5b6349;
  --f-line:#dedbd2;--f-line-d:#c4c0b4;
  --f-gut:clamp(18px,2.2vw,34px);
  --f-max:1280px;
  background:#fff;color:var(--f-ink);font-size:16px;line-height:1.6
}

/* ── GRID ─────────────────────────────────────────────────────────────
   Column classes set only the END, so each needs an explicit default
   START or it auto-places and drifts. The .sN classes override it. */
.rd .fg{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gut)}
.rd .c3{grid-column-end:span 3}.rd .c4{grid-column-end:span 4}
.rd .c5{grid-column-end:span 5}.rd .c6{grid-column-end:span 6}
.rd .c7{grid-column-end:span 7}.rd .c8{grid-column-end:span 8}
.rd .c9{grid-column-end:span 9}.rd .c12{grid-column-end:span 12}
.rd .c3,.rd .c4,.rd .c5,.rd .c6,.rd .c7,.rd .c8,.rd .c9,.rd .c12{grid-column-start:1}
.rd .s2{grid-column-start:2}.rd .s5{grid-column-start:5}.rd .s6{grid-column-start:6}
.rd .s7{grid-column-start:7}.rd .s8{grid-column-start:8}.rd .s9{grid-column-start:9}
/* Grid items must fill their span, or they shrink-wrap and centre */
.rd .fg>*{justify-self:stretch;align-self:start;width:auto;min-width:0;margin-left:0;margin-right:0}
.rd .wrap{max-width:var(--f-max);margin:0 auto;padding:0 clamp(22px,4vw,56px)}

/* ── TYPE ─────────────────────────────────────────────────────────────
   Serif carries statements and history; sans carries function and record.
   Headings are proportionate to their importance, not uniformly huge. */
.rd h1,.rd h2,.rd h3,.rd h4{font-family:var(--disp);font-weight:500;letter-spacing:-.018em;text-wrap:pretty;color:var(--f-ink)}
.rd .display{font-size:clamp(34px,4.4vw,62px);line-height:1.04;font-weight:500;letter-spacing:-.026em}
.rd .h-sec{font-size:clamp(27px,3.2vw,46px);line-height:1.07;font-weight:500;letter-spacing:-.022em}
.rd .h-sub{font-family:var(--disp);font-size:clamp(20px,2vw,28px);line-height:1.16;font-weight:500;letter-spacing:-.014em}
.rd .statement{max-width:20ch}
.rd .lead{font-family:var(--disp);font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--f-ink2);font-weight:400;max-width:46ch}
.rd .body{font-family:var(--rsans);font-size:clamp(14.5px,1.02vw,16px);line-height:1.75;color:var(--f-body);max-width:68ch}
.rd .stack>*+*{margin-top:18px}
.rd .ed-head{margin-bottom:clamp(28px,3.2vw,44px)}
/* The uppercase label. Used where it genuinely identifies a section —
   never as a decorative opener on every block, and never with a dash. */
.rd .kicker{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-t);display:inline-block}
.rd .kicker::before,.rd .kicker::after{content:none!important;display:none!important}
.rd .eyrow{margin-bottom:22px}
.rd .sec-dark .kicker,.rd .sec-deep .kicker,.rd .ch-dark .kicker{color:var(--f-terra-l)}

/* ── LINKS AND ACTIONS ────────────────────────────────────────────────
   A hierarchy: primary button, secondary button, editorial text link. */
/* .ch-dark is a light panel, so an on-dark link inside it reverts to green */
.rd .ch-dark .tlink.on-dark{color:var(--f-forest);border-color:var(--f-forest)}
.rd .ch-dark .tlink.on-dark:hover{color:#1c221a;border-color:#1c221a}

/* Interactive text is GREEN site-wide; terracotta is reserved for emphasis
   marks and accents, never for links. On dark grounds the link inverts to
   white rather than using a green that would fail against green. */
.rd a{color:var(--f-forest);text-decoration:none}
.rd a:hover{color:#1c221a}
.rd .tlink{font-family:var(--rsans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--f-forest);display:inline-block;border-bottom:2px solid var(--f-forest);padding-bottom:4px;transition:color .18s,border-color .18s}
.rd .tlink:hover{color:#1c221a;border-color:#1c221a}
.rd .tlink.on-dark,.rd .sec-dark .tlink,.rd .sec-deep .tlink,.rd .hero .tlink{color:#fff;border-color:rgba(255,255,255,.5)}
.rd .tlink.on-dark:hover,.rd .sec-dark .tlink:hover,.rd .sec-deep .tlink:hover,.rd .hero .tlink:hover{color:#fff;border-color:#fff}
.rd .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:13px 28px;font-family:var(--rsans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;border-radius:2px;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.rd .btn-terra{background:var(--f-terra);color:#fff;border-color:var(--f-terra)}
.rd .btn-terra:hover{background:var(--f-terra-d);border-color:var(--f-terra-d);color:#fff}
.rd .btn-dark{background:var(--f-ink);color:#fff;border-color:var(--f-ink)}
.rd .btn-dark:hover{background:#000;border-color:#000;color:#fff}
.rd .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.rd .btn-ghost:hover{background:#fff;color:var(--f-ink);border-color:#fff}
.rd a:focus-visible,.rd button:focus-visible,.rd input:focus-visible{outline:3px solid var(--f-terra);outline-offset:3px}
.rd .hero a:focus-visible,.rd .sec-dark a:focus-visible,.rd .sec-deep a:focus-visible,
.rd .rfooter a:focus-visible,.rd .rfooter button:focus-visible{outline-color:var(--f-terra-l)}

/* ── SECTION SURFACES · three levels, plus a deliberate emphasis ground ── */
.rd .sec{padding:clamp(56px,7vw,110px) 0}
.rd .sec-bone{background:var(--f-sage)}
.rd .sec-parch{background:var(--f-parch)}
.rd .sec-sage{background:var(--f-sage)}
.rd .sec-dark{background:var(--f-forest2);color:#fff}
.rd .sec-deep{background:var(--f-forest);color:#fff}
.rd .sec-dark h1,.rd .sec-dark h2,.rd .sec-dark h3,
.rd .sec-deep h1,.rd .sec-deep h2,.rd .sec-deep h3,.rd .sec-deep dd{color:#fff}
.rd .sec-dark .body,.rd .sec-deep .body{color:rgba(255,255,255,.75)}
.rd .sec-dark .lead,.rd .sec-deep .lead{color:rgba(255,255,255,.9)}
.rd .sec-rule{border-top:1px solid var(--f-line)}
.rd .sec-tight{padding:clamp(40px,4.6vw,68px) 0}

/* ── HERO ─────────────────────────────────────────────────────────────
   Photograph beside the statement. The descriptor above the headline is a
   quiet standfirst, not an uppercase eyebrow. */
.rd .hero{position:relative;display:block;color:#fff;overflow:hidden;background:var(--f-forest);height:auto;min-height:0}
.rd .hero-body{display:block;padding-top:clamp(72px,8.5vh,112px);padding-bottom:clamp(28px,4vh,56px)}
.rd .hero-head{align-items:center}
.rd .hero-descriptor{font-family:var(--rsans);font-size:12.5px;line-height:1.6;letter-spacing:.02em;color:rgba(255,255,255,.64);margin:0 0 clamp(20px,2.4vw,28px);padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.2);display:inline-block}
.rd .hero h1{color:#fff;max-width:26ch;margin:0}
.rd .hero-intro{margin-top:clamp(20px,2.4vw,28px);max-width:46ch}
.rd .hero-sub{font-family:var(--disp);font-size:clamp(16.5px,1.32vw,20px);line-height:1.6;color:rgba(255,255,255,.85);font-weight:400;margin:0}
.rd .hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,32px)}
.rd .hero-bg{position:absolute;inset:0;z-index:0;display:block;line-height:0}
/* object-position keeps the lower band of the frame in view. */
.rd .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:56% 78%;display:block}
.rd .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(24,28,20,.93) 0%,rgba(24,28,20,.87) 26%,rgba(24,28,20,.5) 50%,rgba(24,28,20,.14) 72%,rgba(24,28,20,.06) 100%),
    linear-gradient(180deg,var(--f-forest) 0%,rgba(24,28,20,.1) 16%,rgba(24,28,20,0) 60%,rgba(20,24,16,.34) 100%)}
.rd .hero-body{position:relative;z-index:2;display:block;padding-top:clamp(92px,13vh,150px);padding-bottom:0}
.rd .hero-type{max-width:none}
.rd .hero h1{color:#fff;max-width:20ch;margin:0}
.rd .hero-intro{margin-top:clamp(18px,2.2vw,26px);max-width:52ch}

.rd .hero-meta{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1.15fr);gap:0;max-width:none;width:100%;border-top:1px solid rgba(255,255,255,.28);margin-top:clamp(48px,7vh,96px);padding-top:0}
.rd .hero-meta::before{content:"";position:absolute;inset:0 -24px -8px -24px;z-index:-1;background:linear-gradient(180deg,rgba(16,26,11,.34),rgba(16,26,11,.52));pointer-events:none}
.rd .hmi{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,26px) clamp(26px,3vw,44px) clamp(34px,4.2vw,52px) 0;border-right:1px solid rgba(255,255,255,.16);min-width:0}
.rd .hmi{padding-left:clamp(22px,2.6vw,38px)}
.rd .hmi:first-child{padding-left:0}
.rd .hmi:last-child{border-right:none;padding-right:0}
.rd .hmi span{display:block;font-family:var(--rsans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#cbbfae;margin-bottom:10px;white-space:nowrap}
.rd .hmi strong{font-family:var(--disp);font-size:clamp(16px,1.25vw,19px);font-weight:500;color:#fff;line-height:1.35;display:block;letter-spacing:.005em;text-wrap:pretty}

/* ── VALUES BAND ─────────────────────────────────────────────────── */
.rd .vband{background:var(--f-parch);color:var(--f-ink);padding:clamp(38px,4.2vw,58px) 0;border-bottom:1px solid var(--f-line)}
.rd .vband-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:clamp(18px,2.2vw,26px)}
.rd .vband-t{font-family:var(--disp);font-size:clamp(24px,2.4vw,33px);font-weight:400;letter-spacing:-.022em;line-height:1.1;text-transform:none;color:var(--f-ink);margin:0}
.rd .vband-s{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--f-moss-d);margin:0}
/* Each value is paired with a geometric mark in a tinted disc, so the six
   read as distinct principles rather than a single undifferentiated row.
   Three brand accents rotate across the set; the discs carry a tint of the
   same hue so nothing needs a fourth colour. */
.rd .vgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:clamp(14px,1.6vw,20px)}
/* One line weight on all four sides, in the brand green, square corners —
   so the six cards read as an even grid rather than top-ruled panels. */
.rd .vgrid li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.2vw,14px);padding:clamp(18px,2vw,26px) clamp(12px,1.4vw,18px);background:#fff;border:1px solid var(--f-moss);border-radius:0;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
@media(hover:hover) and (pointer:fine){.rd .vgrid li:hover{transform:translateY(-3px);border-color:var(--f-line-d);box-shadow:0 8px 20px rgba(24,24,15,.07)}}
@media(prefers-reduced-motion:reduce){.rd .vgrid li{transition:none}.rd .vgrid li:hover{transform:none}}

.rd .vmark{width:clamp(48px,4.4vw,62px);height:clamp(48px,4.4vw,62px);border-radius:50%;display:grid;place-items:center;flex:none}
.rd .vmark svg{width:52%;height:52%;display:block;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* The Cambodia outline is a closed shape, not an open glyph — a hair lighter
   so the enclosed form does not read heavier than its neighbours. */
.rd .vmark-map svg{stroke-width:1.5;width:68%;height:68%;stroke-linejoin:miter;stroke-miterlimit:2.4}
/* Closed single-contour shape: sits a touch smaller and lighter than the open
   glyphs so its enclosed mass matches their optical weight. */
.rd .vmark-heart svg{width:56%;height:56%;stroke-width:1.55}
.rd .vgrid li:nth-child(3n+1) .vmark{background:rgba(90,110,58,.13);color:var(--f-moss-d)}
.rd .vgrid li:nth-child(3n+2) .vmark{background:rgba(61,74,42,.11);color:var(--f-forest2)}
.rd .vgrid li:nth-child(3n+3) .vmark{background:rgba(28,42,20,.09);color:var(--f-forest)}
.rd .vlabel{font-family:var(--disp);font-size:clamp(14px,1.2vw,17px);font-weight:500;line-height:1.25;letter-spacing:-.008em;color:var(--f-ink);max-width:13ch}
.rd .vgrid li{cursor:default}
.rd .vmark{transition:transform .34s cubic-bezier(.34,1.2,.64,1),background-color .3s ease,box-shadow .3s ease}
.rd .vmark svg{transition:transform .34s cubic-bezier(.34,1.2,.64,1)}
.rd .vlabel{transition:transform .3s cubic-bezier(.2,.6,.2,1),color .3s ease}
.rd .vgrid li:hover .vmark,.rd .vgrid li:focus-within .vmark{transform:translateY(-5px);box-shadow:0 8px 20px -10px rgba(28,42,20,.42)}
.rd .vgrid li:hover .vmark svg,.rd .vgrid li:focus-within .vmark svg{transform:scale(1.09)}
.rd .vgrid li:hover .vlabel,.rd .vgrid li:focus-within .vlabel{transform:translateY(-3px)}
.rd .vgrid li:nth-child(3n+1):hover .vmark{background:rgba(90,110,58,.22)}
.rd .vgrid li:nth-child(3n+2):hover .vmark{background:rgba(61,74,42,.19)}
.rd .vgrid li:nth-child(3n+3):hover .vmark{background:rgba(28,42,20,.16)}
@media(prefers-reduced-motion:reduce){
  .rd .vmark,.rd .vmark svg,.rd .vlabel{transition:background-color .2s ease,color .2s ease}
  .rd .vgrid li:hover .vmark,.rd .vgrid li:hover .vmark svg,.rd .vgrid li:hover .vlabel{transform:none}
}

/* Reveal: discs settle in, labels follow, staggered across the row. Runs
   once via the site's existing observer, then stays put. */
.js.motion-ready .rd .vgrid.reveal{transform:none}
.js.motion-ready .rd .vgrid.reveal:not(.is-revealed){opacity:1}
.js.motion-ready .rd .vgrid.reveal:not(.is-revealed) .vmark{opacity:0;transform:scale(.82)}
.js.motion-ready .rd .vgrid.reveal:not(.is-revealed) .vlabel{opacity:0;transform:translateY(7px)}
.js.motion-ready .rd .vgrid.reveal.is-revealed .vmark{opacity:1;transform:none;transition:opacity .3s ease,transform .38s cubic-bezier(.34,1.3,.64,1)}
.js.motion-ready .rd .vgrid.reveal.is-revealed .vlabel{opacity:1;transform:none;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.6,.2,1)}
.rd .vgrid.reveal.is-revealed li:nth-child(1) .vmark{transition-delay:0.040s}
.rd .vgrid.reveal.is-revealed li:nth-child(1) .vlabel{transition-delay:0.100s}
.rd .vgrid.reveal.is-revealed li:nth-child(2) .vmark{transition-delay:0.115s}
.rd .vgrid.reveal.is-revealed li:nth-child(2) .vlabel{transition-delay:0.175s}
.rd .vgrid.reveal.is-revealed li:nth-child(3) .vmark{transition-delay:0.190s}
.rd .vgrid.reveal.is-revealed li:nth-child(3) .vlabel{transition-delay:0.250s}
.rd .vgrid.reveal.is-revealed li:nth-child(4) .vmark{transition-delay:0.265s}
.rd .vgrid.reveal.is-revealed li:nth-child(4) .vlabel{transition-delay:0.325s}
.rd .vgrid.reveal.is-revealed li:nth-child(5) .vmark{transition-delay:0.340s}
.rd .vgrid.reveal.is-revealed li:nth-child(5) .vlabel{transition-delay:0.400s}
.rd .vgrid.reveal.is-revealed li:nth-child(6) .vmark{transition-delay:0.415s}
.rd .vgrid.reveal.is-revealed li:nth-child(6) .vlabel{transition-delay:0.475s}

@media(max-width:560px){
  .rd .vgrid{grid-template-columns:repeat(2,1fr)}
  
  
  
  
}

/* ── CREDENTIAL STRIP · evidence, quiet and separate ────────────────── */
.rd .cstrip{background:#fff;border-bottom:1px solid var(--f-line);padding:clamp(20px,2.2vw,28px) 0}
.rd .cstrip-in{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;justify-content:space-between}
.rd .cred-note{font-family:var(--rsans);font-size:12.5px;line-height:1.7;color:var(--f-body);margin:0;max-width:74ch;flex:1 1 440px}
.rd .cred-badges{display:flex;gap:8px;flex-wrap:wrap}
.rd .cstrip .fbadge{display:inline-flex;align-items:center;min-height:36px;font-family:var(--rsans);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--f-ink2);border:1px solid var(--f-line-d);padding:8px 13px;transition:border-color .18s,color .18s}
.rd .cstrip a:hover .fbadge{border-color:var(--f-terra);color:var(--f-terra)}

/* ── CHAPTER SECTION · the report's principal form ────────────────────
   A marginal number, a small label, a serif title, then real running
   prose in two columns. */
.rd .ch{padding:clamp(50px,5.8vw,88px) 0;background:#fff}
/* The Approach/Origin material now continues inside the About section
   rather than forming its own band, so the two read as one introduction. */
.ch-cont{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,3.4vw,52px);align-items:center;margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(28px,3.2vw,42px);border-top:1px solid var(--f-line)}
.ch-cont-t{font-family:var(--disp);font-size:clamp(23px,2.2vw,31px);font-weight:400;line-height:1.14;letter-spacing:-.022em;color:var(--f-ink);margin:10px 0 14px;text-wrap:pretty}
.ch-links{display:flex;flex-wrap:wrap;gap:10px clamp(20px,2.4vw,32px)}
@media(max-width:860px){.ch-cont{grid-template-columns:1fr;gap:24px}}
.rd .ch-dark{background:var(--f-sage);color:var(--f-ink)}
.rd .ch-head{display:block;padding-bottom:clamp(20px,2.4vw,32px);margin-bottom:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--f-line)}
.rd .ch-dark .ch-head{border-bottom-color:var(--f-line-d)}
.rd .ch-label{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-t);margin:0 0 12px}
.rd .ch-dark .ch-label{color:var(--terra-t)}
.rd .ch-t{font-family:var(--disp);font-size:clamp(27px,3.3vw,48px);font-weight:500;line-height:1.07;letter-spacing:-.024em;margin:0;max-width:26ch}
.rd .ch-dark .ch-t{color:var(--f-ink)}
.rd .ch-more{margin-top:clamp(22px,2.4vw,32px)}
/* Two-column running prose, divided by a column rule — not a card */
.rd .prose2{columns:2;column-gap:clamp(28px,3.6vw,60px);column-rule:1px solid var(--f-line)}
.rd .ch-dark .prose2{column-rule-color:var(--f-line-d)}
.rd .prose2 p{font-family:var(--rsans);font-size:clamp(14.5px,1.02vw,16px);line-height:1.75;color:var(--f-body);margin:0 0 1.1em;max-width:none;break-inside:avoid-column}
.rd .ch-dark .prose2 p{color:var(--f-body)}
.rd .prose2 .p-open{font-family:var(--disp);font-size:clamp(17px,1.42vw,21px);line-height:1.55;color:var(--f-ink2);margin-bottom:1em}
.rd .ch-dark .prose2 .p-open{color:var(--f-ink2)}
.rd .prose2-tight{margin-bottom:clamp(32px,3.8vw,56px)}

/* ── QUIET SECTION · a deliberate breather, low density ─────────────── */
.rd .quiet{padding:clamp(40px,4.6vw,66px) 0;background:var(--f-sage)}
.rd .q-t{font-family:var(--disp);font-size:clamp(22px,2.3vw,32px);font-weight:500;line-height:1.12;letter-spacing:-.018em;margin:0;max-width:18ch}
.rd .q-body .lead{margin:0 0 14px;max-width:56ch}
.rd .q-body .body{margin:0 0 20px;max-width:60ch}

/* ── REGISTER · the Hub framework as numbered ledger rows ───────────── */
.rd .register{border-top:1px solid var(--f-line-d)}
/* Homepage Hub preview: four named choices, 2×2 on desktop. The full
   descriptions live on hub.html — each tile links straight there. */
/* Four across on desktop, unboxed: mark and label only, no card or rule.
   The section's own dark ground carries them. */
.hgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,28px);margin-top:clamp(26px,3vw,38px)}
/* Light ground: this band renders on sand, so the tiles carry ink on white
   like .gichoices rather than the white-on-translucent treatment a dark
   ground would need. */
.hgrid li{display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--f-moss-d);font-family:var(--disp);font-size:clamp(18px,1.65vw,23px);line-height:1.24;letter-spacing:-.016em;text-wrap:pretty}
@media(hover:hover) and (pointer:fine){.rd .hgrid a:hover{transform:translateY(-2px);border-color:var(--f-moss);box-shadow:0 8px 20px rgba(24,24,15,.07)}.rd .hgrid a:hover::after{opacity:1}}
@media(prefers-reduced-motion:reduce){.hgrid a{transition:none}.hgrid a:hover{transform:none}}
.rd .reg-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(14px,2vw,44px);align-items:start;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.13)}
.rd .reg-row h3{font-family:var(--disp);font-size:clamp(18px,1.7vw,24px);font-weight:500;line-height:1.16;color:var(--f-ink);margin:0;letter-spacing:-.014em}
.rd .reg-row p{font-family:var(--rsans);font-size:clamp(14px,1vw,15.5px);line-height:1.75;color:var(--f-body);margin:0}
.rd .reg-row{position:relative;transition:transform .38s cubic-bezier(.2,.6,.2,1),background-color .38s ease}
.rd .reg-row::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--f-terra);transform:scaleX(0);transform-origin:left center;transition:transform .44s cubic-bezier(.4,.1,.2,1)}
.rd .reg-row h3,.rd .reg-row p{transition:color .32s ease,transform .38s cubic-bezier(.2,.6,.2,1)}
.rd .reg-row::before{content:'';position:absolute;inset:0 calc(-1 * clamp(14px,1.6vw,26px));background:var(--f-sage);opacity:0;transition:opacity .34s ease;z-index:0}
.rd .reg-row>*{position:relative;z-index:1}
.rd .reg-row:hover{transform:translateX(clamp(4px,.5vw,9px))}
.rd .reg-row:hover::before{opacity:1}
.rd .reg-row:hover::after{transform:scaleX(1)}
.rd .reg-row:hover h3{color:var(--f-forest)}
.rd .reg-row:hover p{color:var(--f-ink2)}

.js.motion-ready .rd .register.rise:not(.m-in) .reg-row{opacity:0;transform:translateY(14px)}
.js.motion-ready .rd .register.rise.is-revealed .reg-row{opacity:1;transform:none;transition:opacity .44s ease,transform .5s cubic-bezier(.2,.6,.2,1)}
.rd .register.rise.is-revealed .reg-row:nth-child(1){transition-delay:0.05s}
.rd .register.rise.is-revealed .reg-row:nth-child(2){transition-delay:0.14s}
.rd .register.rise.is-revealed .reg-row:nth-child(3){transition-delay:0.23s}
.rd .register.rise.is-revealed .reg-row:nth-child(4){transition-delay:0.32s}
@media(prefers-reduced-motion:reduce){
  .rd .reg-row,.rd .reg-row h3,.rd .reg-row p{transition:color .2s ease}
  .rd .reg-row:hover{transform:none}
  .js.motion-ready .rd .register.rise:not(.m-in) .reg-row{opacity:1;transform:none}
}

/* ── PATHWAYS · three cards, restrained lift on hover ───────────────── */
.rd .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);align-items:stretch}
/* Whole tile is the link, so the target is the full card and one tab
   stop covers it. Detailed explanations stay on the destination pages. */
.gichoices{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(24px,2.8vw,36px)}
/* Hairline box: one 1px green line on all four sides, square corners — the
   same treatment as the core-values cards and Hub tiles, so the three
   families of choice tiles read as one system. */
.gichoices a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;min-height:92px;padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px);background:#fff;border:1px solid var(--f-moss);border-radius:0;color:var(--f-ink);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}

.gichoices .gi-t{font-family:var(--disp);font-size:clamp(16px,1.5vw,20px);line-height:1.25;letter-spacing:-.014em;text-wrap:pretty}
@media(hover:hover) and (pointer:fine){.rd .gichoices a:hover{transform:translateY(-3px);border-color:var(--f-moss);box-shadow:0 10px 24px rgba(24,24,15,.08)}}
.gichoices a:focus-visible{outline:2px solid var(--f-terra);outline-offset:3px}
/* Three across is too tight for these labels below ~820px. */
@media(max-width:820px){.rd .gichoices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.gichoices a{transition:none}.gichoices a:hover{transform:none}}
.rd .path{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(90,110,58,.07),rgba(255,255,255,0) 42%),#fff;border:1px solid var(--f-line-d);border-top:2px solid var(--f-moss);border-radius:2px;padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);transition:transform .34s cubic-bezier(.2,.6,.2,1),box-shadow .34s ease,border-top-color .3s ease,background-color .3s ease}
.rd .path h3,.rd .path .path-h{color:var(--f-forest);transition:color .3s ease}
.rd .path p{transition:color .3s ease}
.rd .path:hover,.rd .path:focus-within{border-top-color:var(--f-forest);transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(28,42,20,.5)}

.rd .path:hover,.rd .path:focus-within{background:var(--f-moss);border-color:var(--f-moss-d)}
.rd .path:hover h3,.rd .path:focus-within h3,.rd .path:hover .path-h,.rd .path:focus-within .path-h{color:#fff}
.rd .path:hover p,.rd .path:focus-within p{color:rgba(255,255,255,.9)}
.rd .path:hover .tlink,.rd .path:focus-within .tlink{color:#fff;border-color:rgba(255,255,255,.55)}
.rd .path:hover .tlink:hover{color:#fff;border-color:#fff}
.rd .path{position:relative;overflow:hidden}
.rd .path::before{content:attr(data-n);position:absolute;bottom:clamp(-12px,-1vw,-4px);right:clamp(12px,1.5vw,22px);left:auto;font-family:var(--disp);font-size:clamp(56px,6vw,88px);font-weight:500;line-height:1;letter-spacing:-.04em;color:rgba(28,42,20,.13);pointer-events:none;z-index:0;transition:color .34s ease,transform .44s cubic-bezier(.2,.6,.2,1)}
.rd .path-in{position:relative;z-index:1}
.rd .path:hover::before,.rd .path:focus-within::before{color:rgba(255,255,255,.26);transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.rd .path::before{transition:color .2s ease}.rd .path:hover::before{transform:none}}
@media(prefers-reduced-motion:reduce){.rd .path{transition:border-top-color .2s ease}.rd .path:hover,.rd .path:focus-within{transform:none;box-shadow:none}}
.rd .path-in{display:flex;flex-direction:column;flex:1;min-width:0}
.rd .path h3{font-family:var(--disp);font-size:clamp(18px,1.65vw,23px);font-weight:500;line-height:1.16;letter-spacing:-.014em;margin:0 0 12px}
.rd .path p{font-family:var(--rsans);font-size:14.5px;line-height:1.72;color:var(--f-body);margin:0 0 22px}
.rd .path .tlink{margin-top:auto;align-self:flex-start;max-width:calc(100% - clamp(56px,6vw,88px))}
/* Deep brand green. At 12.5px this is small text needing 4.5:1; --f-forest
   resolves to #1c2a14, giving 15.1:1 on the light ground. */
.rd .dgr-line{font-family:var(--rsans);font-size:12.5px;line-height:1.75;color:var(--f-forest,#1c2a14);margin:clamp(20px,2.2vw,28px) 0 0;max-width:80ch}

/* ── PARTNERS · a sage panel of evenly-weighted marks, no rules ──────── */
.rd .partners{margin-top:clamp(32px,3.6vw,52px);padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,34px) clamp(24px,2.8vw,36px);background:#fff;border-top:0}
.rd .partners .body{margin:0;max-width:66ch}
.rd .partners .ch-label{margin-bottom:14px}
.rd .plist{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(20px,2.2vw,28px);border-top:0}
.rd .plist li{padding:0;border:0;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.rd .plist li>span:first-child{width:100%}
.rd .plist strong{font-family:var(--disp);font-size:clamp(13px,1vw,15px);font-weight:500;color:var(--f-ink2);line-height:1.34;text-wrap:pretty}

/* ── FEATURE (homepage) · the lead story, given real presence ────────── */
.rd .feat{padding:clamp(46px,5.4vw,80px) 0;background:var(--f-parch)}
.rd .feat-head{max-width:52ch;margin-bottom:clamp(26px,3vw,42px)}
.rd .feat-intro{font-family:var(--disp);font-size:clamp(21px,2.1vw,29px);font-weight:500;line-height:1.16;letter-spacing:-.016em;margin:0}
.rd .feat-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,3vw,48px);align-items:center;text-decoration:none;color:inherit;border-top:1px solid var(--f-line-d);padding-top:clamp(22px,2.6vw,34px)}
.rd .feat-img{margin:0;overflow:hidden;aspect-ratio:3/2}
.rd .feat-img img{width:100%;height:100%;object-fit:cover;display:block}
.rd .feat-meta{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-t);margin:0 0 14px}
.rd .feat-h{font-family:var(--disp);font-size:clamp(25px,2.9vw,40px);font-weight:500;line-height:1.08;letter-spacing:-.024em;margin:0 0 14px}
.rd .feat-card:hover .feat-h{color:#1c221a}
/* The card is one anchor, so this label cannot be a nested <a>. It gets the
   hover response instead, so it reads as the interactive element it is. */
.rd .feat-card .tlink{transition:color .18s,border-color .18s}
.rd .feat-card:hover .tlink,.rd .feat-card:focus-visible .tlink{color:#1c221a;border-color:#1c221a}
.rd .feat-deck{font-family:var(--disp);font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--f-ink2);margin:0 0 22px;max-width:42ch}

/* ── FEATURE (news page) · editorial spread ─────────────────────────── */
.rd .feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,3vw,48px);align-items:center;text-decoration:none;color:inherit;border-top:1px solid var(--f-line-d);border-bottom:1px solid var(--f-line-d);padding:clamp(24px,3vw,40px) 0;background:#fff}
.rd .feature-img{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--f-sage)}
.rd .feature-img img{width:100%;height:100%;object-fit:cover;display:block}
.rd .feature-h{font-family:var(--disp);font-size:clamp(26px,3vw,42px);font-weight:500;line-height:1.08;letter-spacing:-.022em;color:var(--f-ink);margin:16px 0 14px}
.rd .feature:hover .feature-h{color:#1c221a}
.rd .feature-deck{font-family:var(--disp);font-size:clamp(16.5px,1.32vw,20px);line-height:1.55;color:var(--f-ink2);margin:0 0 22px;max-width:44ch}

/* ── NEWSLETTER · a utility strip, not a headline moment ────────────── */
.rd .nl{background:var(--f-sage);border-top:1px solid var(--f-line);padding:clamp(38px,4.4vw,62px) 0}
.rd .nl h2,.rd .nl .ch-label{color:var(--f-forest)}
.rd .nl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,3vw,52px);align-items:start}
.rd .nl h2{font-family:var(--disp);font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.14;letter-spacing:-.016em;margin:0}
.rd .nl-lead .ch-label{margin-bottom:12px}
/* max-width:none is load-bearing here too: style.css caps .rd .nl-form at
   440px, and an equal-specificity rule that omits the property leaves it in
   force. */
.rd .nl-form{max-width:none;width:100%}
.rd .nl-row{display:flex;gap:10px;flex-wrap:wrap}
.rd .nl-input{flex:1;min-width:190px;height:48px;background:#fff;border:1px solid #b9c0ae;border-radius:2px;padding:0 14px;font-family:var(--rsans);font-size:15px;color:var(--f-ink)}
.rd .nl-input::placeholder{color:#8a857a}
.rd .nl-fine{font-family:var(--rsans);font-size:12px;line-height:1.7;color:var(--f-body);margin-top:14px;max-width:64ch}
.rd .nl-fine a{color:var(--f-terra-d);text-decoration:underline;text-underline-offset:2px}
.rd .nl-fine{color:var(--f-ink2)}
.rd .form-status{font-family:var(--rsans);font-size:13px;color:var(--f-terra-d);margin-top:8px}

/* ── GOVERNANCE · alternating record spreads ──────────────────────────
   The heading column swaps side each section and the surface changes with
   it. Headings stay FIRST in the DOM for reading order; grid placement,
   not source order, puts them on the right. */
.rd .gcol{position:sticky;top:24px;align-self:start}
.rd .fg>.gcol-right{grid-column:9 / span 4;grid-row:1}
.rd .fg>.gbody-left{grid-column:1 / span 7;grid-row:1}
.rd .gsub{font-family:var(--disp);font-size:clamp(16.5px,1.32vw,20px);line-height:1.5;color:var(--f-ink2);font-weight:400;margin-top:14px;max-width:24ch}
.rd .sec-deep .gsub{color:rgba(255,255,255,.9)}
.rd .grec{display:grid;gap:0;border-top:1px solid var(--f-line-d);margin:8px 0 4px;container-type:inline-size}
.rd .grec>div{display:grid;grid-template-columns:clamp(112px,11vw,150px) minmax(0,1fr);gap:clamp(14px,1.8vw,28px);padding:14px 0;border-bottom:1px solid var(--f-line);align-items:baseline}
/* Any record narrower than 340px stacks, whatever the viewport — this is
   what lets the same component sit in a 270px sidebar and a 700px column. */
@container (max-width:340px){
  .rd .grec>div{grid-template-columns:1fr;gap:5px;padding:13px 0}
}
/* Long values must break rather than overflow their cell */
.rd .grec dd{overflow-wrap:anywhere}
.rd .grec dt{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--f-moss-d)}
.rd .grec dd{font-family:var(--disp);font-size:clamp(15.5px,1.2vw,18px);font-weight:500;color:var(--f-ink);line-height:1.4}
.rd .sec-deep .grec{border-top-color:rgba(255,255,255,.28)}
.rd .sec-deep .grec>div{border-bottom-color:rgba(255,255,255,.16)}
.rd .sec-deep .grec dt{color:var(--f-moss)}
.rd .gov-links{list-style:none;display:block;margin-top:4px;max-width:none;width:100%}
.rd .gov-links li{border-bottom:1px solid var(--f-line)}
.rd .gov-links a{font-family:var(--rsans);font-size:14px;font-weight:600;color:var(--f-forest);text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;min-height:52px;padding:13px 0;transition:color .18s,padding-left .18s}
.rd .gov-links a:hover{color:#1c221a;padding-left:8px}
.rd .gl-a{font-size:15px;flex:none;color:var(--f-forest)}
.rd .sec-deep .gov-links li{border-bottom-color:rgba(255,255,255,.16)}
.rd .sec-deep .gov-links a,.rd .sec-deep .gl-a{color:#fff}

/* ── PERSON PAGE · a leadership profile, read as a document ───────────
   Deep masthead with the portrait beside the name, then one reading
   measure for the biography. Same surfaces and type scale as the rest of
   the system; no new colours, no new gestures. */
.rd .pers-hd{background:var(--f-forest);color:#fff;padding:clamp(40px,5vw,72px) 0 clamp(36px,4.4vw,64px)}
.rd .pers-back{font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;display:inline-block;margin-bottom:clamp(24px,3vw,38px)}
.rd .pers-back::before{content:'← '}
.rd .pers-back:hover{color:#fff}
.rd .pers-hd-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.rd .pers-kicker{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#e0ad8a;margin:0 0 clamp(14px,1.8vw,20px)}
.rd .pers-name{font-family:var(--disp);font-size:clamp(30px,4vw,56px);font-weight:500;line-height:1.04;letter-spacing:-.026em;color:#fff;margin:0}
.rd .pers-role{font-family:var(--disp);font-size:clamp(17px,1.5vw,22px);line-height:1.4;color:rgba(255,255,255,.88);font-weight:400;margin:clamp(14px,1.8vw,20px) 0 0;max-width:34ch}
.rd .pers-ext{margin:clamp(12px,1.6vw,18px) 0 0}
.rd .pers-ext a{font-family:var(--rsans);font-size:12.5px;font-weight:600;color:#e0ad8a;text-decoration:none;border-bottom:1px solid rgba(42,50,38,.45);padding-bottom:2px}
.rd .pers-ext a:hover{color:#fff;border-bottom-color:#fff}
.rd .pers-sub{font-family:var(--rsans);font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.72);margin:clamp(14px,1.8vw,20px) 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);max-width:52ch}
/* Single wide column variant, used when no portrait is present. */
.rd .pers-hd-solo{grid-template-columns:minmax(0,8fr)}
.rd .pers-hd-solo .pers-role{max-width:44ch}
.rd .pers-hd-solo .pers-sub{max-width:62ch}
.rd .pers-por{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--f-forest2)}
.rd .pers-por img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* Biography: one measure, centred, at document reading size */
.rd .pers-body{max-width:1280px;margin:0 auto;padding:clamp(40px,5vw,76px) clamp(22px,4vw,56px)}
.rd .pers-body p{font-family:var(--rsans);font-size:clamp(15.5px,1.1vw,17px);line-height:1.78;color:var(--f-ink2);max-width:66ch;margin:0 auto 1.35em}
.rd .pers-body .pers-open{font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--f-ink);max-width:46ch;margin-bottom:1.2em}
.rd .pers-foot{border-top:1px solid var(--f-line);padding:clamp(24px,2.8vw,38px) 0 clamp(40px,4.6vw,66px)}
.rd .pers-foot-in{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap}
@media(max-width:820px){
  .rd .pers-hd-grid{grid-template-columns:1fr;gap:26px}
  .rd .pers-por{order:-1;aspect-ratio:3/2}
  .rd .pers-por img{object-position:50% 18%}
}

/* ── IMAGE SLOT ───────────────────────────────────────
   Same component as style.css, scoped for .rd pages. */
.rd .imgslot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px dashed var(--f-line-d);border-radius:2px;background:repeating-linear-gradient(135deg,rgba(42,50,38,.045) 0 8px,transparent 8px 16px),var(--f-sage)}
.rd .imgslot span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--f-body);max-width:26ch}
.rd .imgslot::before{content:'IMAGE';position:absolute;top:10px;left:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.16em;color:var(--f-moss-d)}
.rd .imgslot-43{aspect-ratio:4/3}
.rd .imgslot-45{aspect-ratio:4/5}
.rd .imgslot-32{aspect-ratio:3/2}
/* Plain ratio only. A full-bleed band must be a direct child of a
   section wrapper — negative-margin bleed from inside a card, a
   multi-column flow or a grid cell misaligns and breaks the component. */
.rd .imgslot-wide{aspect-ratio:21/9}
/* On a deep ground the slot inverts so it stays visible */
.rd .hero .imgslot,.rd .sec-deep .imgslot,.rd .sec-dark .imgslot{border-color:rgba(255,255,255,.34);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px),rgba(255,255,255,.04)}
.rd .hero .imgslot span,.rd .sec-deep .imgslot span,.rd .sec-dark .imgslot span{color:rgba(255,255,255,.72)}
.rd .hero .imgslot::before,.rd .sec-deep .imgslot::before,.rd .sec-dark .imgslot::before{color:rgba(255,255,255,.6)}

/* ── CONTACT FORM ─────────────────────────────────────────────────────
   The form markup, ids and mailto action match the Support page; only
   the surrounding layout differs. */
.rd .contact-form{display:flex;flex-direction:column;gap:12px}
.rd .contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd .form-field{width:100%;min-height:48px;background:#fff;border:1px solid var(--f-line-d);border-radius:2px;padding:13px 14px;font-family:var(--rsans);font-size:15px;color:var(--f-ink)}
.rd .form-field::placeholder{color:#8a857a}
.rd textarea.form-field{min-height:150px;resize:vertical;line-height:1.65}
.rd .contact-form .btn{align-self:flex-start;margin-top:6px}
.rd .form-fine{font-family:var(--rsans);font-size:12px;line-height:1.7;color:var(--f-body);margin-top:6px;max-width:62ch}
.rd .form-fine a{color:var(--f-forest);text-decoration:underline;text-underline-offset:2px}
.rd .grec dd a{color:var(--f-forest);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){
  .rd .contact-form-row{grid-template-columns:1fr}
  .rd .contact-form .btn{align-self:stretch}
}

/* ══ SHARED MOTION VOCABULARY ═════════════════════════════════════════
   Three named behaviours, defined once and reused. Adding motion to a new
   component means adding its selector to a list here — not writing new
   rules — so the site keeps one motion language.

   .lift   hover/focus response for cards and framed blocks
   .rise   one-time entrance for grouped blocks, staggered by position
   .mark   one-time entrance for eyebrow labels

   Everything is gated on html.js.motion-ready, so a script failure leaves
   content visible and settled, and everything is removed outright under
   prefers-reduced-motion. No loops, no parallax, no scroll-linked position. */

/* ── LIFT · cards and squares ─────────────────────────────── */
.rd .lift,.rd .path,.rd .plist li,.rd .grec>div,.rd .feat-card,.rd .feature,.rd .otg-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rd .lift:hover,.rd .lift:focus-within,
.rd .path:hover,.rd .path:focus-within,
.rd .feat-card:hover,.rd .feat-card:focus-visible,
.rd .feature:hover,.rd .feature:focus-visible,
.rd .otg-card:hover,.rd .otg-card:focus-visible{
  transform:translateY(-4px);box-shadow:0 10px 26px rgba(25,26,22,.11)}
/* Ruled rows lift by ink, not by shadow — a shadow on a hairline row reads
   as a rendering artefact rather than elevation. */
.rd .grec>div:hover{transform:none;box-shadow:none;border-color:var(--f-forest)}

/* ── RISE · grouped blocks ───────────────────────────── */
.js.motion-ready .rd .rise>*{opacity:0;transform:translateY(14px)}
.js.motion-ready .rd .rise.is-revealed>*{opacity:1;transform:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.6,.2,1)}
.rd .rise.is-revealed>*:nth-child(1){transition-delay:.04s}
.rd .rise.is-revealed>*:nth-child(2){transition-delay:.12s}
.rd .rise.is-revealed>*:nth-child(3){transition-delay:.2s}
.rd .rise.is-revealed>*:nth-child(4){transition-delay:.28s}
.rd .rise.is-revealed>*:nth-child(5){transition-delay:.36s}
.rd .rise.is-revealed>*:nth-child(6){transition-delay:.44s}

/* ── MARK · eyebrow labels ────────────────────────────────── */
.js.motion-ready .rd .ch-label.mark,.js.motion-ready .rd .kicker.mark,
.js.motion-ready .rd .vband-t.mark,.js.motion-ready .rd .feat-meta.mark,
.js.motion-ready .rd .pers-kicker.mark,.js.motion-ready .rd .ahdr .eye.mark{
  opacity:0;transform:translateY(6px)}
.js.motion-ready .rd .mark.is-revealed{opacity:1;transform:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.6,.2,1)}

/* ── FOOTER · the closing page of an annual report ────────────────────
   Essential content is never rendered in low-opacity text. */
.rd .rfooter{background:var(--f-forest);color:#fff;padding:clamp(44px,5vw,68px) 0 0;border-top:2px solid var(--f-terra)}
.rd .footer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--f-gut) clamp(20px,2.4vw,40px);padding-bottom:clamp(40px,4.6vw,68px)}
.rd .footer-grid>div:first-child,.rd .footer-brand-col{grid-column:span 4}
.rd .footer-grid .fcol{grid-column:span 2}
.rd .footer-grid .fcol:nth-of-type(1){grid-column-start:6}

/* Two lines at desktop. min(100%,…) so the measure can never exceed the
   brand column at any viewport. This is the last .ftag rule in the cascade,
   so the width is set here rather than earlier where it would be overridden. */
.rd .ftag{font-family:var(--rsans);font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.84);max-width:min(100%,84ch);margin-top:20px}
.rd .fmeta{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(14px,1.6vw,26px);margin-top:26px;justify-content:start}
.rd .fmeta div{display:flex;flex-direction:column;gap:6px}
.rd .fmeta span{font-family:var(--rsans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--f-moss)}
.rd .fmeta strong{font-family:var(--disp);font-size:15.5px;font-weight:500;color:#fff;line-height:1.3}
.rd .fbadges{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.rd .rfooter .fbadge{display:inline-flex;align-items:center;min-height:36px;font-family:var(--rsans);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.32);padding:8px 13px;transition:border-color .18s,background .18s}
.rd .rfooter a:hover .fbadge{border-color:var(--f-terra-l);background:rgba(255,255,255,.06)}
.rd .fcol h2{font-family:var(--rsans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--f-moss);margin-bottom:18px;line-height:1.4}
.rd .fcol ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.rd .fcol a,.rd .fc a{font-family:var(--rsans);font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.88);text-decoration:none;transition:color .18s}
.rd .fcol a:hover,.rd .fc a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rd .fbase{border-top:1px solid rgba(255,255,255,.16);padding:22px 0 24px;display:flex;flex-wrap:wrap;gap:12px clamp(20px,3vw,40px);align-items:center;justify-content:space-between}
.rd .fbase>span{font-family:var(--rsans);font-size:12.5px;color:rgba(255,255,255,.76);letter-spacing:.01em}
.rd .fbase .fc-legal{margin-top:0;display:flex;gap:8px 14px;flex-wrap:wrap}
.rd .fbase .fc-legal a{font-family:var(--rsans);font-size:12.5px;color:rgba(255,255,255,.84);text-decoration:none}
.rd .fbase .fc-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ═══ RESPONSIVE · sections are recomposed, not merely collapsed ═══ */

@media(max-width:1180px){
  .rd .plist{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1024px){
  .rd .reg-row{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(12px,1.8vw,32px)}
  .rd .footer-grid>div:first-child,.rd .footer-brand-col{grid-column:span 12}
  .rd .footer-grid .fcol{grid-column:span 4}
  .rd .footer-grid .fcol:nth-of-type(1){grid-column-start:1}
}

@media(max-width:900px){
  /* Two rows of three: the thread ends at each row's edge */

  .rd .paths{grid-template-columns:1fr 1fr}
  .rd .nl-grid{grid-template-columns:1fr;gap:22px}
}

@media(max-width:820px){
  /* Spans collapse; hierarchy is carried by scale and rules instead */
  .rd .c3,.rd .c4,.rd .c5,.rd .c6,.rd .c7,.rd .c8,.rd .c9{grid-column-end:span 12}
  .rd .s2,.rd .s5,.rd .s6,.rd .s7,.rd .s8,.rd .s9{grid-column-start:1}
  .rd .fg>.gcol-right,.rd .fg>.gbody-left{grid-column:1 / span 12;grid-row:auto}
  .rd .gcol{position:static}
  .rd .gcol-right{margin-bottom:clamp(18px,2.4vw,28px)}
  .rd .grec>div{grid-template-columns:1fr;gap:6px;padding:13px 0}
  /* Photograph leads above the type */
  .rd .hero h1{max-width:24ch}
  .rd .hero-scrim{background:linear-gradient(180deg,rgba(22,26,18,.94) 0%,rgba(22,26,18,.86) 46%,rgba(22,26,18,.66) 72%,rgba(20,24,16,.78) 100%)}
  .rd .hero-bg img{object-position:64% 74%}
  .rd .hero-body{padding-top:clamp(64px,9vh,92px)}
  /* Prose returns to one column: two columns at this width is unreadable */
  .rd .prose2{columns:1;column-rule:none}
  .rd .feat-card,.rd .feature{grid-template-columns:1fr;gap:20px}
  .rd .feat-img,.rd .feature-img{order:-1}
  .rd .plist{grid-template-columns:repeat(2,1fr)}
  .rd .fbase{justify-content:flex-start;gap:14px}
}

@media(max-width:600px){
  /* Vertical chain: node left, label right, thread runs downward */

  /* left is 8.5px, not a calc against the desktop padding: at this
     breakpoint li padding-left is 0, so the 18px node's centre is 9px from
     the edge. The 1px rule is offset half a pixel to sit ON that centre.
     (top DOES keep its clamp — the vertical padding genuinely applies.) */

  .rd .vlabel{max-width:none;font-size:17px}
  /* Vertical chain: the thread draws downward */

  .rd .reg-row{grid-template-columns:1fr;gap:10px}
  .rd .paths{grid-template-columns:1fr}
  .rd .hero-meta{grid-template-columns:1fr}
  .rd .hmi{border-right:none!important;border-top:1px solid rgba(255,255,255,.14);padding:16px 0}
  .rd .hmi:first-child{border-top:none}
  .rd .plist{grid-template-columns:repeat(2,1fr)}
  .rd .fmeta{grid-template-columns:1fr 1fr}
  .rd .nl-row{flex-direction:column;align-items:stretch}
  .rd .nl-input,.rd .nl-row .btn{width:100%}
  .rd .cstrip-in{gap:16px}
}

@media(max-width:420px){
  .rd .display{font-size:clamp(28px,8vw,34px)}
  .rd .fmeta{grid-template-columns:1fr}
}

/* Reduced motion: nothing here animates; user-triggered transitions off. */
@media(prefers-reduced-motion:reduce){
  /* The shared vocabulary is removed outright: nothing moves, and every
     .rise / .mark element renders settled so no content depends on it. */
  .rd .lift,.rd .path,.rd .plist li,.rd .grec>div,.rd .feat-card,.rd .feature,.rd .otg-card{transition:none}
  .rd .lift:hover,.rd .lift:focus-within,.rd .path:hover,.rd .path:focus-within,
  .rd .feat-card:hover,.rd .feature:hover,.rd .otg-card:hover{transform:none;box-shadow:none}
  .rd .rise>*,.rd .rise.is-revealed>*,.rd .mark,.rd .mark.is-revealed{
    opacity:1!important;transform:none!important;transition:none!important;transition-delay:0s!important}
  .rd .tlink,.rd .btn,.rd .fcol a,.rd .fc a,.rd .fbadge,.rd .gov-links a,
  .rd .path,.rd .feat-h,.rd .feature-h,.rd .feat-card .tlink,
  .rd .vmark,.rd .vmark svg,.rd .vlabel,.rd .reg-row,.rd .reg-row::before,.rd .reg-row::after{transition:none}
  .rd .vgrid .vmark,.rd .vgrid .vlabel,.rd .register.rise .reg-row,.rd .path::before{
    opacity:1!important;transform:none!important;transition:none!important;transition-delay:0s!important}
  .rd .vgrid li:hover .vmark,.rd .reg-row:hover,.rd .path:hover::before{transform:none!important}
  /* Everything settled at rest, so nothing depends on movement */

  .rd .path:hover,.rd .path:focus-within{transform:none;box-shadow:none}
  .rd .gov-links a:hover{padding-left:0}
}

/* ── PARTNER MARKS ─────────────────────────────────────────────────────
   Each mark sits in a fixed-height box and is scaled to fit, so source
   ratios from 588×228 through 1970×2022 share one optical baseline
   without distortion. */
.rd .plogo{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(88px,8.2vw,112px);margin:0;padding:clamp(6px,0.7vw,10px);background:#fff;border:0;border-radius:2px;overflow:hidden}
.rd .plogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
/* Optical balance: a square mark at full height reads far heavier than a
   wide wordmark, so each ratio family gets its own cap. */
.rd .plogo-tall img{max-height:100%;max-width:82%}
.rd .plogo-wide img{max-height:66%}
/* XL Catlin is supplied as white type on black, so it keeps its own ground
   rather than sitting invisibly on a white plate. */
.rd .plogo-dark{background:#111310}
.rd .plogo-dark img{max-height:52%}
/* The repeated "Partner" eyebrow is redundant beneath the section label. */
.rd .plist li>span:not(.plogo){display:none}

/* Personal-site link on a leadership profile. Underlined so it reads as a
   link without a button, and marked as leaving the site. */
.rd .pers-link{margin-top:12px}
.rd .pers-link a,.rd .bio-ext{font-family:var(--rsans,var(--sans));font-size:13px;font-weight:600;color:var(--f-forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rd .pers-link a:hover,.rd .bio-ext:hover{text-decoration-thickness:2px}
.rd .bio-ext{margin-left:14px;font-size:12.5px}

/* ── TOUCH TARGETS ─────────────────────────────────────────────────── */
@media(pointer:coarse){
  .rd .tlink{min-height:44px;display:inline-flex;align-items:center;padding-top:6px;padding-bottom:8px}
  .rd .fbadge{min-height:44px}

  .rd .fbase .fc-legal a,.rd .fcol a,.rd .fc a{min-height:44px;display:inline-flex;align-items:center}
  .rd .bio-more a,.rd .bio-ext,.rd .pers-link a{min-height:44px;display:inline-flex;align-items:center}
  .rd .pers-back{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:600px){
  /* Stacked footer legal row needs its own rhythm once it wraps */
  .rd .fbase .fc-legal{gap:2px 14px}
}

/* ── PALETTE · harvest ─────────────────────────────────────────────────
   Binds body.pal-harvest, present on every page, to the EDGE Worldwide
   design-system palette. Highest specificity, last stylesheet. */
body.pal-harvest{--deep:#1c2a14;--teal:#3d4a2a;--forest:#5a6e3a;--terra:#c4704b;--terra-d:#a85c3c;--sand:#f4ede4;--sand2:#ede3d8;--warm:#fdfaf6;--ink:#18180f;--ink2:#3a3a30;--muted:#5c5850;--light:#8d8b82;--border:#d4ccbf;--blight:#e4ddd4}
body.pal-harvest .rd{
  --f-forest:#1c2a14;--f-forest2:#3d4a2a;--f-forest3:#5a6e3a;
  --f-ink:#18180f;--f-ink2:#3a3a30;--f-body:#5c5850;
  --f-parch:#fdfaf6;--f-sage:#f4ede4;
  --f-terra:#c4704b;--f-terra-d:#a85c3c;--f-terra-l:#e0a184;
  --f-moss:#5a6e3a;--f-moss-d:#3d4a2a;
  --f-line:#d4ccbf;--f-line-d:#c3b9a9;
  --rink:#18180f;--rink2:#3a3a30;--rmuted:#5c5850;--rlight:#5c5850;
  --rforest:#1c2a14;--rforest2:#3d4a2a;--rmoss:#5a6e3a;
  --rterra:#c4704b;--rterra-d:#a85c3c;
  --rbone:#fdfaf6;--rbone2:#f4ede4;--rline:#d4ccbf;--rline-d:#c3b9a9
}
/* Hero photograph scrim rebuilt on deep forest so the wash matches the palette */
body.pal-harvest .rd .hero{background:#1c2a14}
body.pal-harvest .rd .hero-scrim{background:
  linear-gradient(96deg,rgba(20,30,14,.93) 0%,rgba(20,30,14,.87) 26%,rgba(20,30,14,.5) 50%,rgba(20,30,14,.14) 72%,rgba(20,30,14,.06) 100%),
  linear-gradient(180deg,#1c2a14 0%,rgba(20,30,14,.1) 16%,rgba(20,30,14,0) 60%,rgba(16,24,11,.34) 100%)}
/* ── FOOTER · ACNC registration mark ───────────────────────────────────
   Dark type on white, so it keeps a white plate on the dark footer ground. */
.rd .fbase{align-items:center}

/* Footer social monograms: overrides the generic .rd a link colour. */
.fsocial a{color:rgba(255,255,255,.82)}
.fsocial a:hover{color:#fff;border-color:#e0ad8a}

/* The news feature card is a light editorial spread (field.css). style.css
   still carries the retired dark-card colours at higher specificity
   (.rd .feature-body .feature-h / p), which painted the headline and deck
   white on white. These restore ink on the light ground. */
.rd .feature-body .feature-h{color:var(--f-ink)}
.rd .feature-body .feature-deck,.rd .feature-body p{color:var(--f-ink2)}
.rd .feature:hover .feature-body .feature-h{color:#1c221a}

/* Filled image slots. style.css defines the is-filled reset at the same
   specificity (0,2,0) as the .rd placeholder dressing above, and field.css
   loads later — so without this block the dashed border, hatch and "IMAGE"
   label render on top of real photographs on every .rd page. */
.rd .imgslot.is-filled{padding:0;border:0;background:var(--f-parch);overflow:hidden}
.rd .imgslot.is-filled::before{content:none}
.rd .imgslot.is-filled>img,.rd .imgslot.is-filled>picture>img{width:100%;height:100%;object-fit:cover;display:block}

/* Partner marks read larger inside the same containers. Prefixed .rd to
   match (and outrank) the existing partner rules above. All width/height
   caps are proportional, so no mark is stretched. */
.rd .plogo-tall img{max-height:100%;max-width:96%}
.rd .plogo-wide img{max-height:92%;max-width:100%}
/* XL Catlin ships with a large empty black field ABOVE its wordmark, which
   made the mark read tiny beside the others. The fix has to crop that empty
   band WITHOUT ever cutting into the wordmark, including on narrow screens.
   Giving the box its own 280/85 ratio guarantees that: the box is always
   proportionally wider than the 280/160 file, so cover can only ever scale
   to width and crop vertically — never horizontally. Anchored to the bottom,
   the visible window is the lower ~53% of the file, which contains the whole
   wordmark with margin to spare. The file itself is untouched. */
.rd .plogo-dark{background:#111310;padding:0;overflow:hidden;align-items:center}
.rd .plogo-dark img{width:100%;height:auto;aspect-ratio:280/85;max-width:100%;max-height:100%;object-fit:cover;object-position:center bottom}

/* Hub tile mark. Simple geometric bars in a tinted disc — the same
   restrained vocabulary as the rest of the page, sized to sit beside the
   label rather than compete with it. Decorative, so the span is
   aria-hidden and the label carries the accessible name. */
/* Same treatment as the Get Involved CTA: terracotta by default, brand
   green on hover. The mark is decorative, so white-on-terracotta is a
   graphical pairing rather than small text. */
.hgrid-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--f-terra);color:#fff;transition:background .22s ease,color .22s ease}
@media(hover:hover) and (pointer:fine){
  .rd .hgrid li:hover .hgrid-ico{background:var(--f-moss);color:#fff}
}
.hgrid-ico svg{width:23px;height:23px;fill:currentColor}
.hgrid-lbl{min-width:0}
@media(prefers-reduced-motion:reduce){.hgrid-ico{transition:none}}

/* Unboxed tiles need a stacking breakpoint of their own: four labels of this
   length are too tight below ~1024px. */
/* Holds four across down to 640px; below that two, then one. */
@media(max-width:640px){.rd .hgrid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:420px){.rd .hgrid{grid-template-columns:1fr;gap:18px}}

/* Hub marks · entrance accent
   The list items already rise with a stagger; this adds a small settle on
   the discs themselves so the marks arrive just after their labels.
   Gated on .js.motion-ready, so with no JS the discs render settled, and
   wrapped in no-preference so reduced motion gets the static state. */
@media(prefers-reduced-motion:no-preference){
  
  .js.motion-ready .rd .hgrid:is(.m-in,.is-revealed) .hgrid-ico{opacity:1;transform:none;
    transition:opacity .38s ease,transform .52s cubic-bezier(.2,.85,.25,1),background .22s ease,color .22s ease}
  .rd .hgrid:is(.m-in,.is-revealed) li:nth-child(1) .hgrid-ico{transition-delay:.1s}
  .rd .hgrid:is(.m-in,.is-revealed) li:nth-child(2) .hgrid-ico{transition-delay:.18s}
  .rd .hgrid:is(.m-in,.is-revealed) li:nth-child(3) .hgrid-ico{transition-delay:.26s}
  .rd .hgrid:is(.m-in,.is-revealed) li:nth-child(4) .hgrid-ico{transition-delay:.34s}
  /* Hover must not inherit the entrance delay, or the colour change lags. */
  .rd .hgrid li:hover .hgrid-ico{transition-delay:0s}
}

/* Hub intro · marks nested in the right-hand column.
   The shared .prose2 uses CSS multi-column, which cannot hold a nested
   block in a chosen column, so this one instance becomes an explicit
   two-column grid. column-rule does not apply to grid, so the divider is
   re-created as a border on the aside to keep the same appearance. */
.rd .hub-intro{columns:auto;column-rule:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.6vw,60px);align-items:start}
.rd .hub-intro-aside{padding-left:clamp(28px,3.6vw,60px);margin-left:calc(-1 * clamp(28px,3.6vw,60px));border-left:1px solid var(--f-line-d)}
.rd .hub-intro-lead .p-open{margin-bottom:0}
/* CTA lives inside the left column, directly under the opening paragraph.
   As a grid child it landed in row two, which cleared the whole taller
   right-hand column and pushed it to the bottom of the section. */
.rd .hub-intro-cta{margin:clamp(20px,2.4vw,30px) 0 0}
/* Half-width column, so 2x2 rather than four across — four would give each
   label about 120px and break "Health & Wellbeing Resource" badly. */
.rd .hub-intro .hgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px);margin-top:clamp(20px,2.4vw,28px)}
@media(max-width:820px){
  .rd .hub-intro{grid-template-columns:1fr;gap:22px}
  .rd .hub-intro-aside{padding-left:0;margin-left:0;border-left:0}
  .rd .hub-intro .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){.rd .hub-intro .hgrid{grid-template-columns:1fr}}

/* Inside the hub intro column: mark and label sit on one line, label to the
   right of its mark, at body size rather than the display scale used when
   these ran full width. Marks scaled down to match the smaller label so the
   pairing stays balanced. */
.rd .hub-intro .hgrid li{flex-direction:row;align-items:center;gap:12px;font-family:var(--rsans);font-size:clamp(14.5px,1.02vw,16px);line-height:1.45;letter-spacing:0}
.rd .hub-intro .hgrid-ico{width:36px;height:36px}
.rd .hub-intro .hgrid-ico svg{width:18px;height:18px}
@media(max-width:520px){.rd .hub-intro .hgrid li{gap:10px}}

/* Labels join the mark entrance: each slides in a short distance behind its
   own disc, so the pair arrives together rather than the disc animating
   against static text.
   Same guards as the disc rule — gated on .js.motion-ready so labels render
   settled without JS, and inside no-preference so reduced motion is static. */
@media(prefers-reduced-motion:no-preference){
  
  .js.motion-ready .rd .hub-intro .hgrid:is(.m-in,.is-revealed) .hgrid-lbl{opacity:1;transform:none;
    transition:opacity .4s ease,transform .5s cubic-bezier(.2,.85,.25,1);
    transition-delay:calc(var(--lbl,0) * .08s + .16s)}
  .rd .hub-intro .hgrid li:nth-child(1){--lbl:0}
  .rd .hub-intro .hgrid li:nth-child(2){--lbl:1}
  .rd .hub-intro .hgrid li:nth-child(3){--lbl:2}
  .rd .hub-intro .hgrid li:nth-child(4){--lbl:3}
}

/* Single-measure variant: a one-paragraph block must not use the shared
   two-column rule, or column two stays empty with the divider hanging
   beside nothing. */
.rd .prose2-single{columns:auto;column-rule:none;max-width:82ch}
/* Lead-in sits with the list it introduces rather than in the prose block,
   where it was separated from its own referent by the column divider. */
.rd .gi-lead{font-family:var(--rsans);font-size:clamp(14.5px,1.02vw,16px);line-height:1.75;color:var(--f-body);margin:clamp(26px,3vw,38px) 0 0;max-width:none}
.rd .gi-lead + .gichoices{margin-top:clamp(14px,1.6vw,20px)}

/* This block must never depend on a release class arriving. Two observers
   can gate it — the reveal system adds .m-in, the rise observer adds
   .is-revealed — so it stays visible even if neither lands. */
.rd .hgrid,.rd .hgrid li{opacity:1!important}

/* These anchors carry no class, so the site-wide main a:not([class]) rule
   (0,1,2) outranked .gichoices a (0,1,1) and painted the titles terracotta.
   .rd scoping outranks it without !important. */
.rd .gichoices a,.rd .gichoices a:visited,.rd .gichoices .gi-t{color:var(--f-forest)}
.rd .gichoices a:hover,.rd .gichoices a:hover .gi-t{color:var(--f-forest)}

/* Marks and labels are never opacity-gated. This block was hidden twice by
   release classes that never arrived (the reveal system adds .m-in, the rise
   observer adds .is-revealed, and after dropping .reveal neither landed).
   The entrance now comes from the list-level .rise stagger on the <li>,
   which cannot strand its own children. */
.rd .hgrid .hgrid-ico,.rd .hgrid .hgrid-lbl,
.rd .hub-intro .hgrid .hgrid-lbl{opacity:1;transform:none}

/* A .pers-link inside the dark masthead needs the light accent, not the
   dark forest used for the same class on light grounds — dark-on-dark
   computes to 1.00:1. #e0ad8a matches the sibling .pers-ext at 6.64:1. */
.rd .pers-hd .pers-link a{color:#e0ad8a;text-decoration:none;border-bottom:1px solid rgba(224,173,138,.42);padding-bottom:2px}
.rd .pers-hd .pers-link a:hover{color:#fff;border-bottom-color:#fff;text-decoration:none}

/* ── Contact ────────────────────────────────────────────────────────────
   The form column spanned 1-7 while the aside started at column 9, leaving
   column 8 permanently empty — a dead gutter that read as scattered
   spacing. The aside now starts at 8 and spans 5, so the 12-column grid is
   fully used and the two columns share one edge. */
#page-contact .sec-parch>.wrap.fg{align-items:start}
#page-contact .contact-aside{display:flex;flex-direction:column}
#page-contact .contact-aside .body{margin:20px 0 0;font-size:14px;line-height:1.72;max-width:46ch}
#page-contact .contact-aside .tlink{margin-top:18px;align-self:start}
/* The header lead sat at the top of its cell against a much taller heading,
   which opened a gap under it. Baselining the two columns closes that. */
#page-contact .sec-tight>.wrap.fg{align-items:end}
#page-contact .sec-tight .lead{max-width:44ch;margin:0}
/* Header and form band were separately padded, stacking ~150px between the
   heading and the first field. */
#page-contact .sec-tight{padding-bottom:clamp(20px,2.4vw,32px)}
#page-contact .sec-parch{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(44px,5vw,72px)}
@media(max-width:860px){
  #page-contact .sec-tight>.wrap.fg{align-items:start}
  #page-contact .contact-aside{margin-top:clamp(28px,4vw,40px)}
}


/* The duplicate set is hidden by default, not shown by default. Every rule
   for the slider sits behind both .js.motion-ready and
   prefers-reduced-motion: no-preference, so in the two fallback paths —
   reduced motion, or scripts failing — the original 5-column grid returns.
   Left visible, the duplicates would fill that grid with ten items and
   render every partner twice. They carry aria-hidden, so this only ever
   affected sighted users in exactly the paths meant to be the safe ones. */
.rd .plist>li[aria-hidden="true"]{display:none}

/* Partner marks · auto slider
   Continuous left-to-right travel, at the owner's request.

   Seamless loop: the markup carries the five marks twice, and each cell is
   a fixed width plus its own right margin, so the track is exactly 10 equal
   cells. Translating -50% moves precisely one full set, landing on a frame
   identical to the start, so the restart is invisible. `gap` would break
   this, since 10 items carry 9 gaps but 10 margins.

   The scroll-feel layer would otherwise assign sf-rise to this row (.plist
   carries .reveal), owning animation, opacity and transform. Rather than
   fight it on specificity, the row is excluded at source in motion.css via
   :not(.plist):not(.plist>*), alongside the existing .rail-card and .ab-bio
   exclusions — one owner per property.

   Pause mechanism (WCAG 2.2.2): motion starts on its own and runs
   indefinitely, so it needs a stop that every input mode can reach. Hover
   alone is not enough — touch has no hover, and the row contains no links,
   so :focus-within can never fire. The control below is a real focusable
   button; hover is kept as a convenience on top of it. Reduced-motion users
   never see the slider at all. */
@media(prefers-reduced-motion:no-preference){
  @keyframes pslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .js.motion-ready .rd .pmarquee{position:relative}
  .js.motion-ready .rd .pmarquee .pm-track{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

  .js.motion-ready .rd .pmarquee.pm-ready .plist.rise{
    display:flex;flex-wrap:nowrap;width:max-content;gap:0;margin-top:0;
    opacity:1;transform:none;
    animation:pslide 46s linear infinite}

  .js.motion-ready .rd .pmarquee.pm-ready .plist.rise>li{
    flex:0 0 clamp(148px,17vw,208px);
    margin-right:clamp(12px,1.4vw,20px);
    opacity:1;transform:none}
  /* The second set exists only to make the loop seamless, so it is revealed
     only when the slider is actually running. */
  .js.motion-ready .rd .pmarquee.pm-ready .plist.rise>li[aria-hidden="true"]{display:flex}

  .js.motion-ready .rd .pmarquee.pm-ready:hover .plist.rise,
  .js.motion-ready .rd .pmarquee.pm-ready.is-paused .plist.rise{animation-play-state:paused}
}

/* The control sits outside the reduced-motion query so it can be hidden
   when there is no animation to pause. */
.rd .pm-toggle{display:none}
@media(prefers-reduced-motion:no-preference){
  .js.motion-ready .rd .pmarquee.pm-ready .pm-toggle{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    padding:7px 14px;background:transparent;
    border:1px solid var(--f-line-d);border-radius:0;
    font-family:var(--rsans);font-size:11px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--f-body);
    cursor:pointer;transition:border-color .2s ease,color .2s ease}
  .js.motion-ready .rd .pmarquee.pm-ready .pm-toggle:hover{border-color:var(--f-forest);color:var(--f-forest)}
  .js.motion-ready .rd .pmarquee.pm-ready .pm-toggle:focus-visible{outline:2px solid var(--f-terra);outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){.rd .pm-toggle{display:none}}