/* Shared photographic treatment and page compositions. Image files remain untouched. */
:root {
  --photo-radius: 12px;
  --photo-shadow: 0 12px 28px -12px rgba(28,42,20,.34), 0 2px 6px rgba(28,42,20,.08);
  --value-sage: #c5cbb3;
  --value-peach: #f0dac8;
  --value-moss: #b5bea0;
}

#maincontent .photo-mounted {
  border-radius: var(--photo-radius);
  box-shadow: var(--photo-shadow);
}
#maincontent .photo-mounted:not(img) { overflow: hidden; }
#page-about .ab-hero-media.photo-mounted { border-radius: var(--photo-radius); box-shadow: var(--photo-shadow); }

/* The tiny arrow is a separate touch/keyboard control beside the native link. */
.nav .nav-left .nav-sub-wrap { gap: 0; margin-left: 0; }
.nav .nav-left .nav-sub-wrap > .nav-sub-trigger {
  width: 24px; min-width: 24px; min-height: 44px; padding: 0 3px 0 0;
  gap: 0; justify-content: flex-end; color: #fff;
}
.nav .nav-left .nav-sub-wrap > #t-initiatives { padding-left: 0; }
.nav .nav-sub { min-width: 220px; }
.nav #t-initiatives:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
@media (pointer: coarse) {
  .nav .nav-left .nav-sub-wrap > .nav-sub-trigger { width: 44px; min-width: 44px; }
}

#edge-footer-replacement .ef-brand-marks { margin-inline: auto; justify-content: center; }

/* Make the trust message legible before visitors reach the longer content. */
#page-home .cstrip { background: var(--warm); padding-block: clamp(28px,3vw,44px); position: relative; overflow: hidden; }
/* Logo leaf mark, faded into the band's open right edge. */
#page-home .cstrip::after { content: ""; position: absolute; right: clamp(-40px,-2vw,0px); top: 50%; transform: translateY(-50%); width: clamp(200px,24vw,340px); aspect-ratio: 185 / 188; background: url("img/edge-leaf-mark.png") center/contain no-repeat; opacity: .12; pointer-events: none; }
#page-home .cstrip-in { position: relative; z-index: 1; }
#page-home .cstrip-in {
  display: grid; grid-template-columns: 124px minmax(0,1fr) minmax(180px,240px);
  gap: clamp(20px,3vw,40px); align-items: center;
}
#page-home .cs-acnc-slot { width: 124px; margin: 0; }
#page-home .cred-copy { min-width: 0; padding-left: 28px; border-left: 1px solid var(--border); }
#page-home .cred-eyebrow { font: 600 11px/1.5 var(--sans); color: var(--forest); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
#page-home .cred-heading { font: 400 clamp(26px,2.5vw,35px)/1.1 var(--serif); color: var(--ink); margin-bottom: 14px; text-wrap: balance; }
#page-home .cred-note { min-width: 0; max-width: none; font-size: 14px; line-height: 1.7; }
#page-home .cred-badges { display: grid; gap: 12px; }
#page-home .cred-badges > a { display: block; }
#page-home .cstrip .fbadge { display: flex; justify-content: center; min-height: 48px; font-size: 11px; text-align: center; }

/* Option 2 uses filled cards, preserving the six values and their icons. */
#page-home .vband { padding-block: clamp(40px,5vw,68px); }
#page-home .vband-head { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
#page-home .vband-t { font-size: clamp(32px,3.5vw,46px); }
#page-home .vgrid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 16px; }
#page-home .vgrid li {
  --value-card-line: var(--forest); --value-card-ink: var(--ink); --value-card-fill: var(--value-moss);
  background: var(--value-card-fill); color: var(--value-card-ink);
  border: 0; border-radius: 12px; padding: 26px 22px; gap: 10px;
  min-width: 0; min-height: 232px; justify-content: center;
  box-shadow: 0 4px 14px -10px rgba(28,42,20,.34);
}
/* Three of each brand colour, staggered across the desktop rows. */
#page-home .vgrid li:nth-child(even) { --value-card-line: var(--terra-t); --value-card-fill: var(--value-peach); }
@media (hover:hover) and (pointer:fine) {
  #page-home .vgrid li:hover { border-color: var(--value-card-line); background: var(--value-card-fill); box-shadow: 0 12px 26px -12px rgba(28,42,20,.42); }
}
#page-home .vgrid .vmark { background: transparent; color: var(--value-card-line); width: 48px; height: 48px; }
#page-home .vgrid li:hover .vmark, #page-home .vgrid li:focus-within .vmark { background: transparent; box-shadow: none; }
#page-home .vgrid .vmark svg { width: 34px; height: 34px; }
#page-home .vgrid .vmark-map circle { fill: currentColor; }
#page-home .vgrid .vlabel {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: none; min-height: 2.4em; text-wrap: balance;
  font: 500 clamp(21px,1.8vw,25px)/1.2 var(--serif); color: var(--value-card-ink);
}
#page-home .vdescription {
  max-width: 25ch; min-height: 3.1em;
  font: 400 15px/1.55 var(--sans); color: var(--value-card-ink);
}
/* Maintain a checkerboard when the grid changes to two columns. */
@media (min-width: 421px) and (max-width: 760px) {
  #page-home .vgrid li:nth-child(n) { --value-card-line: var(--forest); --value-card-fill: var(--value-moss); }
  #page-home .vgrid li:nth-child(4n+2), #page-home .vgrid li:nth-child(4n+3) { --value-card-line: var(--terra-t); --value-card-fill: var(--value-peach); }
}

