/* ==========================================================================
   Home page rebuild — 2026-08-04
   Scoped, self-contained styles for the restructured home page:
   hero slider, Why Aurum, impact stats, What We Do rail, Where We Work.
   Loaded after every other stylesheet so it wins the cascade cleanly
   without needing !important overrides on top of overrides.
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Hero slider ---- */
.hero--slider{overflow:hidden}
/* touch-action:pan-y lets a vertical touch gesture scroll the page natively
   (the browser doesn't have to wait for JS) while still handing horizontal
   drags to the wipe-carousel logic in script.js — see the axis-lock check
   there. cursor:grab is the drag affordance; :active swaps to grabbing. */
.hero-slides{position:relative;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.hero-slides:active,.hero--slider.is-dragging .hero-slides{cursor:grabbing}
.hero-slide{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity .7s var(--ease-editorial,ease)}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
/* 2026-08-15: the wipe-reveal drag carousel (script.js) needs the incoming
   slide visible *before* it becomes .is-active, so its progressive
   clip-path reveal is what's doing the work instead of the plain opacity
   crossfade above — transition:none so the clip-path updates track the
   pointer/spring frame-by-frame instead of fighting a queued opacity
   transition on the same element. */
.hero-slide.is-wipe-live{opacity:1;visibility:visible;transition:none}
/* .hero-image, .hero-shade and .hero-content keep their existing global
   sizing/position rules (incl. the header-clearance fit pass in styles.css)
   — intentionally not overridden here so the tuned heading sizes still apply. */
.hero-slide-flag{display:inline-block;margin:0 0 16px;padding:5px 11px;border-radius:3px;background:var(--aurum-gold);color:#171514;font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* Placeholder slides (no photography yet): flat brand-colour field with the
   same watermark treatment used on the Where We Work blocks, so an empty
   slide still looks intentional rather than broken. */
.hero-slide--placeholder{overflow:hidden;color:#fff}
.hero-slide--placeholder::before{content:"A";position:absolute;top:48%;left:8%;transform:translateY(-50%) rotate(-8deg);font-size:clamp(220px,32vw,440px);line-height:1;font-weight:700;color:rgba(255,255,255,.09);pointer-events:none}
.hero-slide--red{background:var(--aurum-red)}
.hero-slide--teal{background:var(--aurum-teal)}
.hero-slide--gold{background:var(--aurum-gold);color:#171514}
.hero-slide--gold::before{color:rgba(23,21,20,.09)}
.hero-slide--gold .hero-slide-flag{background:#171514;color:var(--aurum-gold)}
.hero-slide--gold .hero-scroll{border-bottom-color:rgba(23,21,20,.55)}
.hero-slide--placeholder .hero-content em{color:inherit;opacity:.72}
.hero-nav{position:absolute;z-index:6;right:clamp(22px,5vw,72px);bottom:30px;display:flex;align-items:center;gap:16px}
.hero-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(16,16,16,.28);color:#fff;display:grid;place-items:center;font-size:15px;transition:background .25s var(--ease-editorial),transform .25s var(--ease-editorial)}
.hero-arrow:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.hero-dots{display:flex;align-items:center;gap:8px}
.hero-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.45);transition:width .3s var(--ease-editorial),background .3s var(--ease-editorial)}
.hero-dots button[aria-selected="true"]{width:24px;border-radius:5px;background:#fff}
@media(max-width:850px){
  .hero-nav{right:22px;bottom:22px;gap:12px}
  .hero-arrow{width:34px;height:34px;font-size:13px}
}

/* ---- Hero: light editorial two-column redesign (2026-08-11) ----
   Reference: client-supplied mockup of the Ratevosian slide specifically.
   2026-08-11 v2: the first pass scoped this to .hero--slider, which is
   the shared container for ALL FOUR slides — that put every slide (SANAS,
   SUPREME-SECURE, the Setswe branded graphic) through the same light
   grid-column treatment, and the Setswe branded graphic in particular
   broke badly (a square social-card graphic with baked-in logo/text does
   not survive being cover-cropped into a narrow column). Client feedback
   was immediate and correct: only the ONE slide shown in the reference
   should change. Re-scoped to `.hero-slide:has(.hero-image--portrait)` —
   that class only exists on the Ratevosian slide's image wrapper — so the
   other three slides fall straight back to their original full-bleed
   dark-photo treatment, untouched. The shared .hero-nav (single control
   set, sibling of all four slides) switches its colour scheme via
   `.hero:has(.hero-slide.is-active .hero-image--portrait)` so it reads
   dark-on-light only while the redesigned slide is the one on screen. */
.hero-slide:has(.hero-image--portrait){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch;
  background:#fff;
}
.hero-slide:has(.hero-image--portrait) .hero-content{
  grid-column:1;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
  padding:clamp(120px,15vh,150px) clamp(24px,4.4vw,56px) clamp(44px,6vh,64px) clamp(24px,6vw,96px);
}
.hero-slide:has(.hero-image--portrait) .hero-content h1{
  font-size:clamp(42px,4.6vw,78px);
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--aurum-ink);
  margin:0 0 clamp(24px,3vh,34px);
  max-width:620px;
  font-weight:700;
}
.hero-slide:has(.hero-image--portrait) .hero-content h1 em{font-style:normal;color:var(--aurum-gold)}
/* 2026-08-16: the SANAS headline's <em> wraps "SANAS accreditation" and
   needs an explicit accent colour — the default hero h1 has no <em> color
   rule of its own (only the portrait-mode variant above sets one). Gold
   matches the accent colour every other <em> on the site uses. */
.hero-content h1 em.text-accent-gold{font-style:normal;color:var(--aurum-gold)}
.hero-slide:has(.hero-image--portrait) .hero-scroll{
  border-bottom-color:rgba(25,22,19,.32);
  /* modern-refresh.css has a site-wide `a,a:visited{color:inherit!important}`
     rule (its "Emergency polish pass" block) — needed to match its
     !important here too, otherwise this link silently inherits the dark
     hero's white text colour and reads as invisible against the new cream
     background. */
  color:var(--aurum-ink)!important;
  font-weight:600;
}
.hero-slide:has(.hero-image--portrait) .hero-scroll:hover{border-bottom-color:var(--aurum-ink)}
.hero-slide:has(.hero-image--portrait) .hero-image{
  grid-column:2;
  background:#fff;
  position:relative;
}
/* !important required on every property here: modern-refresh.css has a
   `.hero--story .hero-image img{...}` rule (its full-bleed edge-hiding fix
   for the other 3 cover-cropped slides — oversizes to 112% width, shifts
   left:-6%, translateX(4%), object-position:center 39%, all !important)
   that otherwise wins over this plain rule despite lower specificity,
   because !important beats specificity outright. That rule assumes
   object-fit:cover; applied to this object-fit:contain image it was
   silently stretching/shifting Prof Setswe's portrait off-centre to the
   right — exactly the bug reported 2026-08-16. Every property the
   competing rule sets needs an explicit reset here. */
.hero-slide:has(.hero-image--portrait) .hero-image img{
  position:static!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:100%!important;
  max-width:100%!important;
  transform:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}
/* Soft seam so the photo column reads as integrated with the copy panel
   rather than a hard-edged rectangle dropped on top of it. */
.hero-slide:has(.hero-image--portrait) .hero-shade{
  grid-column:2;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 13%);
  z-index:1;
  pointer-events:none;
}
/* Shared nav (arrows + dots) switches to dark-on-light COLOUR only while
   the redesigned slide is active; position stays put in the same corner
   for every slide (the base bottom-right from the ---- Hero slider ----
   rules above) so the controls don't visibly jump position as the
   carousel autoplays between slides. Only colour/border/shadow are
   touched here, no left/right/bottom overrides. */
.hero:has(.hero-slide.is-active .hero-image--portrait) .hero-arrow{
  border:1px solid rgba(25,22,19,.16);
  background:#fff;
  color:var(--aurum-ink);
  box-shadow:0 8px 20px rgba(25,22,19,.07);
}
.hero:has(.hero-slide.is-active .hero-image--portrait) .hero-arrow:hover{background:var(--aurum-ink);color:#fff;border-color:var(--aurum-ink);transform:translateY(-2px)}
.hero:has(.hero-slide.is-active .hero-image--portrait) .hero-dots button{background:rgba(25,22,19,.2)}
.hero:has(.hero-slide.is-active .hero-image--portrait) .hero-dots button[aria-selected="true"]{background:var(--aurum-ink)}

/* Mobile: recompose rather than shrink — photo becomes a compact banner
   on top, copy stacks below at full width, nav controls follow the copy
   column's left edge. Still scoped to only the redesigned slide. */
@media(max-width:850px){
  .hero-slide:has(.hero-image--portrait){grid-template-columns:1fr;grid-template-rows:clamp(240px,52vw,340px) auto}
  .hero-slide:has(.hero-image--portrait) .hero-image{grid-column:1;grid-row:1}
  .hero-slide:has(.hero-image--portrait) .hero-shade{
    grid-column:1;grid-row:1;
    background:linear-gradient(180deg,rgba(255,255,255,0) 68%,#fff 100%);
  }
  .hero-slide:has(.hero-image--portrait) .hero-content{
    grid-column:1;grid-row:2;
    padding:28px 22px clamp(84px,20vw,110px);
  }
  .hero-slide:has(.hero-image--portrait) .hero-content h1{font-size:clamp(34px,9vw,44px)!important;line-height:1.05!important;max-width:none}
  /* Nav position stays at the base right:22px;bottom:22px for every slide
     on mobile too — colour-only swap, no position jump. */
}

/* ---- Shared strap rhythm ---- */
.home-strap{padding:clamp(70px,9vw,120px) clamp(22px,7vw,116px)}
.home-strap-head{max-width:760px;margin:0 0 clamp(40px,5vw,64px)}
.home-strap-head .section-index{margin-bottom:20px}
.home-strap-head h2{font-size:clamp(38px,4.6vw,64px);line-height:.95;letter-spacing:-.05em;margin:0;font-weight:600}

/* ---- Why Aurum ---- */
/* Gold world-map watermark (2026-08-11, take 5). Take 4 used
   background-size:cover, which was the bug behind "where is it" — this
   section is much taller than the map image's landscape aspect ratio, so
   cover zoomed in and cropped away the recognisable parts (the hub points
   and connecting arcs), leaving only an unrecognisable patch of scattered
   dots. Switched to background-size:100% 100% instead: the full image
   always renders, edge-to-edge, on any section height or viewport width —
   no cropping, so the map stays recognisable, and no separate mobile
   override is needed since this sizing is aspect-ratio-agnostic by
   construction. Real image asset supplied by the client
   (assets/maps/ChatGPT Image Aug 11, 2026, 10_18_30 AM.png), rendered at
   full opacity — as it looks in the asset itself, no fading applied — via
   a ::before layer so opacity/blend can still be tuned independently of
   the section's actual text/cards later if it turns out too dark. */
/* Extends this section's own bottom padding (and .what-we-do's top padding
   is trimmed to match, below) so the map — bound to this section's box via
   inset:0 — actually reaches all the way down to just before the "WHAT WE
   DO" label, instead of stopping partway through what used to be a
   two-section-deep gap of plain white. Total whitespace before the next
   heading stays about the same; only which section "owns" (and therefore
   paints) it has changed. */
/* 2026-08-11: the watermark PNG (assets/maps/ChatGPT Image...) is ~1.3MB
   decoded and gets painted as a CSS background-image, which — unlike an
   <img> tag — has no built-in async/lazy decoding. On a slower machine the
   browser hadn't finished painting this section by the time it scrolled
   into view, showing as a blank gap mid-scroll. content-visibility:auto
   defers this section's layout/paint work until it's actually near the
   viewport instead of trying to do it eagerly with everything else on the
   page; contain-intrinsic-size reserves roughly its real height up front
   so the page doesn't jump/reflow once the section does render. This is a
   mitigation, not a fix — the real fix is shrinking that PNG's file size,
   which needs an image tool, not CSS. */
.why-aurum{position:relative;overflow:hidden;background:#fff;padding-bottom:clamp(90px,10vw,150px);content-visibility:auto;contain-intrinsic-size:1px 700px}
.why-aurum::before{
  content:"";position:absolute;z-index:0;pointer-events:none;inset:0;
  background-image:url("../maps/ChatGPT Image Aug 11, 2026, 10_18_30 AM.png");
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:1;
}
.why-aurum .home-strap-head,.why-aurum .why-grid{position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* 2026-08-15: was a different accent per card (red/teal/orange) with no
   meaning behind which card got which colour — just decorative variety.
   Reference site the client flagged (safestartplus.org) does the opposite
   for its equivalent icon-card row: one accent colour throughout, doing
   all the work. Unified to gold here to match the "01/02/03" labels,
   which were already gold. NOT applied to the homepage's Areas of
   Focus health-area pills elsewhere — those colours are functional
   (each health area keeps its own colour for at-a-glance differentiation
   across 7+ items), not decorative, so collapsing them would remove
   real information rather than just noise. */
.why-card{border-radius:12px;padding:clamp(28px,3vw,38px);background:#fff;box-shadow:0 12px 32px rgba(25,22,19,.07);border-top:4px solid var(--aurum-gold);transition:transform .4s var(--ease-editorial),box-shadow .4s var(--ease-editorial)}
.why-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(25,22,19,.13)}
.why-card b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--aurum-gold);margin-bottom:22px}
.why-card h3{font-size:clamp(21px,2vw,26px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
.why-card p{margin:0;font-size:15px;line-height:1.6;color:#5e5b55}
@media(max-width:850px){
  .why-grid{grid-template-columns:1fr}
  /* No background-size override needed here any more — 100% 100% (see
     .why-aurum::before above) already fills any aspect ratio without
     cropping, mobile included. */
}

/* ---- Impact stats: hero figure + companion ticker cards ---- */
/* Sits directly beneath .what-we-do on the same white canvas so the two
   straps read as one continuous composition — hence the near-zero top
   padding rather than the default .home-strap rhythm. */
.impact-stats{position:relative;overflow:hidden;background:#fff;padding-top:0;padding-bottom:clamp(44px,5vw,70px)}
/* One outer panel holding the red feature card + a single connected stat
   strip, so the whole thing reads as one dashboard, not five floating
   cards. The four counters live inside .stat-strip (added 2026-08-11) and
   share dividers instead of each carrying its own card chrome. */
.impact-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.62fr 2.1fr;gap:0;align-items:stretch;padding:12px;background:#fff;border:1px solid rgba(25,22,19,.07);border-radius:20px;box-shadow:0 18px 46px rgba(25,22,19,.07)}

/* The red panel sets the row height, so every stat card stretches to match
   it. Keeping this compact is what stops the counters floating in a pool of
   white — the figure is sized to sit on one line rather than wrapping. */
.impact-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.1vw,30px);border-radius:12px;background:var(--aurum-red);color:#fff;opacity:0;transform:translateY(22px) scale(.94);transition:opacity .6s var(--ease-editorial,ease),transform .6s var(--ease-editorial,ease)}
.impact-hero.is-visible{opacity:1;transform:none}
/* Dotted Africa silhouette (revised 2026-08-11 — v1's three ellipses were
   too similar in size and just merged into one oval blob). This version
   stacks FIVE ellipses of steadily decreasing width from top to bottom,
   drifting slightly right as they shrink, so the union reads as a clear
   taper — wide shoulders up top, narrowing step by step to a point — plus
   one small ellipse offset to the upper right for the Horn. That
   wide-to-point taper plus the single asymmetric bump is the shape cue
   that actually reads as "Africa" rather than a generic blob. Still pure
   CSS shapes, no traced map data, so no risk of pulling in a neighbouring
   country, flag, or border. */
.impact-hero::before{content:"";position:absolute;z-index:0;bottom:-18%;right:-6%;width:68%;height:138%;background-image:radial-gradient(rgba(255,255,255,.28) 1.6px,transparent 1.6px);background-size:13px 13px;-webkit-mask-image:radial-gradient(ellipse 58% 24% at 46% 13%,#000 58%,transparent 78%),radial-gradient(ellipse 46% 24% at 50% 33%,#000 55%,transparent 76%),radial-gradient(ellipse 32% 22% at 53% 53%,#000 55%,transparent 76%),radial-gradient(ellipse 18% 16% at 55% 71%,#000 58%,transparent 78%),radial-gradient(ellipse 9% 9% at 56% 84%,#000 60%,transparent 80%),radial-gradient(ellipse 13% 11% at 71% 9%,#000 58%,transparent 78%);mask-image:radial-gradient(ellipse 58% 24% at 46% 13%,#000 58%,transparent 78%),radial-gradient(ellipse 46% 24% at 50% 33%,#000 55%,transparent 76%),radial-gradient(ellipse 32% 22% at 53% 53%,#000 55%,transparent 76%),radial-gradient(ellipse 18% 16% at 55% 71%,#000 58%,transparent 78%),radial-gradient(ellipse 9% 9% at 56% 84%,#000 60%,transparent 80%),radial-gradient(ellipse 13% 11% at 71% 9%,#000 58%,transparent 78%);pointer-events:none}
.impact-hero-eyebrow{position:relative;z-index:1;margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.impact-hero-figure{position:relative;z-index:1;margin:0 0 11px;font-size:clamp(26px,2.6vw,34px);line-height:1.06;font-weight:600;letter-spacing:-.02em}
.impact-hero-figure strong{color:var(--aurum-gold);font-weight:800}
.impact-hero-copy{position:relative;z-index:1;max-width:290px;margin:0 0 17px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.impact-hero-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;width:fit-content;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.impact-hero-link span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.5);transition:background .25s var(--ease-editorial),color .25s var(--ease-editorial),transform .25s var(--ease-editorial)}
.impact-hero-link:hover span{background:#fff;color:var(--aurum-red);transform:translateX(3px)}

/* Compact, connected statistics strip — sits flush against the red
   .impact-hero card (see .impact-layout gap:0 above) so the four counters
   read as one white companion panel rather than four separate cards.
   Dividers (border-left) replace the old per-card border/shadow/radius. */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.stat-card{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;background:transparent;border-radius:0;padding:clamp(10px,1.2vw,16px) clamp(5px,0.8vw,8px);text-align:center;box-shadow:none;border:0;opacity:0;transform:translateY(22px) scale(.94);transition:opacity .6s var(--ease-editorial,ease),transform .6s var(--ease-editorial,ease)}
.stat-strip .stat-card:not(:first-child){border-left:1px solid rgba(25,22,19,.08)}
.stat-card.is-visible{opacity:1;transform:none}
.stat-strip .stat-card:nth-child(1){transition-delay:0s}
.stat-strip .stat-card:nth-child(2){transition-delay:.08s}
.stat-strip .stat-card:nth-child(3){transition-delay:.16s}
.stat-strip .stat-card:nth-child(4){transition-delay:.24s}
/* 2026-08-16: second pass — still too small, and sitting too close to the
   number below it. Circle/glyph scaled up again, margin-bottom roughly
   doubled for real breathing room before the ticker. */
.stat-icon{width:clamp(58px,5.2vw,70px);height:clamp(58px,5.2vw,70px);margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#faf1d9)}
.stat-icon svg{width:30px;height:30px;fill:none;stroke:var(--aurum-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stat-ticker,.stat-ticker-wrap{display:flex;align-items:baseline;justify-content:center;gap:0;margin-bottom:7px;flex-wrap:nowrap;max-width:100%}
/* Digit sizing rebuilt 2026-08-11 (numbers-visibility pass): the old boxed
   odometer cells (bordered squares, cqi-based font that always sat at its
   13px floor) read as small and fussy. Each digit is still its own span —
   the counter JS in script.js builds/updates one .stat-digit per character
   and must keep working untouched — but they're no longer individual
   bordered boxes. Width is set in em (0.62em) so it scales automatically
   with font-size instead of needing a second hand-tuned clamp, and the
   border/background/fixed-height box chrome is gone so the glyphs read as
   one continuous bold number. Font-size uses a vw-based clamp (not cqi)
   sized against the tightest real case on the page: the 8-digit HIV figure
   inside a 4-across desktop strip, which was budgeted by hand to confirm it
   still fits its stat-card column without wrapping at the 32px ceiling. */
/* 2026-08-16: client feedback — the bold IBM Plex Mono treatment read as
   heavy/shouty, not "confident." Swapped to the same Cabinet Grotesk face
   used for every headline on the site, at medium (500) rather than bold —
   large and assured without being loud. Size nudged up slightly since a
   lighter weight otherwise reads smaller at the same point size. */
/* Ceiling kept at the original 32px on purpose — that's the hand-budgeted
   fit for the 8-digit HIV figure ("15 046 871") sitting directly against
   its neighbour in the 4-across desktop strip; going bigger (tried 36px)
   ran it straight into the next card with no gap. The "confident" quality
   comes from the typeface swap below, not from being physically larger. */
.stat-digit{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:.62em;font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;font-weight:500;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:-.01em;color:var(--aurum-red);font-variant-numeric:tabular-nums;overflow:hidden}
.stat-digit-gap{flex:0 0 auto;width:clamp(4px,.5vw,7px)}
.stat-fixed{font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;font-size:clamp(14px,1.7vw,21px);font-weight:500;color:var(--aurum-red);letter-spacing:-.01em}
.stat-divider{position:relative;height:1px;margin:0 0 7px;background:rgba(25,22,19,.12)}
.stat-divider::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--aurum-gold)}
.stat-label{margin:0;font-size:11.5px;line-height:1.3;color:#5b554e}

.stat-card--teal .stat-icon{background:linear-gradient(180deg,#fff,#e1efee)}
.stat-card--teal .stat-icon svg{stroke:var(--aurum-teal)}
.stat-card--teal .stat-digit,.stat-card--teal .stat-fixed{color:var(--aurum-teal)}
.stat-card--teal .stat-divider{background:rgba(7,113,135,.32)}
.stat-card--teal .stat-divider::before{background:var(--aurum-teal)}
.stat-card--ink .stat-icon{background:linear-gradient(180deg,#fff,#e8e6e3)}
.stat-card--ink .stat-icon svg{stroke:var(--aurum-ink)}
.stat-card--ink .stat-digit,.stat-card--ink .stat-fixed{color:var(--aurum-ink)}
.stat-card--ink .stat-divider{background:rgba(25,22,19,.28)}
.stat-card--ink .stat-divider::before{background:var(--aurum-ink)}
.stat-card--blue .stat-icon{background:linear-gradient(180deg,#fff,var(--aurum-light-blue))}
.stat-card--blue .stat-icon svg{stroke:var(--aurum-teal)}
.stat-card--blue .stat-digit,.stat-card--blue .stat-fixed{color:var(--aurum-teal)}
.stat-card--blue .stat-divider{background:rgba(7,113,135,.32)}
.stat-card--blue .stat-divider::before{background:var(--aurum-teal)}
.stat-card--orange .stat-icon{background:linear-gradient(180deg,#fff,#fbe3d3)}
.stat-card--orange .stat-icon svg{stroke:var(--aurum-orange)}
.stat-card--orange .stat-digit,.stat-card--orange .stat-fixed{color:var(--aurum-orange)}
.stat-card--orange .stat-divider{background:rgba(220,96,46,.32)}
.stat-card--orange .stat-divider::before{background:var(--aurum-orange)}
.stat-card--gold .stat-icon{background:linear-gradient(180deg,#fff,#faf1d9)}
.stat-card--gold .stat-icon svg{stroke:var(--aurum-gold)}
.stat-card--gold .stat-digit,.stat-card--gold .stat-fixed{color:var(--aurum-gold)}
.stat-card--gold .stat-divider{background:rgba(224,172,38,.32)}
.stat-card--gold .stat-divider::before{background:var(--aurum-gold)}

/* Tablet: red feature panel stacks above the full-width stat strip. */
@media(max-width:1100px){
  .impact-layout{grid-template-columns:1fr}
  .impact-hero-copy{max-width:none}
}
/* Phone: strip goes 2x2 so each number keeps room to breathe; dividers
   switch to marking the new row/column boundaries instead of a single line. */
@media(max-width:640px){
  .impact-layout{padding:10px}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip .stat-card:nth-child(2n+1){border-left:0}
  .stat-strip .stat-card:nth-child(n+3){border-top:1px solid rgba(25,22,19,.08)}
}
@media(prefers-reduced-motion:reduce){
  .stat-card,.impact-hero{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   What We Do — editorial sweep composition
   Copy sits left; the laboratory photograph is absolutely positioned and
   bleeds off the right edge of the strap, cut by an ellipse clip-path so
   the white/photography boundary reads as a controlled architectural
   curve rather than a framed image card. This strap and .impact-stats are
   deliberately tight together so they read as ONE module.
   --focus-bleed mirrors the .home-strap horizontal padding so the visual
   can be pulled back out to the true page edge.
   ========================================================================== */
.what-we-do{
  --focus-bleed:clamp(22px,7vw,116px);
  position:relative;
  overflow:hidden;
  background:#fff;
  /* Top padding trimmed — .why-aurum now carries the extra space instead
     (see its padding-bottom override) so the map ends cleanly just before
     this section's own "WHAT WE DO" label rather than leaving a second,
     unwatermarked gap underneath it. */
  padding-top:clamp(20px,2.4vw,36px);
  padding-bottom:clamp(10px,1.2vw,18px);
}
/* World-map watermark moved off this section (2026-08-11, take 4) — it now
   sits on .why-aurum instead, so it reads as background for the strap
   that leads INTO "What We Do" rather than sitting behind it. See the
   .why-aurum::before rule above the Why Aurum block for the current
   implementation. */
.what-we-do .home-strap-head{max-width:none;margin:0}
.what-we-do .home-strap-head h2{font-size:clamp(46px,5vw,82px);line-height:.94;letter-spacing:-.045em}
.what-we-do .home-strap-head h2 .dot{color:var(--aurum-red)}
.what-we-do .lead{margin:18px 0 0;max-width:min(100%,470px);font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(23,21,20,.62)}

.focus-layout{position:relative;min-height:clamp(320px,24vw,400px)}
.focus-copy{position:relative;z-index:2;max-width:min(100%,64%)}

/* Dotted continent motif at the join between copy and photography. Two
   masked ellipses (rounded mass + tapering southern point) read as a
   continent silhouette without shipping a stock Africa graphic. */
.focus-layout::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:46%;top:1%;width:min(300px,23vw);height:min(340px,27vw);
  background-image:radial-gradient(rgba(224,172,38,.55) 1.5px,transparent 1.5px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 46% 40% at 50% 26%,#000 60%,transparent 72%),radial-gradient(ellipse 27% 34% at 43% 74%,#000 58%,transparent 74%);
  mask-image:radial-gradient(ellipse 46% 40% at 50% 26%,#000 60%,transparent 72%),radial-gradient(ellipse 27% 34% at 43% 74%,#000 58%,transparent 74%);
}
/* Decorative data-flow arc drawn as the top edge of a wide ellipse. */
.focus-layout::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:37%;top:15%;width:46%;height:54%;
  border:1px solid transparent;border-top-color:rgba(224,172,38,.45);
  border-radius:50%;transform:rotate(-8deg);
}

.focus-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,1.8vw,24px)}
.focus-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:999px;border:1px solid rgba(25,22,19,.1);background:#fff;font-size:13.5px;font-weight:500;color:var(--aurum-ink);box-shadow:0 6px 16px rgba(25,22,19,.05);transition:box-shadow .25s var(--ease-editorial),transform .25s var(--ease-editorial),border-color .25s var(--ease-editorial)}
.focus-pill-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;color:#fff}
.focus-pill-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.focus-pill-arrow{margin-left:2px;color:var(--aurum-red);font-size:15px;transition:transform .25s var(--ease-editorial)}
.focus-pill:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(25,22,19,.11);border-color:rgba(25,22,19,.06)}
.focus-pill:hover .focus-pill-arrow{transform:translateX(3px)}
/* Category colour carries meaning: red = clinical/HIV, gold =
   implementation/maternal, teal = TB/quality, light blue = diagnostics,
   orange = market access, green = climate. */
.focus-pill--red .focus-pill-icon{background:var(--aurum-red)}
.focus-pill--gold .focus-pill-icon{background:var(--aurum-gold)}
.focus-pill--teal .focus-pill-icon{background:var(--aurum-teal)}
.focus-pill--orange .focus-pill-icon{background:var(--aurum-orange)}
.focus-pill--green .focus-pill-icon{background:var(--aurum-green)}
.focus-pill--blue .focus-pill-icon{background:var(--aurum-teal);color:var(--aurum-light-blue)}

.focus-visual{
  position:absolute;z-index:1;pointer-events:none;
  top:calc(-1 * clamp(20px,2.6vw,36px));
  bottom:calc(-1 * clamp(12px,1.4vw,20px));
  right:calc(-1 * var(--focus-bleed));
  width:clamp(300px,42%,560px);
}
/* Second, fainter arc crossing from the copy side onto the photograph. */
.focus-visual::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:-20%;top:29%;width:72%;height:46%;
  border:1px solid transparent;border-top-color:rgba(224,172,38,.3);
  border-radius:50%;transform:rotate(6deg);
}
.focus-photo{
  position:absolute;inset:0;margin:0;overflow:hidden;
  border-radius:0;box-shadow:none;
  clip-path:ellipse(100% 95% at 100% 35%);
}
/* object-position re-tuned 2026-08-11 for the new child-water.jpg — keeps
   the face/tap/water focal point in frame under cover-crop instead of the
   old lab-technician photo's framing. */
.focus-photo img{width:100%;height:100%;object-fit:cover;object-position:66% 22%}
/* Base ::after kept as a hook for the mobile top-fade below; no wash on
   desktop — the ellipse clip-path alone gives the curved edge. */
.focus-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:none;
}

.focus-quote{
  position:absolute;z-index:3;pointer-events:auto;margin:0;
  right:var(--focus-bleed);
  bottom:clamp(14px,7%,54px);
  width:clamp(272px,74%,336px);
  padding:24px 26px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(25,22,19,.07);
  border-radius:16px;
  box-shadow:0 26px 60px rgba(25,22,19,.16);
}
.focus-quote-mark{display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:50%;background:var(--aurum-gold);color:#fff;font-size:20px;font-style:italic;line-height:1}
.focus-quote p{margin:0 0 16px;font-size:16px;line-height:1.5;font-weight:500;color:var(--aurum-ink)}
.focus-quote p strong{color:var(--aurum-red)}
.focus-quote a{display:inline-flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(25,22,19,.1);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--aurum-ink)}
.focus-quote a span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(25,22,19,.18);font-size:13px;transition:transform .25s var(--ease-editorial),background .25s var(--ease-editorial),color .25s var(--ease-editorial)}
.focus-quote a:hover span{transform:translateX(3px);background:var(--aurum-red);border-color:transparent;color:#fff}

/* Tablet: photograph stays prominent, copy and pills gain width. */
@media(max-width:1024px){
  .focus-copy{max-width:min(100%,66%)}
  .focus-visual{width:clamp(300px,44%,560px)}
  .focus-quote{width:clamp(236px,86%,300px);padding:20px 22px;bottom:clamp(10px,5%,36px)}
  .focus-quote p{font-size:15px}
}
/* Stacked: copy → pills → photograph → quote. The photo keeps an arch at
   its top edge so it still reads editorially rather than as a thumbnail. */
@media(max-width:900px){
  .focus-layout{min-height:0}
  .focus-copy{max-width:100%}
  .focus-visual{
    position:relative;pointer-events:auto;
    top:auto;bottom:auto;right:auto;width:auto;
    margin:clamp(28px,5vw,40px) calc(-1 * var(--focus-bleed)) 0;
  }
  .focus-visual::after{display:none}
  .focus-photo{position:relative;inset:auto;height:clamp(260px,46vw,380px);clip-path:ellipse(125% 106% at 50% 100%)}
  .focus-photo::after{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 24%)}
  .focus-quote{
    position:relative;right:auto;bottom:auto;width:auto;
    margin:-52px clamp(16px,5vw,36px) 0;
  }
  .focus-layout::before{left:auto;right:3%;top:auto;bottom:6%;width:min(200px,34vw);height:min(230px,38vw);opacity:.75}
  .focus-layout::after{display:none}
}
@media(max-width:700px){
  .focus-pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
  .focus-pill{font-size:13px;padding:7px 12px 7px 7px;line-height:1.25}
}

/* ---- Where We Work ---- */
.where-we-work{position:relative;overflow:hidden;background:#fff}
/* Faint dotted world-map texture behind the heading — decorative only,
   built with CSS so it doesn't depend on the heavy interactive map SVG
   used on the Where We Work page itself. */
.where-we-work::before{
  content:"";position:absolute;z-index:0;top:2%;right:0%;width:min(480px,42vw);height:56%;
  background-image:radial-gradient(rgba(224,172,38,.4) 1.6px,transparent 1.6px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(ellipse 60% 75% at 70% 32%,#000 42%,transparent 78%);
  mask-image:radial-gradient(ellipse 60% 75% at 70% 32%,#000 42%,transparent 78%);
  pointer-events:none;
}
.where-we-work .home-strap-head,.where-we-work .footprint-grid{position:relative;z-index:1}
.home-strap-head .lead{margin:16px 0 0;max-width:520px;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(23,21,20,.6)}

/* Four locations, wide landscape cards, 2x2 on desktop/tablet, 1-up on
   mobile. South Africa is head office: DOM-first and given the badge
   treatment so it reads as the primary location, not just first-in-list.
   2026-08-09: first pass capped the grid at 900px and shortened the
   cards — that read as too small/cramped against the full section width,
   so the cap is gone again; cards now fill the available width like the
   rest of the page's content blocks, just shorter top-to-bottom than the
   original 3-card version. */
.footprint-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.footprint-box{position:relative;display:flex;align-items:flex-end;aspect-ratio:2.1;min-height:170px;border-radius:0;overflow:hidden;box-shadow:0 16px 38px rgba(25,22,19,.14);transition:transform .5s var(--ease-editorial),box-shadow .5s var(--ease-editorial)}
.footprint-box:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(25,22,19,.2)}
/* 2026-08-16: these are flag-composite photos with the flag sitting in the
   top portion of the frame — the box's 2.1 aspect ratio is much wider than
   the source photos (1.33-1.78), so object-fit:cover has to crop roughly
   15-37% of the image height to fill it. object-position:center split that
   crop evenly top/bottom, cutting deep into the flag itself. Anchoring to
   top keeps the whole flag intact and crops the excess from the bottom
   (people/room detail) instead. */
.footprint-box-img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease-editorial)}
.footprint-box:hover .footprint-box-img{transform:scale(1.03)}
.footprint-box::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.7) 0%,rgba(10,8,6,.32) 24%,rgba(10,8,6,0) 48%);pointer-events:none}
.footprint-box-label{position:relative;z-index:2;padding:20px 22px;width:100%;color:#fff}
.footprint-box-label b{display:block;font-size:22px;letter-spacing:-.01em;margin-bottom:7px}
.footprint-box-tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--aurum-gold)}
.footprint-box-place{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.82)}
.footprint-box-arrow{position:absolute;z-index:2;right:20px;bottom:20px;width:38px;height:38px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;color:#fff;font-size:15px;transition:background .3s var(--ease-editorial),color .3s var(--ease-editorial),transform .3s var(--ease-editorial)}
.footprint-box:hover .footprint-box-arrow{background:#fff;color:var(--aurum-ink);transform:scale(1.06)}
.footprint-box--sa .footprint-box-arrow{color:var(--aurum-gold)}
.footprint-box--sa .footprint-box-tag{background:var(--aurum-gold);color:var(--aurum-ink);padding:3px 9px;border-radius:20px;font-weight:700}
.footprint-box--ghana .footprint-box-tag,.footprint-box--ghana .footprint-box-arrow{color:var(--aurum-gold)}
.footprint-box--usa .footprint-box-tag,.footprint-box--usa .footprint-box-arrow{color:var(--aurum-light-blue)}
.footprint-box--mozambique .footprint-box-tag,.footprint-box--mozambique .footprint-box-arrow{color:var(--aurum-gold)}
@media(max-width:900px){.footprint-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.footprint-grid{grid-template-columns:1fr;max-width:none}.footprint-box{aspect-ratio:1.9;min-height:0}.where-we-work::before{display:none}}

/* 2026-08-16: client liked the stat numbers' Cabinet Grotesk medium (500)
   treatment and wants to preview it on homepage headings before deciding
   whether to roll it out sitewide — deliberately scoped to this file
   (home-rebuild.css, enqueued only when is_front_page()) rather than
   modern-refresh.css's sitewide h1-h6 rule, so nothing changes anywhere
   else yet. This file already loads after every other stylesheet (see the
   note at the top), so no !important needed to win here. */
h1,h2,h3,h4,h5,h6{
  font-weight:500;
}

/* 2026-08-17: mobile-only fix for the Setswe/Ratevosian hero photos. On
   narrow screens the hero box is tall/narrow, so object-fit:cover crops
   the SIDES off (not top/bottom) — styles.css's shared `.hero--story
   .hero-image img{object-position:58% center}` mobile rule assumes the
   subject sits around 58% across, but both men in these two wide
   composites sit further right (~70-78%), so the 58% crop was cutting
   them off almost entirely. Targeted by filename since these are the only
   two hero photos with this framing; safe to widen to a shared class if
   more photos need the same treatment later. */
@media(max-width:850px){
  .hero-image img[src*="12_14_21-AM-1"],
  .hero-image img[src*="12_14_21-AM-2"]{
    object-position:72% center!important;
  }
}