/* clip rather than hidden: hidden computes overflow-y to auto, which makes
   body a scroll container and breaks .nav sticky. */
html,body{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  
  --deep:#1c2a14;--teal:#3d4a2a;--forest:#5a6e3a;--terra:#c4704b;--terra-d:#a85c3c;
  --sand:#f4ede4;--terra-t:#92492b;--sand2:#ede3d8;--warm:#fdfaf6;
  --ink:#18180f;--ink2:#3a3a30;--muted:#5c5850;--light:#8d8b82;
  --border:#d4ccbf;--blight:#e4ddd4;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Libre Franklin',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Privacy boundary: no third-party webfont requests (they fire before
     consent and disclose visitor IPs). To use the named families, self-host
     licensed files and add @font-face rules here — these stacks pick them
     up automatically. */
  --disp:'Newsreader',Georgia,'Times New Roman',serif;
  --rsans:'Libre Franklin',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:24px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--deep);color:#fff;padding:12px 20px;font-family:var(--sans);font-size:13px;font-weight:600;border-radius:2px;text-decoration:none}
.skip-link:focus{left:12px;top:12px}
body{font-family:var(--sans);background:var(--warm);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.page{display:none}.page.active{display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ── SUBTLE MOTION (scroll reveal + image hover) ──
   .reveal is visible by default. The hidden initial state applies only under
   html.js.motion-ready, which motion.js adds once its release mechanisms are
   installed. Keep that scope: it is what stops motion hiding content. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .js.motion-ready .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform}
  .js.motion-ready .reveal.is-revealed{opacity:1;transform:none}
  .iw-img img{transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
  .iw-img:hover img{transform:scale(1.045)}
  .stat .stat-n{transition:transform .7s cubic-bezier(.2,.6,.2,1),opacity .7s ease}
}

/* ── LEGAL PAGES ── */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) 24px}
.legal .eye{justify-content:flex-start;margin-bottom:16px}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.1;color:var(--ink);margin-bottom:14px}
.legal .upd{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--light);margin-bottom:40px}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,28px);color:var(--ink);margin:40px 0 12px;line-height:1.2}
.legal p{font-size:16px;line-height:1.8;color:var(--ink2);margin-bottom:16px}
.legal ul{margin:0 0 16px 0;padding-left:22px}
.legal li{font-size:16px;line-height:1.7;color:var(--ink2);margin-bottom:8px}
.legal a{color:var(--terra-t);text-decoration:underline;text-underline-offset:2px}
.legal .disc{margin-top:40px;padding:20px 24px;background:var(--sand);border-left:3px solid var(--terra);border-radius:2px;font-size:13px;line-height:1.7;color:var(--muted)}
.fc-legal{margin-top:10px;display:flex;gap:8px 18px;flex-wrap:wrap}
.fc-legal a{font-family:var(--sans);font-size:11px;color:rgba(255,255,255,.4);text-decoration:none;letter-spacing:.02em}
.fc-legal a:hover{color:rgba(255,255,255,.75)}
/* ── COOKIE BANNER ── */
#cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90000;max-width:540px;background:var(--deep);color:#fff;border-radius:4px;padding:22px 24px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:none}
#cookie.show{display:block}
#cookie p{font-family:var(--sans);font-size:13px;line-height:1.65;color:rgba(255,255,255,.78);margin-bottom:16px}
#cookie a{color:var(--terra);text-decoration:underline;cursor:pointer}
#cookie .row{display:flex;gap:10px;flex-wrap:wrap}
#cookie button{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:11px 22px;border-radius:2px;border:1px solid transparent;cursor:pointer}
#cookie .acc{background:var(--terra);color:#fff}
#cookie .acc:hover{background:var(--terra-d)}
#cookie .dec{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
@media(max-width:480px){#cookie{left:10px;right:10px;bottom:10px;padding:18px 20px}}


/* ── STATIC FORMS ── */
.contact-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{width:100%;min-height:50px;background:var(--sand);border:1px solid var(--border);border-radius:2px;padding:0 16px;color:var(--ink);font:14px var(--sans)}
.form-field::placeholder{color:var(--muted);opacity:1}
.form-field:focus{outline:3px solid rgba(207,106,65,.28);outline-offset:1px;border-color:var(--terra)}
textarea.form-field{min-height:120px;padding:14px 16px;line-height:1.6;resize:vertical}
select.form-field{cursor:pointer}
.form-status{min-height:1.5em;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--teal);text-align:center}
@media(max-width:560px){.contact-form-row{grid-template-columns:1fr}}

/* ── HERO ── */
.hero{position:relative;min-height:94vh;padding-top:120px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(163deg,#1d2a16 0%,#111a0c 46%,#080e04 100%)}

.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,4,.93) 0%,rgba(8,14,4,.55) 50%,rgba(8,14,4,.12) 100%)}
.hero-overlay2{position:absolute;inset:0;background:linear-gradient(to right,rgba(8,14,4,.45) 0%,transparent 55%)}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;padding:20px 48px 80px}
.hero-eye{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-eye::before{content:'';display:block;width:28px;height:1px;background:var(--terra)}
.hero h1{font-family:var(--serif);font-size:clamp(32px,4.4vw,56px);line-height:1.1;color:#fff;max-width:860px;margin-bottom:20px;font-weight:400;text-wrap:balance}
.hero-sub{font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.62);max-width:480px;line-height:1.75;margin-bottom:36px;font-weight:300}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:28px;right:48px;z-index:2;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.25);font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.hero-scroll-line{width:40px;height:1px;background:rgba(255,255,255,.18)}

/* ── STATS ── */
.stats{background:var(--teal)}
.stats-in{max-width:100%;padding:0 48px;display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:36px 28px;border-right:1px solid rgba(255,255,255,.1)}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--serif);font-size:42px;color:#fff;display:block;line-height:1;margin-bottom:8px}
.stat-l{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5}
.stat-w{font-size:10px;color:#e0b49b;margin-top:6px;display:block}
.stat-note{font-size:10px;color:rgba(255,255,255,.28);margin-top:4px;display:block;font-style:italic}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:0;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-terra{background:var(--terra);color:#fff}.btn-terra:hover{background:var(--terra-d)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.28)}.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:#5a6e3a}
.btn-outline{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}.btn-outline:hover{background:var(--teal);color:#fff}
.btn-white{background:#fff;color:var(--teal)}.btn-white:hover{background:var(--sand)}

/* ── LAYOUT ── */
.s{padding:96px 48px}.s-sm{padding:64px 48px}
.in{max-width:1200px;margin:0 auto}
.in>.t1,.in>.t2,.in>.lead{margin-left:0;margin-right:0}
.bg-warm{background:var(--warm)}.bg-sand{background:var(--sand)}.bg-sand2{background:var(--sand2)}
.bg-deep{background:var(--deep)}.bg-teal{background:var(--teal)}

/* ── TYPE ── */
.eye{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-t);font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.eye::before{content:none}
.t1{font-family:var(--serif);font-size:clamp(38px,4.4vw,60px);line-height:1.04;letter-spacing:-.015em;color:var(--ink);font-weight:500;margin-bottom:22px}
.t2{font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);font-weight:500;margin-bottom:18px}
.t3{font-family:var(--serif);font-size:clamp(22px,2.5vw,28px);line-height:1.2;color:var(--ink);font-weight:400;margin-bottom:14px}
.t4{font-family:var(--serif);font-size:clamp(18px,2vw,22px);line-height:1.3;color:var(--ink);font-weight:400;margin-bottom:10px}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:var(--ink2);font-weight:300}
.body{font-size:15px;line-height:1.85;color:var(--muted)}
.small{font-size:13px;line-height:1.7;color:var(--muted)}
.tlink{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-top:18px;transition:gap .2s}
.tlink::after{content:'→'}.tlink:hover{gap:12px}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
.g58{display:grid;grid-template-columns:5fr 8fr;gap:72px;align-items:center}
.g85{display:grid;grid-template-columns:8fr 5fr;gap:72px;align-items:start}
.g57{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.g11{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ── Real photo inside an image well ── */
.iw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.iw-img::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));border-radius:inherit}
.iw-img .iw-cap{position:absolute;left:18px;bottom:14px;z-index:4;font-family:'Courier New',monospace;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:500}

/* ── Real-photo headshot avatar ── */
.av.av-img{padding:0;overflow:hidden}
.av.av-img img{width:100%;height:100%;object-fit:cover;display:block}
.av.av-img span{display:none}

/* ── IMAGE WELLS ── */
.iw{position:relative;overflow:hidden;border-radius:2px}
.iw-bg{position:absolute;inset:0;background:linear-gradient(135deg,#191a16 0%,#1c2a14 45%,#3d4a2a 100%)}
.iw-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px}
.iw-icon{width:28px;height:28px;opacity:.22;margin:0 auto}
.iw-txt{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22);font-weight:600}
.iw-note{font-size:9px;color:rgba(255,255,255,.11);letter-spacing:.05em}

/* ── CARDS ── */
.card{background:var(--warm);border:1px solid var(--blight);border-radius:2px;padding:32px;transition:transform .2s,box-shadow .2s}
.card:hover{border-color:var(--terra);background:var(--warm)}
.card-sand{background:var(--sand);border:1px solid var(--border);border-radius:2px;padding:32px}
.card-teal{background:var(--warm);border:1px solid var(--blight);border-top:2px solid var(--teal);border-radius:2px;padding:28px;transition:transform .2s,box-shadow .2s}
.card-teal:hover{border-color:var(--terra)}
.card h3,.card-sand h3,.card-teal h3{font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:8px;font-weight:400}
.card p,.card-sand p,.card-teal p{font-size:14px;line-height:1.8;color:var(--muted)}

/* ── PILLARS ── */
.pillar{padding:32px 0;border-bottom:1px solid var(--blight);display:block}
.pillar:last-child{border-bottom:none}
.pnum{font-family:var(--serif);font-size:34px;color:var(--terra);line-height:1;opacity:.35;font-style:italic}
.pillar h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:8px;font-weight:400}
.pillar p{font-size:14px;line-height:1.8;color:var(--muted)}

/* ── PATHWAYS ── */
.pathway{background:var(--warm);border:1px solid var(--blight);border-radius:2px;padding:36px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pathway:hover{border-color:var(--terra);background:var(--warm)}
.pathway::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--terra)}
.pathway h3{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:10px;font-weight:400}
.pathway p{font-size:14px;line-height:1.85;color:var(--muted)}

/* ── LOGOS ── */
.logo-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.lph{height:44px;width:110px;background:var(--sand2);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:9px;color:var(--light);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ── VISION ── */
.vision{background:var(--deep);padding:96px 48px;text-align:center;position:relative;overflow:hidden}
.vision-n{font-family:var(--serif);font-size:clamp(80px,14vw,160px);color:rgba(255,255,255,.04);line-height:.8;display:block;letter-spacing:-6px;position:relative}
.vision h2{font-family:var(--serif);font-size:clamp(28px,3vw,44px);color:#fff;font-weight:400;position:relative;margin-top:-48px}
.vision p{color:rgba(255,255,255,.45);max-width:460px;margin:16px auto 0;font-size:15px;line-height:1.75;position:relative}

/* ── NEWSLETTER ── */
.nl{background:var(--sand2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 48px}
.nl-input{height:46px;background:var(--warm);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;padding:0 16px;color:var(--muted);font-size:14px;font-family:var(--sans)}

/* ── DIVIDERS ── */
hr.r{border:none;border-top:1px solid var(--blight)}
hr.rs{border:none;border-top:1px solid var(--border)}

/* ── TIMELINE ── */
.tl{padding:40px 0;border-bottom:1px solid var(--blight);display:grid;grid-template-columns:140px 1fr;gap:36px}
.tl:last-child{border-bottom:none}
.tl-yr{font-family:var(--serif);font-size:28px;color:var(--teal);padding-top:4px}
.tl-tag{font-family:var(--sans);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--terra-t);font-weight:600;display:block;margin-bottom:4px}

/* ── PERSON ── */
.person{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:32px;background:var(--warm);border:1px solid var(--blight);border-radius:2px;margin-bottom:18px}
.av{width:96px;height:96px;background:var(--sand2);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:9px;color:var(--light);text-align:center;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pname{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:4px;font-weight:400}
.ptitle{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-t);font-weight:600;margin-bottom:12px;display:block}
.psub{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink2);font-weight:700;line-height:1.55;margin:-6px 0 14px;display:block}

/* ── APPROACH PHASE ── */
.phase{padding:40px 0;border-bottom:1px solid var(--blight);display:grid;grid-template-columns:60px 1fr;gap:24px}
.phase:last-child{border-bottom:none}
.phn{font-family:var(--serif);font-size:48px;color:var(--teal);opacity:.18;line-height:1;font-style:italic}

/* ── GOV BAND ── */
.gov{background:var(--teal);padding:64px 48px;text-align:center}
.gov h2{font-family:var(--serif);font-size:clamp(22px,2.5vw,32px);color:#fff;margin-bottom:12px;font-weight:400}
.gov p{color:rgba(255,255,255,.6);max-width:520px;margin:0 auto;font-size:15px;line-height:1.8}
.gbadge{display:inline-flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:7px 14px;font-family:var(--sans);font-size:11px;font-weight:600;color:rgba(255,255,255,.72);margin:4px;letter-spacing:.08em;text-transform:uppercase}

/* F01 · trimmed vertical padding; no content removed. */
.footer{background:var(--deep);padding:44px 48px 32px}

.footer-brand-col{display:flex;flex-direction:column}

/* Two lines at desktop: the measure is capped at 100% so it can never
   exceed the brand column, whatever the grid resolves to. */
.ftag{font-size:13px;color:rgba(255,255,255,.3);line-height:1.7;max-width:min(100%,88ch)}
.fbadges{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}
.fbadge{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);border-radius:2px;padding:5px 10px;font-weight:600}
.fc h2,.fc h3,.fc h4{font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:14px;font-weight:600}
.fc ul{list-style:none}
.fc li{font-size:13px;color:rgba(255,255,255,.38);margin-bottom:8px;transition:color .15s}
.fc li a{color:inherit;text-decoration:none;display:inline-block}
.fc li:hover{color:rgba(255,255,255,.65)}
.fc li a:hover{color:rgba(255,255,255,.85)}
.fbase{max-width:1200px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-family:var(--sans);font-size:12px;color:#fff;font-weight:400;letter-spacing:.01em}

/* ── HERO META ── */
.hero-meta{margin-top:48px;display:flex;gap:48px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);max-width:560px}
.hero-meta-i{display:flex;flex-direction:column;gap:4px}
.hero-meta-i span{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.hero-meta-i strong{font-family:var(--serif);font-size:18px;color:#fff;font-weight:400;letter-spacing:.01em}

/* ── STATS BAND ── */
.stats-band{padding:14px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.stat-n sup{font-family:var(--sans);font-size:14px;font-weight:500;color:rgba(255,255,255,.4);margin-left:2px;letter-spacing:0;text-transform:none;top:-.6em}
.stats-in.stats-4{grid-template-columns:repeat(4,1fr)}
.stats-note{padding:16px 48px;text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){.stats-in.stats-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats-in.stats-4{grid-template-columns:1fr}.stats-note{padding:14px 20px;font-size:11px}}

/* ── CONTEXT GRID ── */
.context-hd{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start;margin-bottom:64px}
.context-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border)}
.ctx{padding:36px 32px 32px 0;border-right:1px solid var(--border);position:relative}
.ctx:last-child{border-right:none;padding-right:0}
.ctx:nth-child(n+2){padding-left:32px}
.ctx-n{font-family:var(--serif);font-size:13px;color:var(--terra-t);letter-spacing:.05em;display:block;margin-bottom:18px;font-style:italic}
.ctx h3{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:400;line-height:1.2;margin-bottom:12px}
.ctx p{font-size:14px;line-height:1.75;color:var(--muted)}

/* ── VISION EXTRAS ── */
.vision-eye{position:relative;font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-t);font-weight:600;margin-bottom:24px}
.vision-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;position:relative}
.vision-foot{position:relative;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;gap:32px;flex-wrap:wrap;max-width:560px;margin-left:auto;margin-right:auto}
.vision-foot span{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:600;align-self:center}
.vision-foot strong{font-family:var(--serif);font-size:16px;color:rgba(255,255,255,.78);font-weight:400;align-self:center}