/* Reference composition, with the existing homepage copy and four subjects. */
#page-home .hub-feature { background:var(--warm); }
#page-home .hub-feature-layout { display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:0;align-items:stretch;background:linear-gradient(110deg,var(--warm),var(--sand));overflow:hidden; }
#page-home .hub-feature-copy {min-width:0;padding:clamp(28px,3.4vw,46px) clamp(22px,2.5vw,36px) 32px;}
#page-home .hub-feature .ch-head {margin:0 0 18px;padding:0;border:0;}
#page-home .hub-feature .ch-label {margin-bottom:12px;color:var(--terra-t);font:600 10px/1.5 var(--sans);letter-spacing:.18em;}
#page-home .hub-feature .ch-t {font:400 clamp(28px,3.05vw,42px)/1.08 var(--serif);letter-spacing:-.025em;max-width:none;color:var(--deep);}
#page-home .hub-feature .ch-t::after {content:"";display:block;width:40px;height:2px;background:var(--terra);margin-top:18px;}
#page-home .hub-intro {display:block;}
#page-home .hub-intro .p-open {font:400 clamp(16px,1.45vw,19px)/1.48 var(--serif);max-width:54ch;color:var(--ink2);}
#page-home .hub-intro .hub-intro-cta {margin:20px 0 0;}
#page-home .hub-intro-cta .tlink {display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:12px 18px;background:var(--terra-t);color:var(--warm);border:1px solid var(--terra-t);font:600 10px/1.5 var(--sans);letter-spacing:.1em;text-align:left;white-space:normal;}
#page-home .hub-intro-cta .tlink:hover {background:var(--deep);border-color:var(--deep);}
#page-home .hub-intro-aside {padding:0;margin:24px 0 0;border:0;}
#page-home .hub-intro-aside > p {color:var(--muted);font:400 12px/1.55 var(--sans);max-width:none;}
#page-home .hub-intro .hgrid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:22px;}
#page-home .hub-intro .hgrid li {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:48px auto;gap:10px;align-content:start;justify-items:center;align-items:start;min-width:0;min-height:0;padding:0 10px;border-left:1px solid var(--blight);color:var(--deep);}
#page-home .hub-intro .hgrid li:first-child {border-left:0;}
#page-home .hub-intro .hgrid-lbl {min-width:0;margin:0;font:600 12px/1.4 var(--sans);text-align:center;letter-spacing:normal;text-wrap:balance;}
#page-home .hub-intro .hgrid-ico {display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--value-sage);color:var(--deep);}
#page-home .hub-intro .hgrid-ico svg {width:24px;height:24px;}
#page-home .hub-intro .hgrid li:nth-child(2) .hgrid-ico {background:var(--value-peach);color:var(--terra-t);}
#page-home .hub-intro .hgrid li:nth-child(3) .hgrid-ico {background:var(--sand2);}
#page-home .hub-intro .hgrid li:nth-child(4) .hgrid-ico {background:var(--value-moss);}
#page-home .hub-feature .hub-feature-photo {position:relative;margin:0;align-self:stretch;width:100%;min-height:440px;aspect-ratio:auto;max-width:none;overflow:hidden;border-radius:18% 0 0 45% / 30% 0 0 25%;box-shadow:none;}
#page-home .hub-feature-photo img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:18% center;}
/* Support hero: a legacy photograph behind the header, held under a
   left-weighted scrim so the white headline keeps full contrast. */
#page-support .sup-hero-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
#page-support .sup-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,30,14,.94) 0,rgba(20,30,14,.85) 44%,rgba(20,30,14,.62) 76%,rgba(20,30,14,.52) 100%)}
#page-support .sup-hero>.in{position:relative;z-index:2}
@media(max-width:760px){
  #page-support .sup-hero-img{object-position:58% 50%}
  #page-support .sup-hero-scrim{background:linear-gradient(180deg,rgba(20,30,14,.78) 0,rgba(20,30,14,.9) 100%)}
}

/* ── Get Involved: the four ways, integrated ────────────────────
   One accountability-framed panel instead of four equal cards. Each way
   carries its own "how your gift is applied" band — unrestricted for general
   donations, locked to purpose for designated ones — so the 100%-designated
   commitment is shown rather than only stated. No JS: all four panels render
   stacked and every anchor still resolves. */
