.ab-hero h1 .hl { color:var(--color-primary); }

/* ---- Hero (light) ---- */
.ab-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-3xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, #fff 72%); }
.ab-hero h1 { letter-spacing:-.02em; color:var(--color-secondary); max-width:14em; }
.ab-sprinkle { font-weight:var(--weight-bold); color:var(--color-primary); letter-spacing:.01em; }

/* ---- Stat row (dark band) ---- */
.ab-stats { background:var(--grad-deep); color:#fff; position:relative; overflow:hidden; }
.ab-stats h2 { color:#fff; }
.ab-stats .eyebrow.on-dark { color:var(--brand-200); }
.ab-now { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-xl); align-items:center; position:relative; z-index:1; }
.ab-now-copy > p { color:rgba(255,255,255,.86); font-size:var(--text-md); line-height:var(--line-relaxed); margin:var(--space-s) 0 0; max-width:36em; }
.ab-now-stats { display:grid; gap:var(--space-s); }
.ab-stat { display:flex; align-items:baseline; gap:var(--space-s); padding:var(--space-s) var(--space-m); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.ab-stat .v { flex:none; min-width:4.2em; font-size:var(--step-3); font-weight:var(--weight-extrabold); color:#fff; line-height:var(--line-none); letter-spacing:-.01em; }
.ab-stat .k { font-size:var(--text-sm); color:rgba(255,255,255,.82); }

/* ---- Our story ---- */
.ab-story { display:grid; grid-template-columns:1.35fr 1fr; gap:var(--space-xl); align-items:start; }
.ab-story-copy h2 { color:var(--color-secondary); }
.ab-story-copy > p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:var(--space-s) 0 0; }
section.block.ab-manifesto { background:var(--grad-deep); color:#fff; text-align:center; padding:var(--space-2xl) 0; position:relative; overflow:hidden; }
.ab-manifesto .wrap { position:relative; }
.ab-quote { position:relative; max-width:24em; margin:0 auto; padding:0; border:0;
  font-size:var(--step-2); line-height:var(--line-normal); font-weight:var(--weight-bold); color:#fff; letter-spacing:-.01em; }
.ab-quote-mark { position:absolute; left:50%; top:-.55em; transform:translateX(-50%); font-family:Georgia,serif; font-size:6em; line-height:1; color:rgba(103,184,220,.22); pointer-events:none; }
.ab-founders { display:flex; gap:var(--space-l); flex-wrap:wrap; margin-top:var(--space-l); }
.ab-founder { display:flex; align-items:center; gap:var(--space-xs); margin:0; }
.ab-founder > img { width:64px; height:64px; border-radius:var(--radius-full); object-fit:cover; box-shadow:var(--shadow-xs); }
.ab-founder .sig { display:block; height:56px; width:auto; border-radius:0; box-shadow:none; margin:0 0 var(--space-3xs) -8px; }
.ab-founder .name { display:block; font-weight:var(--weight-extrabold); color:var(--color-secondary); font-size:var(--text-md); }
.ab-founder .role { display:block; font-size:var(--text-sm); color:var(--color-ink-soft); }
.ab-mission-card { background:var(--brand-50); border:none; border-radius:var(--radius-lg); padding:var(--space-l) var(--space-l); }
.ab-mission-card .chip-ic { margin-bottom:var(--space-s); }
.ab-mission-card h3 { color:var(--color-secondary); margin:0 0 var(--space-2xs); }
.ab-mission-card h3 + p { margin:0 0 var(--space-m); }
.ab-mission-card p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:0; }

/* ---- Leadership ---- */
/* Group labels inside #team: centred like the section head; the second one carries its own
   top padding (not margin) so the gap after the leadership grid can't collapse away. */
.ab-sub { text-align:center; margin:0 0 var(--space-m); scroll-margin-top:96px; }
.ab-sub-later { padding-top:var(--space-2xl); }
.ab-team { gap:var(--space-m); }
.ab-person { background:var(--brand-25); border:none; border-radius:var(--radius-lg); padding:var(--space-l) var(--space-s); text-align:center; box-shadow:var(--shadow-xs); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.ab-person:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ab-person .avatar { width:84px; height:84px; border-radius:var(--radius-full); margin:0 auto var(--space-s); background:var(--grad-chip); color:#fff; font-weight:var(--weight-extrabold); font-size:var(--text-xl); display:flex; align-items:center; justify-content:center; letter-spacing:.02em; overflow:hidden; }
.ab-person .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* .no-open — the headshot cannot be opened any bigger than it is shown (owner, 2026-09-16, for his
   own portrait): no long-press "open image" on mobile, no drag-out, no pointer target for a
   right-click, so the 480px source is never surfaced. The circle itself still lifts with the card. */
.ab-person .avatar img.no-open { pointer-events:none; -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
/* One line per name: sized so the longest (Benjamin Atkinson) fits a quarter-width card. */
.ab-person h3 { color:var(--color-secondary); margin:0 0 var(--space-3xs); font-size:var(--text-lg); white-space:nowrap; letter-spacing:-.01em; }
.ab-person .role { font-size:var(--text-sm); color:var(--color-ink-soft); }
.ab-person .bio { margin:var(--space-s) 0 0; font-size:var(--text-sm); line-height:var(--line-relaxed); color:var(--color-ink-soft); text-align:left; }
.ab-person .bio em { font-style:italic; color:var(--color-secondary); }

/* ---- Research: copy left, partner lockups in a card on the right ---- */
.ab-research { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-xl); align-items:center; }
.ab-research-copy h2 { color:var(--color-secondary); margin:0 0 var(--space-s); }
.ab-research-copy > p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:0 0 var(--space-m); max-width:34em; }
.ab-partners { background:var(--brand-25); border-radius:var(--radius-lg); padding:var(--space-l); text-align:center; box-shadow:var(--shadow-xs); }
.ab-partners-lead { margin:0 0 var(--space-m); font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink-soft); }
.ab-partners-row { display:flex; flex-direction:column; align-items:center; gap:var(--space-l); }
.ab-partners-row img { height:56px; width:auto; max-width:240px; object-fit:contain; }
@media (max-width:920px){ .ab-research { grid-template-columns:1fr; gap:var(--space-l); } }
@media (max-width:680px){ .ab-partners-row img { height:44px; } }

/* ---- Bridging gaps ---- */
.ab-bridge { gap:var(--space-m); }
.ab-bridge-card { background:var(--brand-25); border:none; border-radius:var(--radius-lg); padding:var(--space-l) var(--space-l); box-shadow:var(--shadow-xs); }
.ab-bridge-card h3 { color:var(--color-secondary); margin:0 0 var(--space-2xs); }
.ab-bridge-card p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:0; }
/* Button rail on the two outreach cards. .btn-light is a white pill so it reads on both the
   Close the Gap card's dark ground and the rural card's photo. */
.ab-bridge-card .btn-row { margin:var(--space-m) 0 0; }
/* ---- Close the Gap card: Aboriginal flag palette, plain sun-and-earth composition (see the
   note in about.njk — not an art-style imitation). Black sky above, red earth below, yellow sun
   bleeding off the right edge; the campaign name set large and faint behind the copy. ---- */
.ab-ctg { position:relative; overflow:hidden; color:#fff; min-height:340px;
  background:linear-gradient(180deg, #0b0b0b 0 58%, #cc3f1e 58% 100%); }
.ab-ctg-sun { position:absolute; right:-60px; top:calc(58% - 100px); width:200px; height:200px; border-radius:50%;
  background:#ffce00; box-shadow:0 0 0 14px rgba(255,206,0,.16), 0 0 0 30px rgba(255,206,0,.08); }
.ab-ctg-wm { position:absolute; left:var(--space-l); bottom:-.18em; font-size:5.2rem; line-height:1; font-weight:var(--weight-extrabold);
  letter-spacing:-.03em; color:rgba(255,255,255,.10); white-space:nowrap; pointer-events:none; }
.ab-ctg-body { position:relative; z-index:1; max-width:30em; padding-right:150px; }
/* 🚩 SCOPED TO THE CARD, and that is the fix, not decoration. The tag is a <p>, so
   `.ab-bridge-card p` (0,1,1) outranked a bare `.ab-ctg-tag` (0,1,0) and quietly took BOTH its
   font-size and its margin: the pill rendered at --text-md (15px) instead of --text-xs (10px)
   and sat flush against the heading, because the 16px bottom margin was being overridden to 0.
   One collision, both symptoms — "too large and close to the title text" (owner, 2026-09-17).
   ⚠️ The same trap applies to anything else in this card that is a <p>. */
.ab-bridge-card .ab-ctg-tag { display:inline-block; margin:0 0 var(--space-s); padding:var(--space-3xs) var(--space-xs); border-radius:var(--radius-full);
  background:#ffce00; color:#0b0b0b; font-size:var(--text-xs); line-height:var(--line-snug); font-weight:var(--weight-extrabold); letter-spacing:.12em; text-transform:uppercase; }
.ab-bridge-card.ab-ctg h3 { color:#fff; }
.ab-bridge-card.ab-ctg p { color:rgba(255,255,255,.88); }
.ab-bridge-card.ab-ctg .ab-ctg-tag { color:#0b0b0b; }
@media (max-width:680px){ .ab-ctg { min-height:0; } .ab-ctg-sun { width:140px; height:140px; right:-50px; top:auto; bottom:-40px; } .ab-ctg-body { padding-right:0; } .ab-ctg-wm { font-size:3.6rem; } }

/* ---- Rural & regional card: full-bleed outback photo behind the copy, darkened at the bottom
   so the text stays legible over the sky/plain. Same pill + heading + body rhythm as .ab-ctg. ---- */
.ab-rural { position:relative; overflow:hidden; color:#fff; min-height:340px;
  background-size:cover; background-position:center 60%; }
.ab-rural::before { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,20,36,.92) 0%, rgba(8,20,36,.80) 45%, rgba(8,20,36,.30) 100%); }
.ab-rural-body h3, .ab-rural-body p { text-shadow:0 1px 2px rgba(0,0,0,.45); }
.ab-rural-body { position:relative; z-index:1; max-width:30em; }
/* Same scoping as .ab-ctg-tag above, for the same reason. */
.ab-bridge-card .ab-rural-tag { display:inline-block; margin:0 0 var(--space-s); padding:var(--space-3xs) var(--space-xs); border-radius:var(--radius-full);
  background:rgba(255,255,255,.92); color:#0b2a4a; font-size:var(--text-xs); line-height:var(--line-snug); font-weight:var(--weight-extrabold); letter-spacing:.12em; text-transform:uppercase; }
.ab-bridge-card.ab-rural h3 { color:#fff; }
.ab-bridge-card.ab-rural p { color:#fff; }
.ab-bridge-card.ab-rural .ab-rural-tag { color:#0b2a4a; }
@media (max-width:680px){ .ab-rural { min-height:280px; } }
.ab-active { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-xs); margin-top:var(--space-xl); }
.ab-active-lead { font-weight:var(--weight-bold); color:var(--color-ink-soft); font-size:var(--text-sm); }
.ab-state { display:inline-flex; align-items:center; background:var(--brand-25); border:none; border-radius:var(--radius-full);
  padding:var(--space-2xs) var(--space-s); font-weight:var(--weight-bold); color:var(--color-secondary); font-size:var(--text-sm); box-shadow:var(--shadow-xs); }

/* ---- Responsive ---- */
@media (max-width:920px) {
  .ab-story { grid-template-columns:1fr; gap:var(--space-l); }
  .ab-now { grid-template-columns:1fr; gap:var(--space-l); }
  }
@media (max-width:680px) {
  .ab-hero { padding-top:122px; }
}

/* ---- Reveal timing for this page ----
   The site default (framework/animations.css) ends each reveal at `cover N%` — a share of the
   element's whole journey through the viewport. On this page most reveals are tall (cards, split
   sections), so they only fully resolved once mostly scrolled past, and a block left in view sat
   faded. Key every reveal on this page to `entry` instead: fully opaque once roughly a third of
   the element has come into view. about.css loads after the framework, so same-specificity
   selectors here win. */
@supports (animation-timeline: view()) {
  .reveal { animation-range: entry 0% entry 35%; }
  .reveal.d1 { animation-range: entry 5% entry 40%; }
  .reveal.d2 { animation-range: entry 10% entry 45%; }
  .reveal.d3 { animation-range: entry 15% entry 50%; }
}