/* ── PATHWAY META ── */
.pw-meta{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--blight);margin-bottom:18px}
.pw-tag{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-t);font-weight:600}
.pw-scale{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ── PARTNERS ── */
.partners-note{max-width:480px;margin-top:6px;margin-bottom:24px}
.lph{display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center!important;padding:0 16px;gap:2px;text-transform:none!important;letter-spacing:0!important}
.lph span{font-family:var(--sans);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--light);font-weight:600}
.lph strong{font-family:var(--serif);font-size:18px;color:var(--muted);font-weight:400;letter-spacing:.02em}

/* ── NEWSLETTER FORM ── */
.nl-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.nl-form{display:flex;flex-direction:column;gap:12px}
.nl-input{display:flex;flex-direction:column;height:auto;padding:8px 16px;gap:2px;background:var(--warm)}
.nl-input-l{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.nl-input input{border:none;background:transparent;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;padding:4px 0;width:100%}
.nl-input input::placeholder{color:var(--light)}
.nl-btn{justify-content:center;height:50px}
.nl-fine{font-family:var(--sans);font-size:11px;color:var(--light);margin-top:4px}

/* ── FOOTER META ── */
.fmeta{margin-top:20px;display:flex;gap:8px 18px;align-items:baseline;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.fmeta span{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:600}
.fmeta strong{font-family:var(--serif);font-size:14px;color:rgba(255,255,255,.6);font-weight:400}
.fbase{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:rgba(255,255,255,.45)!important;font-weight:400!important}
.fbase span{font-family:var(--sans);font-size:11px;letter-spacing:.04em}

/* ── IMAGE WELL: refined placeholder ── */
.iw-bg{background:#1c2a14!important;background-image:
  repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 14px),
  linear-gradient(135deg,#191a16 0%,#3d4a2a 50%,#5a6e3a 100%)!important}
.iw-label{align-items:flex-start!important;justify-content:flex-end!important;padding:18px!important;text-align:left!important}
.iw-icon{display:none}
.iw-txt{font-family:'Courier New',monospace!important;font-size:10px!important;letter-spacing:.1em!important;color:rgba(255,255,255,.45)!important;text-transform:uppercase!important;font-weight:500!important}
.iw-note{font-family:'Courier New',monospace;font-size:9px!important;color:rgba(255,255,255,.22)!important;letter-spacing:0!important;text-transform:none!important;margin-top:4px;display:none}
.iw::after{content:attr(data-tag);position:absolute;top:18px;left:18px;font-family:'Courier New',monospace;font-size:9px;letter-spacing:.15em;color:rgba(255,255,255,.35);text-transform:uppercase}

/* ── UTILS ── */
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}.mt64{margin-top:64px}
.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

/* ── Tablet: 768–1024px ── */

/* ── Mobile: < 768px ── */

/* ── Small mobile: < 480px ── */

/* ── FOOTER GRID ── */
.footer-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:34px 40px}
.footer-logo{height:132px;width:auto;object-fit:contain;margin-bottom:14px;filter:brightness(1.08);image-rendering:auto}

/* ── RESPONSIVE NAV + FOOTER ── */

/* ── NAV ── */
/* Sticky, so no body offset is needed. essential.js owns body.m-scrolled. */
.nav{position:sticky;top:0;z-index:1000;isolation:isolate;background:var(--deep);border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .3s ease}
body.m-scrolled .nav{box-shadow:0 6px 24px rgba(0,0,0,.16)}
/* Anchored sections clear the pinned bar (88px desktop / 72px mobile). */
[id]{scroll-margin-top:92px}
@media(max-width:768px){[id]{scroll-margin-top:88px}}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav-in{width:100%;padding:0 40px;height:136px;display:flex;align-items:center}
.nav-left,.nav-right{flex:1;display:flex;align-items:center;gap:0}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}
.nav-center{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 48px}
.nav-logo-img{height:108px;width:auto;display:block;filter:brightness(0) invert(1);image-rendering:-webkit-optimize-contrast}
.nlink{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.52);padding:10px 20px;border-radius:3px;text-decoration:none;font-weight:500;transition:color .2s,background .2s;white-space:nowrap;display:block;cursor:pointer;pointer-events:auto}
.nlink:hover,.nlink.active{color:#fff}
.nav-cta{background:var(--terra)!important;color:#fff!important;margin-left:6px}
/* Hover shifts to the brand green rather than a darker terracotta. */
.nav-cta:hover{background:var(--forest)!important}

/* ── HAMBURGER + MOBILE MENU ── */
.hamburger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:10px;margin-left:auto;flex-shrink:0;z-index:1001}
.hamburger span{display:block;width:26px;height:2px;background:var(--f-terra-l,#e0a184);border-radius:1px;transition:transform .3s ease,opacity .3s ease,background .2s}
.hamburger:hover span{background:#fff}
.hamburger:focus-visible span{background:#fff}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--deep);z-index:997;overflow-y:auto;padding-top:80px;transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateY(0)}
.mm-inner{display:flex;flex-direction:column;padding:32px 32px 64px;gap:0}
.mm-link{font-family:var(--serif);font-size:clamp(28px,6vw,40px);color:rgba(255,255,255,.6);text-decoration:none;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07);display:block;transition:color .2s}
.mm-link:hover{color:#fff}
.mm-link:last-child{border-bottom:none}
.mm-cta{color:var(--f-terra-l,#e0a184)!important;margin-top:24px;border-bottom:none!important}
.mm-cta:hover{color:#fff!important}

/* ── RESPONSIVE OVERRIDES ── */

/* ═══════════════════════════════════════════════════
   RESPONSIVE SYSTEM. NAV + LAYOUT + FOOTER
   Breakpoints: 1280 | 1024 | 768 | 640 | 480
═══════════════════════════════════════════════════ */

/* ── Large desktop ≤ 1280px ── */
@media (max-width:1280px) {
  .nav-in{padding:0 32px}
  .nav-center{padding:0 28px}

  
  
  .g58 { gap: 48px }
  .g57 { gap: 48px }
  .g85 { gap: 48px }
}

/* ── APPROACH: process sequence ── */
.proc{border-top:1px solid var(--border);margin-top:48px}
/* Two columns: the 720px reading measure plus a figure column. */
.proc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:clamp(28px,4vw,64px);align-items:start;padding:46px 0;border-bottom:1px solid var(--border)}
.proc-body{max-width:720px;min-width:0}
.proc-fig{min-width:0;position:sticky;top:104px}
@media(max-width:900px){.proc-row{grid-template-columns:1fr;gap:26px}.proc-fig{position:static}}
.proc-body h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);color:var(--ink);font-weight:400;margin-bottom:14px;line-height:1.2}
.proc-body p{font-size:15px;line-height:1.85;color:var(--muted)}
@media(max-width:768px){.proc-row{padding:34px 0}}
@media(prefers-reduced-motion:reduce){.proc-fig{position:static}}

/* ── APPROACH: principles ledger ── */
.principles{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);margin-top:8px}
.principle{padding:36px 36px 34px 0;border-right:1px solid var(--border)}
.principle:last-child{border-right:none;padding-right:0}
.principle:not(:first-child){padding-left:36px}
.principle-k{font-family:var(--serif);font-style:italic;color:var(--terra-t);font-size:15px;margin-bottom:18px;display:block}
/* ── APPROACH: wide image band ── */
.iw-wide{position:relative;width:100%;height:clamp(320px,38vw,460px);overflow:hidden}
.iw-wide .iw-label{align-items:center;justify-content:center;text-align:center}
.principle h3{font-family:var(--serif);font-size:21px;color:var(--ink);font-weight:400;line-height:1.25;margin-bottom:12px}
.principle p{font-size:14px;line-height:1.78;color:var(--muted)}
@media(max-width:768px){.principles{grid-template-columns:1fr}.principle{border-right:none!important;border-bottom:1px solid var(--border);padding:28px 0!important}.principle:last-child{border-bottom:none}}

/* ── ABOUT: Our Hubs Deliver icon row ── */
.deliver{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.deliver-i{text-align:center;padding:0 12px}
.deliver-ic{width:54px;height:54px;margin:0 auto 16px;color:var(--terra);display:flex;align-items:center;justify-content:center;border:1px solid var(--blight);border-radius:2px}
.deliver-ic svg{width:26px;height:26px}
.deliver-i h4{font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:400;line-height:1.3;margin:0}
@media(max-width:768px){.deliver{grid-template-columns:repeat(2,1fr);gap:36px 16px}}
@media(max-width:430px){.deliver{grid-template-columns:1fr}}

.results-hero{position:relative;overflow:hidden;min-height:clamp(360px,42vw,520px);display:flex;align-items:flex-end}
.results-hero .iw-bg{position:absolute;inset:0}
.results-hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,10,.5) 0%,rgba(15,22,10,.78) 100%)}
.results-hero[data-tag]::before{content:attr(data-tag);position:absolute;top:20px;left:24px;z-index:2;font-family:'Courier New',monospace;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.5);text-transform:uppercase}
.results-hero .s{width:100%;position:relative;z-index:1}

/* ── Transparency: footer-style link list ── */
.gov-links{list-style:none;border-top:1px solid var(--border);margin-top:4px;max-width:380px}
.gov-links li{border-bottom:1px solid var(--border)}
.gov-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;font-family:var(--sans);font-size:14px;color:var(--ink2);text-decoration:none;letter-spacing:.01em;transition:color .15s}
.gov-links a:hover{color:var(--terra)}
.gov-links a span{color:var(--light);font-size:14px}
.gov-links a:hover span{color:var(--terra)}

/* ── Feature quote ── */
/* L02 · widened so the same wording sets on fewer lines, which is what
   reduces the height — no smaller type, no forced breaks, text unchanged. */
.featq{max-width:1080px;margin:0 auto;text-align:center;position:relative}
/* The 120px mark reserved 64px of empty band above the quote. */
.featq-mark{font-family:var(--serif);font-size:84px;line-height:1;color:var(--terra);display:block;height:40px;margin-bottom:4px}
.featq-text{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.38;color:#fff;font-weight:400;font-style:italic;margin-bottom:24px;text-wrap:balance}
.featq-cite{font-style:normal;font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.8);display:flex;flex-direction:column;gap:4px;align-items:center}
.featq-cite span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:600}

/* ── Person avatar refinement ── */
.av{flex-direction:column;text-align:center;font-style:italic;color:var(--teal)!important;font-family:var(--serif)!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;font-weight:400!important}
.av span{display:block}
.leader-link{font-family:var(--sans);font-size:11px;color:var(--terra-t);letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;text-decoration:none}
.leader-link:hover{text-decoration:underline}

/* ── Responsive for new components ── */
@media (max-width:1024px){
  .context-hd{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .context-grid{grid-template-columns:repeat(2,1fr)}
  .ctx{padding:32px 24px 24px 0;border-bottom:1px solid var(--border)}
  .ctx:nth-child(2){border-right:none;padding-left:24px}
  .ctx:nth-child(3){padding-left:0;border-right:1px solid var(--border)}
  .ctx:nth-child(4){padding-left:24px;border-bottom:none}
  .ctx:nth-child(3){border-bottom:none}
  .nl-grid{grid-template-columns:1fr;gap:32px}
  .hero-meta{margin-top:36px;gap:32px}
  .g57,.g58,.g75{grid-template-columns:1fr!important;gap:32px!important}
  .g2{grid-template-columns:1fr!important;gap:18px!important}
  .vision-foot{gap:18px}
}
@media (max-width:768px){
  .context-grid{grid-template-columns:1fr}
  .ctx{border-right:none!important;padding:28px 0 24px 0!important;border-bottom:1px solid var(--border)}
  .ctx:last-child{border-bottom:none}
  .hero-meta{flex-direction:column;gap:16px;max-width:100%}
  .stats-band{padding:12px 20px;font-size:9px}
  .stats-band span:last-child{display:none}
  .vision-foot{gap:18px;flex-direction:row;justify-content:space-between;flex-wrap:wrap}
  .fbase{flex-direction:column;gap:8px}
  .nl-form{width:100%}
  .pw-meta{flex-direction:column;align-items:flex-start;gap:6px}
  .partners-note{margin-bottom:14px}
  .logo-row{flex-wrap:wrap;gap:16px}
  .lph{min-width:calc(50% - 8px)}
  .iw-img .iw-cap{font-size:9px;left:14px;bottom:10px}
  .iw-img[data-tag]::before{font-size:8px;top:14px;left:14px;padding:4px 7px}
  .fmeta{gap:6px 14px}
  .fmeta strong{font-size:13px}
}
@media (max-width:480px){
  .hero-meta-i strong{font-size:16px}
  .vision-foot{gap:10px 16px;justify-content:flex-start}
  .vision-foot strong{font-size:14px}
  .ctx h3{font-size:20px}
  .ctx p{font-size:13px}
  .iw-img .iw-cap{display:none}
}
/* ── Cap oversized inline image-well heights on mobile ── */
@media (max-width:768px){
  .iw{max-height:60vw}
  .iw[style*="height:460px"]{height:auto!important;min-height:280px}
  .iw[style*="height:440px"]{height:auto!important;min-height:240px}
  .iw[style*="height:320px"]{height:auto!important;min-height:220px}
  .iw[style*="height:300px"]{height:auto!important;min-height:200px}
  .iw[style*="height:240px"]{height:auto!important;min-height:180px}
}

/* ── Tablet ≤ 1024px ── */
@media (max-width:1024px) {
  .nav-in{height:96px;padding:0 24px}
  .nav-center{padding:0 18px}
  .nav-logo-img{height:72px}
  .nlink{font-size:10px;padding:7px 10px;letter-spacing:.06em}
  .nav-cta{margin-left:4px}

  /* Nav */
  
  
  
  
  

  /* Hero */
  .hero { min-height: 80vh; height: auto }
  .hero-content { padding: 0 32px 56px }
  .hero h1 { font-size: 36px }
  .hero-scroll { display: none }

  /* Stats */
  .stats-in { grid-template-columns: repeat(2,1fr); padding: 0 24px }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1) }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1) }
  .stat:last-child,
  .stat:nth-last-child(2):nth-child(odd) { border-bottom: none }

  /* Layout */
  .s  { padding: 72px 32px }
  .s-sm { padding: 48px 32px }
  .g58,.g85,.g57 { grid-template-columns: 1fr; gap: 36px }
  .g2,.g11  { grid-template-columns: 1fr; gap: 28px }
  .g3  { grid-template-columns: repeat(2,1fr); gap: 22px }

  /* Vision */
  .vision { padding: 80px 32px }
  .vision-n { font-size: 100px; margin-bottom: -36px }

  /* Newsletter */
  .nl { padding: 48px 32px }

  /* Gov */
  .gov { padding: 56px 32px }

  /* Footer */
  .footer { padding: 56px 32px 40px }
  .footer-in { grid-template-columns: 1fr 1fr; gap: 32px }
  .footer-brand-col { grid-column: 1 / -1 }
  .footer-logo { height: 108px }
}

/* ── NAVIGATION (site-wide) ───────────────────────────────────────────
   Colour, spacing, rules and current-page state. Lives here, not in
   field.css, so every page shares one nav treatment.
   The display and height logic for ≤768px is further down this file and is
   NOT touched by these rules, so all four JavaScript degradation states
   behave exactly as before: real links visible without JS, .js alone never
   hides them, the hamburger appears only under .nav-ready. */