#page-support .ways{border:1px solid var(--border);background:var(--warm);box-shadow:0 2px 4px rgba(24,24,15,.045),0 18px 38px -20px rgba(28,42,20,.24);transition:transform .28s cubic-bezier(.2,.65,.25,1),box-shadow .28s ease,border-color .28s ease}
@media(hover:hover) and (pointer:fine){
  #page-support .ways:hover,#page-support .ways:focus-within{transform:translateY(-4px);box-shadow:0 3px 6px rgba(24,24,15,.05),0 28px 54px -22px rgba(28,42,20,.32);border-color:var(--forest)}
}
@media(prefers-reduced-motion:reduce){#page-support .ways{transition:none}#page-support .ways:hover{transform:none}}
/* Segmented control: one enclosed pill group with a marker that slides to
   the chosen way. Chosen over four tiles because it is unmistakably a
   control rather than a row of headings, and it costs a fraction of the
   height. Labels are short by necessity — each panel restates its full
   title as its own heading, so nothing is lost.

   The marker is a decorative sibling, not a pseudo-element on the active
   tab: transform on a single element gives one continuous slide rather than
   a cross-fade between four. Selection state lives on aria-selected, so the
   control still reads correctly if the transform never runs. */
#page-support .wtabhold{padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px) 0}
/* Segments are content-sized, not equal quarters: "Corporate Partnership"
   is three times the length of "Donate", and equal widths would either
   truncate it or leave the short labels swimming. */
#page-support .wtabs{position:relative;display:inline-grid;width:max-content;max-width:100%;grid-template-columns:repeat(4,auto);justify-content:start;padding:4px;background:var(--sand);border:1px solid var(--border);border-radius:100px;isolation:isolate}
#page-support .wtind{position:absolute;top:4px;bottom:4px;left:4px;width:0;opacity:0;background:var(--forest);border-radius:100px;z-index:0;transition:transform .34s cubic-bezier(.3,.8,.25,1),width .34s cubic-bezier(.3,.8,.25,1),opacity .2s ease}
#page-support .wtab{position:relative;z-index:1;min-height:44px;padding:11px clamp(14px,1.8vw,22px);background:none;border:0;border-radius:100px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .24s ease}
#page-support .wtab:hover{color:var(--forest)}
#page-support .wtab:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
#page-support .wtab[aria-selected=true]{color:#fff}
/* No JS: every panel renders stacked, so a control implying one visible
   choice would be misleading. The group is hidden and each panel's own
   heading carries the navigation instead. */
html:not(.js) #page-support .wtabhold{display:none}
/* The boxed two-column treatment must start at the SAME width the grid first
   wraps to two rows (860px). When these were split — wrap at 860, restyle at
   760 — the 761-860px band kept the single-row pill styling while the tabs sat
   on two rows: the sliding marker only moves on X, so it landed under the
   wrong label, and nowrap + ellipsis truncated "Corporate Partnership". */
@media(max-width:860px){
  #page-support .wtabs{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;width:100%;border-radius:4px;gap:4px;padding:4px}
  #page-support .wtind{display:none}
  #page-support .wtab{border-radius:3px;background:var(--warm);border:1px solid var(--border);white-space:normal;padding:11px 10px;font-size:12.5px;line-height:1.3}
  #page-support .wtab[aria-selected=true]{background:var(--forest);border-color:var(--forest);color:#fff}
}
@media(prefers-reduced-motion:reduce){
  #page-support .wtind,#page-support .wtab{transition:none}
}
#page-support .wbody{padding:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,68ch) clamp(172px,17vw,216px);justify-content:start;gap:clamp(26px,3vw,44px);align-items:start}
/* One QR column shared by all four ways — it sits outside the panels so it
   never reflows as tabs change, and fills the space the shorter panels left
   empty. Squares, because that is the only proportion a QR can be. Sized for
   two codes: wider than the three-code layout so the pair still reaches down
   the panel instead of stopping short. */
#page-support .w-qr{position:sticky;top:104px;display:flex;flex-direction:column;gap:26px;margin-left:clamp(28px,5vw,96px)}
#page-support .w-qr-lab{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#page-support .qr{display:flex;flex-direction:column;gap:7px}
#page-support .qr-box{aspect-ratio:1;display:block;padding:9px;background:#fff;border:1px solid var(--border);border-radius:2px;color:var(--forest);transition:color .25s ease,border-color .25s ease}
/* A real payment code is a raster copy of the bank's own artwork, so it cannot
   inherit currentColor like the placeholder SVGs. It keeps the same white
   ground, padding (which doubles as the QR quiet zone), hairline border and
   hover shift so it still reads as part of the set. Never re-drawn or
   re-encoded: the modules are a pixel-exact crop of the issued code. */
#page-support .qr-img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast}
#page-support .qr:hover .qr-box{color:var(--deep);border-color:var(--forest)}
#page-support .qr-svg{display:block;width:100%;height:100%}
#page-support .qr-t{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
#page-support .qr-s{font-size:11.5px;line-height:1.5;color:var(--muted)}
#page-support .w-qr-fine{font-size:11px;line-height:1.55;color:var(--muted);padding-top:4px;border-top:1px solid var(--blight)}
@media(max-width:980px){
  #page-support .wbody{grid-template-columns:1fr}
  #page-support .w-qr{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:20px;margin-top:34px;margin-left:0;padding-top:26px;border-top:1px solid var(--blight)}
  #page-support .w-qr-lab,#page-support .w-qr-fine{flex:1 0 100%}
  #page-support .qr{width:min(196px,42vw)}
}
#page-support .wpanel+.wpanel{margin-top:40px;padding-top:40px;border-top:1px solid var(--blight)}
#page-support .wpanel[hidden]{display:none}
#page-support .wpanel[hidden]+.wpanel{margin-top:0;padding-top:0;border-top:0}
#page-support .w-h{font-family:var(--serif);font-size:clamp(22px,2.1vw,27px);font-weight:400;line-height:1.24;color:var(--ink);margin-bottom:12px}
#page-support .w-p{font-size:15px;line-height:1.8;color:var(--muted);max-width:68ch;text-wrap:pretty}
#page-support .w-appl{margin-top:24px;max-width:68ch}
#page-support .w-lab{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
#page-support .w-bar{height:10px;border-radius:2px;overflow:hidden;background:var(--blight);display:flex}
#page-support .w-seg{display:block;flex:1}
#page-support .w-unres{background:linear-gradient(90deg,var(--forest),var(--teal))}
#page-support .w-agreed{background:var(--teal)}
#page-support .w-desig{background:var(--forest)}
#page-support .w-hub{background:var(--deep)}
#page-support .w-barl{margin-top:11px;font-size:13.5px;line-height:1.7;color:var(--muted)}
#page-support .w-barl strong{color:var(--ink);font-weight:600}
#page-support .w-proof{margin-top:22px;max-width:68ch}
#page-support .w-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;padding:13px 0;border-bottom:1px solid var(--blight)}
#page-support .w-row:last-child{border-bottom:0}
#page-support .w-row p{font-size:13.5px;line-height:1.7;color:var(--muted)}
#page-support .w-row b{color:var(--ink);font-weight:600}
#page-support .w-tick{display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(90,110,58,.14);color:var(--forest);font-size:11px;font-weight:700}
#page-support .w-cta{width:100%;max-width:340px;margin-top:24px;display:flex;justify-content:center}
#page-support .w-fine{font-size:12px;line-height:1.7;color:var(--muted);margin-top:14px;max-width:62ch}
#page-support .ways .bkbox{margin-top:24px;max-width:460px}
@media(max-width:560px){
  #page-support .wtabs{grid-template-columns:1fr}
}

/* ── Get Involved: pathway cards ─────────────────────────────────────
   The cards already lift; these add responses that tell you WHERE you are
   and what is actionable — the terracotta rule at the top thickens and turns
   brand green, the heading follows it, the CTA arrow nudges, and every bank
   value is a copy-to-clipboard button (the real interaction on a donation
   card: nobody wants to hand-transcribe a BSB). */
#page-support .pathway{transition:transform .28s cubic-bezier(.2,.65,.25,1),box-shadow .28s ease,border-color .28s ease}
#page-support .pathway::before{transition:height .28s ease,background-color .28s ease}
#page-support .pathway:hover::before,#page-support .pathway:focus-within::before{height:4px;background:var(--forest)}
#page-support .pathway h3{transition:color .28s ease}
#page-support .pathway:hover h3,#page-support .pathway:focus-within h3{color:var(--forest)}
#page-support .pathway .btn::after{content:"→";margin-left:10px;display:inline-block;transition:transform .24s cubic-bezier(.2,.65,.25,1)}
#page-support .pathway:hover .btn::after,#page-support .pathway .btn:focus-visible::after{transform:translateX(5px)}
#page-support .bkbox{background:var(--sand);border:1px solid var(--border);border-radius:2px;padding:24px;margin-bottom:20px}
#page-support .bklabel{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#page-support .bklist{display:flex;flex-direction:column}
#page-support .bkrow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:7px 0;border-bottom:1px solid var(--blight)}
#page-support .bkrow:last-child{border-bottom:0}
#page-support .bkk{font-size:13px;color:var(--muted)}
#page-support .bkv{justify-self:end;display:inline-flex;align-items:center;gap:10px;margin:-4px -8px;padding:4px 8px;border:0;border-radius:2px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:right;transition:background-color .2s ease,color .2s ease}
#page-support .bkv:hover,#page-support .bkv:focus-visible{background:rgba(90,110,58,.12);color:var(--forest)}
#page-support .bkv.copied{background:rgba(90,110,58,.16);color:var(--forest)}
#page-support .bkc{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .2s ease,color .2s ease}
#page-support .bkv:hover .bkc,#page-support .bkv:focus-visible .bkc,#page-support .bkv.copied .bkc{opacity:1;color:var(--forest)}
@media(prefers-reduced-motion:reduce){
  #page-support .pathway,#page-support .pathway::before,#page-support .pathway h3,#page-support .pathway .btn::after,#page-support .bkv,#page-support .bkc{transition:none}
  #page-support .pathway:hover .btn::after{transform:none}
  #page-support .bkc{opacity:1}
}

/* Photo runs out to the wrap's right gutter so its edge lines up with the
   section rule; the copy column keeps the wrap's left spacing. */
#page-home .hub-feature-layout {padding-right:0;}
#page-home .hub-feature .hub-feature-photo {margin-right:0;}
@media (min-width:761px) and (max-width:1050px) {
 #page-home .hub-feature-layout {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
 #page-home .hub-intro .hgrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0;}
 #page-home .hub-intro .hgrid li:nth-child(odd) {border-left:0;}
}
@media (max-width:760px) {
 #page-home .hub-feature-layout {grid-template-columns:minmax(0,1fr);}
 #page-home .hub-feature-copy {padding:28px 22px;}
 #page-home .hub-feature .ch-t {font-size:clamp(27px,5.7vw,38px);}
 #page-home .hub-intro .hgrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;}
 #page-home .hub-intro .hgrid li:nth-child(odd) {border-left:0;}
 #page-home .hub-feature .hub-feature-photo {height:clamp(250px,65vw,430px);min-height:0;border-radius:16% 0 0 0 / 20% 0 0 0;}
 #page-home .hub-feature-photo img {object-position:35% 30%;}
}

/* Resting depth makes the links apparent before hover. */
#page-home .gichoices a { height: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--photo-shadow); padding: 0; align-items: stretch; text-align: left; }
#page-home .gichoices .gi-im { border-radius: 0; box-shadow: none; }
#page-home .feat-card { padding: clamp(18px,2vw,28px); border: 1px solid var(--border); border-radius: 12px; background: var(--warm); box-shadow: var(--photo-shadow); }
#page-home .partners-heading { font: 400 clamp(26px,2.6vw,36px)/1.2 var(--serif); color: var(--deep); margin-bottom: 14px; }
/* Heading and intro sit side by side so the band fills its width. */
#page-home .partners { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: clamp(28px,4vw,64px); align-items: start; }
#page-home .partners .partners-heading { margin-bottom: 0; }
#page-home .partners .body { max-width: none; }
#page-home .partners .pmarquee { grid-column: 1 / -1; }
@media (max-width: 760px) {
  #page-home .partners { grid-template-columns: 1fr; row-gap: 14px; }
}
@media (hover: hover) and (pointer: fine) {
  #page-home .gichoices a:hover, #page-home .feat-card:hover { box-shadow: 0 18px 34px -10px rgba(28,42,20,.3); }
}

/* Full-bleed hero: the photograph covers the whole band and the copy sits over
   it on a dark scrim, matching the homepage hero treatment. */
#page-approach .ap-hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 42%;
  -webkit-mask-image: none; mask-image: none;
}
#page-approach .ap-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,30,14,.88) 0, rgba(20,30,14,.64) 40%, rgba(20,30,14,.24) 70%, rgba(20,30,14,.14) 100%);
}
#page-approach .ap-hero-in { padding-right: 0; max-width: 1200px; }
#page-approach .ap-hero-in .t1, #page-approach .ap-hero-in .lead { max-width: 30ch; }
#page-approach .ap-hero-in .lead { max-width: 56ch; }
@media (max-width: 860px) {
  #page-approach .ap-hero { display: block; position: relative; }
  #page-approach .ap-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; margin-bottom: 0; object-position: center 38%; }
  #page-approach .ap-hero::after { background: linear-gradient(180deg, rgba(20,30,14,.58) 0, rgba(20,30,14,.8) 100%); }
}

#page-legacy .legacy-quote-band .s { padding-block: clamp(32px,4vw,48px); }
#page-legacy .legacy-quote-band .featq { max-width: 1200px; }
#page-legacy .legacy-quote-band .featq-text { font-size: clamp(22px,2.2vw,30px); margin-bottom: 18px; }

/* Consistent green openings; the existing content and illustrations remain. */
#page-about .ab-hero { background: var(--deep); }
#page-about .ab-hero .t1, #page-about .ab-hero .lead { color: #fff; }
#page-about .ab-hero .eye { color: var(--focus-ring); }
#page-about .ab-hero-grid { gap: clamp(28px,4vw,56px); }
#page-about .ab-trust-heading .t2 { max-width: none; font-size: clamp(34px,3.8vw,50px); }
#page-about .trust-context { font: 400 18px/1.5 var(--serif); color: var(--muted); margin: 12px 0 20px; }
#page-about .trust-credentials { display: flex; gap: 24px; align-items: center; }
#page-about .trust-credentials .acnc-slot { flex: 0 0 116px; width: 116px; margin: 0; }
#page-about .trust-status { list-style: none; display: grid; gap: 18px; font: 400 14px/1.5 var(--sans); color: var(--deep); }
#page-about .trust-status li { display: flex; align-items: center; gap: 12px; }
#page-about .trust-status svg { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