.nav{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.12)}
.nav .nlink{font-family:var(--sans);font-weight:600;letter-spacing:.05em;text-transform:none;transition:color .2s}
@media(min-width:769px){
  .nav-in{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
  .nav .nlink{font-size:13.5px;padding:0 clamp(9px,1vw,15px);color:rgba(255,255,255,.76);position:relative;display:inline-flex;align-items:center;min-height:44px}
  .nav .nlink:hover{color:#fff}
  .nav .nlink.active{color:#fff}
  /* Restrained terracotta current-page indicator */
  .nav .nlink.active::after{content:'';position:absolute;left:clamp(9px,1vw,15px);right:clamp(9px,1vw,15px);bottom:-1px;height:2px;background:#cf9878}
  .nav .nav-left{gap:clamp(0px,.4vw,6px);justify-content:flex-start}
  .nav .nav-right{gap:clamp(0px,.4vw,6px);justify-content:flex-end}
  .nav .nav-cta{color:#fff;border:1px solid rgba(255,255,255,.34);padding:0 20px;margin-left:14px;transition:background .2s,border-color .2s}
  .nav .nav-cta:hover{background:var(--forest);border-color:var(--forest)}
  .nav .nav-cta.active::after{display:none}
}
/* Tightened band: between the mobile handoff (769px) and roughly 1120px the
   eight desktop links plus the centred logo need less room than the default
   spacing gives them. Without this the right-hand group — including
   "Get Involved" — is pushed past the viewport edge and becomes unreachable
   without introducing a horizontal scrollbar. Nothing is hidden; the same
   links simply set tighter. */
@media(min-width:769px) and (max-width:1120px){
  .nav-in{padding:0 clamp(16px,2.2vw,28px)}
  .nav .nlink{font-size:12px;padding:0 clamp(5px,.7vw,9px);letter-spacing:.02em}
  .nav .nlink.active::after{left:clamp(5px,.7vw,9px);right:clamp(5px,.7vw,9px)}
  .nav .nav-cta{padding:0 13px;margin-left:8px}
  .nav-logo-img{height:56px}
  .nav-in{height:80px}
  body.m-scrolled .nav-in{height:72px}
}
@media(min-width:769px) and (max-width:900px){
  .nav .nlink{font-size:11.2px;padding:0 4px}
  .nav .nlink.active::after{left:4px;right:4px}
  .nav-logo-img{height:48px}
}
.nav a:focus-visible,.nav button:focus-visible{outline:3px solid #cf9878;outline-offset:2px}

/* ── Tablet portrait ≤ 768px ── */
@media (max-width:768px) {
  /* ── Navigation, progressive enhancement ──
     DEFAULT: the real nav links stay on the page as a compact wrapped row
     under the logo, so every page is reachable without scripting. The
     hamburger and overlay are hidden here because neither can open.
     ENHANCED (html.nav-ready): the menu module has initialised successfully,
     so the fallback row is replaced by the hamburger + overlay. */
  .nav-in{height:auto;min-height:76px;padding:10px 20px;flex-wrap:wrap;row-gap:6px}
  .nav-center{flex:1 1 100%;justify-content:center;padding:0;order:1}
  .nav-logo-img{height:54px}
  .nav-left,.nav-right{flex:1 1 100%;order:2;justify-content:center;flex-wrap:wrap;gap:2px 4px}
  .nav-right{padding-bottom:6px}
  .nav-left .nlink,.nav-right .nlink{padding:9px 12px;font-size:10.5px;min-height:44px;display:flex;align-items:center}
  .nav-cta{margin-left:0}
  .hamburger{display:none}
  .mobile-menu{display:none}

  /* Enhanced state: hand navigation to the overlay menu. Gated on
     .nav-ready — added by script.js ONLY after the hamburger and menu were
     found, handlers attached, ARIA/inert state established and focus-return
     readied. .js alone must never hide the real links, or a script that
     loads but fails would leave a dead hamburger as the only navigation. */
  .nav-ready .nav-in{height:76px;min-height:0;padding:0 20px;flex-wrap:nowrap;row-gap:0}
  .nav-ready .nav-left,.nav-ready .nav-right{display:none}
  .nav-ready .nav-center{flex:1;order:0}
  .nav-ready .hamburger{display:flex}
  .nav-ready .mobile-menu{display:block}

  /* Mobile menu top offset matches nav height */
  .mobile-menu { padding-top: 76px }

  /* Hero */
  .hero { min-height: min(78vh, 620px); height: auto }
  .hero-content { padding: 0 24px 48px }
  .hero h1 { font-size: clamp(24px,5.5vw,32px); max-width: 100% }
  .hero-sub { font-size: 14px; max-width: 100% }
  .hero-btns { flex-direction: column; gap: 10px }
  .btn { width: 100%; justify-content: center; padding: 13px 20px }

  /* Stats */
  .stats-in { padding: 0 20px }

  /* Layout */
  .s  { padding: 56px 20px }
  .s-sm { padding: 40px 20px }
  .g3 { grid-template-columns: 1fr; gap: 20px }
  .tl { grid-template-columns: 1fr; gap: 14px }
  .person { grid-template-columns: 1fr; gap: 14px }
  .pillar { padding: 26px 0 }
  .card,.card-sand,.card-teal { padding: 22px }
  .pathway { padding: 24px }

  /* Stats 2x2 at tablet portrait */
  .stats-in { grid-template-columns: repeat(2,1fr) }

  /* Vision */
  .vision { padding: 64px 20px }
  .vision-n { font-size: 72px; margin-bottom: -24px }
  .vision h2 { font-size: 28px; margin-top: -24px }

  /* Newsletter */
  .nl { padding: 40px 20px }
  .nl .nl-grid { grid-template-columns: 1fr !important; gap: 20px }
  .nl .nl-grid > div:last-child { flex-direction: column; gap: 10px }
  .nl-input { width: 100% }

  /* Gov */
  .gov { padding: 48px 20px }

  /* Footer */
  .footer { padding: 40px 20px 28px }
  .footer-in { grid-template-columns: 1fr; gap: 24px }
  .footer-brand-col { grid-column: auto }
  .footer-logo { height: 108px }
  .fbadges { flex-wrap: wrap }
}

/* ── Mobile ≤ 480px ── */
@media (max-width:480px) {
  /* The no-JavaScript fallback needs to grow: the real links wrap onto
     several rows here. Only the enhanced (.nav-ready) nav gets a fixed
     height, and the overlay's top padding matches that height exactly.
     Any later stylesheet that sets a fixed .nav-in height must scope itself
     to min-width:769px, or it will clip these wrapped links. */
  .nav-in{height:auto;min-height:72px}
  .nav-ready .nav-in{height:72px;min-height:0}
  .nav-logo-img{height:56px}
  .nav-left .nlink,.nav-right .nlink{padding:8px 10px;font-size:10px}
  .mobile-menu{padding-top:72px}
  .hero h1 { font-size: 22px }
  .hero-sub { font-size: 13px }
  .t1 { font-size: 26px }
  .t2 { font-size: 22px }
  .t3 { font-size: 19px }
  .stat-n { font-size: 28px }
  .vision-n { font-size: 56px }
  .phn { font-size: 36px }
  .footer-logo { height: 108px }
}

/* ── Mobile polish: founders, dense grids ── */
@media (max-width:768px){
  /* Founder bio cards stack image above text */
  .person{grid-template-columns:1fr;gap:18px;padding:24px}
  .av{width:84px;height:84px}
  .av.av-img{width:100%;height:240px}
  .av.av-img img{object-position:center top}
  .ptitle{font-size:11px}
  /* Deliver icon row + team */
  .deliver{grid-template-columns:repeat(2,1fr);gap:32px 16px}
}
@media (max-width:480px){
  .person{padding:20px}
  .av.av-img{height:300px}
  .psub{font-size:10px}
  .deliver{grid-template-columns:1fr;gap:28px}
  .featq-text{font-size:21px}
  .gov-links{max-width:100%}
}

/* ══ Home tokens — scoped under .rd ══ */
.rd{--rink:#18180f;--rink2:#3a3a30;--rmuted:#5c5850;--rlight:#5c5850;--rforest:#1c2a14;--rforest2:#3d4a2a;--rmoss:#5a6e3a;--rterra:#c4704b;--rterra-d:#a85c3c;--rbone:#fdfaf6;--rbone2:#f4ede4;--rline:#dedbd2;--rline-d:#c4c0b4;font-family:var(--rsans);color:var(--rink);background:#fff;font-size:16px;line-height:1.6}
.rd h1,.rd h2,.rd h3{font-family:var(--disp);font-weight:500;line-height:1.04;letter-spacing:-.015em;text-wrap:balance;color:var(--rink)}
.rd a{color:var(--deep);text-decoration:none}.rd a:hover{color:#122010}
.rd img{display:block;max-width:100%}
.rd .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.rd .kicker{font-family:var(--rsans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rterra);display:inline-flex;align-items:center;gap:12px}
.rd .kicker::before{content:none}
.rd .display{font-size:clamp(44px,7vw,104px);font-weight:600;line-height:.98}
.rd .h-sec{font-size:clamp(34px,4.6vw,62px);font-weight:500;line-height:1.02}
.rd .lead{font-family:var(--disp);font-size:clamp(19px,1.9vw,26px);line-height:1.5;color:var(--rink2);font-weight:400}
.rd .body{font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:var(--rmuted)}
.rd .tlink{font-family:var(--rsans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rink);display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid var(--rterra);padding-bottom:4px;transition:gap .2s;cursor:pointer}
.rd .tlink::after{content:'→';color:var(--rterra);font-size:15px}.rd .tlink:hover{gap:14px;color:var(--rink)}
.rd .tlink.on-dark{color:#fff}.rd .tlink.on-dark:hover{color:#fff}
.rd .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-family:var(--rsans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;transition:.2s;border-radius:0;text-decoration:none}
.rd .btn-terra{background:var(--rterra);color:#fff}.rd .btn-terra:hover{background:var(--rterra-d);color:#fff}
.rd .btn-dark{background:var(--rink);color:#fff}.rd .btn-dark:hover{background:#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(--rink);border-color:#fff}
.rd .hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.rd .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.rd .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){.js.motion-ready .rd .reveal:not(.is-revealed){opacity:0;transform:translateY(16px)}.js.motion-ready .rd .reveal{transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}.rd .reveal.is-revealed{opacity:1;transform:none}}
.rd .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,8,.55),rgba(10,15,8,.15) 38%,rgba(10,15,8,.72))}
.rd .hero-scrim2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,8,.55),transparent 62%)}
.rd .hero-body{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vh,88px);padding-top:64px}
.rd .hero h1{color:#fff;max-width:16ch;margin:22px 0 26px}
.rd .hero-sub{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.82);max-width:56ch;font-weight:300;margin-bottom:36px}
.rd .hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.rd .hero-meta{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.2);max-width:720px}
.rd .hmi{flex:1;min-width:140px;padding:20px 26px 0 0}
.rd .hmi span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.rd .hmi strong{font-family:var(--disp);font-size:22px;font-weight:500;color:#fff}
.rd .stats{background:var(--rforest);color:#fff;padding:clamp(56px,7vw,88px) 0}
.rd .stats-top{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.rd .stats-top span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rmoss)}
.rd .stats-top .rule{flex:1;height:1px;background:rgba(255,255,255,.16)}
.rd .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.rd .stat{padding-top:20px;border-top:3px solid var(--rterra)}
.rd .stat .n{font-family:var(--disp);font-size:clamp(56px,7vw,96px);font-weight:600;line-height:.9;color:#fff;display:block}
.rd .stat .n sup{font-size:.4em;color:var(--rterra);font-weight:600;top:-.7em}
.rd .stat .l{display:block;margin-top:16px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66);max-width:24ch;font-weight:300}
.rd .sec{padding:clamp(72px,9vw,140px) 0}
.rd .sec-bone{background:var(--rbone)}
.rd .sec-dark{background:var(--rforest2);color:#fff}
.rd .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.rd .two-6040{grid-template-columns:1.1fr .9fr}
.rd .figure{position:relative;overflow:hidden}
.rd .figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.rd .figure:hover img{transform:scale(1.04)}
.rd .figure .cap{position:absolute;left:0;bottom:0;z-index:2;background:var(--rterra);color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px}
.rd .stack>*+*{margin-top:26px}
.rd .eyrow{margin-bottom:22px}
.rd .statement{max-width:22ch}
.rd .pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.rd .pillar{background:var(--rforest2);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:8px;transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.rd .pillar:hover{background:none}
@media(prefers-reduced-motion:reduce){.rd .pillar{transition:background .2s ease}.rd .pillar:hover{transform:none;box-shadow:none}}
.rd .pillar h3{color:#fff;font-size:23px;margin:6px 0 2px;font-weight:500}
.rd .pillar p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.62);font-weight:300}
.rd .vision{background:var(--rink);color:#fff;padding:clamp(80px,10vw,150px) 0;position:relative;overflow:hidden}
.rd .vision .big{font-family:var(--disp);font-size:clamp(160px,32vw,440px);line-height:.72;font-weight:600;color:var(--rforest2);position:absolute;right:-2%;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;user-select:none}
.rd .vision .in2{position:relative;z-index:2;max-width:640px}
.rd .vision h2{color:#fff;font-size:clamp(40px,5.5vw,76px);margin:18px 0 22px}
.rd .vision p{color:rgba(255,255,255,.72);font-size:clamp(16px,1.3vw,19px);line-height:1.65;max-width:48ch;font-weight:300;margin-bottom:40px}
.rd .vision-foot{display:flex;gap:44px;flex-wrap:wrap;margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.rd .vision-foot div span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rmoss);margin-bottom:6px}
.rd .vision-foot div strong{font-family:var(--disp);font-size:24px;font-weight:500;color:#fff}
.rd .paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.rd .path{background:#fff;border:1px solid var(--rline);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;transition:.25s}
.rd .path:hover{border-color:var(--rterra);transform:translateY(-3px)}
.rd .path-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.rd .path-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rterra)}
.rd .path-scale{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--rlight)}
.rd .path h3{font-size:26px;margin-bottom:14px;font-weight:500}
.rd .path p{font-size:14px;line-height:1.7;color:var(--rmuted);margin-bottom:26px;flex:1}
.rd .partners{margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--rline);padding-top:44px}
.rd .plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:28px}
.rd .plogo{border-left:2px solid var(--rline-d);padding-left:16px}
.rd .plogo span{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rlight);margin-bottom:6px}
.rd .plogo strong{font-family:var(--disp);font-size:19px;font-weight:500;color:var(--rink2)}
.rd .feature{display:grid;grid-template-columns:1.15fr .85fr;background:var(--rink);color:#fff;margin-top:52px}
.rd .feature .figure{min-height:440px}
.rd .feature-body{padding:clamp(34px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.rd .feature-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rterra);margin-bottom:18px}
.rd .feature-body h3{font-size:clamp(30px,3.4vw,46px);color:#fff;margin-bottom:20px;font-weight:500;line-height:1.06}
.rd .feature-body p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.7;margin-bottom:16px;font-weight:300}
.rd .nl{background:#e7eae1;padding:clamp(64px,8vw,110px) 0}
.rd .nl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rd .nl h2{font-size:clamp(30px,3.6vw,48px);font-weight:500}
.rd .nl-form{display:flex;flex-direction:column;gap:14px;max-width:440px}
.rd .nl-row{display:flex;gap:10px;flex-wrap:wrap}
.rd .nl-input{flex:1;min-width:200px;height:56px;border:2px solid var(--rline-d);background:#fff;padding:0 18px;font-family:var(--rsans);font-size:15px;color:var(--rink)}
.rd .nl-input:focus{outline:none;border-color:var(--rink)}
.rd .nl-fine{font-size:12px;color:var(--rmuted)}
.rd .rfooter{background:var(--rforest);color:#fff;padding:clamp(44px,5vw,66px) 0 28px}
.rd .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px 34px}
/* F02 · the colour mark, as the client prefers. brightness(0) invert(1)
   knocked it to flat white on desktop while the 900px and 560px rules below
   already showed it in colour, so the same footer rendered two different
   ways by width. Sage on the footer green measures 4.42:1, well past the
   3:1 a graphic needs. */
.rd .rfoot-logo{height:168px;width:auto;margin:0 0 16px;opacity:1}
/* <picture> defaults to display:inline; inline-block keeps the footer logo
   link sized to its image. */
.rd .rfooter picture{display:inline-block}
.rd .ftag{font-size:14px;line-height:1.7;color:rgba(255,255,255,.6);max-width:min(100%,82ch);font-weight:300;margin-bottom:24px}
.rd .fmeta{display:flex;gap:28px;flex-wrap:wrap}
.rd .fmeta div span{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rmoss);margin-bottom:5px}
.rd .fmeta div strong{font-family:var(--disp);font-size:16px;font-weight:500;color:#fff}
.rd .fcol h2,.rd .fcol h3,.rd .fcol h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rmoss);margin-bottom:18px}
.rd .fcol ul{list-style:none}.rd .fcol li{margin-bottom:12px}
.rd .fcol a{font-size:14px;color:rgba(255,255,255,.72);font-weight:300}.rd .fcol a:hover{color:#fff}
.rd .fbadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.rd .fbadge{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.24);padding:8px 14px}
.rd .fbase{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.5)}
.rd .fbase a{color:rgba(255,255,255,.6)}.rd .fbase a:hover{color:#fff}
@media(max-width:900px){.rd .two,.rd .nl-grid,.rd .feature{grid-template-columns:1fr}.rd .feature .figure{min-height:300px}.rd .pillars,.rd .paths,.rd .stats-grid,.rd .plogos,.rd .footer-grid{grid-template-columns:1fr 1fr}.rd .vision .big{opacity:.5}.rd .rfoot-logo{height:108px;opacity:1}}
@media(max-width:560px){.rd .stats-grid,.rd .paths,.rd .plogos,.rd .footer-grid,.rd .pillars{grid-template-columns:1fr}.rd .hero-btns .btn{flex:1;justify-content:center}.rd .display{font-size:clamp(38px,11vw,60px)}.rd .rfoot-logo{height:108px;opacity:1}}
@media(max-width:768px){.rd .hero{display:block;min-height:auto;align-items:stretch}.rd .hero-img{position:absolute}.rd .hero-body{padding-top:36px;padding-bottom:44px}.rd .hero h1{margin:16px 0 20px}.rd .hero-sub{margin-bottom:28px}.rd .hero-btns{flex-direction:column;margin-bottom:36px}.rd .hero-btns .btn{width:100%}.rd .hmi{min-width:45%;padding:18px 20px 0 0}}

/* ── ACCESSIBLE COLOUR CONTRAST ── */
.bg-deep .eye,.bg-deep .tlink,.vision-eye,.featq-cite span{color:#cf9878!important}
.footer .ftag{color:#b6bdb0}
.footer .fbadge{color:#b6bdb0;border-color:rgba(255,255,255,.32)}
.footer .fc h2,.footer .fc h3,.footer .fc h4{color:#b6bdb0}
.footer .fc li{color:#b6bdb0}
.footer .fc-legal a{color:#b6bdb0}
.footer .fmeta span{color:#b6bdb0}
.footer .fbase{color:#b6bdb0!important}
.stats-band,.stat-n sup,.stats-note{color:#b6bdb0}
.rd .hero .kicker,.rd .sec-dark .kicker,.rd .vision .kicker,.rd .feature-tag,.rd .stat .n sup{color:#cf9878}
.rd .rfooter .fbase{color:#b6bdb0!important}

/* ── Core values row + credential slots (homepage) ── */
.values{list-style:none;display:flex;flex-wrap:wrap;gap:14px 34px;margin:34px 0 0;padding:0}
.values li{font-family:var(--disp,var(--sans));font-size:clamp(17px,2vw,25px);line-height:1.1;color:var(--rink,#191a16);position:relative;padding-right:34px}
/* .stats is a dark forest band: dark ink on it is unreadable. */
.stats .values li{color:#fff}
.values li:not(:last-child)::after{content:'';position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:2px;background:var(--rterra,#c4704b);transform:translateY(-50%)}
.creds{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:44px;padding-top:28px;border-top:1px solid var(--rline,rgba(17,19,16,.12))}
.cred-slot{flex:0 0 auto;width:168px;height:76px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border:1px dashed var(--rline,rgba(17,19,16,.22));border-radius:2px;background:repeating-linear-gradient(135deg,rgba(17,19,16,.035) 0 1px,transparent 1px 9px)}
.cred-slot span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.4;letter-spacing:.02em;color:var(--rmuted,#5a5a52)}
.cred-note{flex:1 1 320px;min-width:280px;font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--rmuted,#5a5a52);margin:0}
.stats .cred-note{color:rgba(255,255,255,.82)}
.stats .creds{border-top-color:rgba(255,255,255,.28)}
.stats .cred-slot{border-color:rgba(255,255,255,.34);color:#fff}
.hmi-wide strong{max-width:22ch}
@media (max-width:640px){.values{gap:12px 22px}.values li{padding-right:22px}.cred-slot{width:140px;height:64px}}

.news-note{margin-top:48px;padding:28px 30px;border:1px solid var(--rline,rgba(17,19,16,.12));border-radius:2px;background:var(--rbone2,#e7eae1)}
.news-note p{font-family:var(--sans);font-size:14px;line-height:1.75;color:var(--rmuted,#5a5a52);margin:0}

/* ── About: leadership bios ── */
.bios{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 36px;margin-top:48px}
.bio{display:flex;flex-direction:column}
.bio-por{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--sand);margin-bottom:20px}
.bio-por img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.bio-por-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;border:1px dashed var(--border);background:repeating-linear-gradient(135deg,rgba(17,19,16,.035) 0 1px,transparent 1px 10px)}
.bio-por-empty span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted)}
.bio h3{font-family:var(--disp);font-size:24px;line-height:1.15;margin:0 0 6px;color:var(--ink)}
.bio-role{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-t);margin:0 0 8px}
.bio-sub{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.bio-link{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:12px;color:var(--teal)}
.bio-more{margin-top:14px}
.bio-more .body+.body{margin-top:12px}

.figure-slot{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;border:1px dashed var(--rline,rgba(17,19,16,.22));background:repeating-linear-gradient(135deg,rgba(17,19,16,.04) 0 1px,transparent 1px 11px)}
.slot-note{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--rmuted,#5a5a52)}
.mm-sub{padding-left:22px;opacity:.75;font-size:.9em}

.dgr-line{margin-top:34px;padding-top:24px;border-top:1px solid var(--rline,rgba(17,19,16,.12));font-family:var(--sans);font-size:13px;line-height:1.75;color:var(--rmuted,#5a5a52);max-width:74ch}

.ap-stat{margin-top:28px;font-family:var(--disp);font-size:clamp(18px,2vw,22px);line-height:1.35;color:#fff;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.proc-body p+p{margin-top:14px}
.proc-lede{font-family:var(--disp);font-size:19px;line-height:1.4;color:var(--ink)}
.aq{margin:20px 0 0;padding:20px 24px;border-left:2px solid var(--terra);background:rgba(207,106,65,.06);font-family:var(--disp);font-size:19px;line-height:1.5;color:var(--ink)}
.principle p+p{margin-top:12px}

.t3-sub{font-family:var(--disp);font-style:italic;font-size:19px;line-height:1.4;color:var(--terra-t);margin:0 0 18px}

.lg-list{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.lg-list li{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--muted)}
.lg-list-2{columns:2;column-gap:40px;margin:24px 0 28px;padding-left:20px;display:block}
.lg-list-2 li{break-inside:avoid;margin-bottom:8px}
@media (max-width:720px){.lg-list-2{columns:1}}
#page-legacy .impact-list{list-style:none;padding-left:0}
#page-legacy .impact-list li{position:relative;min-height:24px;padding-left:30px}
#page-legacy .impact-list li::before{content:"";position:absolute;left:4px;top:.18em;width:7px;height:13px;border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:rotate(45deg)}

/* Beyond the Numbers · the ticks draw in one after another as the list
   arrives. The transform already carries the 45° rotation, so the entrance
   scales from the same origin rather than replacing it.
   Gated on .js.motion-ready so the ticks render settled without JS, and
   inside no-preference so reduced motion shows them immediately. */
@media(prefers-reduced-motion:no-preference){
  .js.motion-ready #page-legacy .impact-list li::before{
    opacity:0;transform:rotate(45deg) scale(.4);transform-origin:60% 40%}
  /* The delay is set INSIDE this rule, not in separate lower-specificity
     nth-child rules: the `transition` shorthand resets transition-delay to
     0s, and this gated selector outranks an ungated one, so an outside
     delay would be silently discarded. --tick is set per item below and
     covers all ten. */
  .js.motion-ready #page-legacy .impact-list.m-in li::before{
    opacity:1;transform:rotate(45deg) scale(1);
    transition:opacity .3s ease,transform .42s cubic-bezier(.2,.9,.3,1);
    transition-delay:calc(var(--tick,0) * .07s)}
  #page-legacy .impact-list li:nth-child(1){--tick:0}
  #page-legacy .impact-list li:nth-child(2){--tick:1}
  #page-legacy .impact-list li:nth-child(3){--tick:2}
  #page-legacy .impact-list li:nth-child(4){--tick:3}
  #page-legacy .impact-list li:nth-child(5){--tick:4}
  #page-legacy .impact-list li:nth-child(6){--tick:5}
  #page-legacy .impact-list li:nth-child(7){--tick:6}
  #page-legacy .impact-list li:nth-child(8){--tick:7}
  #page-legacy .impact-list li:nth-child(9){--tick:8}
  #page-legacy .impact-list li:nth-child(10){--tick:9}
}
.lg-pull{font-family:var(--disp);font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--ink);padding-left:18px;border-left:2px solid var(--terra);margin:18px 0}

.entity{margin:0 0 24px;padding:22px 24px;background:var(--sand);border:1px solid var(--border);border-radius:2px;display:flex;flex-direction:column;gap:10px}
.entity>div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-bottom:1px solid var(--blight);padding-bottom:10px}
.entity>div:last-child{border-bottom:0;padding-bottom:0}
.entity dt{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.entity dd{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);margin:0;text-align:right}

.cred-badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.rd .feature-body .feature-h{font-size:clamp(30px,3.4vw,46px);color:#fff;margin-bottom:20px;font-weight:500;line-height:1.06;font-family:var(--disp)}
.rd .path .path-h{font-size:26px;margin-bottom:14px;font-weight:500;font-family:var(--disp);line-height:1.15;color:var(--f-forest)}

/* ── Contrast + keyboard focus ── */
:root{--focus-ring:#cf9878}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
.sec-dark a:focus-visible,.bg-deep a:focus-visible,.rd .rfooter a:focus-visible,.footer a:focus-visible,#cookie button:focus-visible,#cookie a:focus-visible,.mobile-menu a:focus-visible{outline:3px solid #e0b49b;outline-offset:3px}
.nl-input:focus,.rd .nl-input:focus{outline:3px solid var(--focus-ring);outline-offset:2px}
.nl-input input:focus{outline:none}
.nl-input:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
#newsletter-email:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.rd .ftag{color:rgba(255,255,255,.82)}
.footer .ftag{color:#ccd2c6}
.footer .fbadge,.rd .fbadge{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.42)}
.rd .fmeta div span,.footer .fmeta div span{color:#ccd2c6}
.fc-legal a,.rd .fbase a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:3px}
.fc-legal a:hover,.rd .fbase a:hover{color:#fff}
#cookie p{color:rgba(255,255,255,.93)}
#cookie a{color:#cf9878}
#cookie .dec{border-color:rgba(255,255,255,.55)}
.sec-dark .body,.bg-deep .body{color:rgba(255,255,255,.86)!important}
.nl-fine{font-size:12px;line-height:1.7;color:var(--muted)}
.nl-fine a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
main{display:block}
.path-status{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--rmuted,#5a5a52);margin-top:12px;padding-top:12px;border-top:1px solid var(--rline,rgba(17,19,16,.12))}

/* hero fit — .hero-body owns all top spacing; the base .hero padding is
   zeroed here so the two never stack. */
.rd .hero{height:auto;padding-top:0;min-height:0;align-items:stretch}
.rd .hero-body{display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(56px,8vh,92px);padding-bottom:clamp(36px,5vh,64px)}
.rd .hero h1{margin:18px 0 22px}
.rd .hero-sub{margin-bottom:30px}
.rd .hero-btns{margin-bottom:38px}
.rd .hmi{padding:18px 26px 0 0}
@media (min-height:760px){
  .rd .hero{min-height:min(86vh,900px)}
  .rd .hero-body{padding-top:clamp(76px,10vh,120px);padding-bottom:clamp(48px,6vh,80px)}
  .rd .hero h1{margin:22px 0 26px}
  .rd .hero-sub{margin-bottom:36px}
  .rd .hero-btns{margin-bottom:48px}
}
/* The credential row drives the hero's height: below a tall viewport it
   becomes a compact single-line row. */
@media (max-height:820px){
  .rd .hero-meta{gap:0 8px}
  .rd .hmi{padding:16px 22px 0 0;min-width:0}
  .rd .hmi span{margin-bottom:4px;font-size:10px}
  .rd .hmi strong{font-size:16px;line-height:1.25}
  .hmi-wide{flex:2 1 320px}
  .hmi-wide strong{max-width:none}
}
@media (max-height:640px){
  .rd .hero-body{padding-top:44px;padding-bottom:26px}
  .rd .hero h1{font-size:clamp(26px,4.4vw,36px);margin:12px 0 14px;max-width:20ch}
  .rd .hero-sub{margin-bottom:20px;font-size:14px;max-width:62ch}
  .rd .hero-btns{margin-bottom:22px}
  .rd .btn{padding:13px 24px}
  .rd .hmi{padding:12px 20px 0 0}
  .rd .hmi span{font-size:9px;margin-bottom:2px}
  .rd .hmi strong{font-size:14px}
}

.principle>h3:first-child{margin-top:0}

/* ══ SHARED MOTION VOCABULARY (legacy scope) ══════════════════════════
   Pages not yet on the .rd system use the same three behaviours, defined
   against the same values so the site has one motion language. Gated on
   html.js.motion-ready and removed under prefers-reduced-motion. */
.lift{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lift:hover,.lift:focus-within{transform:translateY(-4px);box-shadow:0 10px 26px rgba(25,26,22,.11)}
.js.motion-ready .rise>*{opacity:0;transform:translateY(14px)}
.js.motion-ready .rise.is-revealed>*{opacity:1;transform:none;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.6,.2,1)}
.rise.is-revealed>*:nth-child(1){transition-delay:.04s}
.rise.is-revealed>*:nth-child(2){transition-delay:.12s}
.rise.is-revealed>*:nth-child(3){transition-delay:.2s}
.rise.is-revealed>*:nth-child(4){transition-delay:.28s}
.rise.is-revealed>*:nth-child(5){transition-delay:.36s}
.rise.is-revealed>*:nth-child(6){transition-delay:.44s}
.js.motion-ready .eye.mark,.js.motion-ready .kicker.mark{opacity:0;transform:translateY(6px)}
.js.motion-ready .mark.is-revealed{opacity:1;transform:none;transition:opacity .34s ease,transform .34s cubic-bezier(.2,.6,.2,1)}
@media(prefers-reduced-motion:reduce){
  .lift{transition:none}
  .lift:hover,.lift:focus-within{transform:none;box-shadow:none}
  .rise>*,.rise.is-revealed>*,.mark,.mark.is-revealed{opacity:1!important;transform:none!important;transition:none!important;transition-delay:0s!important}
}

/* ══ IMAGE SLOT ═══════════════════════════════════════
   Empty slots are decorative and aria-hidden, so screen readers are not
   told about an image the page does not yet carry. */
.imgslot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;border:1px dashed var(--border);border-radius:2px;background:repeating-linear-gradient(135deg,rgba(42,50,38,.045) 0 8px,transparent 8px 16px),var(--sand)}
.imgslot span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.6;letter-spacing:.02em;color:var(--muted);max-width:26ch}
.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(--light);opacity:.75}
.imgslot-43{aspect-ratio:4/3}
.imgslot-45{aspect-ratio:4/5}
.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. */
.imgslot-wide{aspect-ratio:21/9}

/* ── "Read full profile" link ──────────────────────────────────────────
   Defined in style.css because about.html loads only style.css. Same CTA
   treatment as .tlink — darkest green, uppercase, 2px underline. */
.bio-more{margin-top:14px}
.bio-more a{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--deep);text-decoration:none;border-bottom:2px solid var(--deep);padding-bottom:3px;display:inline-block;transition:color .18s,border-color .18s}
.bio-more a:hover{color:#122010;border-color:#122010}
.bio-more a:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.bio-more a{transition:none}}

/* Registration mark tile: white ground, kept off the section surface. */



/* ── PARTNER MARKS ──
   Contained in a fixed-height box and scaled to fit, so
   source ratios from 588×228 to 1970×2022 sit on one optical baseline
   without distortion. Width is capped as well as height, because a square
   mark at a given height reads far heavier than a wide wordmark. */
.plogo{display:flex;align-items:center;justify-content:flex-start;height:clamp(44px,4.4vw,58px);margin-bottom:14px;border-left:0;padding-left:0}
.plogo img{max-width:min(100%,132px);max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.plogo-tall img{max-height:100%}
.plogo-wide img{max-height:74%}
/* XL Catlin is supplied as white type on black, so it needs its own ground. */
.plogo-dark{background:#111310;padding:8px 12px;justify-content:center}
.plist li>span:not(.plogo){font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
@media(max-width:600px){.plogo{height:46px;justify-content:flex-start}}

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

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

  .fbase .fc-legal a,.fcol a,.fc a{min-height:44px;display:inline-flex;align-items:center}
  .bio-more a,.bio-ext,.pers-link a{min-height:44px;display:inline-flex;align-items:center}
  .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 */
  .fbase .fc-legal{gap:2px 14px}
}

/* ── PORTABLE MOBILE COLLAPSES ─────────────────────────────────────────
   field.css already collapses these; duplicated unprefixed so a page that
   does not load field.css degrades the same way instead of overflowing. */
@media(max-width:820px){
  .plist{grid-template-columns:repeat(2,1fr)}
  .hero-meta{grid-template-columns:1fr 1fr}
  .footer-grid>div,.footer-grid .fcol{grid-column:1 / span 12}
}
@media(max-width:600px){
  .plist{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:1fr}
}
/* ── PALETTE · harvest tokens available on every page ─────────────────
   Several pages do not load field.css. Declaring the --f-* family at the
   root means no page can fall back to an undefined colour. */
:root{
  --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
}
/* Footer registration mark: light-on-transparent for the dark ground. */



.fbase{align-items:center}


/* ── LEGACY PAGE · closing quote on the lighter green ──────────────────
   Moss (#5a6e3a) rather than the deepest forest. White type gives 4.9:1 on
   this ground, so the attribution's peach (#cf9878, ~2.6:1 here) is lifted to
   sand and the body's 86% white is taken to full white. Scoped to this page:
   other .bg-deep sections keep the deep ground. */
#page-legacy .bg-deep{background:var(--forest)}
#page-legacy .bg-deep .featq-text,#page-legacy .bg-deep .body{color:#fff!important}
#page-legacy .bg-deep .featq-mark{color:rgba(255,255,255,.34)}
#page-legacy .bg-deep .featq-cite{color:#fff}
#page-legacy .bg-deep .featq-cite span{color:var(--sand)!important}

/* ── Filled image slots ────────────────────────────────────────────────
   A filled slot drops its dressing (dashed rule, hatch, padding, IMAGE
   label); the image covers the reserved ratio, so no layout shift. */
.imgslot.is-filled{padding:0;border:0;background:var(--sand2);overflow:hidden}
.imgslot.is-filled::before{content:none}
.imgslot.is-filled>img,.imgslot.is-filled>picture>img{width:100%;height:100%;object-fit:cover;display:block}

/* ── LEGACY PAGE · photographic hero ───────────────────────────────────
   The story opens on the community school being built. White type sits on
   a deep-forest scrim rather than directly on the photograph: the image is
   bright and busy, and unmediated white would not hold. The scrim is the
   brand's Deep Forest, angled so weight gathers behind the text column and
   the right-hand side of the frame stays readable. */
#page-legacy .lg-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);min-height:min(78vh,660px);display:flex;align-items:flex-end}
#page-legacy .lg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 42%;z-index:0}
#page-legacy .lg-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(100deg,rgba(28,42,20,.95) 0%,rgba(28,42,20,.88) 34%,rgba(28,42,20,.6) 58%,rgba(28,42,20,.3) 80%,rgba(28,42,20,.22) 100%),
  linear-gradient(180deg,rgba(20,31,14,.72) 0%,rgba(20,31,14,.1) 30%,rgba(20,31,14,.28) 72%,rgba(16,25,11,.7) 100%)}
#page-legacy .lg-hero-in{position:relative;z-index:2;width:100%;padding-top:clamp(96px,16vh,168px);padding-bottom:clamp(48px,7vh,84px)}
#page-legacy .lg-hero .eye{color:var(--f-terra-l,#e0a184)}
#page-legacy .lg-hero .eye::before{background:var(--f-terra-l,#e0a184)}
#page-legacy .lg-hero .t1{color:#fff}
#page-legacy .lg-hero .lead{color:rgba(255,255,255,.84)}
@media(max-width:720px){
  #page-legacy .lg-hero{min-height:0}
  #page-legacy .lg-hero-img{object-position:62% 40%}
  #page-legacy .lg-hero-scrim{background:
    linear-gradient(180deg,rgba(28,42,20,.72) 0%,rgba(28,42,20,.86) 46%,rgba(20,31,14,.95) 100%)}
}

/* ── LEGACY PAGE · white ground ────────────────────────────────────────
   The page runs on white throughout; only the photographic hero and the
   closing quote on moss carry colour. A hairline rule separates adjacent
   sections — without it a very long page reads as one column. */
#page-legacy .bg-sand,#page-legacy .bg-warm{background:#fff}
#page-legacy .bg-sand+.bg-warm,#page-legacy .bg-warm+.bg-sand,
#page-legacy .bg-warm+.bg-warm,#page-legacy .bg-sand+.bg-sand{border-top:1px solid var(--blight)}
#page-legacy .lg-hero+div{border-top:0}
/* Filled image slots sat on a sand plate that now shows against white. */
#page-legacy .imgslot.is-filled{background:#f2efe9}

/* ── LEGACY PAGE · lessons cards ───────────────────────────────────────
   A quiet three-over-two grid gives each lesson room to read without
   adding new colours, decoration or copy. */
/* Six cards on an even 3x2 grid, so every card carries one equal share of
   the row and none is left spanning a wider track than its neighbours. */
#page-legacy .lessons{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,18px);margin-top:clamp(22px,2.6vw,32px)}
#page-legacy .lessons li{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.3vw,32px);border:1px solid var(--forest);background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media(hover:hover) and (pointer:fine){
  #page-legacy .lessons li:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(25,26,22,.09)}
}
@media(prefers-reduced-motion:reduce){
  #page-legacy .lessons li{transition:none}
  #page-legacy .lessons li:hover{transform:none}
}
@media(max-width:900px){#page-legacy .lessons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#page-legacy .lessons{grid-template-columns:1fr}}
/* Hairline box: one 1px green line on all four sides, square corners —
   matching the core-values, Hub and get-involved tiles. */


#page-legacy .lesson-h{font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);font-weight:500;line-height:1.22;letter-spacing:-.014em;color:var(--forest);margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--border);text-wrap:pretty}
#page-legacy .lesson-p{font-family:var(--rsans,var(--sans));font-size:14.5px;line-height:1.7;color:var(--muted);text-wrap:pretty;margin:0}


/* ── LEGACY PAGE · horizontal timeline rail ────────────────────────────
   Ten entries read sideways instead of down. The vertical column ran about
   6,400px; this section is roughly 900px, so the page loses most of its
   length without losing a word of copy.

   Native horizontal scrolling with snap — deliberately not scroll-jacking.
   Vertical scroll keeps doing what the reader expects, the track is a real
   focusable region so arrow keys work, and the two buttons are real
   buttons. Below 900px the track unwraps into an ordinary vertical list,
   because a horizontal rail on a phone competes with the page scroll. */
#page-legacy .tl-rail-band{background:var(--deep);padding:clamp(40px,4.6vw,60px) 0 clamp(32px,3.6vw,44px);color:#fff}
#page-legacy .rail-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:14px 0 18px}
/* Heading opens the rail band so heading, hint, controls and rail read as
   one interface. */
/* Released from 26ch so the heading can sit on one line at desktop. */
#page-legacy .rail-intro{max-width:none}
#page-legacy .rail-intro .t2{color:#fff;margin:0;text-wrap:nowrap}
/* Below ~760px there is not room for one line, so wrapping is allowed
   again rather than forcing an overflow. */
@media(max-width:760px){#page-legacy .rail-intro .t2{text-wrap:balance}}
#page-legacy .rail-intro .eye{color:var(--f-terra-l,#e0a184);margin-bottom:12px}
/* The arrow is decorative and aria-hidden; the buttons carry the labels. */
/* L01 · the instruction was 12.5px at 72% white, which read as fine print
   next to the controls it explains. Larger and brighter; wording unchanged. */
#page-legacy .rail-hint{font-family:var(--rsans,var(--sans));font-size:15px;line-height:1.55;color:rgba(255,255,255,.9);margin:0;display:flex;align-items:center;gap:9px}
#page-legacy .rail-hint-cue{display:inline-block;font-size:17px;color:var(--f-terra-l,#e0a184);animation:railcue 2.4s ease-in-out infinite}
@keyframes railcue{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){#page-legacy .rail-hint-cue{animation:none}}
#page-legacy .rail-nav{display:flex;gap:10px;flex:none}
#page-legacy .rail-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,opacity .25s ease}
#page-legacy .rail-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#page-legacy .rail-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
#page-legacy .rail-btn:focus-visible{outline:2px solid var(--f-terra-l,#e0a184);outline-offset:3px}
#page-legacy .rail-btn[disabled]{opacity:.3;cursor:default}

#page-legacy .rail-track{list-style:none;align-items:stretch;display:grid;grid-auto-flow:column;grid-auto-columns:min(88vw,620px);gap:clamp(16px,1.8vw,26px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 0 20px;margin:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
#page-legacy .rail-track:focus-visible{outline:2px solid var(--f-terra-l,#e0a184);outline-offset:6px}
#page-legacy .rail-track::-webkit-scrollbar{height:6px}
#page-legacy .rail-track::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
#page-legacy .rail-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}

#page-legacy .rail-card{scroll-snap-align:start;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:2px;padding:clamp(22px,2.2vw,30px);min-width:0}
#page-legacy .rail-meta{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--blight)}
#page-legacy .rail-tag{font-family:var(--rsans,var(--sans));font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--terra-t)}
#page-legacy .rail-yr{font-family:var(--disp);font-size:clamp(24px,2.3vw,32px);font-weight:500;line-height:1.1;letter-spacing:-.02em;color:var(--forest);text-wrap:balance}
#page-legacy .rail-idx{font-family:var(--rsans,var(--sans));font-size:9.5px;letter-spacing:.14em;color:var(--light)}
#page-legacy .rail-body{min-width:0}
#page-legacy .rail-body .t3{font-family:var(--disp);font-size:clamp(16px,1.25vw,19px);font-weight:500;line-height:1.28;color:var(--ink);margin-bottom:10px}
#page-legacy .rail-body .body,#page-legacy .rail-body .small{font-size:13px;line-height:1.68;margin-bottom:11px}
#page-legacy .rail-body .body:last-child{margin-bottom:0}
#page-legacy .rail-body .imgslot{margin-top:0!important;margin-bottom:14px}
#page-legacy .rail-body .imgslot.is-filled{aspect-ratio:21/9}

#page-legacy .rail-prog{height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
#page-legacy .rail-prog-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--f-terra-l,#e0a184);transition:width .18s linear}

@media(prefers-reduced-motion:reduce){
  #page-legacy .rail-track{scroll-behavior:auto}
  #page-legacy .rail-prog-fill{transition:none}
}

/* Under 900px the rail becomes an ordinary vertical list. */
@media(max-width:900px){
  #page-legacy .rail-track{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;gap:16px;padding-bottom:0}
  #page-legacy .rail-card{scroll-snap-align:none}
  #page-legacy .rail-nav,#page-legacy .rail-prog,#page-legacy .rail-hint{display:none}
  #page-legacy .rail-head{display:none}
  #page-legacy .rail-body .body,#page-legacy .rail-body .small{font-size:14px}
}

/* Legacy timeline route and station treatment.
   Scoped to #page-legacy; no global token changes. */
#page-legacy .rail-meta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  column-gap:16px;
  row-gap:7px;
}
#page-legacy .rail-tag{grid-column:1;grid-row:1}
#page-legacy .rail-idx{grid-column:2;grid-row:1;text-align:right}
#page-legacy .rail-yr{grid-column:1/-1;grid-row:2}
#page-legacy .rail-card{
  --rail-card-pad:clamp(24px,2.4vw,32px);
  height:auto;
  padding:var(--rail-card-pad);
  border:1px solid rgba(18,46,43,.12);
  border-top:3px solid var(--terra);
  box-shadow:0 18px 42px rgba(3,22,24,.2);
}
#page-legacy .rail-btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
/* Non-interactive progress indicator: no pointer cursor, no slider semantics. */
#page-legacy .rail-prog{
  height:3px;
  margin-top:18px;
  overflow:hidden;
  border-radius:0;
  background:rgba(255,255,255,.14);
  cursor:default;
  pointer-events:none;
}
#page-legacy .rail-prog-fill{border-radius:0}
/* No endpoint marker on the progress line: a circular cap reads as a
   drag handle. The line is a plain rectangle with square ends. */

@media(min-width:901px){
  #page-legacy .tl-rail-band{padding-top:clamp(34px,4vw,52px)}
  #page-legacy .rail-track{
    --rail-gap:clamp(24px,3vw,44px);
    align-items:start;
    grid-auto-columns:min(82vw,640px);
    gap:var(--rail-gap);
    padding:48px 0 30px;
    scrollbar-color:rgba(255,255,255,.24) transparent;
  }
  #page-legacy .rail-card{position:relative;scroll-margin-left:2px}
  #page-legacy .rail-card::before{
    content:"";
    position:absolute;
    z-index:0;
    top:-34px;
    left:var(--rail-card-pad);
    width:calc(100% + var(--rail-gap));
    height:2px;
    background:linear-gradient(90deg,var(--f-terra-l,#e0a184),rgba(255,255,255,.34));
  }
  #page-legacy .rail-card:last-child::before{display:none}
  #page-legacy .rail-card::after{
    content:"";
    position:absolute;
    z-index:1;
    top:-41px;
    left:calc(var(--rail-card-pad) - 7px);
    width:16px;
    height:16px;
    border:3px solid var(--f-terra-l,#e0a184);
    border-radius:50%;
    background:var(--deep);
    box-shadow:0 0 0 6px var(--deep),0 0 0 7px rgba(255,255,255,.18);
  }
}

@media(max-width:900px){
  #page-legacy .rail-track{
    position:relative;
    gap:22px;
    padding:4px 0 4px 30px;
  }
  #page-legacy .rail-track::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:7px;
    width:2px;
    background:linear-gradient(var(--f-terra-l,#e0a184),rgba(255,255,255,.2));
  }
  #page-legacy .rail-card{position:relative;border-top-width:1px;border-left:3px solid var(--terra)}
  #page-legacy .rail-card::before{
    content:"";
    position:absolute;
    top:28px;
    left:-24px;
    width:22px;
    height:2px;
    background:var(--f-terra-l,#e0a184);
  }
  #page-legacy .rail-card::after{
    content:"";
    position:absolute;
    top:21px;
    left:-31px;
    width:14px;
    height:14px;
    border:3px solid var(--f-terra-l,#e0a184);
    border-radius:50%;
    background:var(--deep);
  }
}

/* EDGE Worldwide · About page design
   Scoped to #page-about. Uses only the existing site palette and assets. */

#page-about .ab-hero .s{padding-top:clamp(52px,5.7vw,75px);padding-bottom:clamp(52px,5.7vw,75px)}
#page-about .ab-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(44px,6vw,86px);align-items:center}
#page-about .ab-hero-copy .t1{max-width:14ch;font-size:clamp(33px,3.8vw,50px)}
#page-about .ab-hero-copy .lead{max-width:61ch}
#page-about .ab-hero-media{position:relative;min-height:clamp(330px,33vw,440px);overflow:hidden;border:1px solid var(--border);border-radius:3px;box-shadow:0 10px 28px rgba(24,24,15,.07);background:var(--sand2)}
#page-about .ab-hero-media::after{content:"";position:absolute;left:-1px;bottom:-1px;width:34%;height:5px;background:var(--terra)}
#page-about .ab-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}

#page-about .ab-section{border-top:1px solid var(--blight)}
#page-about .ab-intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,78px);align-items:start}
#page-about .ab-intro-grid .t2{max-width:13ch;margin-bottom:0}
#page-about .ab-intro-copy{padding-left:clamp(26px,3vw,42px);border-left:1px solid var(--border)}
#page-about .ab-intro-copy .body+.body{margin-top:14px}

/* Three across, filling row by row as people are added — a 3×3 field with
   room for nine. An incomplete last row leaves its remaining cells simply
   absent: no stretched card, no placeholder, and no reserved gap, because
   the grid's rows are content-sized and the row itself ends after the last
   real card. */
#page-about .ab-bios{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(42px,5vw,64px);align-content:start;justify-items:stretch}
#page-about .ab-bio{min-width:0;overflow:hidden;border:1px solid var(--border);background:var(--sand);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
/* Every card is an ordinary cell, including the last one. A previous rule
   stretched a trailing card across the row, which only worked for one
   specific head-count and would misread the grid as soon as a fifth or
   eighth person was added. */
#page-about .ab-bio:last-child{grid-column:auto;display:flex}
#page-about .ab-bio:last-child .bio-por{height:auto;aspect-ratio:4/4.85;border-right:0;border-bottom:1px solid var(--border)}
#page-about .ab-bio .bio-por{aspect-ratio:4/4.85;margin:0;border-radius:0;border-bottom:1px solid var(--border)}
#page-about .ab-bio .bio-por img{object-position:center 20%}
#page-about .ab-bio:nth-child(2) .bio-por img{object-position:center 18%}
#page-about .ab-bio:nth-child(3) .bio-por img{object-position:center 12%}
#page-about .ab-bio-body{display:flex;flex:1;flex-direction:column;padding:clamp(22px,2.2vw,30px)}
#page-about .ab-bio-body .body{font-size:14px;line-height:1.75}
#page-about .ab-bio-body .bio-more{margin-top:auto;padding-top:20px}

#page-about .ab-work .s{padding-top:clamp(68px,8vw,104px);padding-bottom:clamp(68px,8vw,104px)}
#page-about .ab-work-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(42px,6vw,82px);align-items:start}
#page-about .ab-work-intro{position:sticky;top:132px}
#page-about .ab-work-intro .t2{max-width:12ch}
#page-about .ab-work-intro .body{max-width:42ch}
#page-about .ab-work-label{margin-bottom:16px}
#page-about .ab-work-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0}
#page-about .ab-work-grid li{position:relative;min-width:0;display:flex;flex-direction:column;padding:clamp(20px,2vw,26px);border:1px solid var(--border);border-radius:3px;background:var(--warm);box-shadow:0 1px 2px rgba(24,24,15,.03);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
#page-about .ab-work-h{font-family:var(--disp);font-size:clamp(16.5px,1.35vw,19px);line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--forest);text-align:center;margin:0 0 10px;text-wrap:pretty}
#page-about .ab-work-grid .body{font-size:14px;line-height:1.75;text-align:left;margin:0}

#page-about .ab-origin{border-top:1px solid var(--blight)}
#page-about .ab-origin .s{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(72px,8vw,112px)}
#page-about .ab-origin-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(46px,7vw,92px);align-items:center}
#page-about .ab-origin-copy{grid-column:2;grid-row:1}
#page-about .ab-origin-copy .t2{max-width:15ch}
#page-about .ab-origin-media{grid-column:1;grid-row:1;min-height:clamp(500px,52vw,680px);overflow:hidden;border:1px solid var(--border);border-radius:3px;box-shadow:0 12px 32px rgba(24,24,15,.07);background:var(--sand)}
#page-about .ab-origin-media img{width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:center;display:block}

#page-about .ab-trust .s{padding-top:clamp(64px,7vw,92px);padding-bottom:clamp(64px,7vw,92px)}
#page-about .ab-trust-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(42px,6vw,82px);padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);align-items:start}
#page-about .ab-trust-heading .t2{max-width:11ch;margin-bottom:0}
/* Reserved space for the official ACNC Registered Charity Tick, which is a
   circular mark. Dashed and labelled so it cannot be mistaken for the real
   artwork, and aria-hidden because the ACNC and DGR status is already
   stated as text in the copy beside it. Replace with the supplied file. */
/* Official ACNC Registered Charity Tick, beneath the Governance &
   Accountability heading. Full-colour artwork on the light panel. */
/* Official ACNC artwork is supplied as a complete circular mark on a
   transparent ground, with its own clear space. No circular mask, plate or
   crop: a 50% radius inscribed in this box sits exactly on the artwork's
   outer ring and shaves it. */
#page-about .acnc-slot{width:clamp(124px,11vw,156px);aspect-ratio:1;margin-top:clamp(26px,3vw,38px)}
#page-about .acnc-slot img{display:block;width:100%;height:100%;object-fit:contain}
#page-about .ab-trust-copy .lead{color:var(--muted);font-size:clamp(16px,1.35vw,18px)}
#page-about .ab-trust-copy .body{margin-top:18px;max-width:62ch}

@media(hover:hover) and (pointer:fine){
  #page-about .ab-bio:hover{transform:translateY(-3px);border-color:var(--terra);box-shadow:0 9px 24px rgba(24,24,15,.08)}
#page-about .ab-work-grid li:hover,#page-about .ab-work-grid li:focus-within{transform:translateY(-3px);border-color:var(--terra);box-shadow:0 8px 20px rgba(24,24,15,.07)}
#page-about .ab-origin-media img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
#page-about .ab-origin-media:hover img{transform:scale(1.02)}
}

@media(max-width:980px){
  #page-about .ab-hero-grid{grid-template-columns:1fr;gap:38px}
  #page-about .ab-hero-copy .t1{max-width:16ch}
  #page-about .ab-hero-media{min-height:clamp(280px,52vw,410px)}
  /* Stacked hero: the 16ch headline cap was set for a narrow side-by-side
     column, so once the grid is one full-width column it left a large blank
     gutter to the right of every line and pushed the block taller than it
     needs to be. Copy takes a proper single-column measure instead, and the
     band's padding, gap and image height tighten with it. */
  #page-about .ab-hero .s{padding-top:clamp(30px,3.2vw,40px);padding-bottom:clamp(30px,3.2vw,40px)}
  #page-about .ab-hero-grid{gap:22px}
  #page-about .ab-hero-copy .eye{margin-bottom:11px}
  #page-about .ab-hero-copy .t1{max-width:26ch;font-size:clamp(30px,4.1vw,39px);line-height:1.06;margin-bottom:14px;text-wrap:pretty}
  /* The lead was capped near 63ch — six lines in a column this wide. Letting
     it run the full measure drops it to three or four and takes ~60px out of
     the band on its own. */
  #page-about .ab-hero-copy .lead{max-width:none;line-height:1.66;text-wrap:pretty}
  #page-about .ab-hero-media{min-height:clamp(220px,32vw,280px)}
  #page-about .ab-bios{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-about .ab-work-layout{grid-template-columns:1fr;gap:34px}
  #page-about .ab-work-intro{position:static;display:grid;grid-template-columns:1fr 1fr;gap:30px}
  #page-about .ab-work-intro .t2{max-width:14ch}
  #page-about .ab-work-intro .body{align-self:end}
  #page-about .ab-origin-grid{grid-template-columns:1fr;gap:38px}
  #page-about .ab-origin-copy,#page-about .ab-origin-media{grid-column:1}
  #page-about .ab-origin-copy{grid-row:1}
  #page-about .ab-origin-media{grid-row:2;min-height:clamp(380px,66vw,560px)}
}

@media(max-width:720px){
  #page-about .ab-intro-grid,#page-about .ab-trust-panel{grid-template-columns:1fr;gap:28px}
  #page-about .ab-intro-copy{padding:24px 0 0;border-left:0;border-top:1px solid var(--border)}
  #page-about .ab-bios{grid-template-columns:1fr}
  #page-about .ab-work-intro{display:block}
  #page-about .ab-work-intro .body{margin-top:18px}
  #page-about .ab-work-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  #page-about .ab-hero .s,#page-about .ab-leadership .s,#page-about .ab-work .s,#page-about .ab-origin .s,#page-about .ab-trust .s{padding-left:22px;padding-right:22px}
  #page-about .ab-hero-media{min-height:270px}
  #page-about .ab-origin-media{min-height:360px}
  #page-about .ab-bio-body{padding:22px}
  #page-about .ab-bio-body .bio-more{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  #page-about .ab-bio-body .bio-ext{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  #page-about .ab-bio,#page-about .ab-work-grid li,#page-about .ab-origin-media img{transition:none}
  #page-about .ab-bio:hover,#page-about .ab-work-grid li:hover,#page-about .ab-origin-media:hover img{transform:none}
}

/* Footer social marks. 44px minimum touch target. */
/* Brand-area placement: larger targets, EDGE green rather than the
   platforms' own brand colours. The marks are white SVGs, so the tint
   comes from a background chip instead of recolouring the artwork. */
.fsocial{display:flex;gap:10px;margin-top:18px}
.fsocial-brand{gap:12px;margin:18px 0 0}
.fsocial-brand a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--f-moss,#5a6e3a);border:1px solid rgba(255,255,255,.22);transition:background .22s ease,transform .22s ease}
.fsocial-brand a:hover{background:var(--f-terra,#c4704b);transform:translateY(-2px)}
.fsocial-brand a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fsocial-brand img{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.fsocial-brand a{transition:none}.fsocial-brand a:hover{transform:none}}
.fsocial a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:rgba(255,255,255,.82);text-decoration:none;font-family:var(--rsans,var(--sans));font-size:11px;font-weight:600;letter-spacing:.08em;transition:color .18s,border-color .18s}
.fsocial a:hover{color:#fff;border-color:#e0ad8a}
.fsocial a:focus-visible{outline:2px solid #e0ad8a;outline-offset:3px}
.fbase .fsocial{margin-top:0}

/* Inlined to avoid an extra request. */
.fsocial a{border:0}
.fsocial a svg{width:23px;height:23px;display:block;fill:currentColor}

/* ── TIMELINE RAIL · softened edges ────────────────────────────────
   Same structure, content and behaviour; lower-contrast rule, smaller
   nodes, gentler card edges, and a fade instead of a hard right cut. */
#page-legacy .rail-card{border-radius:7px;border-top-width:2px;border-top-color:rgba(207,106,65,.58);box-shadow:0 12px 32px rgba(3,22,24,.14)}
#page-legacy .rail-prog{background:rgba(255,255,255,.1)}
#page-legacy .rail-prog-fill{transition:width .38s cubic-bezier(.22,.61,.36,1)}

#page-legacy .rail-track::-webkit-scrollbar{height:4px}
#page-legacy .rail-track::-webkit-scrollbar-track{background:transparent}
#page-legacy .rail-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
@media(min-width:901px){
  #page-legacy .rail-track{scrollbar-color:rgba(255,255,255,.18) transparent;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 76px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 76px),transparent 100%)}
  #page-legacy .rail-card::before{height:1px;background:linear-gradient(90deg,rgba(224,161,132,.5),rgba(255,255,255,.1))}
  #page-legacy .rail-card::after{top:-39px;left:calc(var(--rail-card-pad) - 5px);width:10px;height:10px;border:0;background:var(--f-terra-l,#e0a184);box-shadow:0 0 0 4px var(--deep),0 0 0 5px rgba(255,255,255,.1),0 0 0 9px rgba(224,161,132,.1)}
}
@media(max-width:900px){
  #page-legacy .rail-card{border-left-width:2px;border-left-color:rgba(207,106,65,.5)}
  #page-legacy .rail-track::before{width:1px;background:linear-gradient(rgba(224,161,132,.5),rgba(255,255,255,.07))}
  #page-legacy .rail-card::before{height:1px;background:rgba(224,161,132,.45)}
  #page-legacy .rail-card::after{top:24px;left:-29px;width:9px;height:9px;border:0;background:var(--f-terra-l,#e0a184);box-shadow:0 0 0 4px var(--deep)}
}
/* Footer marks are now files, so hover shifts opacity rather than colour. */
.fsocial a{opacity:.86;transition:opacity .18s}
.fsocial a:hover,.fsocial a:focus-visible{opacity:1}
.fsocial a img{width:23px;height:23px;display:block}

/* Rail cards are equal-height grid items (align-items:stretch), so the row
   reads as one band rather than a ragged skyline. Cards whose text is
   shorter than the tallest card's would otherwise end in a block of empty
   space, so the photograph absorbs the surplus: the image slot flex-grows
   up to 400px and the picture covers it. Any slack left after that cap is
   split evenly above and below the paragraph block. */
@media(min-width:901px){
  #page-legacy .rail-track{align-items:stretch}
  #page-legacy .rail-card{height:100%}
  #page-legacy .rail-body{display:flex;flex-direction:column;height:100%}
  #page-legacy .rail-body .imgslot{flex:1 1 auto;max-height:400px;margin-top:22px}
  #page-legacy .rail-body .imgslot img{width:100%;height:100%;object-fit:cover}
  #page-legacy .rail-body .imgslot+p{margin-top:auto}
  #page-legacy .rail-body>p:last-of-type{margin-bottom:auto}
}

/* Footer legal row. */
.rd .fbase{background:none;border-top:1px solid rgba(255,255,255,.16);border-radius:0;margin-top:26px;margin-bottom:0;padding:22px 0 24px;align-items:center}
.rd .fbase>span{color:rgba(255,255,255,.82)}
.rd .fbase .fc-legal a{color:rgba(255,255,255,.9)}
.rd .fbase .fc-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rd .fbase a:focus-visible{outline-color:var(--f-terra-l,#e0a184)}





.fsocial a{color:#fff;opacity:.86;border:0}
.fsocial a:hover,.fsocial a:focus-visible{opacity:1;color:#fff}
.fsocial a img{width:23px;height:23px;display:block}


/* Secondary CTA on the Hub's light bone section. .btn-ghost is white-on-dark
   and was near-invisible here; .btn-outline needs an explicit .rd rule
   because .rd a (0,2,0) outranks .btn-outline (0,1,0) on colour. */
.rd .btn-outline{background:transparent;color:var(--rforest2);border:1.5px solid var(--rforest2)}
.rd .btn-outline:hover{background:var(--rforest2);color:#fff;border-color:var(--rforest2)}

/* Legacy · The Next Chapter. Heading spans; photograph and copy sit side by
   side. DOM order carries the reading order. */
/* Measure released so the heading sets on one line at desktop. */
#page-legacy .nx-head{max-width:none}
#page-legacy .nx-head .t2{text-wrap:nowrap}
/* Wrapping allowed again where one line will not fit, rather than pushing
   the heading past the viewport edge. */
@media(max-width:820px){#page-legacy .nx-head .t2{text-wrap:balance}}
/* Client feedback was excess empty space in this block; the band above and
   below it is trimmed alongside the layout change. */
#page-legacy #next-chapter>.s{padding-top:clamp(48px,5.4vw,64px);padding-bottom:clamp(48px,5.4vw,64px)}
/* One column, not two. The copy runs ~740px tall while a 3:2 image in a
   345px column is only ~230px, which left ~510px of dead space beside it.
   Matching the heights would have meant cropping a landscape photograph
   into a narrow portrait (showing under a third of the frame), so the image
   becomes a full-width band above the copy instead: no void, no crop, and
   the reading order is unchanged. */
/* Two columns, copy wider than the photograph. The photograph column
   STRETCHES to the copy height instead of holding a fixed ratio — that is
   what removes the dead space without either a shallow full-width banner or
   a short image above a tall text column. */
#page-legacy .nx-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(26px,3.2vw,48px);align-items:stretch;margin-top:clamp(22px,2.6vw,32px)}
#page-legacy .nx-media{margin:0;position:static;display:flex}
/* Banded ratio so a full-width photograph does not dominate the section;
   cover keeps the student and teacher centred. */
/* No aspect-ratio at desktop: the slot fills the column so both sides of
   the row end together. min-height covers the case of unusually short copy. */
#page-legacy .nx-media .imgslot{position:relative;margin:0;width:100%;min-height:320px;border-radius:3px;overflow:hidden;box-shadow:0 12px 32px rgba(24,24,15,.09)}
/* Brand toning for the softer, more integrated feel — a low-alpha wash and
   a short edge fade only. The subject stays clear: no blur, no heavy tint. */
#page-legacy .nx-media .imgslot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(28,42,20,.16) 0%,rgba(28,42,20,.04) 46%,rgba(196,112,75,.1) 100%)}
#page-legacy .nx-media .imgslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
#page-legacy .nx-copy{max-width:none}
#page-legacy .nx-copy>p:first-child{margin-top:0}
@media(max-width:900px){
  /* Stacked: a controlled ratio rather than a shallow strip, and not tall
     enough to fill the mobile viewport. */
  #page-legacy .nx-grid{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)}
  #page-legacy .nx-media .imgslot{min-height:0;aspect-ratio:16/10}
  #page-legacy .nx-media{position:static;top:auto}
}
@media(prefers-reduced-motion:reduce){#page-legacy .nx-media{position:static;top:auto}}

/* Parent-section link state. */
.nlink[aria-current="location"],.mm-link[aria-current="location"]{color:#fff}

/* Shared footer mark sizing for both footer variants. Width-driven on a
   square asset; the per-variant colour filters above still apply. */
.footer .footer-logo,.rfooter .rfoot-logo,.rd .footer-logo,.rd .rfoot-logo{
  width:clamp(118px,10.5vw,152px);height:auto;object-fit:contain
}

/* Reduced motion removes the transition; the compact state still applies. */
@media(prefers-reduced-motion:reduce){
  .nav,.nav-in,.nav-logo-img{transition:none!important}
}

/* Logo link is centred within the brand column; the tagline, metadata,
   badges and social row keep their own alignment. */
/* Logo aligns left with the rest of the brand column. */
.footer-logo-link{display:block;width:max-content;margin-inline:0;line-height:0;text-decoration:none}
.footer-brand-col,.rfooter .footer-grid>div:first-child{text-align:left}
@media(max-width:768px){.footer-logo-link{margin-inline:0}}

/* Small terracotta text needs 4.5:1. --terra-t (#92492b) carries text on light
   grounds (6.54:1 on white, 5.63:1 on sand); the lighter --f-terra-l carries it
   on dark green (6.90:1). The original --terra stays on borders, icons and
   large display accents, which are not held to small-text contrast. */
.bg-deep .eye,.tl-rail-band .eye,.hero .eye,.lg-hero .eye{color:var(--f-terra-l,#e0a184)}

/* Footer link columns: three across between 821px and 1024px. In a
   two-column grid the three lists wrap 2 + 1, which leaves an empty half-row
   beside "Get in touch". Below 821px the existing stacking still applies. */
@media(min-width:821px) and (max-width:1024px){
  .footer-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
  .footer-brand-col{grid-column:1 / -1}
  .rd .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
  .rd .footer-grid>div:first-child{grid-column:1 / -1}
}

/* ── FOOTER · reserved space for the official ACNC Registered Charity Tick
   The mark is circular, so the slot is too and installing the artwork
   causes no reflow. Dashed and captioned so it cannot be read as the real
   mark. aria-hidden on the circle only: the caption carries the meaning,
   and the ACNC register link and DGR status already sit in the brand
   column. Occupies the empty band beneath the link columns, aligned to
   the same grid line, with no rule or extra spacing of its own. */
/* The brand column is taller than links + badge combined. The block
   stretches to fill its track and centres the mark inside, so that surplus
   splits evenly above and below rather than pooling underneath, and the two
   footer columns end flush. */
.facnc-block{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);margin:0;padding:0}
/* The brand column is far taller than the link columns, so a badge placed in
   the implicit second row landed below ALL of it, leaving a large void under
   the links. Spanning the brand column across both rows instead lets row 1
   be sized by the short link columns and row 2 by the badge, so the badge
   sits directly beneath the links and the void closes. */
/* Desktop only. Below 1025px the brand column becomes full-width and forms
   its own row, so the link columns and badge already flow beneath it with no
   void to close — the row span would fight that layout. */
@media(min-width:1025px){
  /* Two rows, brand column spanning both: row 1 takes the link columns and
     row 2 the badge, so the badge sits under the links rather than below the
     much taller brand column.

     rows are 1fr auto, not auto auto: the brand column is taller than
     links + badge combined, and that surplus has to land somewhere. 1fr
     puts it in row 1, under the links, where the footer already breathes;
     auto auto pushed it below the badge instead and read as a second hole.
     align-self:end then lines the badge up with the bottom of the brand
     column, so both sides of the footer close together.

     Column 5, not 6: .fcol:nth-of-type(1) in field.css matches nothing
     (the fcols are the 2nd-4th divs, so nth-of-type counts the brand
     column first), which leaves the links auto-placed from column 5.
     The badge is pinned to where the links actually render and ends where
     they end, rather than to where that selector intended them to be. */
  .rd .footer-grid,.footer-in{grid-template-rows:min-content 1fr}
  .rd .footer-grid>div:first-child,.footer-in>.footer-brand-col{grid-row:1 / span 2}
  .rd .footer-grid .facnc-block{grid-column:5 / 11;grid-row:2;align-self:stretch}
  .footer-in .facnc-block{grid-column:2 / -1;grid-row:2;align-self:stretch}
}
@media(max-width:1024px){
  .rd .footer-grid .facnc-block,.footer-in .facnc-block{grid-column:1 / -1}
}
/* Official ACNC Registered Charity Tick, reverse artwork (white ring and
   lettering) for the dark footer ground. */
/* Footer uses the official reverse artwork (white ring and lettering). A
   white plate behind it would render the mark invisible, and the circular
   mask would clip its outer ring — both removed. */
.facnc-slot{flex:none;width:clamp(112px,10vw,148px);aspect-ratio:1}
.facnc-slot img{display:block;width:100%;height:100%;object-fit:contain}
.facnc-cap{min-width:0}
.facnc-t{font-family:var(--rsans,var(--sans));font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.86);margin:0}
.facnc-s{font-family:var(--rsans,var(--sans));font-size:12px;line-height:1.6;color:rgba(255,255,255,.52);margin:5px 0 0;max-width:34ch}


/* Governance hero · reserved space for the official ACNC Registered Charity
   Tick, above the kicker. Circular because the mark is, so installing the
   artwork causes no reflow. Dashed and labelled so it cannot be read as the
   real mark; aria-hidden because the heading and copy beside it already
   state the registration. Light-on-dark, since this hero is dark green.
   To install: replace the div with the <img> and drop these rules. */
/* Official ACNC Registered Charity Tick, in the register panel beneath the
   two register links. Full-colour artwork on the light panel. */
#page-transparency .gv-acnc-slot{width:clamp(104px,9vw,132px);aspect-ratio:1;margin:clamp(24px,2.8vw,34px) 0 0}
#page-transparency .gv-acnc-slot img{display:block;width:100%;height:100%;object-fit:contain}

/* Credibility strip · official ACNC Registered Charity Tick, left of the
   two register links. Full-colour artwork on the light strip. */
#page-home .cs-acnc-slot{flex:none;width:clamp(84px,6.9vw,102px);aspect-ratio:1;margin-right:clamp(14px,1.8vw,24px)}
#page-home .cs-acnc-slot img{display:block;width:100%;height:100%;object-fit:contain}

/* ── News hero ──────────────────────────────────────────────────────────
   Photograph as the hero ground, built like the Legacy and Approach heroes.
   The image is square, so object-position holds the group of volunteers in
   frame as the band gets shorter. Scrim is weighted left, where the copy
   sits, so the right of the frame stays photographic while white text keeps
   a readable ground. Padding is set here rather than inline so the band can
   respond at each breakpoint. */
#page-news .nw-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);min-height:min(72vh,620px);display:flex;align-items:flex-end;padding-top:clamp(120px,13vw,190px);padding-bottom:clamp(84px,9vw,132px)}
#page-news .nw-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:0}
#page-news .nw-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(24,36,17,.93) 0%,rgba(24,36,17,.86) 34%,rgba(24,36,17,.58) 64%,rgba(24,36,17,.24) 88%,rgba(24,36,17,.12) 100%),
  linear-gradient(180deg,rgba(24,36,17,.52) 0%,rgba(24,36,17,.34) 52%,rgba(24,36,17,.2) 100%)}
#page-news .nw-hero-in{position:relative;z-index:2;width:100%}
#page-news .nw-hero .kicker{color:var(--f-terra-l,#e0a184)}
#page-news .nw-hero .h-sec{color:#fff;max-width:26ch}
@media(max-width:700px){
  #page-news .nw-hero-img{object-position:center 42%}
  #page-news .nw-hero-scrim{background:
    linear-gradient(180deg,rgba(24,36,17,.9) 0%,rgba(24,36,17,.84) 55%,rgba(24,36,17,.66) 100%)}
}

/* ── Railway dots · scroll-linked accent (narrow widths only) ──────────
   At stacked widths both railways run vertically, so each dot passes the
   viewport one at a time and a brief accent reads as progress down the
   line. Above these breakpoints the railways are horizontal with every dot
   on screen at once, so nothing is applied.

   Scroll-linked only, with no looping fallback: the animation is driven by
   each dot's own passage through the viewport, so it holds a fixed frame
   whenever the page is idle. Where animation-timeline is unsupported the
   dots simply stay static. Nothing animates decoratively at rest.

   The Legacy .rail-prog indicator is deliberately excluded: it was
   de-emphasised so it would not read as a drag handle. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){

    @keyframes rail-dot-scroll{
      0%{transform:scale(1);box-shadow:0 0 0 4px var(--deep),0 0 0 4px rgba(224,161,132,0)}
      45%,55%{transform:scale(1.3);box-shadow:0 0 0 4px var(--deep),0 0 0 11px rgba(224,161,132,.3)}
      100%{transform:scale(1);box-shadow:0 0 0 4px var(--deep),0 0 0 4px rgba(224,161,132,0)}
    }
    @keyframes prin-dot-scroll{
      0%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,112,75,0)}
      45%,55%{transform:scale(1.28);box-shadow:0 0 0 8px rgba(196,112,75,.24)}
      100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,112,75,0)}
    }

    /* Legacy timeline — stacked below 900px */
    @media(max-width:900px){
      #page-legacy .rail-card::after{
        animation:rail-dot-scroll linear both;
        animation-timeline:view();
        animation-range:entry 12% exit 40%
      }
    }

    /* Approach principles — stacked below 860px */
    @media(max-width:860px){
      #page-approach>.bg-sand .principle:not(:last-child)::after{
        animation:prin-dot-scroll linear both;
        animation-timeline:view();
        animation-range:entry 12% exit 40%
      }
    }
  }
}

/* Below 560px the copy column is narrow enough that a 16:10 image is still
   a large block; a shallower ratio keeps the text in view on small phones. */
@media(max-width:560px){#page-legacy .nx-media .imgslot{aspect-ratio:4/3}}

/* Name in the pull-quote attribution links to the profile page. Underlined
   on a dark ground so it is not identified by colour alone. */
#page-legacy .featq-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;transition:text-decoration-color .2s ease}
#page-legacy .featq-link:hover{text-decoration-color:#fff}
#page-legacy .featq-link:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── Default link colour ────────────────────────────────────────────────
   Scoped to unclassed links inside <main>, plus every mailto: anywhere.
   Not a bare a{} rule: footer and nav links inherit white from their dark
   grounds and set no colour of their own, so a global default would turn
   them dark terracotta on dark green. */
main a:not([class]),main a[href^="mailto:"],main a[href^="tel:"]{
  color:var(--terra-t,#92492b);text-decoration:underline;text-underline-offset:2px}
main a:not([class]):hover,main a[href^="mailto:"]:hover,main a[href^="tel:"]:hover{
  color:var(--terra-d,#a85c3c)}
/* On dark grounds the deep shade has too little contrast, so the light
   terracotta is used instead. */
main .bg-deep a:not([class]),main .bg-deep a[href^="mailto:"],
main .sec-dark a:not([class]),main .sec-dark a[href^="mailto:"],
main .ch-dark a:not([class]),main .ch-dark a[href^="mailto:"]{color:#e0a184}

/* Legal row stays left-aligned when it stacks. .fbase carries
   align-items:center for the row layout, which centres the items
   horizontally once flex-direction turns to column on narrow screens. */
@media(max-width:768px){
  .fbase,.rd .fbase{flex-direction:column;align-items:flex-start;text-align:left;gap:8px}
  .fbase .fc-legal,.rd .fbase .fc-legal{justify-content:flex-start}
  .fbase .fsocial,.rd .fbase .fsocial{justify-content:flex-start}
}


/* Card marks. Centred above the heading, matching its alignment. Terracotta
   against the green heading, so the mark reads as an accent rather than
   competing with the title.
   Decorative and aria-hidden — each card's meaning is carried by its own
   heading text, so nothing is lost to assistive tech. */
#page-about .ab-work-ico{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 12px;color:var(--terra);flex:none}
#page-about .ab-work-ico svg{width:26px;height:26px;fill:currentColor;display:block}
@media(prefers-reduced-motion:no-preference){
  #page-about .ab-work-ico{transition:color .25s ease,transform .25s ease}
  @media(hover:hover) and (pointer:fine){
    #page-about .ab-work-grid li:hover .ab-work-ico{color:var(--terra-d);transform:translateY(-2px)}
  }
}

/* Each item's text joins its own tick: same --tick index, offset slightly
   behind the mark so the tick lands first and the line follows.
   The li transform carries the ::before tick with it, which is intended —
   mark and text travel as one unit.
   Same guards as the tick rule: gated on .js.motion-ready so items render
   settled without JS, inside no-preference for reduced motion. */
@media(prefers-reduced-motion:no-preference){
  .js.motion-ready #page-legacy .impact-list:not(.m-in) li{opacity:0;transform:translateX(-9px)}
  .js.motion-ready #page-legacy .impact-list.m-in li{opacity:1;transform:none;
    transition:opacity .42s ease,transform .52s cubic-bezier(.2,.85,.25,1);
    transition-delay:calc(var(--tick,0) * .07s + .05s)}
}

/* Row stacks to heading over copy; the hairline keeps them grouped. */
/* Light entrance: each row settles in turn as the block is reached.
   Keyed to .m-in — the release class motion.js adds on entry — not
   .is-revealed, which is present from page load. Gated on .js.motion-ready
   so rows render settled without JS, and inside no-preference so reduced
   motion shows them immediately. */
@media(prefers-reduced-motion:no-preference){
  .js.motion-ready #page-legacy .lessons:not(.m-in) li{opacity:0;transform:translateY(10px)}
  .js.motion-ready #page-legacy .lessons.m-in li{opacity:1;transform:none;
    transition:opacity .5s ease,transform .58s cubic-bezier(.2,.85,.25,1);
    transition-delay:calc(var(--row,0) * .085s)}
  /* Re-assert hover above the entrance rule: .lessons.m-in li outranks
     .lessons li:hover, so without this the settled state pinned
     transform:none and the card lift never fired after entry. The delay is
     cleared too, or the lift would wait out the stagger offset. */
  .js.motion-ready #page-legacy .lessons.m-in li:hover{transform:translateY(-3px);transition-delay:0s;transition-duration:.2s}
  #page-legacy .lessons li:nth-child(1){--row:0}
  #page-legacy .lessons li:nth-child(2){--row:1}
  #page-legacy .lessons li:nth-child(3){--row:2}
  #page-legacy .lessons li:nth-child(4){--row:3}
  #page-legacy .lessons li:nth-child(5){--row:4}
  #page-legacy .lessons li:nth-child(6){--row:5}
}

/* Lessons section on a photographic ground, built like the page's heroes:
   image, brand scrim, then content above both.
   The scrim is deliberately heavy — this section carries six cards and a
   heading over the photograph, so the ground has to stay quiet. A lighter
   wash left the crowd competing with the cards. */
#page-legacy .lg-lessons{position:relative;isolation:isolate;overflow:hidden}
#page-legacy .lg-lessons-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
/* Lighter wash so the photograph reads as a photograph. The cards carry
   their own white ground, so their text contrast does not depend on this
   value; only the heading and eyebrow sit directly on it. */
#page-legacy .lg-lessons-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(28,42,20,.72) 0%,rgba(28,42,20,.62) 45%,rgba(28,42,20,.7) 100%)}
#page-legacy .lg-lessons>.s{position:relative;z-index:2}
/* Heading and eyebrow invert for the dark ground. */
#page-legacy .lg-lessons .t2{color:#fff}
/* White, not the light terracotta: at the lighter wash the photograph's
   bright patches bring that shade to 2.35:1 behind small uppercase text.
   White holds 5.14:1 against the worst patch. */
#page-legacy .lg-lessons .eye{color:#fff}
/* Cards keep their white ground, so their own contrast is unchanged; the
   border lightens so it reads against the dark surround rather than
   disappearing into it. */
#page-legacy .lg-lessons .lessons li{border-color:rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.16)}
@media(hover:hover) and (pointer:fine){
  #page-legacy .lg-lessons .lessons li:hover{border-color:rgba(255,255,255,.5)}
}

/* L02 · the quote band carried the full section padding at both ends. */
#page-legacy .bg-deep>.s{padding-top:clamp(48px,5.4vw,68px);padding-bottom:clamp(48px,5.4vw,68px)}

/* S01 · the accountability photograph now follows the complete paragraph
   group rather than splitting it after the opening line. */
#page-support .acct-fig{margin:clamp(24px,3vw,34px) 0 clamp(22px,2.6vw,30px)}

/* Hub · "A Hub may include"
   A plain bulleted list read as an afterthought under the copy, so the six
   items are set as a marked grid: index, hairline, item. Still a <ul>, so
   it is announced as a list of six; the indices are aria-hidden because
   they are ordinal decoration, not content. */
.rd .hubkit-lead{margin:0 0 clamp(14px,1.6vw,20px)}
.rd .hubkit{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--blight);border:1px solid var(--blight)}
.rd .hubkit li{display:flex;align-items:flex-start;gap:14px;padding:clamp(20px,2.2vw,28px);background:var(--rbone,#fbf8f3)}
.rd .hubkit-n{flex:none;font-family:var(--rsans);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--f-terra,#c4704b);padding-top:3px}
.rd .hubkit-t{font-family:var(--rsans);font-size:15px;line-height:1.55;color:var(--ink);text-wrap:pretty}
@media(max-width:900px){.rd .hubkit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rd .hubkit{grid-template-columns:1fr}}

/* ── P3 · Hub spacing ───────────────────────────────────────────────────
   Scoped to #page-hub throughout: .rd .sec is shared by every page, so its
   clamp(72px,9vw,140px) is left alone.

   The page carried its spacing as inline styles, which no stylesheet can
   override without !important. They were moved onto classes instead, so
   these rules are the single owner of Hub rhythm.

   align-items:end was the main source of dead space. It bottom-aligns a
   short heading against a much taller paragraph column, pushing the heading
   down and opening a gap above it. Headings now sit at the top of their row,
   next to the copy they introduce. */
#page-hub .sec{padding-top:clamp(48px,5.4vw,76px);padding-bottom:clamp(48px,5.4vw,76px)}
/* The opening still leads the page, just without the 132px inline value. */
#page-hub .hub-open{padding-top:clamp(84px,9vw,116px)}
#page-hub .hub-row{align-items:start;margin-bottom:clamp(26px,3vw,38px)}
/* :last-child, not :last-of-type: the latter matched any row that was the
   last div in its parent, including one still followed by a kicker heading,
   and stripped the space between them. */
#page-hub .hub-row:last-child{margin-bottom:0}
#page-hub .hub-cta{margin-top:clamp(24px,2.6vw,32px)}
/* Secondary by construction: a text link under the two buttons, so the
   support CTAs stay visually primary. */
#page-hub .hub-legacy-link{margin:clamp(20px,2.2vw,26px) 0 0}
/* The dark text accent, not --f-terra-l: this link sits on the near-white
   support panel, where the light accent measured 2.10:1. #92492b gives
   6.54:1 on the same ground and is the same hue. */
#page-hub .hub-legacy-link .tlink{color:var(--terra-t,#92492b)}
@media(max-width:900px){
  #page-hub .hub-row{margin-bottom:clamp(22px,3vw,30px)}
  #page-hub .hub-open{padding-top:clamp(72px,10vw,96px)}
}

/* ── P1 · Initiatives disclosure ────────────────────────────────────────
   "Initiatives" stays an ordinary link to /initiatives. The submenu is
   opened by a separate button beside it, so the parent link is never
   hijacked into a toggle.

   The closed panel uses the `hidden` attribute rather than
   visibility/opacity: hidden removes it from the tab order outright, which
   is the requirement. Nothing here depends on hover, so pointer, keyboard
   and touch all reach it the same way.

   Fail-open note: if script.js throws, the panel stays closed — but
   /initiatives still works from the nav and links to /hub three times in
   its own copy, and the mobile menu carries a direct Hub link that needs no
   JS at all. The Hub is never unreachable. */
.nav-sub-wrap{position:relative;display:inline-flex;align-items:center;gap:2px}
.nav-sub-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:2px;opacity:.72;transition:opacity .2s ease}
.nav-sub-btn:hover{opacity:1}
.nav-sub-btn:focus-visible{outline:2px solid var(--terra);outline-offset:2px;opacity:1}
.nav-sub-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .22s ease}
.nav-sub-btn[aria-expanded="true"] .nav-sub-caret{transform:rotate(-135deg) translateY(-1px)}
.nav-sub-btn[aria-expanded="true"]{opacity:1}
.nav-sub{position:absolute;top:calc(100% + 10px);left:0;z-index:1200;min-width:190px;padding:6px;background:var(--deep);border:1px solid rgba(255,255,255,.16);border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.nav-sub-link{display:block;padding:10px 12px;font-family:var(--rsans);font-size:13px;letter-spacing:.01em;color:rgba(255,255,255,.9);text-decoration:none;border-radius:2px}
.nav-sub-link:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-sub-link:focus-visible{outline:2px solid var(--terra);outline-offset:-2px;color:#fff}
.nav-sub-link.active{color:var(--terra)}
/* The caret is a control, not decoration, so it keeps its transition off
   only where motion is unwelcome. */
@media(prefers-reduced-motion:reduce){.nav-sub-caret,.nav-sub-btn{transition:none}}
/* Mobile: a visible indented link, not a second collapsible layer — the
   focus trap in script.js collects a[href] within the menu, so a link that
   is always present is always correctly trapped. */
.mm-sub{padding-left:22px;font-size:.94em;opacity:.92}
.mm-sub::before{content:"\2014\00a0";opacity:.45}
/* The desktop disclosure is part of the desktop row, which .nav-ready
   hides on small screens along with .nav-left / .nav-right. */

/* Hub resource icons and restrained interaction. */
#page-hub .hubkit-icon{flex:0 0 30px;display:block;color:var(--terra-t,#92492b);line-height:0}
#page-hub .hubkit-icon svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
#page-hub .hubkit li{position:relative;transition:background-color .22s ease,box-shadow .22s ease,translate .22s ease}
@media(hover:hover) and (pointer:fine){
 #page-hub .hubkit li:hover{background:#f1ebdf;box-shadow:inset 0 0 0 1px rgba(146,73,43,.3);translate:0 -3px;z-index:1}
 #page-hub .hubkit li:hover .hubkit-icon svg{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
 #page-hub .hubkit li,#page-hub .hubkit-icon svg{transition:none}
 #page-hub .hubkit li:hover{translate:none}
 #page-hub .hubkit li:hover .hubkit-icon svg{transform:none}
}

/* Keep the six resource tiles enclosed by a visible, continuous hairline. */
#page-hub .hubkit{position:relative;border:1px solid rgba(28,42,20,.22);box-sizing:border-box}
#page-hub .hubkit::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;border-bottom:1px solid rgba(28,42,20,.22);pointer-events:none;z-index:3}


#page-hub .pillars>.pillar{position:relative;animation:none!important;transform:none!important;translate:0 0;scale:1;background:var(--rforest2);z-index:0;transition:translate .24s ease,box-shadow .24s ease,background-color .24s ease}
@media(hover:hover) and (pointer:fine){#page-hub .pillars>.pillar:hover{translate:0 -4px;scale:1;z-index:2;background:#293922;box-shadow:0 9px 20px rgba(0,0,0,.18)}}
@media(prefers-reduced-motion:reduce){#page-hub .pillars>.pillar{transition:none!important}#page-hub .pillars>.pillar:hover{translate:0 0;scale:1;box-shadow:none}}

/* Stable framework frame: the grid stays still; cards lift inside it. */
#page-hub .pillars{
 position:relative;isolation:isolate;gap:0!important;padding:0!important;
 border:0!important;background:var(--rforest2)!important;
 animation:none!important;transform:none!important;translate:none!important;scale:1!important;
 opacity:1!important;visibility:visible!important;
}
#page-hub .pillars::after{
 content:"";position:absolute;inset:0;box-sizing:border-box;
 border:1px solid #87927f;pointer-events:none;z-index:10;
}
#page-hub .pillars::before{
 content:"";position:absolute;top:0;bottom:0;left:var(--hub-divider-x,50%);
 width:1px;background:#87927f;pointer-events:none;z-index:10;
}
#page-hub .pillars>.pillar{border:0!important;min-width:0;opacity:1!important;visibility:visible!important}
#page-hub .pillars>.pillar:nth-child(n+3)::after{
 content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#87927f;pointer-events:none;
}
@media(max-width:560px){
 #page-hub .pillars::before{content:none}
 #page-hub .pillars>.pillar:nth-child(n+2)::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#87927f;pointer-events:none;
 }
}

/* Text-only Initiatives disclosure. */
.nav .nav-sub-trigger{appearance:none;background:none;border:0;font-family:var(--sans);cursor:pointer;padding:0;color:inherit}
.nav .nav-sub-trigger[aria-expanded="true"]{color:#e0ad8a}
.nav .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .nav-sub[hidden]{display:none!important}
.nav .nav-sub-link{display:flex;align-items:center;min-height:44px;color:#f0f1eb}
.nav .nav-sub-link::after{content:none}
.nav .nav-sub-link:hover{background:rgba(255,255,255,.1);text-decoration:underline;text-underline-offset:3px}
.nav .nav-sub-link.active{color:#e0ad8a}
.nav .nav-sub-trigger:focus-visible,.nav .nav-sub-link:focus-visible{outline:3px solid #e0ad8a;outline-offset:3px}

/* Minimal direction indicator, drawn with one-pixel strokes. */
.nav .nav-sub-trigger{display:inline-flex;align-items:center;gap:7px}
.nav .nav-sub-trigger::before{content:"";display:inline-block;flex:none;width:9px;height:8px;background:currentColor;opacity:.8;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8'%3E%3Cpath d='M4.5 2v4M1.5 3.5 4.5 6.5 7.5 3.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}

/* Keep the disclosure arrow visually attached to its own label. */
.nav .nav-left .nav-sub-wrap{gap:0;margin-left:7px}
.nav .nav-left .nav-sub-wrap>.nav-sub-trigger{padding:0;gap:0;width:9px;min-width:9px;min-height:44px;justify-content:center}
.nav .nav-left .nav-sub-wrap>#t-initiatives{padding-left:3px}

/* The glyph remains tiny; its button has a usable target area. */
.nav .nav-left .nav-sub-wrap>.nav-sub-trigger{width:24px;min-width:24px;justify-content:flex-end}

/* The dropdown indicator stays white in its default and interactive states. */
.nav .nav-left .nav-sub-wrap>.nav-sub-trigger{color:#fff;opacity:1}
.nav .nav-left .nav-sub-wrap>.nav-sub-trigger::before{background-color:#fff;opacity:1}

/* One labelled disclosure; the overview is the first submenu destination. */
.nav .nav-left .nav-sub-wrap>.nav-sub-trigger{width:auto;min-width:24px;gap:3px;justify-content:flex-start;padding-right:8px}
/* The native overview link stays available while the disclosure initialises.
   Honour hidden from the first paint to prevent an expanded-menu flash. */
.nav .nav-sub-wrap:not(.nav-sub-ready)>.nav-sub-trigger{display:none}


/* Newsletter strip: white ground, forest type, terracotta action. */
#page-home .nl,.rd .nl,section.nl#newsletter{background:#fff!important;border-top:1px solid #dedbd2}
#page-home .nl h2,.rd .nl h2{color:#1c2a14}
#page-home .nl .ch-label,.rd .nl .ch-label{color:#5a6e3a}
#page-home .nl .nl-fine,.rd .nl .nl-fine{color:#5c5850;margin-top:10px}
#page-home .nl .nl-fine a,.rd .nl .nl-fine a{color:#92492b}
#page-home .nl .nl-input,.rd .nl .nl-input{background:#fff;border:1px solid #b9c0ae;color:#18180f}
#page-home .nl .nl-input:focus,.rd .nl .nl-input:focus{outline:none;border-color:#5a6e3a}
#page-home .nl .form-status,.rd .nl .form-status{color:#92492b}
#page-home .nl .form-status:empty,.rd .nl .form-status:empty{display:none}


/* Get-involved: image-led cards. */
.rd .gichoices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.rd .gichoices a{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;gap:0;min-height:0;padding:0;text-decoration:none;background:#fff;border:1px solid #dedbd2;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.rd .gichoices .gi-im{position:relative;aspect-ratio:5/4;overflow:hidden;background:#e7eae1}
.rd .gichoices img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.rd .gichoices .gi-im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,14,0) 38%,rgba(20,28,14,.78) 100%);transition:opacity .45s ease}
.rd .gichoices .gi-k{position:absolute;left:20px;bottom:16px;z-index:2;font-family:var(--rsans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.rd .gichoices .gi-bd{display:flex;flex-direction:column;align-items:flex-start;text-align:left;flex:1;padding:22px 22px 24px}
.rd .gichoices .gi-t{font-family:var(--disp);font-size:clamp(19px,1.7vw,24px);font-weight:500;color:#1c2a14;letter-spacing:-.018em;line-height:1.18;display:block}
.rd .gichoices .gi-s{font-family:var(--rsans);font-size:13.5px;line-height:1.65;color:#5c5850;margin-top:9px;display:block}
.rd .gichoices .gi-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:18px;font-family:var(--rsans);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#92492b;border-bottom:2px solid rgba(146,73,43,.35);padding-bottom:4px;transition:border-color .35s ease,gap .35s cubic-bezier(.2,.7,.3,1)}
.rd .gichoices a:hover{transform:translateY(-5px);border-color:#c7c2b4;box-shadow:0 18px 36px rgba(24,24,15,.12)}
.rd .gichoices a:hover img{transform:scale(1.07)}
.rd .gichoices a:hover .gi-im::after{opacity:.82}
.rd .gichoices a:hover .gi-go{border-color:#92492b;gap:13px}
.rd .gichoices a,.rd .gichoices a:visited{color:#1c2a14}
@media(max-width:860px){.rd .gichoices{grid-template-columns:1fr}}

/* WebP wrappers must not become layout boxes: the img stays the sized child. */
picture{display:contents}

/* Origin block: the photograph holds while the copy scrolls past it,
   matching the sticky-media behaviour on the initiatives page. */
@media(min-width:901px){
 #page-about .ab-origin-grid{align-items:start}
 #page-about .ab-origin-media{position:sticky;top:clamp(96px,12vh,132px);align-self:start;height:clamp(460px,48vw,620px);min-height:0}
 #page-about .ab-origin-media>picture>img,#page-about .ab-origin-media img{height:100%;min-height:0;object-fit:cover}
}

/* Breathing room between the partners copy and the sliding logo rail. */
.rd .partners .pmarquee{margin-top:clamp(30px,3.4vw,48px)}
.rd .partners .pmarquee .plist{margin-top:0}
.rd .partners .pmarquee .pm-track{padding-block:6px}

/* The new image-led choices remain static when reduced motion is requested. */
@media(prefers-reduced-motion:reduce){
 #page-home .gichoices a,#page-home .gichoices img,#page-home .gichoices .gi-go,
 #page-home .gichoices .gi-im::after{transition:none}
 #page-home .gichoices a:hover,#page-home .gichoices a:hover img{transform:none}
 #page-home .gichoices a:hover .gi-go{gap:8px}
 #page-home .gichoices a:hover .gi-im::after{opacity:1}
}


/* ── NAV · split logo lockup for phones and small tablets ──────────────
   The stacked logo (tree over wordmark over tagline) has to shrink to 56px
   tall to fit a 72px bar, which crushes all three elements. At and below
   768px the same artwork is used as two parts side by side instead: tree,
   then wordmark with the tagline set as live small caps beneath it. Both
   parts are cropped from logo-nav.png, so the letterforms are the real logo
   face rather than a fallback serif.

   The stacked <img> keeps the alt text and the split block is aria-hidden,
   so the accessible name is announced exactly once either way. Above 768px
   nothing changes — desktop and large tablets keep the stacked lockup. */
.nav-logo-split{display:none}
@media(max-width:768px){
  .nav-logo-img{display:none}
  .nav-logo-link{display:flex!important;align-items:center;line-height:1;text-decoration:none;min-height:44px}
  .nav-logo-split{display:flex;align-items:center;gap:11px}
  .nls-tree{height:40px;width:auto;display:block;flex:none;filter:brightness(0) invert(1)}
  .nls-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
  .nls-wm{height:17px;width:auto;display:block;filter:brightness(0) invert(1)}
  .nls-tag{font-family:var(--rsans,var(--sans));font-size:8px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1;white-space:nowrap}
  /* No-JS fallback state centres the brand column, so the lockup centres too. */
  .nav:not(.nav-ready) .nav-center .nav-logo-link,html:not(.nav-ready) .nav-center .nav-logo-link{justify-content:center}
  .nav-ready .nav-center .nav-logo-link{justify-content:flex-start}
}
/* Narrow phones: the tagline is the first thing to give, since the wordmark
   already carries the name. Tightened first, dropped only under 340px. */
@media(max-width:400px){
  .nls-tree{height:36px}
  .nls-wm{height:16px}
  .nls-tag{font-size:7.5px;letter-spacing:.1em}
}
@media(max-width:339px){
  .nls-tag{display:none}
  .nls-tree{height:34px}
}