#page-hub .hub-open { background: var(--deep); padding-block: clamp(48px,6vw,76px); }
#page-hub .hub-open .h-sec, #page-hub .hub-open .lead, #page-hub .hub-open .body { color: #fff; }
#page-hub .hub-open .kicker { color: var(--focus-ring); }
#page-hub .hub-opening-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(28px,4vw,56px); align-items: center; }
#page-hub .hub-opening-copy { min-width: 0; }
#page-hub .hub-open .h-sec { font-size: clamp(34px,3.7vw,52px); }
#page-hub .hub-opening-photo { position: relative; min-height: 410px; align-self: stretch; }
#page-hub .hub-opening-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#page-hub .hub-framework-heading { max-width: 950px; }

/* A picture must generate a grid item; the site's generic rule uses display:contents. */
#page-initiatives .emergency-initiative {
  grid-template-areas: "photo copy"; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
}
#page-initiatives .emergency-initiative > picture { display: block; position: relative; inset: auto; grid-area: photo; min-width: 0; }
#page-initiatives .emergency-initiative > .emergency-copy { grid-area: copy; }
#page-initiatives .emergency-copy p { font-size: 16px; }

#page-transparency .gv-hero-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: clamp(28px,4vw,56px); }
#page-transparency .gv-hero-title .h-sec { max-width: 15ch; font-size: clamp(40px,4.6vw,64px); }
#page-transparency .gv-hero-copy { padding: 24px 0 0; border: 0; }
#page-transparency .gv-hero-copy .lead, #page-transparency .gv-hero-copy .body { max-width: none; }
#page-transparency .gv-hero-media { position: relative; align-self: stretch; min-height: 430px; }
#page-transparency .gv-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Keep related copy alongside its heading instead of below a wide empty row. */
#page-transparency .gv-page > .sec { padding-block: clamp(40px,4.8vw,68px); }
#page-transparency .gv-page > .gv-contact { padding-block: clamp(28px,3.4vw,44px); }
#page-transparency .gv-registration-panel { margin-top: clamp(24px,3vw,36px); }
#page-transparency .gv-steward-heading { position: static; }
#page-transparency .gv-country-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(28px,4vw,52px); align-items: start;
}
#page-transparency .gv-country-copy { max-width: none; min-width: 0; }
#page-transparency .gv-country-copy > .kicker { font-size: 15px; }
#page-transparency .gv-country-copy .h-sub { max-width: 28ch; }
#page-transparency .gv-page > .gv-country { padding-bottom: clamp(28px,3vw,40px); }
/* Distribute the paragraphs across the image column height without cropping it. */
#page-transparency .gv-country-story {
  align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-width: 0; margin: 0; padding: 0 0 0 clamp(22px,3vw,36px);
  border-top: 0; border-left: 1px solid var(--f-line-d);
}
#page-transparency .gv-country-story .body { margin: 0; }
#page-transparency .gv-country-story .body + .body { margin-top: 0; }
#page-transparency .gv-country-photo { position: relative; margin: 26px 0 0; }
#page-transparency .gv-country-photo picture { display: block; position: static; inset: auto; }
#page-transparency .gv-country-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 980px) {
  #page-transparency .gv-country-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #page-transparency .gv-country-story { display: block; padding: 0; border: 0; }
  #page-transparency .gv-country-story .body + .body { margin-top: 16px; }
  #page-transparency .gv-country-photo { max-width: 640px; }
}

/* Broader article type and compact figure/prose groups keep the story connected. */
#page-article .ahdr .in { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px clamp(28px,4vw,56px); }
#page-article .ahdr .deck { font-size: clamp(18px,1.7vw,23px); line-height: 1.55; padding-left: 0; border: 0; }
#page-article .abody { max-width: min(1160px,96vw); padding-inline: clamp(20px,3vw,40px); }
#page-article .abody > p, #page-article .article-scene-copy > p, #page-article .ahuman > p { font: 400 18px/1.8 var(--sans); color: var(--f-body); margin-bottom: 1.4em; }
#page-article .ahuman > p:last-child { margin-bottom: 0; }
#page-article .article-scene { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(24px,3vw,40px); align-items: stretch; margin-block: clamp(28px,3vw,40px); }
/* The photo column fills the row so long copy never leaves a void beside it. */
#page-article .article-scene .afig { display: flex; flex-direction: column; }
#page-article .article-scene .afig-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 280px; }
/* Short copy sits centred against the photo instead of leaving a gap below it. */
#page-article .article-scene > .article-scene-copy { align-self: center; }
#page-article .article-scene .acap { margin-top: 12px; }
/* Scene halves enter separately, so a tall copy column beside a photo reads as movement rather than empty space. */
#page-article.article-motion-ready .article-scene > .afig:not(.ar-in) { opacity: 0; transform: translate3d(-18px,16px,0); }
#page-article.article-motion-ready .article-scene > .article-scene-copy:not(.ar-in) { opacity: 0; transform: translate3d(18px,16px,0); }
#page-article .article-scene > .afig, #page-article .article-scene > .article-scene-copy { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
#page-article .article-scene > .article-scene-copy.ar-in { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  #page-article .article-scene > .afig, #page-article .article-scene > .article-scene-copy { opacity: 1 !important; transform: none !important; transition: none; }
}
#page-article .article-scene .afig { margin: 0; min-width: 0; }
#page-article .article-scene .afig-img { aspect-ratio: 4/3; }
#page-article .article-scene-copy > p:last-child { margin-bottom: 0; }
#page-article .abody > .afig { margin-block: clamp(28px,3vw,40px); }
#page-article .abody > .afig:not(.avid) .afig-img { aspect-ratio: 16/9; }
#page-article .acap { font-size: 13px; line-height: 1.65; }
/* ── Uniform article typography ──────────────────────────────────────
   Headings and quotations: Newsreader (--disp). Everything read as
   running text: Libre Franklin (--sans). The source/disclaimer line
   under the statistics keeps its own small-print treatment. */
#page-article .ahdr h1, #page-article .ah2, #page-article h3,
#page-article .apull p, #page-article .aquote p, #page-article .astats .n { font-family: var(--disp) !important; }
#page-article .abody > p, #page-article .abody > p:first-of-type,
#page-article .article-scene-copy > p, #page-article .ahuman > p,
#page-article .aclose p, #page-article .enote p, #page-article .abody li,
#page-article .acap, #page-article .astats .l, #page-article .aquote cite,
#page-article .ahdr .deck, #page-article .ahdr .aplace { font-family: var(--sans) !important; }
#page-article .abody > p:first-of-type { font-size: clamp(19px,1.6vw,22px) !important; line-height: 1.65 !important; color: var(--f-ink) !important; }
#page-article .abody > p[style] { font-family: var(--sans) !important; }
#page-article .ahuman > p, #page-article .aclose p { color: var(--f-body); }

@media (max-width: 980px) {
  #page-home .cstrip::after { display: none; }
  #page-home .cstrip-in { grid-template-columns: 100px minmax(0,1fr); }
  #page-home .cs-acnc-slot { width: 100px; }
  #page-home .cred-badges { grid-column: 2; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-hub .hub-opening-grid, #page-transparency .gv-hero-grid { grid-template-columns: 1fr; }
  #page-hub .hub-opening-photo, #page-transparency .gv-hero-media { min-height: 0; height: 360px; }
}
@media (max-width: 900px) {
  #page-initiatives .emergency-initiative { grid-template-columns: minmax(0,1fr); grid-template-areas: "photo" "copy"; }
  #page-article .article-scene { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #page-approach .ap-hero-img { object-position: center 38%; }
}
@media (max-width: 820px) {
  #page-article .ahdr .in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #page-home .vgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  #page-home .cstrip-in { grid-template-columns: 1fr; gap: 20px; }
  #page-home .cred-copy { border: 0; padding: 0; }
  #page-home .cred-badges { grid-column: 1; }
  #page-about .trust-credentials { flex-direction: column; align-items: flex-start; }
  #page-hub .hub-opening-photo, #page-transparency .gv-hero-media { height: 280px; }
  #page-article .abody > p, #page-article .article-scene-copy > p, #page-article .ahuman > p { font-size: 17px; }
}
@media (max-width: 420px) {
  #page-home .vgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #page-home .gichoices a, #page-home .feat-card { transition: none; }
  #page-home .gichoices a:hover, #page-home .feat-card:hover { transform: none; }
}

/* ── HOME HERO · MOBILE OVERFLOW ────────────────────────────────────────
   On a phone the hero clipped its own content: the headline slid under the
   fixed nav and the STATUS line of .hero-meta was sliced in half by the
   hero's bottom edge. Three things combined to cause it, and all three are
   neutralised here rather than one at a time.

   1. The hero carries a viewport-relative min-height (86vh) while
      .hero-body is a flex column with justify-content:flex-end. Once the
      stacked single-column .hero-meta makes the content taller than that
      height, a bottom-aligned flex column overflows UPWARD — which is why
      the headline disappeared behind the nav — and .rd .hero{overflow:hidden}
      then hid it. Height goes fully auto and the body becomes a normal block
      that flows downward.
   2. motion.js translates .hero-body down by up to 56px on scroll and fades
      it. That is a desktop flourish; on a hero with no spare vertical room it
      pushes the last meta row straight out through the clipped edge. The
      inline transform and opacity it writes are overridden here, so the
      effect simply does not apply at phone widths.
   3. padding-bottom was 0, leaving the final line flush against the boundary
      with nothing to breathe into even when it was not clipped.

   Scoped to #page-home so no other hero is touched. */
@media(max-width:768px){
  #page-home .hero{min-height:0;height:auto;display:block;align-items:stretch;overflow:visible}
  #page-home .hero-body{display:block;height:auto;transform:none!important;opacity:1!important;padding-top:clamp(116px,19vw,152px);padding-bottom:clamp(30px,6vw,48px)}
  #page-home .hero-meta{margin-top:clamp(28px,6vw,44px)}
  #page-home .hero-meta::before{inset:0 -24px 0 -24px}
  #page-home .hmi{padding-top:15px;padding-bottom:15px}
  #page-home .hmi:last-child{padding-bottom:4px}
  #page-home .hmi strong{text-wrap:pretty}
}

/* ── NEWSLETTER CAPTURE PAGE ─────────────────────────────────────────────
   The footer's Newsletter link used to jump to /#newsletter, landing people
   mid-home-page with no explanation of what they were joining. This page is
   that link's destination. It reuses the home page's .rd .nl strip verbatim,
   so only two classes are new: the lead paragraph the strip never had, and
   the pair of exit links below it. */
#page-newsletter .nl-body{font-family:var(--rsans);font-size:14.5px;line-height:1.75;color:var(--f-body);margin-top:14px;max-width:46ch}
/* The intro borrows .legal for its centred 760px measure and serif h1, but
   not its spacing: .legal is built for long documents that open tight and
   run long, whereas this is a short block that has to sit calmly between the
   nav and the signup strip. Padding scales on vw so the gap grows with the
   type instead of staying at a phone-sized 40px on a desktop. */
#page-newsletter .nl-intro{text-align:center;padding:clamp(52px,7.5vw,104px) 24px clamp(30px,4.5vw,52px)}
/* Hero: the same device as the support page — photograph behind the header,
   held under a scrim so the type keeps full contrast — but the scrim runs
   vertically rather than left-weighted, because this headline is centred.
   Ink stays at full opacity over the photo; the scrim does the work. */
#page-newsletter .nl-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(300px,38vw,440px)}
#page-newsletter .nl-hero-img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
#page-newsletter .nl-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,30,14,.62) 0,rgba(20,30,14,.78) 52%,rgba(20,30,14,.9) 100%)}
#page-newsletter .nl-hero .nl-intro{position:relative;z-index:2;width:100%}
#page-newsletter .nl-hero h1,#page-newsletter .nl-hero .eye{color:#fff}
#page-newsletter .nl-hero .eye .mk,#page-newsletter .nl-hero .eye::before{background:#fff}
#page-newsletter .nl-hero .nl-lede{color:#f2efe6}
#page-newsletter .nl-intro .eye{justify-content:center;margin-bottom:clamp(14px,1.8vw,20px)}
#page-newsletter .nl-intro h1{margin-bottom:clamp(14px,1.8vw,22px)}
/* Not .legal .upd: that is the 12px "last updated" stamp, far too small to
   carry the one sentence that has to earn the subscription. */
#page-newsletter .nl-lede{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;color:var(--ink2);max-width:50ch;margin:0 auto;text-wrap:pretty}
#page-newsletter .nl-after{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:clamp(32px,4.5vw,52px) 24px clamp(56px,7vw,88px)}
/* field.css defines only btn-terra, btn-dark and btn-ghost for .rd, and its
   .rd .btn rule resets the border to transparent — so style.css's btn-outline
   loses and these two links render as bare text. btn-ghost is white-on-dark
   and wrong on this light ground, and two solid buttons would read as two
   primary actions, so the outline variant is restated here with field tokens. */
#page-newsletter .nl-after .btn-outline{background:transparent;color:var(--f-ink);border:1px solid var(--f-line)}
#page-newsletter .nl-after .btn-outline:hover{background:var(--f-ink);border-color:var(--f-ink);color:#fff}
@media(max-width:560px){
  #page-newsletter .nl-intro{padding-left:20px;padding-right:20px}
  #page-newsletter .nl-hero{min-height:0}
  #page-newsletter .nl-hero-img{object-position:50% 38%}
  #page-newsletter .nl-hero-scrim{background:linear-gradient(180deg,rgba(20,30,14,.72) 0,rgba(20,30,14,.88) 100%)}
  #page-newsletter .nl-after{flex-direction:column;align-items:stretch}
  #page-newsletter .nl-after .btn{justify-content:center}
}