/* ===== SOURCE: design-tokens.css ===== */
:root{
  /* Aurum Institute Brand Guide: primary palette */
  --aurum-red:#CD2026;--aurum-gold:#E0AC26;
  /* Brand Guide: bright secondary palette */
  --aurum-orange:#DC602E;--aurum-light-blue:#B6E2E9;--aurum-teal:#077187;--aurum-green:#74A57F;
  /* Brand Guide: neutrals */
  --aurum-slate:#6F8695;--aurum-cream:#F7F5EB;--aurum-mid-grey:#B7B6C2;--aurum-smoke:#D1D5DE;--aurum-ink:#191613;
  --aurum-line:rgba(25,22,19,.18);--aurum-line-light:rgba(247,245,235,.24);
  /* Aurum's licensed brand faces (Neue Haas Grotesk primary, Averta Italic
     secondary — see the Corporate Identity Manual, p.22-23) aren't
     available as web fonts, so free stand-ins carry the same roles until
     the client's agency can supply real @font-face files: Archivo for
     Neue Haas Grotesk (both loaded via Google Fonts, see functions.php),
     Plus Jakarta Sans Italic for Averta's italic-only accent role. The
     licensed names stay first in each stack so real @font-face files would
     take over automatically the moment they're added, with no CSS changes
     needed here. This is the one place these two variables are defined —
     every page loads this file first, so fixing it here fixes every page;
     it previously fell through straight to bare Arial on every page except
     the homepage (which had a homepage-only override), which was the
     biggest single cause of the site reading stale. */
  --font-primary:"Neue Haas Grotesk","Archivo",Arial,sans-serif;
  --font-secondary:"Averta","Plus Jakarta Sans",Arial,sans-serif;
  --font-size-label:clamp(9px,.7vw,11px);--font-size-body:clamp(16px,1.2vw,19px);--leading-body:1.62;
  --radius-card:7px;--radius-control:3px;--shadow-editorial:0 28px 70px rgba(25,22,19,.14);--ease-editorial:cubic-bezier(.16,1,.3,1)
}
html{font-family:var(--font-primary);background:#fff}body{color:var(--aurum-ink)}a,button{font-family:inherit}a,a:visited{color:inherit;text-decoration:none}button{cursor:pointer}:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.data-table{width:100%;border-collapse:collapse;border-top:2px solid var(--aurum-gold);font-size:15px;background:#fff}.data-table th,.data-table td{padding:16px 18px;border-bottom:1px solid var(--aurum-line);text-align:left;vertical-align:top}.data-table th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--aurum-red);font-weight:700}.data-table td:last-child,.data-table th:last-child{text-align:right}.data-table tr:hover td{background:#fff7df}.status{display:inline-block;padding:5px 8px;border-radius:var(--radius-control);font-size:10px;text-transform:uppercase;letter-spacing:.1em;background:var(--aurum-light-blue);color:var(--aurum-teal)}
@media(max-width:600px){.data-table{font-size:13px;display:block;overflow-x:auto;white-space:normal}.data-table th,.data-table td{padding:13px 12px;min-width:145px}.data-table th:first-child,.data-table td:first-child{min-width:170px}}
/* 2026-08-17: site-wide replacement for the raw →/›/↗ characters — see
   aurum_arrow_icon() in functions.php. Sized in em so it scales with
   whatever text size/color context it's dropped into. */
.aurum-arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none}
.aurum-arrow-icon--diagonal{transform:rotate(-45deg)}
.aurum-arrow-icon--down{transform:rotate(90deg)}
.aurum-arrow-icon--left{transform:scaleX(-1)}
.aurum-arrow-icon--up{transform:rotate(-90deg)}
.aurum-chevron-icon-wrap{display:inline-flex}
.aurum-chevron-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;transition:transform .2s ease}
.health-work-toggle[aria-expanded="true"] .aurum-chevron-icon{transform:rotate(180deg)}

/* ===== SOURCE: subpage.css ===== */
@import url("design-tokens.css");@import url("subpage-phase2.css");
:root{--red:#CD2026;--gold:#E0AC26;--cream:#F7F5EB;--ink:#191613;--teal:#077187;--line:rgba(25,22,19,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-primary)}.site-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:18px clamp(22px,6vw,90px);background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}.brand{width:128px}.brand img{width:100%}.site-header nav{display:flex;gap:clamp(14px,2.5vw,34px);margin-left:auto}.site-header nav a,.header-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.site-header nav a:hover,.header-link:hover{color:var(--red)}.header-link{border-left:1px solid var(--line);padding-left:24px;color:var(--red)}.mobile-nav{display:none}.page-hero{padding:clamp(90px,13vw,190px) clamp(22px,9vw,150px) 80px;background:var(--red);color:#fff}.eyebrow,.kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}h1{font-size:clamp(64px,10vw,150px);line-height:.84;letter-spacing:-.075em;margin:28px 0 0;max-width:1000px}h1 em,h2 em{font-style:italic;color:var(--gold)}.page-section{padding:clamp(75px,10vw,145px) clamp(22px,9vw,150px);border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:54px}h2{font-size:clamp(42px,6vw,86px);line-height:.9;letter-spacing:-.065em;margin:0}.lead{font-size:18px;line-height:1.6;color:#665f57;max-width:560px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{min-height:230px;padding:24px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:7px;background:#fff;transition:transform .4s ease,background .4s ease}.card:hover{transform:translateY(-8px);background:#fff2d1}.card b{color:var(--red);font-size:11px}.card h3{font-size:32px;letter-spacing:-.05em;margin:70px 0 12px}.card p{font-size:14px;line-height:1.45;color:#665f57}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{padding:34px;border-radius:7px;background:var(--teal);color:#fff;min-height:260px}.panel.gold{background:var(--gold);color:var(--ink)}.panel h3{font-size:42px;letter-spacing:-.06em;margin:45px 0 0}.panel p{line-height:1.55}.site-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:30px clamp(22px,6vw,90px);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.site-footer img{width:110px}.site-footer a{color:var(--red)}@media(max-width:850px){.site-header{padding:16px 22px}.site-header nav,.header-link{display:none}.mobile-nav{display:none;flex-direction:column;gap:20px;padding:28px 22px;background:var(--red);color:#fff}.mobile-nav a{font-size:25px}.section-head,.split{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.site-footer{flex-wrap:wrap}}
.skip-link{position:fixed;z-index:40;left:18px;top:12px;transform:translateY(-170%);background:var(--aurum-red);color:#fff;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;transition:transform .25s var(--ease-editorial)}.skip-link:focus{transform:none}.shell-menu{display:none;margin-left:auto;border:1px solid var(--aurum-red);background:transparent;color:var(--aurum-red);padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.mobile-nav[aria-label="Mobile navigation"] a[aria-current="page"]{color:var(--aurum-gold)}
/* header.php's .menu-toggle button (shared with the homepage) needs its own
   desktop-hide rule here — styles.css supplies this on the homepage, but
   subpage.css never did, which is what let it render unstyled and overlap
   the desktop nav/Contact link on every subpage. modern-refresh.css already
   supplies the max-width:850px override that shows it again on mobile. */
.menu-toggle{display:none}
@media(max-width:850px){.shell-menu{display:block}.mobile-nav.is-open{display:flex;position:fixed;z-index:4;inset:74px 0 auto 0;max-height:calc(100svh - 74px);overflow:auto;transform:none}.mobile-nav.is-open a{font-size:25px}}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}
.site-header nav{gap:7px;align-items:center}.site-header nav a{position:relative;display:inline-flex;align-items:center;color:var(--aurum-ink);padding:10px 12px;border:1px solid transparent;border-radius:var(--radius-control);text-decoration:none;transition:color .25s var(--ease-editorial),background .25s var(--ease-editorial),border-color .25s var(--ease-editorial),transform .25s var(--ease-editorial)}.site-header nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--aurum-gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-editorial)}.site-header nav a:hover{color:var(--aurum-red);background:rgba(224,172,38,.12);border-color:rgba(224,172,38,.55);transform:translateY(-1px)}.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}.site-header nav a[aria-current="page"]{color:var(--aurum-red);background:rgba(205,32,38,.055);border-color:rgba(205,32,38,.34)}.site-header nav a[aria-current="page"]::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--aurum-gold)}.site-header .header-link{color:var(--aurum-red);text-decoration:none}.site-header .header-link:hover{color:var(--aurum-ink)}
@media(max-width:850px){.site-header nav a{padding:0;border:0;border-radius:0;background:none}.site-header nav a::after,.site-header nav a::before{display:none}}
@media(prefers-reduced-motion:reduce){.site-header nav a{transition:none}}

/* ===== SOURCE: footprint-phase6.css ===== */
/* Where We Work - a brand-led location explorer based on the supplied visual brief. */
.footprint-intro{
  padding:clamp(56px,7vw,96px) clamp(22px,6vw,90px) clamp(36px,5vw,66px);
  background:#fff;
  border-bottom:1px solid var(--aurum-line);
}
.footprint-intro .eyebrow{color:var(--aurum-red)}
.footprint-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  align-items:end;
  gap:clamp(30px,7vw,110px);
}
.footprint-intro h1{
  margin:20px 0 0;
  max-width:none;
  color:var(--aurum-ink);
  font-size:clamp(64px,8.5vw,126px);
  line-height:.82;
  letter-spacing:-.08em;
}
.footprint-intro h1 em{color:var(--aurum-red);font-family:var(--font-secondary)}
.footprint-intro-grid>p{
  max-width:450px;
  margin:0 0 8px;
  color:#625d56;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
}

/* 2026-08-17: "the map is far too small" — the country-list column was
   claiming up to 340px on a wide screen, well more than it actually needs
   for a compact list; trimmed its max so the map column (already
   minmax(0,1fr), i.e. everything left over) gets real width back. */
.footprint-explorer{
  display:grid;
  grid-template-columns:minmax(250px,280px) minmax(0,1fr);
  gap:clamp(18px,2vw,30px);
  padding:clamp(18px,2.2vw,32px);
  background:#fff;
}
.place-list{
  align-self:stretch;
  overflow:hidden;
  border:1px solid rgba(25,22,19,.11);
  border-radius:7px;
  background:#fff;
  box-shadow:0 22px 54px rgba(25,22,19,.09);
}
.place-list-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:24px 22px 20px;
  color:var(--aurum-red);
  border-bottom:1px solid var(--aurum-line);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.place-list-head small{color:var(--aurum-slate);font:inherit;white-space:nowrap}
.place-button{
  display:grid;
  grid-template-columns:30px 10px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:69px;
  padding:13px 20px;
  border:0;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--aurum-line);
  background:transparent;
  color:var(--aurum-ink);
  text-align:left;
  transition:background .3s var(--ease-editorial),color .3s var(--ease-editorial),padding .3s var(--ease-editorial),border-color .3s var(--ease-editorial);
}
/* Subtle, persistent brand-colour accent per category — a thin edge,
   not a wash of colour, matching the map legend's office/entity/project
   coding. */
.place-button--office{border-left-color:rgba(205,32,38,.32)}
.place-button--entity{border-left-color:rgba(224,172,38,.4)}
.place-button--project{border-left-color:rgba(7,113,135,.32)}
.place-button:last-child{border-bottom:0}
.place-button:hover,.place-button[aria-selected="true"]{
  padding-left:22px;
  background:var(--aurum-red);
  border-left-color:var(--aurum-gold);
  color:#fff;
}
.place-number{color:var(--aurum-red);font-size:9px;letter-spacing:.1em}
.place-button:hover .place-number,.place-button[aria-selected="true"] .place-number{color:#fff}
.place-button:focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px #191613}
.place-dot{width:7px;height:7px;border-radius:50%;background:var(--aurum-slate)}
.place-dot--office{background:var(--aurum-red)}
.place-dot--entity{background:var(--aurum-gold)}
.place-dot--project{background:var(--aurum-teal)}
.place-button:hover .place-dot,.place-button[aria-selected="true"] .place-dot{background:#fff;opacity:.9}
/* 2026-08-17: swapped off Cabinet Grotesk (the site's bold/expressive
   display face, used for big headlines) for the country list specifically —
   client wants it "more sophisticated" than a heavy display treatment. This
   is the brand's own Neue Haas Grotesk/Archivo body face instead, at a
   lighter weight with open tracking — reads as a refined editorial list
   rather than a headline, and is actually closer to brand-guide typography
   than Cabinet Grotesk was (see aurum_font_fix memory: Cabinet Grotesk was
   flagged as a deliberate, already-approved departure from the guide). */
/* 2026-08-17e: "the writing is far too big... smaller and thinner" —
   dropped from 17px/600 to 14px/500. */
.place-name{font-family:var(--font-primary),Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.005em}
.place-type{color:#536874;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.place-button:hover .place-type,.place-button[aria-selected="true"] .place-type{color:#fff}
.mobile-location-guide{display:none}

.footprint-stage{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(24px,3.5vw,52px);
  padding-top:clamp(14px,2vw,26px);
  border-radius:7px;
  /* 2026-08-17: was a cream/beige gradient (#faf8f3→#f5eee8) — client wants
     no cream anywhere on this page, plain modern white instead. Kept the
     faint gold radial for a touch of texture rather than a completely flat
     fill, since it reads as an accent tint, not cream. */
  background:
    radial-gradient(circle at 56% 43%,rgba(224,172,38,.08),transparent 30%),
    #fff;
  box-shadow:0 22px 54px rgba(25,22,19,.1);
}
.stage-heading{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}
.stage-heading .eyebrow{color:var(--aurum-red)}
.stage-heading h2{
  margin:12px 0 0;
  font-size:clamp(38px,4.5vw,66px);
  line-height:.88;
  letter-spacing:-.07em;
}
.stage-heading h2 em{color:var(--aurum-red)}
/* 2026-08-09: was undersized and pinned to flex-start, so it sat above the
   heading text instead of reading alongside it — bumped in size and the
   parent now centre-aligns it against the full eyebrow+heading block. */
.map-legend{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  gap:15px;
  padding:22px 26px;
  border:1px solid rgba(25,22,19,.09);
  border-radius:8px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 22px rgba(25,22,19,.06);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.map-legend span{display:flex;align-items:center;gap:12px}
/* display:inline-block is required here — <i> is inline by default, so the
   width/height below were silently ignored and the "dot" painted as a thin
   sliver along the text baseline instead of a filled circle. */
.legend-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--aurum-red)}
.legend-dot.entity{background:var(--aurum-gold)}

.orbit-map{
  position:relative;
  width:min(720px,94%);
  aspect-ratio:1.36;
  margin:10px auto 0;
  isolation:isolate;
}
.orbit{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:50%;
  aspect-ratio:1;
  border:1px solid rgba(205,32,38,.12);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.orbit-two{width:69%;border-color:rgba(224,172,38,.17)}
.orbit-three{width:88%;border-color:rgba(205,32,38,.1)}
.orbit-line{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:40%;
  height:1px;
  background:linear-gradient(90deg,rgba(205,32,38,.34),rgba(224,172,38,.12));
  transform-origin:left center;
}
.line-n{transform:rotate(-90deg)}.line-ne{transform:rotate(-45deg)}.line-e{transform:rotate(0)}
.line-se{transform:rotate(45deg)}.line-s{transform:rotate(90deg)}.line-sw{transform:rotate(135deg)}
.line-w{transform:rotate(180deg)}.line-nw{transform:rotate(225deg)}
.orbit-centre{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  width:142px;
  aspect-ratio:1;
  padding:18px;
  border:7px solid #fff;
  border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#ed5e62,var(--aurum-red) 62%,#7f1015);
  color:#fff;
  box-shadow:0 0 0 1px rgba(205,32,38,.24),0 18px 40px rgba(128,16,21,.24);
  transform:translate(-50%,-50%);
}
.orbit-centre::before,.node-disc::before{
  content:"";
  position:absolute;
  inset:-10px;
  border:1px solid rgba(205,32,38,.13);
  border-radius:50%;
}
.orbit-centre img{
  width:72px;
  height:62px;
  object-fit:contain;
  padding:6px;
  border-radius:2px;
  background:#fff;
}
.orbit-centre span,.orbit-centre strong{
  position:absolute;
  left:50%;
  width:180px;
  text-align:center;
  transform:translateX(-50%);
}
.orbit-centre span{top:-29px;color:var(--aurum-red);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.orbit-centre strong{bottom:-34px;color:var(--aurum-ink);font-size:19px;letter-spacing:-.04em}
.orbit-node{
  position:absolute;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:8px;
  width:112px;
  padding:0;
  border:0;
  background:none;
  color:var(--aurum-ink);
  text-align:center;
}
.node-disc{
  position:relative;
  display:grid;
  place-items:center;
  width:58px;
  aspect-ratio:1;
  border:4px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#ec5b60,var(--aurum-red) 64%,#98151a);
  color:#fff;
  box-shadow:0 9px 22px rgba(128,16,21,.18);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  transition:transform .28s var(--ease-editorial),box-shadow .28s var(--ease-editorial);
}
.orbit-node.entity .node-disc{background:linear-gradient(145deg,#efc75f,var(--aurum-gold) 62%,#c78008)}
.orbit-node b{font-size:12px;line-height:1.15;letter-spacing:-.02em}
.orbit-node:hover .node-disc,.orbit-node.is-active .node-disc{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 0 0 4px rgba(205,32,38,.12),0 15px 30px rgba(128,16,21,.2);
}
.orbit-node.is-active b{color:var(--aurum-red)}
.pos-n{left:50%;top:2%;transform:translateX(-50%)}
.pos-ne{right:11%;top:14%}.pos-e{right:1%;top:45%;transform:translateY(-50%)}
.pos-se{right:10%;bottom:7%}.pos-s{left:50%;bottom:-3%;transform:translateX(-50%)}
.pos-sw{left:10%;bottom:7%}.pos-w{left:1%;top:45%;transform:translateY(-50%)}
.pos-nw{left:10%;top:14%}
.explore-hint{
  margin:-2px 0 24px;
  color:var(--aurum-slate);
  font-size:10px;
  letter-spacing:.07em;
  text-align:right;
  text-transform:uppercase;
}
.explore-hint span{color:var(--aurum-red);font-size:18px}

/* 2026-08-09: was a flat near-black card (#1b1917) — replaced with the
   brand red/gold treatment already used elsewhere on this page (the map's
   office/entity markers, the legend) instead of an off-brand black block. */
.place-detail{
  position:relative;
  z-index:3;
  padding:clamp(24px,3vw,38px);
  border-radius:7px;
  background:linear-gradient(135deg,#e5393f 0%,var(--aurum-red) 55%,#8c1116 100%);
  color:#fff;
  box-shadow:0 20px 46px rgba(205,32,38,.28);
}
.place-detail-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.detail-type{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.place-detail h3{
  margin:0;
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;
  font-size:clamp(36px,4.8vw,67px);
  line-height:.88;
  letter-spacing:-.07em;
}
.detail-index{color:#fff;font-size:11px;letter-spacing:.12em}
/* 2026-08-16: client wants the detail panel to read as a proper "here's
   what Aurum does in this country" block, not a cramped strip that ends
   the moment you glance at it — Related work used to be squeezed into a
   third ~30%-width column, easy to miss entirely for South Africa's long
   5-item list. It now gets its own full-width row with real room, and its
   links are rendered as the same .button-invert pills used everywhere else
   on the site (see workMarkup() in footprint.js) instead of a plain
   underlined list — matching the "Explore IMPAACT4HIV" CTA in the teal
   panel below this one, per the client's own comparison. */
.detail-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:0 32px;
  padding-top:26px;
}
.detail-block{padding:0}
.detail-block:first-child{padding-right:28px;border-right:1px solid rgba(255,255,255,.24)}
.detail-block:nth-child(3){
  grid-column:1/-1;
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.24);
}
.detail-block b{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.detail-block:nth-child(3) b{
  font-size:11px;
  margin-bottom:16px;
}
.detail-block p,.detail-block li{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.6;
}
.detail-block ul{display:grid;gap:4px;margin:0;padding-left:16px}
.detail-block a{color:#fff;text-decoration:underline;text-decoration-color:var(--aurum-gold);text-underline-offset:3px}
.detail-work-links{display:flex;flex-wrap:wrap;gap:10px}
/* 2026-08-17: some project geographies (from the audit's country lists)
   have no dedicated project/health-area page to link to yet — rendered as
   this plain, non-interactive chip instead of a .button-invert link so it
   doesn't look like a dead/broken button. */
.detail-work-label{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  color:#fff;
  font-family:var(--font-primary);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

@media(max-width:1050px){
  .footprint-explorer{grid-template-columns:260px minmax(0,1fr)}
  .orbit-map{width:100%}
  .orbit-node{width:96px}.node-disc{width:52px}.orbit-centre{width:126px}
}
@media(max-width:850px){
  .footprint-intro{padding-top:44px}
  .footprint-intro-grid{grid-template-columns:1fr;gap:22px}
  .footprint-intro h1{font-size:clamp(58px,17vw,92px)}
  .footprint-explorer{display:flex;flex-direction:column;padding:10px;background:#fff}
  .place-list{
    order:2;
    align-self:stretch;
    width:100%;
    max-width:100%;
    overflow:hidden
  }
  .place-list-head{padding:17px 18px}
  .mobile-location-guide{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:10px 10px 0;
    padding:12px 12px 12px 15px;
    border-left:4px solid var(--aurum-gold);
    border-radius:4px;
    color:#fff;
    background:var(--aurum-red);
    font-size:12px;
    line-height:1.35;
  }
  .mobile-location-guide b{
    display:block;
    margin-bottom:2px;
    color:var(--aurum-gold);
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .mobile-location-controls{display:flex;flex:0 0 auto;gap:6px}
  .mobile-location-controls button{
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.5);
    border-radius:3px;
    color:#fff;
    background:transparent;
    font:inherit;
    font-size:21px;
    cursor:pointer;
  }
  .mobile-location-controls button:hover,
  .mobile-location-controls button:focus-visible{
    border-color:var(--aurum-gold);
    color:var(--aurum-ink);
    background:var(--aurum-gold);
  }
  [data-place-list]{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 52px 10px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }
  [data-place-list]::-webkit-scrollbar{display:none}
  .place-button{
    flex:0 0 auto;
    grid-template-columns:20px 8px auto;
    gap:7px;
    min-height:46px;
    padding:11px 14px;
    border:1px solid var(--aurum-line);
    border-left:3px solid transparent;
    border-radius:4px;
    scroll-snap-align:start;
  }
  .place-button--office{border-left-color:rgba(205,32,38,.32)}
  .place-button--entity{border-left-color:rgba(224,172,38,.4)}
  .place-button--project{border-left-color:rgba(7,113,135,.32)}
  .place-button:hover,.place-button[aria-selected="true"]{padding-left:11px;border-left-color:var(--aurum-gold)}
  .place-type{display:none}
  .place-name{font-size:14px;white-space:nowrap}
  .footprint-stage{order:1;padding:26px 14px 14px}
  .stage-heading{padding:0 5px}.stage-heading h2{font-size:clamp(36px,10vw,56px)}
  .map-legend{padding:9px}.map-legend span{font-size:7px}
  .orbit-map{width:112%;margin-left:-6%;aspect-ratio:1/1.12;margin-top:8px}
  .orbit-three{width:82%}.orbit-two{width:63%}.orbit-one{width:44%}
  .orbit-centre{width:104px;border-width:5px}.orbit-centre img{width:58px;height:50px}
  .orbit-centre strong{bottom:-28px;font-size:15px}.orbit-centre span{top:-24px}
  .orbit-node{width:76px;gap:5px}.node-disc{width:46px;border-width:3px}.orbit-node b{font-size:9px}
  .pos-n{top:6%}.pos-ne{right:8%;top:17%}.pos-e{right:0;top:46%}.pos-se{right:7%;bottom:12%}
  .pos-s{bottom:3%}.pos-sw{left:7%;bottom:12%}.pos-w{left:0;top:46%}.pos-nw{left:8%;top:17%}
  .explore-hint{margin:-10px 6px 16px}
  .place-detail{padding:24px 20px}
  .place-detail-head{align-items:start}
  .detail-grid{grid-template-columns:1fr}
  .detail-block,.detail-block:first-child,.detail-block:last-child,.detail-block:nth-child(2),.detail-block:nth-child(3){
    grid-column:auto;
    padding:15px 0;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .detail-block:last-child{border-bottom:0;padding-bottom:0}
}
@media(max-width:480px){
  .footprint-intro{padding-left:20px;padding-right:20px}
  /* 2026-08-16: below ~480px the h1 column got too narrow for its own
     font-size, wrapping onto 6+ lines — with .stage-heading's base
     align-items:center still in effect, the short .map-legend box then
     centred itself against that full wrapped height and landed visually on
     top of the middle lines of text. Stacking instead of sitting side by
     side avoids the overlap entirely; .map-legend already switches to a
     horizontal row layout at this width (see the max-width:850px block),
     so it reads as a tidy strip under the heading rather than a sidebar. */
  .stage-heading{display:grid;grid-template-columns:1fr;gap:14px}
  .stage-heading h2{font-size:40px}.stage-heading .eyebrow{font-size:8px}
  .map-legend{transform:none;align-self:start}
  .orbit-map{width:110%;margin-left:-5%}
  .pos-e{right:2%}.pos-w{left:2%}
}
@media(prefers-reduced-motion:reduce){
  .place-button,.node-disc{transition:none}
}
/* Client audit map requirement: real clickable countries, not an illustrative diagram. */
.footprint-explorer{padding-top:clamp(14px,1.6vw,22px)}
/* 2026-08-11: three earlier passes at this (align-self:stretch + height:100%,
   then align-self:stretch alone, then + min-height:0) all failed because a
   CSS-grid auto row track sizes itself from EVERY item's own max-content
   size, regardless of align-self or min-height — min-height only affects an
   item's floor, not what it contributes to track sizing. With no cap here,
   .place-list's full unclipped list (all 27 buttons, ~1860px) was what set
   the row height, which is why the list looked "right" but the map/detail
   column then got stretched (align-self:stretch) down to match that same
   inflated row, leaving a big blank gap under the real map content.
   max-height DOES cap what an item contributes to auto track sizing (this
   is how the original static max-height:920px build worked correctly,
   before it was pulled out for being the wrong fixed number for every
   country's detail-card height). So the real fix keeps max-height, but sets
   it dynamically from JS (see syncPanelHeight() in footprint.js) to exactly
   match .footprint-stage's own rendered height every time that height can
   change: on load, after the map SVG loads, whenever a country is selected
   (detail-card height varies by country), and on resize. The value below is
   just the pre-JS fallback so nothing balloons before that script runs. */
.place-list{display:flex;flex-direction:column;min-height:0;max-height:640px}
.place-list [data-place-list]{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.stage-heading h1{margin:12px 0 0;max-width:840px;font-size:clamp(38px,4.2vw,64px);line-height:.94;letter-spacing:-.055em}
.stage-heading h1 em{color:var(--aurum-red);font-family:var(--font-secondary)}
.legend-dot.project{background:var(--aurum-teal)}
.world-map-shell{position:relative;margin:clamp(14px,1.8vw,22px) 0 20px;padding:clamp(10px,1.2vw,18px);border:1px solid rgba(25,22,19,.1);border-radius:14px;background:#fff}
.world-map-scroll{position:relative}
/* Country-name callout for the interactive map: positioned in JS against
   the selected <path>'s bounding box (see selectCountry() in footprint.js),
   shown whenever a country is selected from the map or the list. */
/* 2026-08-16: client wants this callout big enough to also carry each
   country's Related work links (see mapTooltipMarkup() in footprint.js),
   not just the bare name — was a fixed-height nowrap pill, now a small
   card that grows with its content. max-width + wrapping keep it from
   spanning the whole globe when a country has several project links. */
.map-tooltip{
  position:absolute;
  z-index:6;
  top:0;
  left:0;
  transform:translate(-50%,calc(-100% - 16px));
  width:max-content;
  max-width:min(180px,52vw);
  padding:10px 13px;
  border-radius:12px;
  background:var(--aurum-red);
  color:#fff;
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;
  text-align:left;
  white-space:normal;
  box-shadow:0 12px 26px rgba(25,22,19,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.map-tooltip.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,calc(-100% - 22px))}
.map-tooltip-name{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.map-tooltip-related{
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.map-tooltip-links{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.map-tooltip-more{
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:9px;
  font-style:italic;
}
/* !important on color: modern-refresh.css has a sitewide
   "a, a:visited{color:inherit!important}" rule (added for .health-link's
   visited-state) that otherwise wins regardless of specificity here and
   forces these to inherit .map-tooltip's white — invisible on the white
   pill background.
   2026-08-16: color is a literal hex, not var(--aurum-red), on purpose —
   traced the "some pills have no visible text" bug all the way down to
   the CSS custom property itself: forcing a literal #CD2026 (confirmed
   live via devtools to be var(--aurum-red)'s own resolved value) fixed
   pills that were reproducibly blank with the var() version, in the same
   browser, same page, same everything else unchanged. Whatever the exact
   mechanism, this is the confirmed, tested fix — don't change it back to
   var(--aurum-red) without re-testing in an actual browser (not just
   checking getComputedStyle, which reported the var() version as correct
   even while it was visibly failing to paint). */
.map-tooltip-links a{
  display:block;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  color:#CD2026!important;
  font-family:var(--font-primary);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s ease,color .2s ease;
}
.map-tooltip-links a:hover,.map-tooltip-links a:focus-visible{background:var(--aurum-gold);color:#191613!important}
/* Plain, non-clickable chip for project geographies with no dedicated page
   (see workMarkup()/mapTooltipMarkup() in footprint.js) — same shape as the
   pill links above, dimmed, no hover state, so it doesn't read as a broken
   link. */
.map-tooltip-links .map-tooltip-label{
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:#fff!important;
  cursor:default;
}
/* 2026-08-17: ambient flag marker for a country as it rotates past
   front-center on its own (see onAutoPopup in rotating-globe.js) — a small
   real flag, no name, distinct from .map-tooltip (which carries the name +
   Related work and only appears once a country is actually clicked). */
.map-auto-popup{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:30px;
  height:20px;
  border-radius:4px;
  overflow:hidden;
  transform:translate(-50%,-50%) scale(.7);
  box-shadow:0 3px 10px rgba(25,22,19,.35),0 0 0 1.5px rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.map-auto-popup.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.map-auto-popup-flag{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:850px){.map-auto-popup{width:24px;height:16px}}

.map-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:0;
  height:0;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--aurum-red);
}
@media(max-width:850px){
  .map-tooltip{max-width:min(150px,50vw);padding:9px 11px}
  .map-tooltip-name{font-size:12px}
  .map-tooltip-links a{font-size:9px;padding:4px 8px}
}
/* 2026-08-16: client feedback — the callout used to float directly ON the
   globe (glued to the selected country's rotated screen position), which
   sat on top of neighbouring countries and blocked clicking them. On
   desktop, where there's room, it now docks as a permanent side panel next
   to the globe instead — .map-tooltip becomes a normal flex item (not an
   absolutely-positioned overlay) with a fixed flex-basis, so the globe's
   own size stays constant whether or not the panel has content.
   Then: client feedback again — most of the ~27 locations have no
   Related work at all, and a permanent panel with nothing useful in it
   was pointless clutter. So the docked treatment below is scoped to
   .map-tooltip--docked, a class positionMapLabel() in footprint.js only
   adds on desktop AND when the selected country actually has work[]
   entries — everything else (including desktop) falls through to the
   plain .map-tooltip rules above: the original small floating name-only
   pin, unchanged. Placed AFTER the base/mobile .map-tooltip rules above
   (same specificity, so source order decides) so this still wins for the
   countries it does apply to. */
@media(min-width:851px){
  /* 2026-08-17: client wants the map itself bigger — this used to reserve a
     permanent ~215px side column for the docked panel, which capped the
     map's own width. The panel now docks as a full-width bar ABOVE the map
     instead (order:-1), so .world-map-scroll can claim the whole shell
     width and the map grows accordingly. */
  .world-map-shell{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
  .world-map-scroll{width:100%}
  .map-tooltip--docked{
    position:static;
    order:-1;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 18px;
    width:100%;
    max-width:none;
    margin:0;
    padding:12px 20px;
    transform:none;
  }
  .map-tooltip--docked.is-visible{transform:none}
  .map-tooltip--docked::after{display:none}
  .map-tooltip--docked .map-tooltip-name{flex:0 0 auto}
  .map-tooltip--docked .map-tooltip-related{
    flex:0 0 auto;
    margin:0;
    padding:0 0 0 16px;
    border-top:none;
    border-left:1px solid rgba(255,255,255,.28);
  }
  .map-tooltip--docked .map-tooltip-links{flex-direction:row;flex-wrap:wrap;margin-top:0}
}
.world-map{min-height:560px;display:grid;place-items:center}
/* 2026-08-16: the globe could already be zoomed (ctrl/cmd+scroll), but
   nothing visible said so — client asked for a discoverable way in. Two
   stacked circular buttons, matching the circular icon-button language
   used elsewhere on the site (nav search toggle, hero slider arrows).
   Anchored to .world-map-scroll (not .world-map-shell) so it stays glued
   to the globe itself regardless of the side panel's presence at desktop
   widths — .world-map-shell's own padding no longer needs compensating
   for since this sits inside a different, unpadded parent now. */
.map-zoom-controls{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.map-zoom-controls button{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(25,22,19,.18);
  background:#fff;
  color:var(--aurum-ink);
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 8px 20px rgba(25,22,19,.12);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.map-zoom-controls button:hover,.map-zoom-controls button:focus-visible{background:var(--aurum-red);border-color:transparent;color:#fff}
@media(max-width:850px){
  .map-zoom-controls{right:16px;bottom:16px}
  .map-zoom-controls button{width:34px;height:34px;font-size:16px}
}
/* touch-action:none hands single-finger drag entirely to rotating-globe.js's
   own touch handlers instead of letting the browser also try to scroll the
   page with it — without this, dragging the globe on a touchscreen fights
   the page's native scroll gesture. */
.world-map canvas{display:block;width:100%;height:auto;max-height:620px;touch-action:none}
.world-map svg{display:block;width:100%;height:auto;max-height:880px}
.world-map svg path{fill:#d8d4cb;stroke:#fbf8f1;stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .18s ease,filter .18s ease,stroke .18s ease}
.world-map svg path.is-location{cursor:pointer;stroke:#fff;stroke-width:1.1}
.world-map svg path.is-project{fill:var(--aurum-teal)}
.world-map svg path.is-office{fill:var(--aurum-red)}
.world-map svg path.is-entity{fill:var(--aurum-gold)}
.world-map svg path.is-location:hover,
.world-map svg path.is-location:focus-visible,
.world-map svg path.is-location.is-active{fill:#171412;stroke:var(--aurum-gold);stroke-width:2.4;filter:drop-shadow(0 3px 5px rgba(25,22,19,.28));outline:none}
.world-map svg path.is-location:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px #191613)}
/* 2026-08-17: South Africa zoom-in detail view — a flat 2D map (sa-map.js)
   that crossfades over the 3D globe canvas rather than replacing/reflowing
   the layout, so "zooming in" reads as diving into the same space rather
   than navigating to a different section. .sa-map sits absolutely inset
   over .world-map-scroll (which sizes itself off .world-map, still in
   normal flow underneath), and .sa-mode on the shell drives the crossfade
   both ways. */
.sa-map{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;border-radius:8px;overflow:hidden}
.world-map-shell.sa-mode .world-map{opacity:0;pointer-events:none;transition:opacity .5s ease}
.world-map-shell.sa-mode .sa-map{opacity:1;pointer-events:auto}
.sa-map canvas{display:block;width:100%;height:auto}
.sa-enter-hint[hidden],.sa-exit-button[hidden]{display:none}
.sa-enter-hint,.sa-exit-button{
  position:absolute;
  left:14px;
  top:14px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px 10px 14px;
  border-radius:999px;
  border:none;
  background:rgba(23,20,18,.86);
  color:#fff;
  font-family:var(--font-primary);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 8px 20px rgba(25,22,19,.2);
  transition:background .2s ease,opacity .2s ease,transform .2s ease;
}
.sa-enter-hint .aurum-arrow-icon{transform:rotate(45deg)}
.sa-exit-button .aurum-arrow-icon{transform:scaleX(-1)}
.sa-enter-hint:hover,.sa-exit-button:hover,.sa-enter-hint:focus-visible,.sa-exit-button:focus-visible{background:var(--aurum-red)}
/* Gentle pulse instead of a static label — the only cue that South Africa
   specifically (not the globe generally) has more detail to zoom into. */
.sa-enter-hint{animation:sa-hint-pulse 2.6s ease-in-out infinite}
@keyframes sa-hint-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.sa-enter-hint{animation:none}}
.sa-programme-tags{display:flex;flex-wrap:wrap;gap:8px}
.sa-programme-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid color-mix(in srgb, var(--tag-color) 55%, transparent);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
}
.sa-programme-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tag-color);flex:none}
@media(max-width:850px){
  .sa-enter-hint,.sa-exit-button{left:10px;top:10px;font-size:10px;padding:8px 13px 8px 11px}
}
.map-error{max-width:460px;text-align:center;color:#625d56}
.map-preview-note{max-width:480px;text-align:center;padding:22px 24px;border-radius:10px;background:#fff;border:1px solid rgba(224,172,38,.32)}
.map-preview-note p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#625d56}
.map-preview-note p:last-child{margin-bottom:0}
.map-preview-note strong{color:var(--aurum-ink);font-size:15px}
.detail-block li a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}
.detail-block li a:hover,.detail-block li a:focus{color:var(--aurum-gold);border-bottom-color:var(--aurum-gold)}
.global-reach{padding-top:clamp(42px,5vw,70px)!important}
@media(max-width:850px){
  .footprint-explorer{padding-top:14px}
  .footprint-stage{padding:28px 18px;overflow:visible}
  .stage-heading{display:grid}
  .stage-heading h1{font-size:clamp(34px,10.5vw,48px)}
  .map-legend{flex-direction:row;flex-wrap:wrap}
  /* 2026-08-09: the OLD flat SVG map needed horizontal scroll on narrow
     screens (it was wider than the viewport). The canvas globe replacing it
     (2026-08-15) is circular and sizes itself to whatever width its
     container reports — see setupCanvas() in rotating-globe.js — so forcing
     a 700px min-width here no longer keeps anything legible, it just
     starves the globe of the width it could otherwise measure and use,
     leaving it undersized inside a horizontally-scrolling strip. Globe just
     needs to fit the viewport width like everything else on mobile. */
  .world-map-shell{margin-top:26px;padding:8px}
  .world-map-scroll{overflow:visible}
  .world-map{min-height:0}
  .world-map svg{max-height:none}
  .explore-hint{margin-top:12px}
  .place-list{max-height:none}
  .place-list [data-place-list]{overflow-x:auto;overflow-y:hidden}
}

/* Mobile map enlargement: preserve the real interactive SVG at a readable
   width and let visitors pan horizontally without changing desktop layout. */
@media(max-width:850px){
  .world-map-shell{overflow:hidden}
  .world-map-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
  .world-map{
    width:700px;
    min-width:700px;
    /* v58: world.svg has viewBox 0 0 1010 666. Reserve its final
       700px-wide geometry before the async SVG request completes so the
       map cannot push the mobile detail panel down after first paint. */
    min-height:462px;
    aspect-ratio:1010 / 666;
  }
  .world-map svg{
    width:700px;
    min-width:700px;
    max-width:none;
  }
  .place-detail{scroll-margin-top:96px}
}

/* ===== SOURCE: modern-refresh.css ===== */
/*
   Aurum visual refresh
   A contemporary, confident layer for every route. Content and approved
   brand colours stay intact; the presentation moves away from paper rules,
   hairline grids and archival editorial styling.
*/
:root{
  --modern-bg:#fff;
  --modern-panel:#fff;
  --modern-ink:#171514;
  --modern-muted:#6d6961;
  --modern-radius:18px;
  --modern-shadow:0 22px 60px rgba(25,22,19,.13);
  --modern-shadow-soft:0 12px 32px rgba(25,22,19,.09);
}

html{background:var(--modern-bg)}
body{background:var(--modern-bg);color:var(--modern-ink)}

/* A cleaner, product-like navigation surface. */
/* backdrop-filter removed 2026-08-11: position:fixed + backdrop-filter is
   the classic scroll-jank combo — every scroll frame the browser has to
   re-blur whatever content just moved behind the header. Bumped opacity
   from .92 to .97 to keep it reading as solid/premium without the blur
   doing the work. */
.site-header{height:82px;padding:0 clamp(18px,5vw,72px);background:rgba(255,255,255,.97);border-bottom:1px solid rgba(25,22,19,.09);box-shadow:0 8px 30px rgba(25,22,19,.06)}
.site-header .brand{width:94px;height:72px;display:flex;align-items:center;overflow:visible}
.site-header .brand img{width:94px;height:72px;object-fit:contain}
.site-header nav{gap:5px}
.site-header nav a{border-radius:999px!important;padding:10px 14px!important;font-size:10px!important;letter-spacing:.12em;transition:background .28s var(--ease-editorial),color .28s var(--ease-editorial),transform .28s var(--ease-editorial)!important}
.site-header nav a:hover{background:rgba(224,172,38,.16)!important;border-color:transparent!important;transform:translateY(-2px)!important}
.site-header nav a[aria-current="page"]{background:var(--aurum-red)!important;color:#fff!important;border-color:transparent!important}
.site-header nav a[aria-current="page"]::before{background:var(--aurum-gold)!important}
.site-header nav a::after,.site-header nav a[aria-current="page"]::after{display:none!important}
.site-header .header-link{border-left:0;padding:11px 0 11px 22px;color:var(--aurum-red)}
.site-header nav a:visited,.site-header .header-link:visited{color:inherit}

/* Search toggle, added to the nav bar 2026-08-04. */
.nav-search{position:relative;display:flex;align-items:center;justify-content:center}
.nav-search-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(25,22,19,.18);background:transparent;display:grid;place-items:center;color:var(--aurum-ink);padding:0;transition:background .25s var(--ease-editorial),color .25s var(--ease-editorial),border-color .25s var(--ease-editorial)}
.nav-search-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.nav-search-toggle:hover,.nav-search-toggle[aria-expanded="true"]{background:var(--aurum-red);border-color:transparent;color:#fff}
.nav-search-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:30;display:flex;flex-direction:column;min-width:240px;max-width:min(90vw,340px);padding:6px;background:#fff;border:1px solid rgba(25,22,19,.12);border-radius:11px;box-shadow:0 20px 46px rgba(25,22,19,.16)}
.nav-search-panel[hidden]{display:none}
.nav-search-form{display:flex;align-items:center;gap:6px;padding:2px 6px 2px 8px}
.nav-search-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;padding:8px 0}
.nav-search-form button[type="submit"]{border:0;background:rgba(224,172,38,.16);color:var(--aurum-red);width:30px;height:30px;border-radius:50%;font-size:14px;display:grid;place-items:center;flex:none}
.nav-search-results{display:flex;flex-direction:column}
.nav-search-results[hidden]{display:none}
.nav-search-results a{display:block;padding:10px 12px;border-radius:7px;border-top:1px solid rgba(25,22,19,.08);font-size:13px;line-height:1.35;color:var(--aurum-ink);transition:background .2s var(--ease-editorial),color .2s var(--ease-editorial)}
.nav-search-results a:first-child{border-top:1px solid rgba(25,22,19,.08);margin-top:4px}
.nav-search-results a:hover,.nav-search-results a:focus-visible{background:rgba(224,172,38,.16);color:var(--aurum-red)}
.nav-search-empty{margin:4px 0 0;padding:12px;border-top:1px solid rgba(25,22,19,.08);font-size:13px;color:rgba(25,22,19,.55)}
@media(max-width:850px){.nav-search-panel{right:0;left:auto;min-width:min(78vw,300px)}}
@media(max-width:850px){
  .nav-search-toggle{width:38px;height:38px;border-color:var(--aurum-red)}
  .nav-search-form{right:0;left:auto;min-width:min(78vw,300px)}
}

/* Replace the ruled-paper treatment with calm surfaces and breathing space. */
.ruled{background-image:none!important}
.page-section{margin:16px clamp(12px,2.2vw,30px);padding:clamp(72px,9vw,132px) clamp(22px,7vw,116px);border:0;border-radius:var(--modern-radius);background:var(--modern-panel);box-shadow:var(--modern-shadow-soft)}
.section-head{gap:clamp(28px,6vw,100px);margin-bottom:52px}
.section-head h2,.display{font-weight:600;letter-spacing:-.07em}
.lead,.body-copy{color:var(--modern-muted)}
.section-index{border-top:0;padding-top:0;margin-bottom:44px;color:var(--aurum-red)}
.section-index::before{content:"";display:inline-block;width:30px;height:3px;margin:0 12px 3px 0;border-radius:3px;background:var(--aurum-gold)}
.page-hero{position:relative;min-height:500px;margin:0 14px;padding:clamp(130px,16vw,210px) clamp(22px,7vw,116px) clamp(72px,9vw,120px);border-radius:0 0 var(--modern-radius) var(--modern-radius);display:flex;flex-direction:column;justify-content:flex-end;background:var(--modern-ink);color:#fff;box-shadow:var(--modern-shadow);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:auto -10% -40% 38%;height:90%;background:radial-gradient(circle,rgba(224,172,38,.34),transparent 68%);pointer-events:none}
.page-hero::after{content:"";position:absolute;right:7%;bottom:-8%;width:260px;height:260px;border:1px solid rgba(247,245,235,.25);border-radius:50%;box-shadow:0 0 0 28px rgba(247,245,235,.04),0 0 0 58px rgba(247,245,235,.035);pointer-events:none}
.page-hero>*{position:relative;z-index:1}
.page-hero h1{font-size:clamp(54px,7.5vw,116px);line-height:.88;letter-spacing:-.085em;max-width:900px}
.page-hero h1 em{font-style:normal;color:var(--aurum-gold)}
.page-hero .lead{color:rgba(255,255,255,.78);max-width:680px;margin-top:30px}
.about-hero,.contact-hero{background:linear-gradient(125deg,#8f1318 0%,var(--aurum-red) 56%,#e04b37 100%)!important}
.work-hero,.project-hero,.story-hero{background:var(--aurum-ink)!important}
.footprint-hero,.resources-hero{background:linear-gradient(125deg,#064b59 0%,var(--aurum-teal) 62%,#0b8790 100%)!important}
.involve-hero{background:linear-gradient(125deg,#e0a81d 0%,var(--aurum-gold) 62%,#f3ca59 100%)!important;color:var(--modern-ink)}
.involve-hero .lead{color:rgba(25,22,19,.72)}

/* Home: replace long paper bands with floating product-like modules. */
.statement,.values,.work-section,.people,.closing{margin:16px;border-radius:var(--modern-radius);overflow:hidden}
.statement{position:relative;padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);background:var(--aurum-ink)!important;color:#fff}
.statement::after{content:"";position:absolute;right:6%;bottom:-18%;width:320px;height:320px;border:1px solid rgba(224,172,38,.26);border-radius:50%;box-shadow:0 0 0 34px rgba(224,172,38,.05),0 0 0 72px rgba(224,172,38,.035);pointer-events:none}
.statement .section-index{color:var(--aurum-gold)}
.statement .section-index::before{background:var(--aurum-red)}
.statement .section-index{margin-bottom:32px}
.statement .statement-grid{grid-template-columns:minmax(0,1.06fr) minmax(300px,.82fr) minmax(250px,.72fr);gap:clamp(24px,3.2vw,54px);align-items:center}
.statement .display{position:relative;padding-left:24px;font-size:clamp(48px,5.8vw,88px);line-height:.86;color:#fff}
.statement .display::before{content:"";position:absolute;left:0;top:.1em;bottom:.06em;width:5px;border-radius:4px;background:var(--aurum-red)}
.statement .body-copy{color:rgba(255,255,255,.7)}
.statement .body-copy{max-width:390px;font-size:15px;line-height:1.5}
.statement .body-copy p{margin-bottom:16px}
.statement-proof{position:relative;z-index:1;display:grid;gap:0;min-height:300px;margin:0;padding:24px;overflow:hidden;border:1px solid rgba(224,172,38,.48);border-radius:22px;background:linear-gradient(145deg,rgba(224,172,38,.18),rgba(205,32,38,.14) 100%);box-shadow:0 26px 60px rgba(0,0,0,.2)}
.statement-proof::before{content:"A";position:absolute;right:-.05em;bottom:-.28em;color:rgba(255,255,255,.06);font-size:17rem;font-weight:700;line-height:.7;pointer-events:none}
.statement-proof div{position:relative;z-index:1;display:grid;align-content:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.statement-proof div:last-child{border-bottom:0}
.statement-proof dt{margin-bottom:7px;color:var(--aurum-gold);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.statement-proof dd{margin:0;color:#fff;font-size:clamp(17px,1.65vw,25px);line-height:1.04;letter-spacing:-.04em}
.purpose{margin:16px;border-radius:var(--modern-radius);overflow:hidden;box-shadow:var(--modern-shadow)}
.purpose-panel{padding:clamp(72px,9vw,132px) clamp(22px,7vw,116px)}
.purpose-art{background:linear-gradient(140deg,var(--aurum-gold),#f1d16d 55%,var(--aurum-orange))}
.purpose-art{position:relative;isolation:isolate}
.purpose-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.78) contrast(.94);z-index:0}
.purpose-art::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(224,172,38,.86),rgba(240,198,83,.58) 54%,rgba(222,103,57,.74));mix-blend-mode:color;pointer-events:none}
.purpose-art::before{z-index:2}
.purpose-art span,.purpose-art i{z-index:3}
.values{background:var(--modern-ink);color:#fff}
.values .section-index{color:var(--aurum-gold)}
.values .display{color:#fff}
.values .body-copy{color:rgba(255,255,255,.7)}
.values-grid{grid-template-columns:repeat(5,1fr);gap:14px;border:0}
.values-grid article{min-height:300px;padding:24px;border:0;border-radius:var(--modern-radius);background:var(--aurum-ink);color:#fff;box-shadow:none;display:flex;flex-direction:column;transition:transform .42s var(--ease-editorial),background .42s var(--ease-editorial),box-shadow .42s var(--ease-editorial)}
.values-grid article:nth-child(2){background:var(--aurum-red)}
.values-grid article:nth-child(3){background:var(--aurum-teal)}
.values-grid article:nth-child(4){background:var(--aurum-orange)}
.values-grid article:nth-child(5){background:var(--aurum-gold);color:var(--modern-ink)}
.values-grid article:hover{transform:translateY(-10px) rotate(-1deg);background:var(--aurum-slate);box-shadow:var(--modern-shadow)}
.values-grid article:nth-child(2):hover{background:#e0393d}.values-grid article:nth-child(3):hover{background:#08889a}.values-grid article:nth-child(4):hover{background:#e77443}.values-grid article:nth-child(5):hover{background:#f0c451}
.values-grid b{color:var(--aurum-gold)}.values-grid article:nth-child(5) b{color:var(--aurum-red)}
.values-grid h3{font-size:clamp(28px,2.8vw,44px);margin:auto 0 14px;letter-spacing:-.07em}
.values-grid p{color:inherit;opacity:.75}
.work-section{background:var(--modern-panel)}
.work-section .section-index,.people .section-index{color:var(--aurum-red)}
.work-rail{gap:14px}
.work-card{min-height:360px;border:0!important;border-radius:var(--modern-radius)!important;box-shadow:var(--modern-shadow-soft)}
.work-card:nth-child(1){background:var(--aurum-red)}.work-card:nth-child(2){background:var(--aurum-teal)}.work-card:nth-child(3){background:var(--aurum-gold);color:var(--modern-ink)}
.work-card>p,.work-card:nth-child(3)>p{color:rgba(255,255,255,.8)}.work-card:nth-child(3)>p{color:rgba(25,22,19,.72)}
.work-card{min-width:0}
.work-card h3{max-width:100%;min-width:0;font-size:clamp(32px,3.35vw,52px);overflow-wrap:anywhere;text-wrap:balance}
.people{background:linear-gradient(125deg,#075766,var(--aurum-teal));color:#fff}
.people .section-index{color:var(--aurum-gold)}
.people-note{border-left:1px solid rgba(255,255,255,.42)}
.people{position:relative;isolation:isolate;background:linear-gradient(125deg,#075766,var(--aurum-teal));color:#fff}
.people::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(7,87,102,.98) 0%,rgba(7,87,102,.86) 48%,rgba(7,87,102,.48) 100%);pointer-events:none}
.people-layout,.people>.section-index{position:relative;z-index:2}
.people-media{position:absolute!important;z-index:1!important;right:7%;top:16%;width:min(430px,34%);height:68%;margin:0;overflow:hidden;border-radius:var(--modern-radius);box-shadow:0 24px 60px rgba(8,33,38,.28);background:var(--modern-ink)}
.people-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1s var(--ease-editorial),filter 1s var(--ease-editorial)}
.people-media::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(7,87,102,.5),rgba(7,87,102,.12) 55%,rgba(224,172,38,.28));mix-blend-mode:color;pointer-events:none}
.people-media figcaption{position:absolute;z-index:1;left:18px;bottom:16px;color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.people-media:hover img{transform:scale(1.04);filter:saturate(1)}
.work-card-media{position:relative;height:112px;margin:0 0 18px;overflow:hidden;border-radius:12px;background:var(--modern-ink)}
.work-card-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72);transition:transform 1s var(--ease-editorial),filter 1s var(--ease-editorial)}
.work-card-media::after{content:"";position:absolute;inset:0;pointer-events:none}
.work-card:nth-child(1) .work-card-media::after{background:linear-gradient(120deg,rgba(205,32,38,.78),rgba(205,32,38,.12))}
.work-card:nth-child(2) .work-card-media::after{background:linear-gradient(120deg,rgba(7,113,135,.82),rgba(7,113,135,.12))}
.work-card:nth-child(3) .work-card-media::after{background:linear-gradient(120deg,rgba(224,172,38,.82),rgba(224,172,38,.12))}
.work-card:hover .work-card-media img{transform:scale(1.045);filter:saturate(.98)}
.profile-search{align-self:end;min-width:min(100%,320px);padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.profile-search label{display:block;margin-bottom:9px;color:var(--aurum-gold);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.profile-search-control{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.58)}
.profile-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:15px;padding:4px 0 10px}
.profile-search input::placeholder{color:rgba(255,255,255,.68)}
.profile-search-control span{color:var(--aurum-gold);font-size:25px;line-height:1}
.profile-search-status{margin:10px 0 0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.35}
.leadership .profile[hidden],.leadership-group.is-filtered-empty{display:none}
.closing{background:linear-gradient(125deg,var(--aurum-gold),#efc654 55%,var(--aurum-orange));box-shadow:var(--modern-shadow)}

/* Inner-page modules: colour blocks, depth and clear hierarchy. */
.proof-card,.purpose-card,.card,.focus-card,.feature-card,.process-card,.office-card,.invite-card,.profile,.evidence-card,.module-card,.story-card{border:0!important;border-radius:var(--modern-radius)!important;box-shadow:var(--modern-shadow-soft)}
.proof-card h3,.card h3,.focus-card h3,.feature-card h3,.process-card h3,.office-card h3{letter-spacing:-.07em}
.proof-card,.card,.focus-card,.process-card,.office-card,.evidence-card{background:#fff}
.purpose-grid,.proof-grid,.card-grid,.focus-list,.feature-grid,.office-grid,.invite-grid,.process-grid,.evidence-grid,.module-grid,.story-grid{gap:16px}
.history{background:var(--modern-ink)!important;color:#fff}.history .section-head .lead,.history .timeline-copy p{color:rgba(255,255,255,.68)}
.history .section-index{color:var(--aurum-gold)}.history .timeline::before{background:rgba(224,172,38,.5)}.history .timeline-dot{border-color:var(--modern-ink)}.history .timeline-year{color:var(--aurum-gold)}
.timeline-item{padding:26px 24px;border-radius:14px;background:var(--aurum-ink);margin-bottom:12px;grid-template-columns:150px 1fr;gap:28px}.timeline-copy h3{color:#fff}
.leadership{margin:16px;border-radius:var(--modern-radius);box-shadow:var(--modern-shadow);background:linear-gradient(125deg,#075766,var(--aurum-teal))!important}.profile{box-shadow:0 12px 28px rgba(0,0,0,.14)}
.discipline,.project-section,.area-section,.phase8-media-section{margin:16px clamp(12px,2.2vw,30px);border-radius:var(--modern-radius);border:0!important;box-shadow:var(--modern-shadow-soft);overflow:hidden}
.discipline.red{background:linear-gradient(125deg,#9d171d,var(--aurum-red))}.discipline.teal{background:linear-gradient(125deg,#075766,var(--aurum-teal))}.discipline.gold{background:linear-gradient(125deg,#d99f18,var(--aurum-gold))}
.infra-grid{gap:12px;border:0}.infra-card{border:0;border-radius:14px;background:rgba(255,255,255,.13);padding:22px;min-height:238px}.infra-card:hover{background:rgba(255,255,255,.25);transform:translateY(-6px)}
.health-index{background:var(--modern-panel)!important}.health-list{grid-template-columns:repeat(2,1fr);gap:12px;border:0}.health-link,.health-link:nth-child(odd),.health-link:nth-child(even){padding:24px;border:0;border-radius:14px;background:#fff;box-shadow:var(--modern-shadow-soft)}.health-link:hover{background:var(--aurum-red);padding:24px 28px;color:#fff}.health-link:hover .health-number,.health-link:hover span:last-child{color:var(--aurum-gold)}
.project-section.dark{background:var(--aurum-ink)}.project-section.red{background:linear-gradient(125deg,#9d171d,var(--aurum-red))}.project-section.gold{background:linear-gradient(125deg,#d99f18,var(--aurum-gold))}.project-section.blue{background:linear-gradient(125deg,#94d9e3,var(--aurum-light-blue))}.project-section.teal{background:linear-gradient(125deg,#075766,var(--aurum-teal))}
.project-table,.rfp-table,.data-table{border:0;border-radius:14px;overflow:hidden;box-shadow:var(--modern-shadow-soft)}.project-table th,.project-table td,.rfp-table th,.rfp-table td,.data-table th,.data-table td{border-color:rgba(25,22,19,.09)}
.resource-link,.resource-link:visited{display:inline-flex;gap:14px;align-items:center;color:var(--aurum-red)!important;font-size:10px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--aurum-red);padding-bottom:10px}
.resource-link span{font-size:14px}
.rfp-table .rfp-title-story-link{display:flex;width:max-content;margin-top:6px}
.map-panel{box-shadow:var(--modern-shadow)}.map-art{background-image:none;background:radial-gradient(circle at 54% 44%,rgba(224,172,38,.35),transparent 38%),linear-gradient(145deg,#fff,#d9eef0)}.map-art::before{border:0;border-radius:50%;background:rgba(7,113,135,.12);width:58%;height:58%;color:var(--aurum-teal);font-weight:700}
.resource-feature,.resource-aside,.contact-main,.contact-route{border-radius:var(--modern-radius);box-shadow:var(--modern-shadow)}
.empty-state,.rfp-empty{border:0;border-radius:14px;background:#fff;box-shadow:var(--modern-shadow-soft)}
.story-hero{margin:0 14px;border-radius:0 0 var(--modern-radius) var(--modern-radius)}
.story-content{background:var(--modern-bg)}.story-body{background:var(--modern-panel);padding:clamp(26px,4vw,56px);border-radius:var(--modern-radius);box-shadow:var(--modern-shadow-soft)}
.story-aside{border-top:0;background:var(--aurum-ink);color:#fff;padding:18px;border-radius:14px}.story-aside dt{color:var(--aurum-gold)}.story-aside dd{color:#fff}
.story-next{margin:16px;border-radius:var(--modern-radius);box-shadow:var(--modern-shadow);background:linear-gradient(125deg,var(--aurum-gold),#f0c653,var(--aurum-orange))}
.site-footer,footer{margin:16px;padding:30px clamp(22px,5vw,72px);border:0;border-radius:var(--modern-radius);background:var(--modern-ink);color:#fff;box-shadow:var(--modern-shadow)}
.site-footer img,footer img{width:94px;height:72px;object-fit:contain}.site-footer a,footer a{color:var(--aurum-gold)}.footer-nav a{color:rgba(255,255,255,.78)}

/* Desktop navigation: the wordmark is the centre anchor, with the primary
   links balanced around it. The mobile menu remains the existing drawer. */
@media(min-width:851px){
  .site-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0}
  .site-header .brand{grid-column:2;grid-row:1;position:relative;left:auto;justify-self:center;width:88px;height:70px;z-index:3}
  .site-header .brand img{width:88px;height:70px}
  .site-header nav{grid-column:1/4;grid-row:1;display:grid;grid-template-columns:max-content max-content max-content clamp(220px,16vw,240px) max-content max-content max-content;justify-content:center;align-items:center;width:100%;margin:0!important;padding:0;column-gap:clamp(10px,1.1vw,16px);row-gap:0;z-index:1}
  .site-header nav a{justify-self:stretch;text-align:center;white-space:nowrap;font-size:9px!important;letter-spacing:.07em!important;padding:8px 5px!important}
  .site-header nav a:nth-child(1){grid-column:1}.site-header nav a:nth-child(2){grid-column:2}.site-header nav a:nth-child(3){grid-column:3}.site-header nav a:nth-child(4){grid-column:5}.site-header nav a:nth-child(5){grid-column:6}.site-header nav a:nth-child(6){grid-column:7}
  .site-header .header-link{grid-column:3;grid-row:1;justify-self:end;z-index:4;margin:0;transform:translateX(8px);padding:11px 0 11px 14px;background:rgba(255,255,255,.94);font-size:10px!important;letter-spacing:.09em!important}
}

@media(max-width:850px){
  .site-header .brand{width:78px;height:58px}.site-header .brand img{width:78px;height:58px}
  .site-header{height:72px}
  .mobile-nav{padding:102px 24px 28px;background:var(--aurum-ink);color:var(--modern-panel);gap:0;counter-reset:mobile-nav;}
  .mobile-nav::before{content:"PRIMARY NAVIGATION";display:block;margin:0 0 16px;color:var(--aurum-gold);font-size:10px;line-height:1;letter-spacing:.16em}
  .mobile-nav a,.mobile-nav a:visited{display:flex;align-items:baseline;gap:15px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:clamp(28px,7.8vw,42px);line-height:1;letter-spacing:-.055em;counter-increment:mobile-nav;color:var(--modern-panel)!important;text-decoration:none;transition:color .25s var(--ease-editorial),padding-left .25s var(--ease-editorial)}
  .mobile-nav a::before{content:counter(mobile-nav,decimal-leading-zero);flex:0 0 27px;color:var(--aurum-gold);font-size:10px;line-height:1;letter-spacing:.12em}
  .mobile-nav a:hover,.mobile-nav a:focus-visible,.mobile-nav a[aria-current="page"]{color:var(--aurum-gold)!important;padding-left:8px}
  .mobile-nav a:last-child{border-bottom:0}
  .menu-toggle{display:grid;place-items:center;align-content:center;gap:4px;width:52px;height:44px;border:1px solid var(--aurum-red);background:rgba(255,255,255,.35)}
  .menu-toggle span{width:22px;height:2px;margin:0;background:var(--aurum-red)}
  .people-media{position:relative!important;right:auto;top:auto;width:100%;height:210px;margin:28px 0 0}
  .work-card-media{height:102px}
  .profile-search{align-self:stretch;margin-top:20px}
  .page-hero{margin:0 8px;border-radius:0 0 14px 14px;min-height:440px;padding-top:110px}
  .page-hero h1{font-size:clamp(48px,12vw,82px)}
  .statement .statement-grid{grid-template-columns:1fr;gap:30px}
  .statement-proof{min-height:auto;padding:12px 20px;border-radius:14px}
  .statement-proof div{padding:16px 0}
  .page-section,.discipline,.project-section,.area-section,.phase8-media-section{margin:10px 8px;border-radius:14px}
  .values-grid{grid-template-columns:1fr 1fr}.health-list{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr;gap:7px;padding-left:22px}.timeline::before{left:6px}.timeline-dot{left:-1px}
  .site-footer,footer{margin:10px;border-radius:14px}
}

@media(max-width:520px){
  .values-grid{grid-template-columns:1fr}.values-grid article{min-height:240px}
  .page-hero h1{font-size:clamp(44px,14vw,70px)}
}

/* What We Do: image-led pacing and contextual media breaks. */
.page-hero.has-work-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:clamp(30px,7vw,100px);align-items:center;min-height:620px;padding-top:clamp(120px,13vw,170px);padding-bottom:clamp(70px,8vw,110px)}
.has-work-media .work-hero-copy{max-width:720px}
.has-work-media .work-hero-media{position:relative;inset:auto;width:100%;height:clamp(380px,42vw,560px);margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:var(--modern-radius);background:var(--modern-ink);box-shadow:0 28px 90px rgba(0,0,0,.28);z-index:1}
.has-work-media .work-hero-media img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:62% center;filter:saturate(.9);transition:transform 1.2s var(--ease-editorial),filter 1.2s var(--ease-editorial)}
.has-work-media .work-hero-media:hover img{transform:scale(1.035);filter:saturate(1.02)}
.work-hero-media figcaption{position:absolute;left:18px;right:18px;bottom:18px;color:#fff;font-size:10px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.work-hero-media figcaption span{display:block;color:var(--aurum-gold);margin-bottom:5px}
.work-image-band{display:grid;grid-template-columns:minmax(0,.84fr) minmax(320px,1.16fr);gap:clamp(28px,7vw,110px);align-items:center;margin:16px clamp(12px,2.2vw,30px);padding:clamp(44px,7vw,100px) clamp(22px,9vw,150px);border-radius:var(--modern-radius);box-shadow:var(--modern-shadow);overflow:hidden}
.work-image-band.work-image-human{grid-template-columns:minmax(320px,1.16fr) minmax(0,.84fr)}
.work-image-band.work-image-human .work-image-band-copy{order:2}
.work-image-band-copy{max-width:500px}
.work-image-band-copy h2{margin:0 0 24px;font-size:clamp(50px,6.5vw,94px);line-height:.86;letter-spacing:-.08em}
.work-image-band-copy h2 em{font-style:italic;color:var(--aurum-gold)}
.work-image-band-copy>p:last-child{max-width:420px;margin:0;font-size:17px;line-height:1.6;opacity:.78}
.work-image-kicker{margin:0 0 22px;font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:var(--aurum-gold)}
.work-image-band figure,.work-community-context figure{position:relative;min-height:clamp(320px,38vw,520px);margin:0;overflow:hidden;border-radius:var(--modern-radius);background:var(--modern-ink);box-shadow:var(--modern-shadow-soft)}
.work-image-band figure img,.work-community-context figure img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:transform .95s var(--ease-editorial),filter .95s var(--ease-editorial);filter:saturate(.94)}
.work-image-band figure:hover img,.work-community-context figure:hover img{transform:scale(1.035);filter:saturate(1.04)}
.work-image-band figcaption,.work-community-context figcaption{position:absolute;left:17px;right:17px;bottom:16px;color:#fff;font-size:10px;line-height:1.35;letter-spacing:.09em;text-transform:uppercase;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.work-image-band figcaption span,.work-community-context figcaption span{display:block;color:var(--aurum-gold);margin-bottom:5px}
.work-image-operations{background:var(--aurum-ink);color:#fff}
.work-image-operations .work-image-band-copy>p:last-child{color:rgba(255,255,255,.78)}
.work-image-human{background:var(--aurum-light-blue);color:var(--aurum-ink)}
.work-image-human .work-image-kicker{color:var(--aurum-teal)}
.work-image-access{background:linear-gradient(125deg,#d79c17,var(--aurum-gold));color:var(--aurum-ink)}
.work-image-access .work-image-kicker{color:var(--aurum-red)}
.work-image-access .work-image-band-copy h2 em{color:var(--aurum-red)}
.work-community-context{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(28px,7vw,110px);align-items:center;margin:16px clamp(12px,2.2vw,30px);padding:clamp(44px,7vw,100px) clamp(22px,9vw,150px);border-radius:var(--modern-radius);background:var(--modern-ink);color:#fff;box-shadow:var(--modern-shadow);overflow:hidden}
.work-community-context figure{min-height:clamp(360px,38vw,540px)}
.work-community-context h2{margin:0 0 24px;font-size:clamp(50px,6.5vw,94px);line-height:.86;letter-spacing:-.08em}
.work-community-context h2 em{font-style:italic;color:var(--aurum-gold)}
.work-community-context p:not(.work-image-kicker){max-width:420px;margin:0 0 22px;color:rgba(255,255,255,.78);font-size:17px;line-height:1.6}
.work-community-context small{display:block;max-width:360px;color:rgba(255,255,255,.48);font-size:11px;line-height:1.5}
.discipline .button{display:inline-flex;align-items:center;gap:14px;margin-top:6px;padding:15px 18px;background:var(--aurum-ink);color:#fff;border-radius:var(--radius-control);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;transition:transform .3s var(--ease-editorial),background .3s var(--ease-editorial),color .3s var(--ease-editorial)}
.discipline .button:hover{transform:translateY(-3px);background:var(--aurum-gold);color:var(--aurum-ink)}
.discipline .button span{color:var(--aurum-gold);transition:color .3s var(--ease-editorial)}
.discipline .button:hover span{color:var(--aurum-red)}
.discipline.gold .button{background:var(--aurum-red);color:#fff}
@media(max-width:850px){
  .page-hero.has-work-media{grid-template-columns:1fr;min-height:720px;padding-top:110px;gap:34px}
  .has-work-media .work-hero-media{height:min(82vw,460px)}
  .work-image-band,.work-image-band.work-image-human,.work-community-context{grid-template-columns:1fr;gap:28px;padding:48px 24px}
  .work-image-band.work-image-human .work-image-band-copy{order:0}
  .work-image-band figure,.work-community-context figure{min-height:320px}
  .work-image-band-copy h2,.work-community-context h2{font-size:clamp(48px,13vw,76px)}
}

/* Desktop art direction: every supplied image gets its own composition.
   The mobile stacking above remains intentionally unchanged. */
@media(min-width:851px){
  .page-hero.has-work-media{grid-template-columns:minmax(0,.9fr) minmax(430px,.86fr);min-height:clamp(600px,63vw,740px);padding-top:clamp(88px,9vw,120px);padding-bottom:clamp(70px,8vw,104px);padding-right:clamp(58px,9vw,150px)}
  .has-work-media .work-hero-copy{align-self:start;padding-top:clamp(14px,1.8vw,24px)}
  .has-work-media .work-hero-media{height:clamp(500px,48vw,680px);transform:translateY(18px);box-shadow:0 34px 100px rgba(0,0,0,.32)}

  .work-image-band{position:relative;overflow:visible;min-height:clamp(580px,48vw,700px);padding:clamp(72px,8vw,122px) clamp(34px,9vw,150px)}
  .work-image-band::before{position:absolute;top:30px;left:clamp(34px,4vw,72px);font-size:10px;letter-spacing:.16em;color:var(--aurum-gold);opacity:.86}
  .work-image-band::after{content:"";position:absolute;top:36px;right:clamp(34px,4vw,72px);width:clamp(70px,10vw,150px);height:1px;background:currentColor;opacity:.22}
  .work-image-band-copy{max-width:500px;position:relative;z-index:2}
  .work-image-band figure{min-height:0;height:clamp(430px,39vw,590px);box-shadow:0 30px 70px rgba(25,22,19,.22)}
  .work-image-operations{grid-template-columns:minmax(270px,.7fr) minmax(500px,1.3fr);min-height:clamp(610px,48vw,720px);background:var(--aurum-ink)}
  .work-image-operations::before{content:"01 / SCIENTIFIC INFRASTRUCTURE"}
  .work-image-operations .work-image-band-copy{align-self:start;padding-top:clamp(20px,3vw,50px)}
  .work-image-operations figure{height:clamp(450px,39vw,600px);transform:translate(24px,26px) rotate(1.1deg);border-radius:6px 26px 6px 26px}
  .work-image-operations figure::before{content:"";position:absolute;inset:14px;z-index:1;border:1px solid rgba(224,172,38,.72);border-radius:3px 20px 3px 20px;pointer-events:none}
  .work-image-operations figure::after{content:"LAB / 01";position:absolute;top:22px;right:23px;z-index:2;padding:7px 9px;background:var(--aurum-gold);color:var(--aurum-ink);font-size:9px;letter-spacing:.14em}
  .work-image-operations figure img{object-position:56% center}

  .work-image-human{grid-template-columns:minmax(520px,1.3fr) minmax(300px,.7fr);min-height:clamp(620px,49vw,730px);padding-left:clamp(28px,4vw,72px);background:linear-gradient(128deg,#a7dbe4 0%,var(--aurum-light-blue) 70%,#cceef1 100%)}
  .work-image-human::before{content:"02 / IMPLEMENTATION RESEARCH";left:auto;right:clamp(34px,4vw,72px);color:var(--aurum-teal)}
  .work-image-human::after{right:auto;left:clamp(34px,4vw,72px);background:var(--aurum-teal)}
  .work-image-human figure{height:clamp(470px,42vw,630px);transform:translate(-18px,-18px) rotate(-1.2deg);border-radius:34px 6px 34px 6px}
  .work-image-human figure::before{content:"FIELD NOTE";position:absolute;top:22px;left:22px;z-index:2;padding:8px 10px;background:rgba(255,255,255,.92);color:var(--aurum-teal);font-size:9px;letter-spacing:.14em}
  .work-image-human figure img{object-position:52% center}
  .work-image-human .work-image-band-copy{padding:34px 2vw 0 0;transform:translate(-26px,28px)}
  .work-image-human .work-image-band-copy h2{max-width:430px}

  .work-image-access{grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);min-height:clamp(580px,45vw,680px);background:linear-gradient(125deg,#c99419 0%,var(--aurum-gold) 62%,#efc84e 100%)}
  .work-image-access::before{content:"03 / HEALTH SYSTEMS";color:var(--aurum-red)}
  .work-image-access .work-image-band-copy{align-self:end;padding-bottom:clamp(10px,3vw,42px)}
  .work-image-access figure{height:clamp(420px,37vw,570px);transform:translate(24px,-18px) rotate(1.35deg);border-radius:4px 36px 4px 36px}
  .work-image-access figure::before{content:"ACCESS / 03";position:absolute;left:22px;top:22px;z-index:2;padding:8px 10px;background:var(--aurum-red);color:#fff;font-size:9px;letter-spacing:.14em}
  .work-image-access figure img{object-position:58% center}
  .work-image-access .work-image-band-copy{transform:translateY(10px)}

  .work-community-context{position:relative;grid-template-columns:1fr;min-height:clamp(640px,52vw,780px);padding:clamp(52px,7vw,100px);overflow:hidden}
  .work-community-context figure{position:absolute;inset:0;min-height:0;border-radius:0;box-shadow:none}
  .work-community-context figure img{object-position:center 48%;filter:saturate(.84) brightness(.78)}
  .work-community-context::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(25,22,19,.72) 0%,rgba(25,22,19,.28) 44%,rgba(25,22,19,.1) 72%,rgba(25,22,19,.48) 100%);pointer-events:none}
  .work-community-context::after{content:"04 / COMMUNITY CONTEXT";position:absolute;top:34px;left:clamp(34px,5vw,86px);z-index:2;color:var(--aurum-gold);font-size:10px;letter-spacing:.16em}
  .work-community-context>div{position:relative;z-index:2;align-self:end;justify-self:start;width:min(43vw,500px);max-width:500px;margin-left:clamp(28px,5vw,86px);padding:clamp(30px,4vw,48px);border-top:4px solid var(--aurum-gold);border-radius:14px;background:rgba(255,255,255,.96);color:var(--aurum-ink);box-shadow:0 24px 70px rgba(0,0,0,.24)}
  .work-community-context .work-image-kicker{color:var(--aurum-red)}
  .work-community-context h2 em{color:var(--aurum-red)}
  .work-community-context p:not(.work-image-kicker){color:rgba(25,22,19,.72)}
  .work-community-context small{color:rgba(25,22,19,.56)}
}
@media(min-width:1100px){
  .has-work-media .work-hero-copy h1{white-space:nowrap}
}

/* Health-area focus modules: compact, content-led desktop treatment. */
@media(min-width:851px){
  .area-hero + .area-section{padding:clamp(54px,6vw,88px) clamp(28px,7vw,116px)}
  .area-hero + .area-section .section-head{gap:clamp(28px,6vw,88px);margin-bottom:28px}
  .area-hero + .area-section .section-head h2{font-size:clamp(48px,5.4vw,78px)}
  .area-hero + .area-section .focus-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:24px}
  .area-hero + .area-section .focus-card{min-height:148px;padding:22px 24px}
  .area-hero + .area-section .focus-card h3{font-size:clamp(24px,2.7vw,40px);margin:28px 0 0}
  .area-hero + .area-section .focus-card p{font-size:14px;line-height:1.45;margin:14px 0 0}
  .area-hero + .area-section:has(.focus-list > :only-child) .section-head{grid-template-columns:1fr;margin-bottom:22px}
  .area-hero + .area-section:has(.focus-list > :only-child) .section-head .lead{display:none}
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-list{grid-template-columns:1fr;margin-top:18px}
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-card{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:24px;min-height:158px;padding:28px 34px;border-left:4px solid var(--aurum-teal);background:#fff;color:var(--aurum-ink);box-shadow:var(--modern-shadow-soft)}
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-card b{color:var(--aurum-teal)}
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-card h3{margin:0;max-width:780px;font-size:clamp(30px,3.8vw,56px);line-height:.92}
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-card p{grid-column:2;color:var(--modern-muted);margin:0}
}

/* Global link states and directory interactions: browser visited colours are
   never allowed to override the Aurum palette. */
.health-link:visited,.health-link:visited h3,.health-link:visited span{color:var(--aurum-ink)!important}

/* The overview holds the immediate answer. A detail route remains optional. */
.health-index .section-head{margin-bottom:28px}.health-index .section-head .lead{max-width:480px;font-size:16px;line-height:1.45}
.health-list{position:relative!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border-top:1px solid rgba(25,22,19,.24)!important}
.health-link,.health-link:nth-child(odd),.health-link:nth-child(even){min-height:112px!important;padding:20px 18px!important;border:0!important;border-bottom:1px solid rgba(25,22,19,.18)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--aurum-ink)!important;cursor:pointer}
.health-link:nth-child(3n+2){border-left:1px solid rgba(25,22,19,.18)!important;border-right:1px solid rgba(25,22,19,.18)!important}
.health-link h3{font-size:clamp(24px,2.45vw,38px)!important;line-height:.92!important;letter-spacing:-.07em!important;text-decoration:none!important;color:inherit!important}
.health-link:hover,.health-link[aria-expanded="true"]{background:rgba(224,172,38,.18)!important;color:var(--aurum-ink)!important;transform:none!important}.health-link[aria-expanded="true"]{border-bottom-color:var(--aurum-gold)!important}.health-link[aria-expanded="true"] span:last-child{transform:rotate(45deg);color:var(--aurum-red)!important}
.health-preview{grid-column:1/-1;display:grid;grid-template-columns:minmax(170px,.42fr) minmax(280px,1fr) auto;gap:22px;align-items:start;padding:25px 0 28px;border-bottom:1px solid rgba(25,22,19,.18);background:transparent;animation:health-preview-in .35s var(--ease-editorial)}
.health-preview-label{margin:0;color:var(--aurum-red);font-size:10px;letter-spacing:.14em;line-height:1.3;text-transform:uppercase}.health-preview-focus{max-width:620px;margin:0;font-size:clamp(22px,2.5vw,36px);line-height:1.03;letter-spacing:-.055em}.health-work-toggle,.health-full-link{display:inline-flex;align-items:center;gap:10px;justify-content:center;padding:11px 14px;border:1px solid var(--aurum-red);background:transparent;color:var(--aurum-red);font:inherit;font-size:10px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none}.health-work-toggle:hover,.health-full-link:hover{background:var(--aurum-red);color:#fff}.health-work-list{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}.health-work-list a,.health-work-list span{padding:8px 10px;background:#fff;color:var(--aurum-ink);font-size:13px;line-height:1.2;box-shadow:0 6px 16px rgba(25,22,19,.08)}.health-work-list a:hover{background:var(--aurum-gold)}
@keyframes health-preview-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Focus pages no longer use a large decorative shell for a single sentence. */
.area-hero + .area-section{padding:clamp(38px,5vw,68px) clamp(22px,7vw,116px)!important}.area-hero + .area-section .section-head{grid-template-columns:minmax(150px,.42fr) 1fr!important;gap:28px!important;align-items:baseline!important;margin-bottom:20px!important}.area-hero + .area-section .section-head h2{font-size:clamp(36px,4.3vw,62px)!important}.area-hero + .area-section .section-head .lead{display:none}.area-hero + .area-section .focus-list{display:block!important;margin:0!important}.area-hero + .area-section .focus-card,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card{display:grid!important;grid-template-columns:130px minmax(0,1fr)!important;gap:26px!important;align-items:center!important;min-height:0!important;margin:0!important;padding:36px 40px!important;border-top:0!important;border-left:4px solid var(--aurum-teal)!important;border-radius:var(--modern-radius)!important;background:#fff!important;color:var(--aurum-ink)!important;box-shadow:var(--modern-shadow-soft)!important}.area-hero + .area-section .focus-card b,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card b{color:var(--aurum-teal)!important;padding-top:0}.area-hero + .area-section .focus-card h3,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card h3{max-width:860px;margin:0!important;font-size:clamp(24px,3.1vw,44px)!important;line-height:.98!important}.area-hero + .area-section .focus-card p,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card p{grid-column:2;color:var(--modern-muted)!important;margin:5px 0 0!important;font-size:15px!important;line-height:1.5!important}

/* The footprint begins at the screen edge, as a full location field. */
.footprint-hero{margin:0!important;border-radius:0!important}

/* Do not publish an empty procurement table as though it were live content. */
.page-section:has(.rfp-empty){display:none!important}

/* Get involved: an invitation with real people and a purposeful gold accent,
   not a blank gold wall. */
.involve-hero{isolation:isolate;background-image:linear-gradient(90deg,rgba(25,22,19,.56) 0%,rgba(25,22,19,.36) 42%,rgba(205,32,38,.14) 70%,rgba(205,32,38,.04) 100%),url("../photos/client/what-we-do/community-consultation.jpg")!important;background-position:center,center 18%!important;background-size:cover!important;color:#fff!important}.involve-hero::before{background:linear-gradient(135deg,rgba(224,172,38,.22),transparent 46%)!important}.involve-hero h1 em{color:var(--aurum-gold)!important}.involve-hero .lead{color:rgba(255,255,255,.84)!important}.involve-hero .eyebrow{color:var(--aurum-gold)!important}

/* Photography is always documentary and full-colour. Brand colour lives in the structure around it. */
img{filter:none!important}
.purpose-art::after,.people-media::after,.work-card-media::after{display:none!important}
.purpose-art-image{opacity:1!important}
.work-card{padding:0!important;display:grid!important;grid-template-rows:168px auto 1fr auto;overflow:hidden}
.work-card-media{grid-row:1;height:168px!important;margin:0!important;border-radius:0!important;border-bottom:4px solid rgba(255,255,255,.9)}
.work-card-media img{filter:none!important}
.work-card>p{grid-row:2;margin:20px 26px 0!important}
.work-card h3{grid-row:3;margin:22px 26px!important}
.work-card>a{grid-row:4;align-self:end;margin:0 26px 24px!important;width:max-content}
.work-card .card-arrow{position:absolute;right:24px;top:136px;z-index:2;display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;background:rgba(255,255,255,.9)}
@media(max-width:850px){.work-card{grid-template-rows:154px auto 1fr auto}.work-card-media{height:154px!important}.work-card>p{margin:18px 22px 0!important}.work-card h3{margin:20px 22px!important}.work-card>a{margin:0 22px 22px!important}.work-card .card-arrow{top:124px;right:20px}}

/* Content-density audit: restrained surfaces for brief content, not decorative colour walls. */
.people{background:var(--modern-panel)!important;color:var(--modern-ink)!important;border-top:5px solid var(--aurum-teal);isolation:isolate}
.people::before{display:none!important}
.people .section-index{color:var(--aurum-red)!important;border-top-color:var(--aurum-gold)}
.people .display{color:var(--modern-ink)}
.people-note{max-width:390px;padding:22px 0 22px 26px;border-left:3px solid var(--aurum-red)!important;color:var(--modern-ink)}
.people-note p{color:var(--modern-slate)!important}
.people-note a{color:var(--aurum-red)!important;border-bottom-color:var(--aurum-red)!important}
.people-mark{color:rgba(7,113,135,.12)!important}
.people-media{border:2px solid var(--aurum-gold);border-radius:var(--modern-radius)!important;box-shadow:14px 14px 0 var(--aurum-red),0 24px 60px rgba(25,22,19,.14)!important}
.people-media::after{display:none!important}
.people-layout{display:block!important;max-width:min(47%,620px);min-height:500px}
.people-note{min-height:0!important;margin-top:34px}
.closing{padding:clamp(72px,9vw,118px) 22px!important;background:var(--modern-panel)!important;color:var(--modern-ink)!important;border-top:5px solid var(--aurum-gold);box-shadow:none!important}
.closing h2{max-width:960px;margin:24px auto 30px!important}.closing>p:not(.eyebrow){color:var(--modern-slate)}
.area-cta,.project-cta,.story-next{padding:clamp(42px,6vw,72px) clamp(22px,9vw,150px)!important;background:var(--modern-panel)!important;color:var(--modern-ink)!important;border-top:5px solid var(--aurum-gold);box-shadow:none!important}
.area-cta h2,.project-cta h2,.story-next h2{margin-top:0!important}.area-cta .button,.project-cta .button,.story-next .button{margin-top:20px}
.footprint-note{padding:28px clamp(22px,6vw,95px)!important;background:var(--modern-panel)!important;color:var(--modern-ink)!important;border-top:5px solid var(--aurum-gold)}
@media(max-width:850px){.people{padding-bottom:clamp(360px,88vw,520px)!important}.people-layout{max-width:none;min-height:0}.people-media{left:22px;right:22px;top:auto;width:auto;height:300px;bottom:30px;box-shadow:10px 10px 0 var(--aurum-red),0 18px 44px rgba(25,22,19,.14)!important}.people-note{margin-top:34px}.closing{padding:68px 22px!important}}

/* One fixed desktop geometry gives every route exactly the same navigation rhythm. */
@media(min-width:851px){
  .site-header{grid-template-columns:1fr auto 1fr!important}
  .site-header nav{position:absolute!important;left:0!important;right:clamp(200px,17vw,230px)!important;width:auto!important;grid-template-columns:repeat(3,minmax(82px,1fr)) clamp(304px,24vw,340px) repeat(3,minmax(82px,1fr))!important;column-gap:0!important}
  .site-header nav a{width:100%;justify-content:center!important}
  .site-header .header-link{right:clamp(18px,5vw,72px);position:absolute;justify-self:auto!important;transform:none!important;padding-left:16px!important}
}
@media(max-width:850px){
  .health-list{grid-template-columns:1fr!important}.health-link:nth-child(3n+2){border-left:0!important;border-right:0!important}.health-preview{grid-template-columns:1fr;gap:14px;padding:20px 0}.health-work-list{grid-column:auto}.area-hero + .area-section .section-head{grid-template-columns:1fr!important;gap:10px!important}.area-hero + .area-section .focus-card,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card{grid-template-columns:1fr!important}.area-hero + .area-section .focus-card p,.area-hero + .area-section:has(.focus-list > :only-child) .focus-card p{grid-column:auto}.health-work-toggle,.health-full-link{justify-self:start}
}

/* Emergency polish pass: brand-accurate colour, tighter architecture, no
   decorative bloat when content is thin. */
a,
a:visited,
.health-link,
.health-link:visited,
.health-link h3,
.health-link:visited h3,
.mobile-nav a,
.mobile-nav a:visited{
  color:inherit!important;
  text-decoration:none!important;
}

.profile[hidden],
.leadership-group.is-filtered-empty{
  display:none!important;
}

img{
  filter:none!important;
}

.purpose-art-image,
.work-card-media img,
.work-image-band figure img,
.work-community-context figure img,
.people-media img,
.story-media img,
.phase8-photo-band img,
.phase8-media-rail img{
  filter:none!important;
  mix-blend-mode:normal!important;
}

.purpose-art::after,
.work-card-media::after,
.work-image-band figure::after,
.work-community-context figure::after,
.people-media::after{
  mix-blend-mode:normal;
}

@media(min-width:851px){
  .site-header{
    height:88px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr)!important;
    align-items:center!important;
    padding:0 clamp(28px,5vw,72px)!important;
  }
  .site-header .brand{
    grid-column:2!important;
    justify-self:center!important;
    width:92px!important;
    height:68px!important;
    position:relative!important;
    z-index:3!important;
  }
  .site-header .brand img{
    width:92px!important;
    height:68px!important;
    object-fit:contain!important;
  }
  .site-header nav[aria-label="Primary navigation"]{
    position:absolute!important;
    inset:0 clamp(176px,12vw,210px) 0 clamp(28px,5vw,72px)!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(86px,118px)) minmax(132px,178px) repeat(3,minmax(86px,136px))!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:clamp(6px,.9vw,14px)!important;
    width:auto!important;
    max-width:none!important;
  }
  .site-header nav[aria-label="Primary navigation"] a{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    white-space:nowrap!important;
    color:var(--aurum-ink)!important;
  }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(4){
    grid-column:5!important;
  }
  .site-header .header-link{
    position:absolute!important;
    right:clamp(22px,4.5vw,72px)!important;
    justify-self:auto!important;
    transform:none!important;
    white-space:nowrap!important;
    color:var(--aurum-red)!important;
  }

  .page-section,
  .area-section,
  .project-section,
  .discipline{
    min-height:0!important;
    padding:clamp(42px,5.5vw,82px) clamp(28px,7vw,116px)!important;
  }

  .discipline .section-head{
    margin-bottom:clamp(24px,3vw,42px)!important;
  }
  .discipline .section-head h2{
    font-size:clamp(44px,5.2vw,76px)!important;
  }
  .discipline-grid{
    grid-template-columns:minmax(250px,.76fr) minmax(360px,1fr)!important;
    gap:clamp(28px,5vw,78px)!important;
  }
  .discipline-statement{
    font-size:clamp(34px,4.1vw,60px)!important;
    line-height:.94!important;
    max-width:560px!important;
  }
  .discipline-note{
    max-width:690px!important;
    columns:2 260px;
    column-gap:34px;
  }

  .work-image-band,
  .work-community-context{
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:clamp(46px,5.6vw,76px) clamp(40px,8vw,128px)!important;
  }
  .work-image-band{
    grid-template-columns:minmax(300px,.82fr) minmax(430px,1fr)!important;
    gap:clamp(34px,6vw,90px)!important;
  }
  .work-image-band-copy h2,
  .work-community-context h2{
    font-size:clamp(44px,5vw,74px)!important;
    max-width:520px!important;
  }
  .work-image-band-copy>p:last-child,
  .work-community-context p:not(.work-image-kicker){
    font-size:16px!important;
    line-height:1.5!important;
    max-width:410px!important;
  }
  .work-image-band figure{
    height:clamp(350px,32vw,480px)!important;
    min-height:0!important;
    border-radius:16px!important;
    transform:none!important;
    border:1px solid rgba(224,172,38,.55)!important;
    box-shadow:0 24px 62px rgba(25,22,19,.16)!important;
  }
  .work-image-band figure::before{
    inset:12px!important;
    border-radius:12px!important;
    border-color:rgba(224,172,38,.7)!important;
  }
  .work-image-human{
    background:linear-gradient(90deg,var(--modern-panel) 0 50%,var(--aurum-light-blue) 50% 100%)!important;
  }
  .work-image-human .work-image-band-copy{
    transform:none!important;
    padding:0!important;
    align-self:center!important;
  }
  .work-image-human figure{
    order:2!important;
  }
  .work-image-operations{
    background:var(--aurum-ink)!important;
  }
  .work-image-access{
    background:linear-gradient(90deg,var(--modern-panel) 0 50%,rgba(224,172,38,.22) 50% 100%)!important;
    color:var(--aurum-ink)!important;
  }

  .work-community-context{
    display:grid!important;
    grid-template-columns:minmax(430px,1.1fr) minmax(320px,.9fr)!important;
    background:var(--modern-panel)!important;
    color:var(--aurum-ink)!important;
    gap:clamp(34px,6vw,90px)!important;
  }
  .work-community-context figure{
    position:relative!important;
    inset:auto!important;
    min-height:0!important;
    height:clamp(360px,34vw,500px)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 24px 62px rgba(25,22,19,.16)!important;
  }
  .work-community-context::before{
    display:none!important;
  }
  .work-community-context>div{
    position:relative!important;
    z-index:2!important;
    width:auto!important;
    max-width:520px!important;
    margin:0!important;
    padding:clamp(26px,3vw,42px)!important;
    align-self:center!important;
    justify-self:start!important;
    border-top:4px solid var(--aurum-red)!important;
    border-radius:16px!important;
    background:#fff!important;
    color:var(--aurum-ink)!important;
  }

  .work-section{
    padding-top:clamp(56px,6vw,88px)!important;
  }
  .work-rail{
    gap:14px!important;
  }
  .work-card{
    min-height:360px!important;
    padding:18px 22px 24px!important;
    grid-template-rows:136px auto 1fr auto!important;
    border-radius:16px!important;
  }
  .work-card-media{
    height:136px!important;
    margin:0 0 18px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.28)!important;
  }
  .work-card-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .people{
    display:grid!important;
    grid-template-columns:minmax(380px,1fr) minmax(330px,440px)!important;
    align-items:center!important;
    gap:clamp(40px,7vw,110px)!important;
    min-height:0!important;
    padding:clamp(64px,8vw,110px) clamp(40px,8vw,128px)!important;
    background:var(--modern-panel)!important;
    color:var(--aurum-ink)!important;
    border-top:5px solid var(--aurum-gold)!important;
  }
  .people .section-index{
    grid-column:1/-1!important;
  }
  .people-layout{
    max-width:none!important;
    min-height:0!important;
    display:block!important;
  }
  .people-media{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:clamp(330px,34vw,460px)!important;
    border-radius:18px!important;
    border:1px solid rgba(205,32,38,.28)!important;
    box-shadow:12px 12px 0 var(--aurum-gold),0 24px 62px rgba(25,22,19,.14)!important;
    overflow:hidden!important;
  }

  .purpose{
    grid-template-columns:minmax(440px,1fr) minmax(320px,.82fr)!important;
    min-height:0!important;
    padding:clamp(54px,7vw,100px) clamp(40px,8vw,128px)!important;
  }
  .purpose-art{
    min-height:360px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:var(--aurum-red)!important;
  }
  .purpose-art-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    opacity:1!important;
  }
  .purpose-art span,
  .purpose-art i{
    display:none!important;
  }

  .involve-hero,
  .footprint-hero{
    margin:0!important;
    border-radius:0!important;
    min-height:clamp(430px,45vw,560px)!important;
  }
  .involve-hero{
    background-image:
      linear-gradient(90deg,rgba(25,22,19,.82),rgba(25,22,19,.34)),
      url("../photos/client/what-we-do/community-consultation.jpg")!important;
    background-size:cover!important;
    background-position:center!important;
    color:#fff!important;
  }
  .involve-hero h1,
  .involve-hero .lead{
    color:#fff!important;
  }
}
/* Supplied About hero photograph and centred closing action. */
.about-hero{position:relative!important;isolation:isolate;background:var(--aurum-ink)!important;color:#fff!important}
.about-hero-image{position:absolute!important;z-index:0!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:62% center!important;filter:none!important}
/* 2026-08-17: .about-hero-image's 62%/center crop is shared across three
   unrelated photos (About/History/Leadership) with three different subject
   positions in their source images — About and History both have generous
   headroom so the shared value happens to work for them, but Leadership's
   photo (clinical-discussion.jpg) has its subject's head only ~17% down
   from the top, leaving just ~3% margin after a vertical-center crop —
   the one real risk flagged in this site's pre-launch hero-image audit.
   Scoped override (matches the existing about-detail-* body-class
   pattern already used elsewhere in this file) shifts the vertical bias
   toward the top third instead of touching the shared value everyone
   else relies on. */
.about-detail-leadership .about-hero-image{object-position:62% 25%!important}
.about-hero::before{
  content:""!important;position:absolute!important;z-index:1!important;inset:0!important;
  background:linear-gradient(90deg,rgba(25,22,19,.82) 0%,rgba(25,22,19,.7) 30%,rgba(25,22,19,.28) 48%,rgba(25,22,19,.06) 62%,transparent 76%)!important;
  pointer-events:none
}
.about-hero::after{display:none!important}
.about-hero>.eyebrow,.about-hero>h1,.about-hero>.lead{position:relative!important;z-index:2!important}
.about-hero .lead{color:rgba(255,255,255,.9)!important;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.closing .button{
  display:flex!important;width:max-content!important;min-width:226px!important;
  margin-left:auto!important;margin-right:auto!important;
  justify-content:center!important;text-align:center!important
}
.closing .button span{color:#fff!important;margin-left:4px!important}
@media(max-width:850px){
  .about-hero-image{object-position:62% center!important}
  .about-detail-leadership .about-hero-image{object-position:62% 25%!important}
  .about-hero::before{background:linear-gradient(90deg,rgba(25,22,19,.9),rgba(25,22,19,.54) 68%,rgba(25,22,19,.24))!important}
}


@media(max-width:850px){
  .mobile-nav{
    background:var(--aurum-ink)!important;
    padding:92px 22px 28px!important;
  }
  .mobile-nav a,
  .mobile-nav a:visited{
    font-size:clamp(24px,7vw,34px)!important;
    line-height:1.02!important;
    padding:12px 0!important;
    color:var(--modern-panel)!important;
  }
  .mobile-nav a[aria-current="page"],
  .mobile-nav a:hover{
    color:var(--aurum-gold)!important;
  }
  .footprint-hero,
  .involve-hero{
    margin:0!important;
    border-radius:0!important;
    width:100%!important;
  }
  .work-card-media img,
  .purpose-art-image,
  .people-media img{
    filter:none!important;
  }
}

/* Deep-clean layer: restore the brand guide's disciplined geometry and make
   the shared shell behave consistently across every route. */
:root{
  --modern-radius:7px;
  --modern-shadow:0 18px 44px rgba(25,22,19,.12);
  --modern-shadow-soft:0 9px 24px rgba(25,22,19,.08);
}
html,body{max-width:100%;overflow-x:clip}
img,svg{max-width:100%}
main,section,article,aside,div,details{min-width:0}
.page-section,.statement,.values,.work-section,.people,.closing,.purpose,
.leadership,.discipline,.project-section,.area-section,.phase8-media-section,
.story-next,.site-footer,footer{border-radius:var(--modern-radius)!important}
.proof-card,.purpose-card,.card,.focus-card,.feature-card,.process-card,
.office-card,.invite-card,.profile,.evidence-card,.module-card,.story-card,
.infra-card,.health-link,.resource-feature,.resource-aside,.contact-main,
.contact-route,.empty-state,.rfp-empty,.timeline-item,.story-body,.story-aside{
  border-radius:var(--modern-radius)!important;
}
.values-grid article:hover{transform:translateY(-7px)}
.work-card:hover,.infra-card:hover{transform:translateY(-6px)}
.portrait-placeholder{
  display:grid!important;
  place-items:center;
  overflow:hidden;
  color:transparent!important;
  font-size:0!important;
  background:
    linear-gradient(145deg,rgba(205,32,38,.92),rgba(127,16,21,.98))!important;
}
.portrait-placeholder::before{
  content:"A";
  color:rgba(255,255,255,.92);
  font-size:clamp(54px,7vw,96px);
  font-weight:700;
  line-height:1;
}
.experts-note,.leadership-group:not(:has(.profile)){display:none!important}
.invite-card:has([aria-disabled="true"]){display:none!important}
.invite-grid{grid-template-columns:1fr!important}
.profile,.profile summary,.profile-meta,.profile-bio{max-width:100%;overflow-wrap:anywhere}

@media(min-width:851px){
  .site-header{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr) auto!important;
    gap:clamp(22px,3vw,48px)!important;
    height:84px!important;
    padding:0 clamp(24px,4vw,64px)!important;
  }
  .site-header .brand{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    width:96px!important;
    height:72px!important;
    z-index:3;
  }
  .site-header .brand img{width:96px!important;height:72px!important}
  .site-header nav{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    justify-content:center!important;
    width:auto!important;
    margin:0!important;
    gap:clamp(3px,.55vw,9px)!important;
  }
  .site-header nav a{
    display:inline-flex!important;
    grid-column:auto!important;
    padding:9px clamp(7px,.8vw,12px)!important;
    border-radius:3px!important;
    font-size:clamp(8px,.62vw,10px)!important;
    letter-spacing:.075em!important;
  }
  .site-header nav a[aria-current="page"]::before{display:none!important}
  .site-header .header-link{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    transform:none!important;
    padding:12px 14px!important;
    border:1px solid rgba(205,32,38,.24)!important;
    border-radius:3px!important;
    background:transparent!important;
    white-space:nowrap;
  }
}

@media(max-width:850px){
  .invite-grid{grid-template-columns:1fr!important}
  .site-header{
    position:sticky!important;
    top:0;
    z-index:20;
    display:flex!important;
    height:72px!important;
    padding:7px 18px!important;
    border-radius:0!important;
  }
  .site-header .brand{margin-right:auto}
  .mobile-nav.is-open,.mobile-nav.open{
    inset:72px 0 0!important;
    max-height:calc(100svh - 72px)!important;
    overflow:auto!important;
  }
  .page-section,.statement,.values,.work-section,.people,.closing,.purpose,
  .leadership,.discipline,.project-section,.area-section,.phase8-media-section,
  .story-next,.site-footer,footer{margin-left:8px!important;margin-right:8px!important}
  .timeline,.timeline-item,.leadership,.profile-grid,.office-grid{max-width:100%}
}

/* Reconciliation layer
   Preserve the approved pre-clean compositions. The additions below are
   limited to the requested About composition, robust card containment,
   accessible global footer, and safe mobile behaviour. */
html,
body {
  overflow-x: hidden;
}

.about-introduction {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.about-introduction-grid {
  position: relative;
  display: grid;
  min-height: clamp(680px, 56vw, 790px);
  align-items: end;
  overflow: hidden;
  border-radius: var(--modern-radius);
  background: var(--aurum-ink);
  isolation: isolate;
}

.about-introduction-grid::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(16, 16, 16, 0.92) 0%,
    rgba(16, 16, 16, 0.78) 36%,
    rgba(16, 16, 16, 0.28) 68%,
    rgba(16, 16, 16, 0.08) 100%
  );
  pointer-events: none;
}

.about-introduction-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.about-introduction-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(0.76) brightness(0.84) !important;
}

.about-introduction-media figcaption {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-introduction-copy {
  position: relative;
  z-index: 2;
  width: min(52%, 620px);
  padding: clamp(38px, 5vw, 72px);
  color: #fff;
}

.about-introduction-copy h2 {
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(64px, 8vw, 118px);
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.about-introduction-copy h2 em { color: var(--aurum-gold); }
.about-introduction-copy .lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.52;
}
.about-introduction-copy .lead p:last-child { margin-bottom: 0; }
.about-introduction .proof-grid { margin-top: 14px; }

.infra-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.infra-card {
  min-width: 0;
  min-height: 290px;
  overflow: hidden;
  border-radius: var(--modern-radius) !important;
}

.infra-card h3 {
  max-width: 100%;
  font-size: clamp(27px, 2.35vw, 38px) !important;
  line-height: 0.94 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
  hyphens: auto;
}

.infra-card p { overflow-wrap: break-word; }

[data-resource-record][hidden],
[data-resource-empty][hidden] {
  display: none !important;
}

.site-footer,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 14px;
  padding: 30px clamp(22px, 5vw, 72px);
  border: 1px solid var(--aurum-line);
  border-radius: var(--modern-radius) !important;
  color: var(--aurum-ink);
  background: #fff;
  box-shadow: none;
}

.site-footer img,
footer img {
  display: block;
  width: 104px;
  height: 72px;
  object-fit: contain;
}

.site-footer a,
footer a { color: var(--aurum-red) !important; }
.footer-nav a { color: var(--aurum-ink) !important; }

/* 2026-08-05: footer copy was sitting at 9-10px — bump it up for readability. */
.site-footer p,
footer p,
.site-footer span,
footer span,
.site-footer > a,
footer > a,
.footer-nav a {
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
@media(max-width:850px){
  .site-footer p,
  footer p,
  .site-footer span,
  footer span,
  .site-footer > a,
  footer > a,
  .footer-nav a {
    font-size: 12px !important;
  }
}

.whistleblowing-strip {
  margin: 14px;
  overflow: hidden;
  border: 1px solid var(--aurum-line);
  border-radius: var(--modern-radius);
  background: #fff;
}

.whistleblowing-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--aurum-line);
}

.whistleblowing-heading p,
.whistleblowing-heading span {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.whistleblowing-heading p {
  color: var(--aurum-red);
  font-weight: 700;
}

.whistleblowing-heading span { color: var(--aurum-slate); }
.whistleblowing-artwork {
  overflow-x: auto;
  overflow-y: hidden;
  background: #d6d6d6;
  scrollbar-color: var(--aurum-gold) transparent;
  scrollbar-width: thin;
}

.whistleblowing-artwork img {
  display: block;
  width: 100%;
  min-width: 960px;
  height: auto;
  object-fit: contain;
}

.whistleblowing-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--aurum-line);
}

.whistleblowing-actions a {
  display: grid;
  gap: 4px;
  min-height: 64px;
  align-content: center;
  padding: 12px 18px;
  border-right: 1px solid var(--aurum-line);
  color: var(--aurum-ink) !important;
  background: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.whistleblowing-actions a:last-child { border-right: 0; }
.whistleblowing-actions a:hover,
.whistleblowing-actions a:focus-visible {
  color: #fff !important;
  background: var(--aurum-red);
}

.whistleblowing-actions span {
  color: var(--aurum-red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.whistleblowing-actions a:hover span,
.whistleblowing-actions a:focus-visible span { color: var(--aurum-gold); }

.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.social-links a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(205, 32, 38, 0.3);
  border-radius: 3px;
  color: var(--aurum-red) !important;
  background: #fff;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: #fff !important;
  background: var(--aurum-red);
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a:nth-child(2) svg,
.social-links a:nth-child(3) svg {
  fill: currentColor;
  stroke: none;
}

@media(max-width:1120px) and (min-width:851px) {
  .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media(max-width:850px) {
  .about-introduction-grid { min-height: 980px; }
  .about-introduction-grid::after {
    background: linear-gradient(
      180deg,
      rgba(16, 16, 16, 0.04) 0%,
      rgba(16, 16, 16, 0.18) 28%,
      rgba(16, 16, 16, 0.92) 53%,
      var(--aurum-ink) 100%
    );
  }
  .about-introduction-media img {
    height: 54%;
    object-position: center top;
  }
  .about-introduction-copy {
    width: 100%;
    padding: 390px 24px 38px;
  }
  .about-introduction-copy h2 { font-size: clamp(58px, 18vw, 84px); }
  .about-introduction-media figcaption {
    top: 16px;
    bottom: auto;
  }
  .infra-grid { grid-template-columns: 1fr !important; }
  .project-table,
  .data-table,
  .rfp-table {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
  .whistleblowing-strip { margin: 8px; }
  .whistleblowing-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .whistleblowing-artwork::after {
    content: "Swipe to view the full banner";
    position: sticky;
    left: 14px;
    display: inline-block;
    margin: 8px 14px 11px;
    padding: 6px 8px;
    border-radius: 3px;
    color: #fff;
    background: rgba(25, 22, 19, 0.86);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .whistleblowing-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .whistleblowing-actions a {
    border-bottom: 1px solid var(--aurum-line);
  }
}

/* ==========================================================================
   QUIET CONFIDENCE — FINAL TYPOGRAPHY AND NAVIGATION CASCADE
   The structure, approved colour system, media and interactions remain intact.
   ========================================================================== */
:root {
  --type-hero: clamp(48px, 4.8vw, 68px);
  --type-section: clamp(34px, 3.5vw, 46px);
  --type-editorial: clamp(28px, 2.9vw, 38px);
  --type-card: clamp(22px, 2vw, 28px);
  --type-body: clamp(16px, 1.15vw, 18px);
  --tracking-display: -.038em;
  --tracking-heading: -.025em;
}

.hero h1:not(.hero-heading--composed),
.hero--story h1:not(.hero-heading--composed),
.page-hero h1,
.story-hero-copy h1,
.footprint-intro h1 {
  max-width: 780px !important;
  font-size: var(--type-hero) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-display) !important;
  text-wrap: balance;
}

.hero h1:not(.hero-heading--composed) {
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}

.hero--story h1:not(.hero-heading--composed) { max-width: 680px !important; }

.display,
.section-head h2,
.intro h2,
.work-heading h2,
.footprint h2,
.purpose-panel h2,
.closing h2,
.people-story-heading h2,
.pillars-heading h2,
.work-image-band-copy h2,
.work-community-context h2,
.footprint-heading h2,
.footprint-stage h2,
.stage-heading h2,
.discipline .section-head h2,
.about-introduction-copy h2,
.area-hero + .area-section .section-head h2,
.resource-feature h2,
.contact-main h2,
.area-cta h2,
.project-cta h2,
.story-next h2 {
  font-size: var(--type-section) !important;
  line-height: 1.06 !important;
  letter-spacing: var(--tracking-heading) !important;
  text-wrap: balance;
}

.statement .display {
  font-size: var(--type-section) !important;
  line-height: 1.06 !important;
}

.discipline-statement,
.health-preview-focus,
.footprint-note strong,
.story-body blockquote,
.story-body .story-intro,
.resource-aside h3,
.contact-route h3,
.leadership-group > h3,
.purpose-card h3 {
  font-size: var(--type-editorial) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}

.values-grid h3,
.work-card h3,
.through-card h3,
.proof-card h3,
.card h3,
.focus-card h3,
.feature-card h3,
.process-card h3,
.office-card h3,
.invite-card h3,
.infra-card h3,
.health-link h3,
.module-card h3,
.story-card h3,
.profile-name,
.timeline-copy h3 {
  font-size: var(--type-card) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}
/* 2026-08-17: .place-name (the Where We Work country-list row label) got
   swept into the shared card-heading rule above at some point even though
   it isn't a card title — it's a compact list row — which forced it to
   var(--type-card)'s large heading size !important, silently overriding
   the dedicated, deliberately smaller .place-name rule in
   footprint-phase6.css (confirmed live: computed size was 27.5px against
   an intended 14px). Split out with its own non-!important rule so the
   footprint-phase6.css value governs normally. */
.place-name {
  line-height: 1.12;
  letter-spacing: -.02em;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.place-detail h3 {
  font-size: clamp(28px, 2.8vw, 38px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.evidence-card strong,
.stat strong {
  font-size: clamp(32px, 3.8vw, 48px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.lead {
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
}

.hero-deck,
.hero-intro,
.body-copy,
.discipline-note,
.contact-main p,
.footprint-heading p,
.resource-aside p {
  font-size: clamp(16px, 1.1vw, 18px) !important;
  line-height: 1.62 !important;
}

/* Three links, centred wordmark, three links, then Contact. */
@media(min-width:851px) {
  .site-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    height: 88px !important;
    padding: 0 clamp(28px, 5vw, 72px) !important;
  }

  .site-header .brand {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: 92px !important;
    height: 68px !important;
    z-index: 3 !important;
  }

  .site-header .brand img {
    width: 92px !important;
    height: 68px !important;
    object-fit: contain !important;
  }

  .site-header nav[aria-label="Primary navigation"] {
    position: absolute !important;
    inset: 0 clamp(176px, 12vw, 210px) 0 clamp(28px, 5vw, 72px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(86px, 118px)) minmax(132px, 178px) repeat(3, minmax(86px, 136px)) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: clamp(6px, .9vw, 14px) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .site-header nav[aria-label="Primary navigation"] a {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    justify-content: center !important;
    white-space: nowrap !important;
    color: var(--aurum-ink) !important;
  }

  .site-header nav[aria-label="Primary navigation"] a:nth-child(1) { grid-column: 1 !important; }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(2) { grid-column: 2 !important; }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(3) { grid-column: 3 !important; }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(4) { grid-column: 5 !important; }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(5) { grid-column: 6 !important; }
  .site-header nav[aria-label="Primary navigation"] a:nth-child(6) { grid-column: 7 !important; }

  .site-header .header-link {
    position: absolute !important;
    right: clamp(22px, 4.5vw, 72px) !important;
    grid-column: auto !important;
    justify-self: auto !important;
    transform: none !important;
    white-space: nowrap !important;
    color: var(--aurum-red) !important;
  }
}

/* Desktop balance pass: restore presence without returning to oversized type. */
@media(min-width:851px) {
  :root {
    --type-hero: clamp(54px, 5.15vw, 74px);
    --type-section: clamp(38px, 3.75vw, 52px);
    --type-editorial: clamp(30px, 3.05vw, 42px);
    --type-card: clamp(24px, 2.15vw, 30px);
    --type-body: clamp(17px, 1.2vw, 19px);
  }

  .hero-deck,
  .hero-intro,
  .body-copy,
  .discipline-note,
  .contact-main p,
  .footprint-heading p,
  .resource-aside p {
    font-size: clamp(17px, 1.15vw, 19px) !important;
  }

  .hero--story .hero-content {
    padding-bottom: clamp(78px, 9vh, 108px) !important;
  }

  .hero--story .hero-image img {
    width: 104% !important;
    max-width: none !important;
    object-position: center center !important;
  }
}

/* Leadership portrait system: individual, brand-led and photograph-ready. */
.portrait-placeholder {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  border-bottom: 1px solid rgba(25, 22, 19, .12);
  background: linear-gradient(145deg, var(--aurum-light-blue), #d8edf0) !important;
}

.portrait-placeholder::before {
  content: attr(data-initials) !important;
  position: relative;
  z-index: 2;
  color: var(--aurum-teal) !important;
  font-size: clamp(42px, 4.8vw, 68px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -.045em;
}

.portrait-placeholder::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -48px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .18;
  box-shadow: 0 0 0 30px currentColor, 0 0 0 62px currentColor;
}

.profile:nth-child(6n + 1) .portrait-placeholder {
  color: var(--aurum-teal) !important;
  background: linear-gradient(145deg, var(--aurum-light-blue), #e5f3f4) !important;
}
.profile:nth-child(6n + 1) .portrait-placeholder::before { color: var(--aurum-teal) !important; }

.profile:nth-child(6n + 2) .portrait-placeholder {
  color: var(--aurum-red) !important;
  background: linear-gradient(145deg, var(--aurum-gold), #f4d982) !important;
}
.profile:nth-child(6n + 2) .portrait-placeholder::before { color: var(--aurum-ink) !important; }

.profile:nth-child(6n + 3) .portrait-placeholder {
  color: #fff !important;
  background: linear-gradient(145deg, var(--aurum-orange), var(--aurum-red)) !important;
}
.profile:nth-child(6n + 3) .portrait-placeholder::before { color: #fff !important; }

.profile:nth-child(6n + 4) .portrait-placeholder {
  color: var(--aurum-gold) !important;
  background: linear-gradient(145deg, var(--aurum-ink), var(--aurum-slate)) !important;
}
.profile:nth-child(6n + 4) .portrait-placeholder::before { color: var(--aurum-gold) !important; }

.profile:nth-child(6n + 5) .portrait-placeholder {
  color: #fff !important;
  background: linear-gradient(145deg, #075766, var(--aurum-teal)) !important;
}
.profile:nth-child(6n + 5) .portrait-placeholder::before { color: #fff !important; }

.profile:nth-child(6n + 6) .portrait-placeholder {
  color: var(--aurum-orange) !important;
  background: linear-gradient(145deg, #f7efe3, #f0d9c7) !important;
}
.profile:nth-child(6n + 6) .portrait-placeholder::before { color: var(--aurum-orange) !important; }

/* 2026-08-11: the six alternating colours above were built for the
   placeholder state (no photo yet, just initials on a coloured tile).
   Now that every card has a real photo, that colour cycling just makes
   otherwise-identical cards look inconsistent with each other for no
   reason — client feedback was "all the blocks need to look the same".
   Neutralising it on mobile, where cards stack in a single column and
   the inconsistency is most visible. :nth-child(n) matches every card,
   so this ties the specificity of the rules above and — being later in
   this same file — wins the cascade. */
@media(max-width:850px){
  .profile:nth-child(n) .portrait-placeholder{background:var(--aurum-smoke) !important;color:var(--aurum-teal) !important}
}

@media(min-width:851px) {
  .leadership .profile-grid {
    gap: clamp(16px, 1.5vw, 22px) !important;
  }

  .leadership .profile {
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 18px 44px rgba(4, 45, 53, .2) !important;
    transition: transform .32s var(--ease-editorial), box-shadow .32s var(--ease-editorial);
  }

  .leadership .profile:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 56px rgba(4, 45, 53, .27) !important;
  }

  .leadership .portrait-placeholder {
    height: 220px !important;
  }

  .leadership .profile-meta {
    padding: 22px 22px 24px !important;
  }

  .leadership .profile-action {
    margin-top: 18px !important;
  }
}

@media(max-width:850px) {
  :root {
    --type-hero: clamp(38px, 10.8vw, 46px);
    --type-section: clamp(30px, 8.6vw, 36px);
    --type-editorial: clamp(26px, 7.4vw, 32px);
    --type-card: clamp(21px, 6.3vw, 26px);
  }

  .mobile-nav a,
  .mobile-nav a:visited,
  .mobile-nav.is-open a {
    font-size: clamp(24px, 6.7vw, 30px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }

  .hero h1:not(.hero-heading--composed),
  .hero--story h1:not(.hero-heading--composed),
  .page-hero h1,
  .story-hero-copy h1,
  .footprint-intro h1 {
    font-size: var(--type-hero) !important;
    line-height: 1.04 !important;
  }

  .work-image-band-copy h2,
  .work-community-context h2,
  .area-hero + .area-section .section-head h2,
  .about-introduction-copy h2 {
    font-size: var(--type-section) !important;
    line-height: 1.08 !important;
  }

  .area-hero + .area-section .focus-card h3,
  .area-hero + .area-section:has(.focus-list > :only-child) .focus-card h3 {
    font-size: var(--type-card) !important;
    line-height: 1.12 !important;
  }

  .story-body .story-intro,
  .story-body blockquote {
    font-size: clamp(24px, 6.8vw, 29px) !important;
    line-height: 1.18 !important;
  }
}

@media(max-width:500px) {
  .hero h1:not(.hero-heading--composed) { margin-bottom: 22px !important; }
  .lead,
  .hero-deck,
  .hero-intro,
  .body-copy,
  .discipline-note { font-size: 16px !important; }
}

/* Final desktop header geometry.
   2026-08-09: rebuilt from a fixed-column grid to flexbox. The grid
   required predicting an exact pixel width for every nav item ahead of
   time — three rounds of fixes that day (search vs. Contact, then
   Get Involved vs. Contact) were all the same root problem: some box
   needed more room than its column had, so it bled into its neighbour.
   Flex items size to their own content and a real `gap` always sits
   between neighbours, so two items can't touch no matter how the text or
   font-size changes. This is the last .site-header rule in the cascade,
   so it is the one that renders. */
@media(min-width:851px) {
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(12px, 2vw, 28px) !important;
  }

  /* 2026-08-06: swapped in the official landscape lockup (wide wordmark,
     ~3.3:1 aspect ratio) — this replaces the old stacked/square mark in
     the header, so it's sized by height with width following naturally
     instead of being forced into a near-square box (which was squashing
     it). File: assets/brand/aurum-logo-landscape.jpg. */
  .site-header .brand {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    /* An older desktop-only rule sets position:relative + z-index:3 here,
       which creates an isolated stacking context and stops the img's
       mix-blend-mode from seeing the header background behind it (the
       white JPG backdrop stayed solid instead of blending out). Reset
       both so it composites against the real header background again. */
    position: static !important;
    z-index: auto !important;
  }

  .site-header .brand img {
    width: auto !important;
    height: 100% !important;
    max-width: 148px !important;
    object-fit: contain !important;
    object-position: left center !important;
    /* Source file is a JPG with a white background — multiply blend
       drops the white against the header's light tint so it reads as
       a clean logo instead of a sticker on a box. True fix is a
       transparent PNG/SVG from the brand team; swap in when available. */
    mix-blend-mode: multiply !important;
  }

  .site-header nav[aria-label="Primary navigation"] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    gap: clamp(6px, 1.7vw, 26px) !important;
  }

  /* 2026-08-06: nav text was reading as far too small (max 10px) —
     client feedback was that the header needed more presence. Bumped
     to a clamp that floors at 12px instead of 8px. Left at this size on
     2026-08-09 — the flex gap above is what actually keeps items apart
     now, not a tight column, so there's room to size this up later
     without the collisions the grid version had. */
  /* Two leftovers from the old grid version of this header were both
     still active and both had to go: justify-self:stretch (a grid-item
     property Chrome partially honours in flex too), and a much older
     width:100% from a rule further up this file. flex-basis:auto falls
     back to the width property when nothing else sets it, so that
     width:100% was quietly making every plain nav link claim the full
     width of the nav container — confirmed directly via
     getComputedStyle, it matched the nav's own width to the pixel. flex
     alone doesn't override a separately-set width property, which is
     why the first attempt at this fix wasn't enough on its own. */
  .site-header nav[aria-label="Primary navigation"] a {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-self: auto !important;
    white-space: nowrap !important;
    padding: 9px 4px !important;
    font-size: clamp(12px, .95vw, 15px) !important;
    letter-spacing: .03em !important;
  }

  /* nav-dropdown.js wraps About Us, What We Do and Get Involved in a
     .nav-drop div (trigger link + dropdown menu). No column math needed
     any more — it's just another flex item sized to its own content. */
  .site-header nav[aria-label="Primary navigation"] .nav-drop {
    flex: 0 0 auto !important;
    justify-self: auto !important;
    position: relative !important;
  }
  .site-header nav[aria-label="Primary navigation"] .nav-drop > a {
    justify-self: auto !important;
    white-space: nowrap !important;
  }

  /* order swaps these two round the DOM order (nav-search comes before
     header-link in the markup). Contact needs to read before the search
     icon, with the icon last in the header's own right-edge padding —
     same reasoning as the earlier grid version, just re-expressed for
     flex since `order` isn't a grid-column number any more. */
  .site-header .nav-search {
    flex: 0 0 auto !important;
    order: 2 !important;
  }

  .site-header .header-link {
    position: static !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    white-space: nowrap !important;
    padding: 12px 18px !important;
    font-size: clamp(12px, .95vw, 15px) !important;
    letter-spacing: .03em !important;
  }

  .nav-search-panel {
    right: 0 !important;
  }
}

/* ---- About Us dropdown (Executive Team / History) ----
   Built by nav-dropdown.js. Opens on hover and on keyboard focus, so it is
   not mouse-only. The padded bridge above the panel stops the menu closing
   when the pointer crosses the gap between link and panel. */
.nav-drop{position:relative;display:flex;align-items:center;justify-content:center}
.nav-drop > a{width:100%}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;z-index:40;
  transform:translate(-50%,6px);
  display:flex;flex-direction:column;
  min-width:190px;padding:8px;margin-top:10px;
  background:#fff;
  border:1px solid rgba(25,22,19,.1);
  border-radius:12px;
  box-shadow:0 22px 48px rgba(25,22,19,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease-editorial),transform .22s var(--ease-editorial),visibility .22s;
}
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.nav-drop-menu a{
  display:block;padding:10px 12px;border-radius:8px;
  font-size:13px;letter-spacing:.01em;text-transform:none;
  color:var(--aurum-ink);white-space:nowrap;
  transition:background .2s var(--ease-editorial),color .2s var(--ease-editorial);
}
.nav-drop-menu a::after{display:none!important}
.nav-drop-menu a:hover,
.nav-drop-menu a:focus-visible,
.nav-drop-menu a[aria-current="page"]{background:rgba(224,172,38,.16);color:var(--aurum-red)}

/* ---- What We Do mega-menu ----
   2026-08-11: rebuilt to match the audit's actual Proposed Navigation (p.8):
   4 labelled columns — Clinical Research, Implementation Research,
   Health Implementation, Health Systems Strengthening. Each column has its
   own clickable heading (.nav-drop-col-heading); the "mess" the client
   flagged in the original 4-column build was unlabelled equal-weight
   columns, not the 4-group structure itself — labels + tight column widths
   fix that without abandoning the real content grouping. */
.nav-drop-menu--mega{
  flex-direction:row;
  align-items:flex-start;
  min-width:680px;
  padding:18px;
  gap:22px;
}
.nav-drop-col{display:flex;flex-direction:column;min-width:150px}
.nav-drop-col:nth-child(3),
.nav-drop-col:nth-child(4){min-width:190px}
.nav-drop-col-heading{
  display:block;
  margin-bottom:8px;
  padding:6px 12px;
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--aurum-slate);
  border-bottom:1px solid rgba(25,22,19,.08);
}
.nav-drop-menu a.nav-drop-col-heading:hover,
.nav-drop-menu a.nav-drop-col-heading:focus-visible,
.nav-drop-menu a.nav-drop-col-heading[aria-current="page"]{color:var(--aurum-red);background:transparent}
.nav-drop-col .nav-drop-col-heading + a{margin-top:2px}

/* 2026-08-17: "What We Do" row inside the About Us dropdown — opens its
   mega menu as a flyout, rather than navigating anywhere itself.
   2026-08-17c: .nav-drop-flyout is now appended straight to <body> by
   nav-dropdown.js (a DOM "portal"), not nested under .nav-drop-item--flyout
   — the About Us panel it used to live inside carries its own CSS
   transform while open (translateX(-50%), to center under its trigger),
   and per spec ANY ancestor transform becomes the containing block for a
   position:fixed descendant too, not just the viewport. That silently
   broke the JS-computed viewport-relative left/top (confirmed live:
   getBoundingClientRect() disagreed with the computed left/top by exactly
   the panel's translate offset), so the flyout kept overflowing the real
   viewport regardless of the math. Living outside that subtree fixes it
   at the root instead of patching around it — and means visibility is now
   driven purely by the .is-open class (added/removed by JS on both the
   row and the detached flyout together), not any :hover/:focus-within
   descendant-selector trick, since the two are siblings-by-body now, not
   parent/child. */
.nav-drop-item--flyout{position:relative}
.nav-drop-item--flyout > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  letter-spacing:.01em;
  color:var(--aurum-ink);
  white-space:nowrap;
  transition:background .2s var(--ease-editorial),color .2s var(--ease-editorial);
}
.nav-drop-item--flyout > a .aurum-arrow-icon{width:11px;height:11px;flex:none;opacity:.55}
.nav-drop-item--flyout:hover > a,
.nav-drop-item--flyout.is-open > a{background:rgba(224,172,38,.16);color:var(--aurum-red)}
/* Lives directly under <body> now (see nav-dropdown.js) — position:fixed
   here is guaranteed to mean the real viewport, since <body> itself is
   never transformed. left/top are set inline by JS on every open (the
   viewport-relative math only makes sense computed at open time); this
   just owns the base showing/hiding, keyed off .is-open (added to this
   element directly by JS, not inferred from any ancestor state). */
.nav-drop-flyout{
  position:fixed;
  top:0;
  left:0;
  margin:0;
  transform:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s var(--ease-editorial),visibility .22s;
}
.nav-drop-flyout.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.mobile-nav-subhead--nested{padding-left:44px;font-size:11px}

/* 2026-08-11: .hero-image--portrait's contain-fit treatment for the
   Ratevosian headshot now lives in home-rebuild.css as part of the full
   hero redesign (light two-column layout, matching var(--aurum-cream)
   background instead of a one-off hex value) — see "Hero: light editorial
   two-column redesign" there. Removed the duplicate rule that used to live
   here to avoid two colour values drifting apart. */

/* Indented children in the mobile drawer, where there is no hover.
   2026-08-11: these used to only get a smaller font-size — everything else
   (the sequential 01/02/03... counter, the full-strength row divider) was
   still inherited from the plain top-level ".mobile-nav a" rule, so a
   child link like "Who We Are" carried on the SAME numbered sequence as
   top-level items like "About Us" and "What We Do". Read top to bottom it
   looked like one flat 15-item list instead of six sections each with
   their own children (client feedback: no clear distinction between
   headers and sub-headers). Fixed here: children stop incrementing/
   showing the counter, get a plain gold tick instead, a quieter divider,
   tighter line spacing, and a left rule that visually ties them back to
   the parent heading above. */
.mobile-nav a.mobile-nav-sub{
  padding:9px 0 9px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-left:2px solid rgba(224,172,38,.4);
  margin-left:13px;
  font-size:clamp(16px,4vw,19px)!important;
  font-weight:400;
  letter-spacing:-.02em;
  counter-increment:none;
  opacity:.82;
}
.mobile-nav a.mobile-nav-sub::before{
  content:"—";
  flex:0 0 16px;
  color:var(--aurum-gold);
  font-size:13px;
}
/* :last-of-type would only match the single last <a> in the whole drawer
   (it ignores class, only tag), not "last child of each group" — the
   groups are plain siblings in the DOM, not wrapped in their own
   container. :has() on the next sibling correctly finds the last
   .mobile-nav-sub of each run (already relied on elsewhere in this file,
   e.g. .page-section:has(.rfp-empty), so it's a safe pattern here). */
.mobile-nav a.mobile-nav-sub:not(:has(+ a.mobile-nav-sub)){border-bottom:0}
.mobile-nav span.mobile-nav-subhead{
  display:block;
  padding:14px 26px 2px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--aurum-slate);
  opacity:.8;
}
@media(max-width:850px){
  .nav-drop-menu{display:none}
}

/* Search icon gets its own consistent home at every width: grid column 8
   on desktop (between the nav links and Contact), grouped tight against
   the menu button on mobile — one predictable place, not buried. */
@media(max-width:850px) {
  .site-header { display: flex !important; align-items: center !important; }
  .site-header .brand { order: 1 !important; width: auto !important; height: 30px !important; display: flex !important; align-items: center !important; }
  .site-header .brand img { width: auto !important; height: 100% !important; max-width: 118px !important; object-fit: contain !important; object-position: left center !important; mix-blend-mode: multiply !important; }
  .site-header .nav-search { order: 2 !important; margin-left: auto !important; margin-right: 12px !important; }
  .site-header .menu-toggle { order: 3 !important; margin-left: 0 !important; }
  /* Subpages don't use .menu-toggle — subpage.js injects a .shell-menu
     button instead. Without an explicit order it defaulted to 0 and sorted
     ahead of the logo (order 1), putting the menu on the left and the
     wordmark on the right. margin-left:auto holds it to the right edge on
     the subpages, which have no .nav-search to do that job. */
  .site-header .shell-menu { order: 3 !important; margin-left: auto !important; }
}

/* 2026-08-05: nav hover/active state was a solid red pill ("big red
   squares") — replace with a red underline that draws in, plus a subtle
   scale-up, on both hover and the current page. Wins sitewide since this
   file loads after subpage.css/story.css on every route. */
.site-header nav a {
  position: relative;
  background: transparent !important;
}
.site-header nav a::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--aurum-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease-editorial);
}
.site-header nav a:hover {
  background: transparent !important;
  color: var(--aurum-red) !important;
  transform: scale(1.08) !important;
}
.site-header nav a:hover::after { transform: scaleX(1); }
.site-header nav a[aria-current="page"] {
  background: transparent !important;
  color: var(--aurum-red) !important;
}
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header nav a[aria-current="page"]::before { display: none !important; }

/* ==========================================================================
   DESKTOP COMPOSITION SYSTEM
   One editorial grid, integrated photography, and deliberate copy overlays.
   Mobile is intentionally left untouched.
   ========================================================================== */
@media(min-width:851px) {
  :root {
    --desktop-gutter: clamp(54px, 7vw, 112px);
    --desktop-section-y: clamp(70px, 7.2vw, 104px);
    --desktop-copy-card: rgba(247, 245, 235, .95);
  }

  .purpose {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: clamp(580px, 48vw, 690px) !important;
    margin: 16px !important;
    padding: var(--desktop-section-y) var(--desktop-gutter) !important;
    overflow: hidden !important;
    background: var(--aurum-ink) !important;
    isolation: isolate;
  }
  .purpose::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    background: linear-gradient(90deg,rgba(25,22,19,.12),rgba(25,22,19,.02) 48%,rgba(25,22,19,.42)) !important;
    pointer-events: none;
  }
  .purpose-art {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: var(--aurum-ink) !important;
  }
  .purpose-art::before { display: none !important; }
  .purpose-art-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 52% center !important;
  }
  .purpose-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(44vw, 520px) !important;
    margin-left: auto !important;
    padding: clamp(36px, 4vw, 54px) !important;
    align-self: center !important;
    border-top: 4px solid var(--aurum-gold) !important;
    border-radius: var(--modern-radius) !important;
    background: rgba(184,25,31,.94) !important;
    box-shadow: 0 28px 74px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(5px);
  }
  .purpose-panel h2 { margin: 22px 0 28px !important; }
  .purpose-panel > p:last-child {
    max-width: 430px !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
  }

  .values,
  .work-section,
  .people {
    padding: var(--desktop-section-y) var(--desktop-gutter) !important;
  }
  .work-section .section-index,
  .people .section-index {
    margin-bottom: clamp(34px,3.5vw,50px) !important;
  }
  .work-intro {
    grid-template-columns: minmax(320px,.9fr) minmax(360px,1.1fr) !important;
    align-items: center !important;
    gap: clamp(48px,8vw,128px) !important;
    margin-bottom: clamp(42px,4.2vw,58px) !important;
  }
  .work-intro .body-copy {
    max-width: 520px !important;
    margin: 0 !important;
  }
  .work-rail { gap: 14px !important; }
  .work-card { min-height: 348px !important; }
  .people {
    grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr) !important;
    min-height: clamp(560px,46vw,650px) !important;
    align-content: center !important;
  }
  .people-layout { align-self: center !important; }
  .people-note { margin-top: 28px !important; }
  .people-media { height: clamp(350px,34vw,470px) !important; }

  .page-hero.has-work-media {
    grid-template-columns: minmax(430px,1fr) minmax(390px,.82fr) !important;
    min-height: clamp(600px,52vw,700px) !important;
    gap: clamp(56px,7vw,110px) !important;
    padding: clamp(82px,8vw,112px) var(--desktop-gutter) !important;
    align-items: center !important;
  }
  .has-work-media .work-hero-copy {
    align-self: center !important;
    max-width: 680px !important;
    padding-top: 0 !important;
  }
  .has-work-media .work-hero-media {
    width: 100% !important;
    height: clamp(440px,39vw,560px) !important;
    transform: none !important;
    border-radius: var(--modern-radius) !important;
  }
  .has-work-media .work-hero-copy h1 { white-space: normal !important; }

  .discipline {
    padding: var(--desktop-section-y) var(--desktop-gutter) !important;
  }
  .discipline .section-head,
  .discipline-grid {
    grid-template-columns: minmax(300px,.82fr) minmax(420px,1.18fr) !important;
    align-items: start !important;
    gap: clamp(58px,8vw,126px) !important;
  }
  .discipline .section-head {
    margin-bottom: clamp(50px,5vw,70px) !important;
  }
  .discipline .section-head[style] {
    margin-top: clamp(64px,7vw,92px) !important;
  }
  .discipline .section-head .lead,
  .discipline-note {
    max-width: 620px !important;
    margin: 0 !important;
  }
  .discipline-note {
    columns: 2 230px !important;
    column-gap: clamp(26px,3vw,42px) !important;
  }
  .infra-grid { margin-top: 12px !important; }

  .work-image-band,
  .work-community-context {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: clamp(610px,50vw,720px) !important;
    margin: 16px clamp(12px,2.2vw,30px) !important;
    padding: clamp(72px,7vw,100px) var(--desktop-gutter) !important;
    overflow: hidden !important;
    border-radius: var(--modern-radius) !important;
    background: var(--aurum-ink) !important;
    box-shadow: var(--modern-shadow) !important;
    isolation: isolate;
  }
  .work-image-band::before,
  .work-image-band::after,
  .work-community-context::before,
  .work-community-context::after {
    display: none !important;
  }
  .work-image-band figure,
  .work-community-context figure {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .work-image-band figure::before,
  .work-image-band figure::after,
  .work-community-context figure::before,
  .work-community-context figure::after {
    display: none !important;
  }
  .work-image-band figure img,
  .work-community-context figure img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
    transform: none !important;
  }
  .work-image-band figcaption,
  .work-community-context figcaption {
    z-index: 3 !important;
    left: auto !important;
    right: 28px !important;
    bottom: 24px !important;
    width: auto !important;
    max-width: 300px;
    text-align: right;
  }
  .work-image-band-copy,
  .work-community-context > div {
    position: relative !important;
    z-index: 2 !important;
    width: min(40vw,500px) !important;
    max-width: 500px !important;
    margin: 0 !important;
    padding: clamp(36px,4vw,52px) !important;
    transform: none !important;
    align-self: center !important;
    border-top: 4px solid var(--aurum-red) !important;
    border-radius: var(--modern-radius) !important;
    background: var(--desktop-copy-card) !important;
    color: var(--aurum-ink) !important;
    box-shadow: 0 28px 74px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(6px);
  }
  .work-image-band-copy h2,
  .work-community-context h2 {
    margin: 20px 0 24px !important;
    color: var(--aurum-ink) !important;
  }
  .work-image-band-copy > p:last-child,
  .work-community-context p:not(.work-image-kicker) {
    max-width: 390px !important;
    margin: 0 !important;
    color: rgba(25,22,19,.72) !important;
    opacity: 1 !important;
  }

  .work-image-operations,
  .work-image-access { justify-content: flex-end !important; }
  .work-image-human,
  .work-community-context { justify-content: flex-start !important; }
  .work-image-human .work-image-band-copy { width: min(37vw,460px) !important; }
  .work-image-human figure { order: initial !important; }
  .work-image-operations figure img,
  .work-image-human figure img,
  .work-image-access figure img { object-position: center center !important; }
  .work-community-context figure img { object-position: center 48% !important; }
  .work-image-operations .work-image-band-copy,
  .work-community-context > div {
    padding: clamp(36px,4vw,52px) !important;
    border-top-color: var(--aurum-gold) !important;
  }
  .work-community-context .work-image-kicker { color: var(--aurum-red) !important; }
  .work-community-context h2 em { color: var(--aurum-red) !important; }
}

/* ==========================================================================
   AUDIT-COMPLETE EDITORIAL PASS
   Selective scale, operational content states and protected image focal points.
   ========================================================================== */
/* .about-explore (the Our History/Leadership/Annual Reports/Careers card
   row) was removed from about.html on 2026-08-11 at the client's request —
   rules deleted with it rather than left as dead CSS. */

.global-reach{background:var(--modern-panel)}
.country-cloud{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}
.country-cloud span{padding:10px 13px;border:1px solid rgba(7,113,135,.35);border-radius:999px;background:rgba(182,226,233,.28);font-size:12px}
.reach-feature{max-width:980px;margin-top:40px;padding:clamp(28px,4vw,48px);border-top:4px solid var(--aurum-gold);border-radius:var(--modern-radius);background:var(--aurum-teal);color:#fff}
.reach-feature h3{max-width:760px;margin:22px 0;font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.035em}
.reach-feature>p:not(.eyebrow){max-width:760px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.84)}
.reach-feature .button{margin-top:20px}

.rfp-contact{margin-top:40px;padding:clamp(28px,4vw,44px);border-radius:var(--modern-radius);background:var(--aurum-ink);color:#fff}
.rfp-contact h3{margin:18px 0 12px;font-size:clamp(28px,3vw,42px)}
.rfp-contact p:not(.eyebrow){max-width:660px;color:rgba(255,255,255,.78)}
.rfp-contact .button{margin-top:16px}
.rfp-empty strong{color:var(--aurum-red)}

.feature-card{scroll-margin-top:100px}
.feature-card-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;color:var(--aurum-red);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.feature-card-link span{font-size:15px}
.health-link-pending{cursor:default!important;opacity:.72}
.health-link-pending>span:last-child{font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.1em;color:var(--aurum-red)}

.story-card--text{min-height:210px;border-top:3px solid var(--aurum-gold);display:flex}
.story-card--text>div{display:flex;flex-direction:column;justify-content:flex-end;width:100%;padding:24px!important}
.story-card--text .kicker{margin-bottom:auto;color:var(--aurum-red)}
/* 2026-08-16: video-carrying story cards (currently just DriveDx4TB TOO's
   "TB Diagnostics Have a Face" series). The offline-safe build uses a
   normal outbound video link rather than a third-party embed. */
.story-card--video{display:flex;flex-direction:column}
.story-card--video .story-video{position:relative;aspect-ratio:16/9;background:var(--aurum-ink)}
.story-card--video .story-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.story-card--video .story-video--external{display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--aurum-teal),var(--aurum-ink))}
.story-card--video .story-video--external a{color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}
.story-card--video>div:last-child{padding:20px!important}
.story-card--video .kicker{color:var(--aurum-red)}
.story-card--video h3{font-size:22px!important}
.content-status{grid-column:1/-1;padding:28px;border:1px solid rgba(7,113,135,.35);border-radius:var(--modern-radius);background:rgba(182,226,233,.22)}
.content-status strong,.content-status span{display:block}
.content-status strong{font-size:23px;margin-bottom:8px}
.content-status span{color:var(--modern-slate);font-size:14px}
.project-support{background:var(--aurum-gold)}
.project-actions,.project-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.project-actions{margin-top:24px}
.project-actions .button,.project-cta-actions .button{width:auto}
.project-cta-actions{justify-content:center;margin-top:22px}
[id]{scroll-margin-top:96px}

@media(min-width:851px){
  .discipline>.section-head h2,
  .project-section>.section-head h2,
  .page-section>.section-head h2,
  .resource-feature h2{
    font-size:clamp(40px,4.1vw,54px)!important;
    line-height:1.01!important
  }
  .purpose-panel{
    width:min(36vw,500px)!important;
    margin-left:0!important;
    margin-right:auto!important;
    padding:clamp(36px,3.7vw,50px)!important
  }
  .purpose-panel h2{font-size:clamp(40px,4vw,54px)!important}
  .purpose::after{background:linear-gradient(90deg,rgba(25,22,19,.5),rgba(25,22,19,.04) 40%,rgba(25,22,19,.04))!important}
  .purpose-art-image{object-position:center center!important}
  .people{grid-template-columns:minmax(440px,1fr) minmax(440px,1.05fr)!important}
  .people-layout .display{font-size:clamp(46px,5vw,68px)!important;line-height:.98!important;max-width:620px}
  .people-note{max-width:470px!important}
  .people-note p{max-width:430px!important;font-size:18px!important}
}
@media(max-width:850px){
  .about-explore{grid-template-columns:1fr 1fr}
  .reach-feature{padding:28px 22px}
}
@media(max-width:520px){
  .about-explore{grid-template-columns:1fr}
}
/* Final proportional pass: content-sized values and a true split What We Do hero. */
.values-grid article{min-height:238px!important;padding:22px!important}
.values-grid h3{font-size:clamp(27px,2.35vw,36px)!important;margin:auto 0 12px!important}
.values-grid p{font-size:15px!important;line-height:1.45!important;margin:0!important}
.feature-card.is-linked-target{outline:3px solid var(--aurum-gold);outline-offset:6px;scroll-margin-top:120px}
@media(min-width:851px){
  .values{padding-top:clamp(64px,6.5vw,88px)!important;padding-bottom:clamp(64px,6.5vw,88px)!important}
  .values-head{margin-bottom:clamp(34px,4vw,52px)!important}
  .page-hero.work-hero.has-work-media{
    position:relative!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;
    min-height:clamp(650px,56vw,760px)!important;padding:0 0 0 var(--desktop-gutter)!important;
    align-items:stretch!important;overflow:hidden!important
  }
  .work-hero.has-work-media::before{
    content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent 0 43%,rgba(25,22,19,.96) 49%,rgba(25,22,19,.44) 56%,transparent 66%)
  }
  .work-hero.has-work-media::after{display:none!important}
  .work-hero .work-hero-copy{
    position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
    align-self:stretch!important;max-width:none!important;padding:0 clamp(42px,6vw,88px) 0 0!important
  }
  .work-hero .work-hero-copy h1{font-size:clamp(68px,6.7vw,96px)!important;line-height:.88!important}
  .work-hero .work-hero-media{
    position:relative!important;inset:auto!important;width:100%!important;height:100%!important;
    min-height:inherit!important;margin:0!important;transform:none!important;border:0!important;
    border-radius:0!important;box-shadow:none!important
  }
  .work-hero .work-hero-media img{object-position:62% center!important}
  .work-image-human .work-image-band-copy{
    width:min(42vw,540px)!important;max-width:540px!important;
    padding:clamp(38px,4vw,54px)!important;overflow:visible!important
  }
  .work-image-human .work-image-band-copy h2{font-size:clamp(42px,4.7vw,66px)!important;line-height:.94!important}
}
@media(max-width:850px){
  .values-grid article{min-height:210px!important}
}
@media(min-width:851px){
  .hero--story .hero-image img{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:-6%!important;
    width:112%!important;
    max-width:none!important;
    transform:translateX(4%)!important;
    object-position:center 39%!important
  }
}
/* Six-point client review pass. */
.purpose-art span,
.purpose-art i{display:none!important}
.work-card .card-arrow,
.work-card:nth-child(1) .card-arrow,
.work-card:nth-child(2) .card-arrow,
.work-card:nth-child(3) .card-arrow{
  width:32px!important;height:32px!important;display:grid!important;place-items:center!important;
  border:1px solid var(--aurum-red)!important;border-radius:50%!important;
  background:#fff!important;color:var(--aurum-red)!important;opacity:1!important;
  font-size:22px!important;line-height:1!important
}
@media(min-width:851px){
  .people{grid-template-columns:minmax(520px,1.12fr) minmax(420px,.88fr)!important}
  .people-layout .display{max-width:720px!important;font-size:clamp(58px,5.5vw,78px)!important;line-height:.94!important}
  .people-note{max-width:540px!important}
  .people-note p{max-width:520px!important;font-size:19px!important;line-height:1.52!important}
  .page-section>.section-head:has(+ .purpose-grid){grid-template-columns:minmax(470px,1.05fr) minmax(480px,.95fr)!important;align-items:center!important}
  .page-section>.section-head:has(+ .purpose-grid) h2{max-width:none!important;white-space:nowrap}
  .work-hero.has-work-media::before{display:none!important}
  .work-hero .work-hero-media::before{
    content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:24%;display:block!important;
    background:linear-gradient(90deg,var(--modern-ink) 0%,rgba(25,22,19,.72) 28%,rgba(25,22,19,.24) 68%,transparent 100%);
    pointer-events:none
  }
  .work-hero .work-hero-media figcaption{z-index:3}
  .work-hero .work-hero-media img{object-position:82% 12%!important}
  .work-image-human .work-image-band-copy{
    width:min(34vw,460px)!important;max-width:460px!important;
    margin-left:clamp(55px,6vw,90px)!important
  }
}

/* Persistent history navigation: returns visitors to their prior scroll position. */
.page-back-control{
  position:fixed;
  z-index:9000;
  left:clamp(14px,2vw,28px);
  bottom:clamp(14px,2vw,26px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:var(--aurum-red);
  box-shadow:0 12px 32px rgba(205,32,38,.32);
  color:#fff;
  font:700 11px/1 Arial,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
  /* backdrop-filter removed 2026-08-11: this sits on a fully opaque
     var(--aurum-red) background, so blurring what's behind it was
     invisible — pure cost, no benefit. Combined with the header's own
     backdrop-filter below, these two fixed, always-on-screen blurred
     layers were forcing the browser to resample a blur on every single
     scroll frame, which is what was making scrolling feel slow. */
  transition:transform .2s ease,background .2s ease;
}
.page-back-control span:first-child{font-size:18px;line-height:1;color:var(--aurum-gold)}
.page-back-control:hover{transform:translateY(-2px);background:var(--aurum-ink)}
.page-back-control:focus-visible{outline:3px solid var(--aurum-gold);outline-offset:3px}
@media(max-width:640px){
  .page-back-control{left:12px;bottom:12px;padding:0 14px;min-height:42px}
}

/* Clean, edge-to-edge photographic compositions without card shadows. */
.page-hero.about-hero{
  margin-left:0!important;
  margin-right:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.about-hero .lead{text-shadow:none!important}
.page-hero.work-hero.has-work-media{
  margin-left:0!important;
  margin-right:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.work-hero .work-hero-media{box-shadow:none!important}
.work-hero .work-hero-media img{filter:none!important}
.discipline.gold .section-head h2 em{color:var(--aurum-red)!important;opacity:1!important}
@media(min-width:851px){
  .work-hero .work-hero-media::before{
    width:18%!important;
    background:linear-gradient(90deg,rgba(25,22,19,.68) 0%,rgba(25,22,19,.34) 38%,rgba(25,22,19,.1) 72%,transparent 100%)!important
  }
}

/* Story-page layout now lives entirely in story.css (single clean reading
   column). This file used to carry a competing 12-column !important grid
   for the same selectors, which is what caused the broken/overlapping
   story pages — removed rather than patched over. */

/* Mobile continuity fixes: full-height About overlay and content-sized People section. */
.page-hero.about-hero::before{
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-height:100%!important;
}
@media(max-width:850px){
  .people{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding:46px 20px 24px!important;
    overflow:hidden!important;
  }
  .people .section-index{order:1!important;margin-bottom:28px!important}
  .people-layout{order:2!important;width:100%!important;max-width:none!important;min-height:0!important}
  .people-media{
    position:relative!important;
    order:3!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1.38!important;
    margin:30px 0 0!important;
    bottom:auto!important;
    box-shadow:none!important;
  }
  .people-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .closing{margin-top:10px!important}
}

/* IMPAACT4HIV uses the entire section as its colour field. */
.page-section.global-reach{
  padding:clamp(56px,7vw,96px) clamp(28px,8vw,124px)!important;
  border-top:5px solid var(--aurum-gold)!important;
  background:var(--aurum-teal)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.global-reach .reach-feature{
  max-width:1100px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.global-reach .reach-feature h3{max-width:900px!important}
.global-reach .reach-feature>p:not(.eyebrow){max-width:900px!important}
@media(max-width:850px){
  .page-section.global-reach{padding:48px 22px!important}
}

/* Keep the Contact action clickable above the navigation hit area.
   2026-08-04: the old centre-nav offset hacks (nav a:nth-child(6) left
   shift, header-link translateX) were relics of the centred-logo layout
   and are removed now that the header uses a plain left-to-right grid. */
.site-header .header-link{
  position:relative!important;
  z-index:20!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
/* 2026-08-09: this used to force a min-width that fought whatever fixed
   grid track Contact happened to be sitting in that week, overflowing
   into whichever neighbour was closest. The header is flexbox now (see
   the "Final desktop header geometry" block above), so Contact just
   sizes to its own padding + text — nothing left here to override. */
@media(min-width:851px){
  .site-header .header-link{
    justify-content:center!important;
  }
}

/* 2026-08-09: client wants Cabinet Grotesk (Fontshare) on all headings and
   on the nav tab buttons specifically — a different face from the
   Neue Haas Grotesk stand-in used for body copy elsewhere. Loaded via
   @import at the top of this file so every page that already includes
   modern-refresh.css picks it up with no per-page <link> changes needed. */
h1,h2,h3,h4,h5,h6{
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif!important;
}
/* 2026-08-17: homepage-only — client wants headings here "more
   sophisticated and less bulky" than Cabinet Grotesk (a deliberately bold/
   expressive display face, approved sitewide 2026-08-09 — see the comment
   above). Scoped to body.home only, same reasoning and treatment already
   applied to the Where We Work country list: the site's own lighter body
   grotesk at a refined weight reads calmer without touching the
   already-approved sitewide heading face on every other page. */
body.home h1,body.home h2,body.home h3,body.home h4,body.home h5,body.home h6{
  font-family:var(--font-primary),Arial,sans-serif!important;
  font-weight:600!important;
}
.site-header nav[aria-label="Primary navigation"] a,
.site-header .header-link,
.site-header .nav-drop-menu a,
.mobile-nav a,
.menu-toggle b{
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif!important;
}

/* ==========================================================================
   Eyebrow / section-label system — 2026-08-11
   Client feedback: the small uppercase labels that sit above section
   headings (WHAT WE DO, WHERE WE WORK, RESOURCES & INSIGHTS, GET INVOLVED
   and every equivalent — .eyebrow, .kicker, .section-index,
   .work-image-kicker, .impact-hero-eyebrow) were rendering at 10px with no
   explicit font-weight, so they read as tiny afterthoughts rather than
   editorial section intros. One shared rule instead of per-file tweaks, so
   every instance site-wide gets the same treatment. Placed at the very end
   of this file (which already loads after every other stylesheet on every
   page) so it wins the cascade over the older 10px declarations scattered
   through the phase files, with no !important needed and no change to the
   colour/margin overrides each section already sets for itself.
   Deliberately typography-only: no layout, colour, spacing or content
   changes beyond the label text itself. ========================== */
.eyebrow,
.kicker,
.section-index,
.work-image-kicker,
.impact-hero-eyebrow{
  font-size:clamp(13px,1.05vw,16px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.3;
}
/* Scale the accent dash that already sits beside .section-index to stay
   proportionate to the larger label — same line, just wider. */
.section-index::before{
  width:34px;
}

/* ==========================================================================
   Interactive hover buttons — 2026-08-15
   Applies to every .button sitewide (structure built at runtime by
   assets/js/button-hover.js, since every template currently only has plain
   label text). Each button keeps whatever background colour it already had
   (red by default, ink on .discipline, etc. — untouched here) and gets a
   new hover mechanic layered on top: the label slides out and fades, a
   duplicate label+arrow slides in from the same direction, and a small gold
   dot expands from inside the button to fully cover it, giving the revealed
   text somewhere legible to sit. Pill shape (border-radius:999px) replaces
   the old subtle corner rounding — the growing-circle fill needs a pill to
   read as a clean wipe rather than leaving the old square corners exposed.
   Old hover-lift (`.button:hover{transform:translateY(-4px)}` in styles.css)
   is neutralised below so it doesn't fight this in-place fill/slide effect.

   Also fixes a real pre-existing gap found while building this: .button's
   base display/padding/background/colour was only ever defined in
   styles.css, which is enqueued homepage-only — every subpage use of
   .button (get-involved, single-project, single-health_area,
   page-where-we-work, single-story, page-implementation-research) has been
   rendering as unstyled inline text this whole time, not a button, unless
   it also happened to sit inside one of the contextual modifiers below
   (.discipline .button, .closing .button, etc.). Restated here so it's
   correct everywhere; styles.css's copy is now a harmless duplicate on the
   homepage specifically. */
.button{
  display:inline-flex;
  align-items:center;
  /* .button sits inside several flex/grid containers around the site
     (.invite-card, .project-actions, etc.) that don't set an explicit
     align-items, defaulting to stretch — without these, .button would
     stretch to fill the full cross-axis width of whichever container it's
     in instead of sizing to its own text, which is exactly what surfaced
     once .button actually had a working `display` on subpages (see the
     note above; it never did before this fix, so this stretching was
     always latent, just never visible). */
  align-self:flex-start;
  justify-self:start;
  gap:18px;
  background:var(--aurum-red);
  color:#fff;
  padding:18px 23px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  position:relative;
  overflow:hidden;
  border-radius:999px;
  isolation:isolate;
}
.button:hover{
  transform:none!important;
}

/* 2026-08-16: gives the nav "Contact" link (.header-link) the exact same
   gold-fill hover mechanics as .button, without giving it the .button
   CLASS — see the comment in button-hover.js's enhanceButtons() for why.
   Only the 3 properties the dot-fill effect actually needs are added here;
   everything else about .header-link's box (background, padding, all its
   breakpoint-specific positioning) is untouched. */
.header-link{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* 2026-08-16: the box's own width turned out to be driven entirely by
     .button-label's in-flow content (confirmed by testing — making the
     label position:absolute collapsed the whole box to ~38px, padding
     only). That explains the earlier 9px left/right imbalance too: with
     an auto/content-driven width, text-align:center has nothing stable to
     center within once the hover-label and dot (both already absolute)
     are factored in. min-width fixes the box at its natural rendered size
     (measured 107.86px) so it's no longer ambiguous. */
  min-width:108px;
}
/* 2026-08-16: two other approaches (text-align:center, then positioning
   .button-label the same absolute+inset:0 way .button-label-hover does)
   both failed to actually center the visible text. Root cause found via
   grep: several breakpoint-specific rules elsewhere in this same file
   (e.g. ".site-header .header-link{padding-left:16px!important}" at
   min-width:851px, ".site-header .header-link{padding:12px 14px!important}"
   in a narrower tablet range) all use the higher-specificity descendant
   selector ".site-header .header-link" with !important — a plain
   ".header-link{padding-left:22px!important}" (fewer classes = lower
   specificity) can never beat them regardless of !important or file order.
   Repeating the class matches/exceeds every one of those unconditionally,
   so it wins at every breakpoint without having to chase each one down. */
.site-header .header-link.header-link{
  padding-left:22px!important;
  padding-right:22px!important;
}
/* 2026-08-16: .header-link has ~10 breakpoint-specific rules scattered
   across older CSS passes (styles.css, subpage.css, story.css,
   modern-refresh.css itself) — one of them wins the cascade on the dot's
   transform specifically and was leaving it visible at rest (scale(0) from
   .button-dot got overridden back to none). This selector is specific
   enough to win regardless of file order. */
.header-link .button-dot{
  transform:scale(0);
}
.header-link:hover .button-dot{
  transform:scale(1.6);
}
/* 2026-08-16: found the actual centering culprit — styles.css has a legacy
   ".header-link span{margin-left:9px}" rule from when the dot sat inline
   beside the text. button-hover.js's generated .button-label span still
   matches that old selector, so the (now purely decorative, absolutely
   positioned) dot's spacing was still shoving the visible text 9px off
   centre even with padding balanced. Zeroing it here is what actually
   fixes the imbalance. */
.header-link .button-label{
  margin-left:0;
}
.button-label,
.button-label-hover{
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .35s var(--ease-editorial,ease),opacity .3s var(--ease-editorial,ease);
}
.button-label{
  transform:translateX(0);
}
/* 2026-08-16: the actual "missing text" bug — styles.css has a legacy
   ".button span{color:var(--red)}" rule from before .button-label existed
   (meant for a small icon span). button-hover.js's generated .button-label
   span matches it too, forcing red text regardless of variant. On
   .button-invert (white bg) that accidentally looked right, which is why
   it went unnoticed; on plain .button (red bg, e.g. the hero "Read the
   full story" buttons) it's red text on a red background — invisible.
   .button-label was always meant to just inherit color from its parent
   (#fff from .button, var(--aurum-red) from .button-invert); pinning it
   explicitly here beats the legacy rule's specificity. */
.button .button-label{
  color:#fff;
}
.button-invert .button-label{
  color:var(--aurum-red);
}
.button:hover .button-label,
.header-link:hover .button-label{
  transform:translateX(16px);
  opacity:0;
}
.button-label-hover{
  position:absolute;
  inset:0;
  justify-content:center;
  transform:translateX(16px);
  opacity:0;
  color:var(--aurum-ink);
  pointer-events:none;
}
.button:hover .button-label-hover,
.header-link:hover .button-label-hover{
  transform:translateX(0);
  opacity:1;
}
.button-icon{
  width:15px;
  height:15px;
  flex:none;
}
.button-dot{
  position:absolute;
  left:20%;
  top:40%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--aurum-gold);
  /* 2026-08-16: this was scale(1) at rest — a permanently-visible small
     gold speck on every .button sitewide, easy to miss on the red base
     buttons but glaring on the white .button-invert ones. Starts hidden
     now and only appears as part of the hover/tap/peek fill-in. */
  transform:scale(0);
  transition:all .4s var(--ease-editorial,ease);
  z-index:-1;
  pointer-events:none;
}
.button:hover .button-dot,
.header-link:hover .button-dot{
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:scale(1.6);
}
.header-link:hover .button-label-hover{color:var(--aurum-ink)}

/* 2026-08-16: for a .button sitting on a background that's already red
   (the footer's donate band, and anywhere else a CTA needs to read against
   a colored section rather than the usual white/cream page background) —
   only the resting state changes here. The hover mechanics (.button-dot
   filling gold, .button-label-hover in dark ink) are unchanged and still
   work correctly on top of these different resting colors. */
.button-invert{
  background:#fff;
  color:var(--aurum-red);
}
.button-invert .button-label-hover{
  color:var(--aurum-ink);
}

/* 2026-08-16: :hover doesn't exist on touch devices, so the fill effect
   above was invisible on mobile until a tap happened to land and stick
   (and even then, only the OS's synthetic "sticky hover" — inconsistent
   and not something to rely on). @media(hover:none) is the real signal for
   "this device's primary input has no hover concept", not a viewport width
   guess. Two touch-specific treatments, both gated behind it:
   1) :active swaps instantly on touch-down, faster than the desktop
      transition, so a tap gets real feedback the moment a finger lands.
   2) A one-time "peek" (see aurumEnhanceButtons' IntersectionObserver in
      button-hover.js) briefly grows the dot as each button first scrolls
      into view, then settles back — teaching that it's tappable without
      requiring the tap, which is the mobile equivalent of what hover
      discovery does for free on desktop. */
@media (hover:none){
  .button:active .button-dot,
  .header-link:active .button-dot{
    left:0;top:0;width:100%;height:100%;
    transform:scale(1.6);
    transition:all .15s var(--ease-editorial,ease);
  }
  .button:active .button-label,
  .header-link:active .button-label{transform:translateX(16px);opacity:0}
  .button:active .button-label-hover,
  .header-link:active .button-label-hover{transform:translateX(0);opacity:1;color:var(--aurum-ink)}

  @keyframes aurum-button-peek-dot{
    0%,100%{transform:scale(0)}
    50%{transform:scale(3.4)}
  }
  @keyframes aurum-button-peek-label{
    0%,100%{transform:translateX(0);opacity:1}
    50%{transform:translateX(5px);opacity:.4}
  }
  .button.is-peeking .button-dot,
  .header-link.is-peeking .button-dot{animation:aurum-button-peek-dot 1s var(--ease-editorial,ease)}
  .button.is-peeking .button-label,
  .header-link.is-peeking .button-label{animation:aurum-button-peek-label 1s var(--ease-editorial,ease)}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .button.is-peeking .button-dot,.button.is-peeking .button-label{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .button-label,.button-label-hover,.button-dot{transition:none}
}


/* 2026-08-18 mobile performance: the Get Involved hero keeps the exact
   same crop/overlay, but phones download the 768px derivative instead of
   the 1600px source image. Desktop remains untouched for maximum quality. */
@media(max-width:850px){
  .involve-hero{
    background-image:
      linear-gradient(90deg,rgba(25,22,19,.82),rgba(25,22,19,.34)),
      url("../responsive/photos/client/what-we-do/community-consultation-768.jpg")!important;
  }
}


.section-head--single > h2::before,
.latest-stories-head > h2::before{
  content:""!important;
  display:block!important;
  flex:0 0 5px!important;
  width:5px!important;
  height:.88em!important;
  min-height:34px!important;
  border-radius:4px!important;
  background:var(--aurum-red)!important;
}
@media(max-width:850px){
  .section-head--single > h2,
  .latest-stories-head > h2{gap:13px!important;}
  .section-head--single > h2::before,
  .latest-stories-head > h2::before{
    flex-basis:4px!important;
    width:4px!important;
    min-height:28px!important;
  }
}


/* =====================================================================
   2026-09-03 — SITEWIDE OPTION-2 SECTION HEADINGS
   Mirrors the approved DriveDx treatment exactly.
   ===================================================================== */
.section-head--single > h2,
.latest-stories-head > h2{
  position:relative!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0!important;
  padding-left:20px!important;
  border-left:5px solid var(--aurum-red)!important;
  font-size:clamp(32px,3vw,46px)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
}
.section-head--single > h2::before,
.latest-stories-head > h2::before{
  content:none!important;
  display:none!important;
}
@media(max-width:700px){
  .section-head--single > h2,
  .latest-stories-head > h2{
    padding-left:14px!important;
    border-left-width:4px!important;
    font-size:clamp(28px,8.2vw,35px)!important;
  }
}

/* ===== SOURCE: density-review.css ===== */
/* Marlize review: desktop-only editorial density.
   Content, imagery, order and mobile compositions remain unchanged. */
@media (min-width:851px){
  :root{--density-y:clamp(48px,5.2vw,76px);--density-x:clamp(44px,7vw,112px);--density-gap:clamp(22px,3.5vw,52px)}
  main>section{scroll-margin-top:104px}
  .hero,.page-hero,.page-hero.has-work-media,.area-hero,.project-hero,.story-hero{min-height:clamp(520px,61vh,690px)!important}
  .hero.hero--story{height:min(760px,calc(100vh - 88px))!important;min-height:620px!important}
  .page-hero,.area-hero,.project-hero,.story-hero{padding-top:clamp(92px,9vw,126px)!important;padding-bottom:clamp(54px,6vw,84px)!important}
  .page-hero.has-work-media{padding-right:var(--density-x)!important;gap:clamp(26px,4vw,60px)!important}
  .has-work-media .work-hero-media{height:clamp(390px,38vw,520px)!important;transform:none!important}
  .page-section,.area-section,.project-section,.discipline,.values,.work-section,.leadership,.phase8-media-section{min-height:0!important;padding:var(--density-y) var(--density-x)!important}
  .section-head,.work-intro,.values-head{gap:var(--density-gap)!important;margin-bottom:clamp(26px,3vw,44px)!important}
  .section-head .lead,.body-copy,.lead{max-width:720px}
  .purpose{padding:var(--density-y) var(--density-x)!important;min-height:0!important;gap:clamp(30px,5vw,76px)!important}
  .purpose-art{min-height:300px!important}
  .values{padding-bottom:clamp(46px,5vw,72px)!important}
  .values-grid{gap:12px!important}
  .values-grid article{min-height:230px!important;padding:24px 20px!important}
  .work-card{min-height:348px!important}
  .people{padding:var(--density-y) var(--density-x)!important;gap:clamp(34px,5vw,78px)!important}
  .closing{padding:clamp(54px,6vw,86px) var(--density-x)!important}
  .about-introduction .about-introduction-grid{
    height:auto!important;
    min-height:clamp(680px,56vw,790px)!important;
  }
  .page-section.about-introduction{
    margin:0!important;
    padding:0 0 var(--density-y)!important;
    border-radius:0!important;
  }
  .about-introduction .about-introduction-grid{border-radius:0!important}
  .page-hero.about-hero{
    margin:0!important;
    border-radius:0!important;
  }
  .about-introduction-copy{padding:clamp(34px,4.4vw,60px)!important}
  .about-introduction-copy h2{margin-bottom:20px!important;font-size:clamp(58px,7vw,96px)!important}
  .about-introduction .proof-grid{
    margin:10px var(--density-x) 0!important;
    gap:10px!important;
  }
  /* .about-explore rules removed 2026-08-11 with the section itself. */
  .proof-card,.purpose-card{min-height:0!important;padding:clamp(24px,2.5vw,34px)!important}
  .proof-card h3{margin:34px 0 14px!important}
  .purpose-grid .purpose-card h3{margin-top:28px!important;font-size:clamp(32px,3vw,44px)!important;line-height:1!important}
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .timeline::before,.timeline-dot{display:none!important}
  .timeline-item{display:block!important;min-height:0!important;padding:clamp(20px,2vw,28px)!important;margin:0!important}
  .timeline-year{text-align:left!important}
  .timeline-copy h3{font-size:clamp(24px,2.1vw,32px)!important;line-height:1!important;margin:14px 0 12px!important}
  .timeline-copy p{font-size:14px!important;line-height:1.48!important}
  .history .section-head,.leadership .section-head{margin-bottom:24px!important}
  .history .phase8-history-image{
    height:auto!important;
    min-height:0!important;
    margin-top:24px!important;
    background:transparent!important;
  }
  .history .phase8-history-image img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .leadership .leadership-group{margin-top:clamp(24px,2.5vw,36px)!important}
  .leadership .leadership-group>h3{margin-bottom:16px!important;font-size:clamp(26px,2.7vw,40px)!important}
  .leadership .profile-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
  /* Keep the leadership grid compact without sacrificing the future portraits. */
  .leadership .portrait-placeholder{height:clamp(184px,17vw,226px)!important;background:#eee9dd!important}
  .leadership .portrait-placeholder img{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 18%!important;
  }
  .leadership .portrait-placeholder:has(img)::before,
  .leadership .portrait-placeholder:has(img)::after{display:none!important}
  .leadership .profile-meta{padding:14px!important}
  .leadership .profile-name{font-size:clamp(19px,1.55vw,24px)!important;line-height:1!important}
  .leadership .profile-action{margin-top:10px!important}
  .discipline .section-head{margin-bottom:clamp(22px,2.7vw,38px)!important}
  .discipline .section-head[style]{margin-top:clamp(42px,5vw,72px)!important}
  .discipline-grid{gap:clamp(26px,4vw,60px)!important}
  .infra-grid{gap:10px!important}
  .infra-card{min-height:250px!important;padding:22px!important}
  .work-image-band,.work-community-context{min-height:clamp(540px,45vw,620px)!important;padding:clamp(34px,4vw,56px) var(--density-x)!important;gap:clamp(30px,4.8vw,72px)!important}
  .work-image-band figure,.work-community-context figure{height:100%!important;min-height:0!important}
  .work-image-operations figure img{object-position:56% 38%!important}
  .work-image-human figure img{object-position:52% 44%!important}
  .work-image-band-copy h2,.work-community-context h2{margin-bottom:16px!important;font-size:clamp(42px,4.6vw,68px)!important}
  .health-link,.health-link:nth-child(odd),.health-link:nth-child(even){min-height:92px!important;padding:16px 14px!important}
  .story-content,.project-content,.area-content{padding-top:clamp(40px,5vw,68px)!important;padding-bottom:clamp(48px,6vw,82px)!important}
  .story-body{max-width:1120px!important;padding:clamp(30px,3.4vw,50px)!important}
  .story-body>p,.story-body blockquote{max-width:780px}
  .story-body figure{max-width:920px;margin-top:clamp(28px,3.5vw,48px)!important;margin-bottom:clamp(28px,3.5vw,48px)!important}
  .story-next,.area-cta,.project-cta,.footprint-note{padding:clamp(38px,4.8vw,64px) var(--density-x)!important}
  .site-footer,footer{padding-top:22px!important;padding-bottom:22px!important}
}
@media (min-width:1180px){
  .history .timeline{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .history .timeline-item{padding:18px!important}
  .history .timeline-copy h3{font-size:clamp(21px,1.7vw,27px)!important}
  .history .timeline-copy p{font-size:13px!important;line-height:1.42!important}
  .leadership .profile-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .leadership .portrait-placeholder{height:184px!important}
  .leadership .profile-meta{padding:12px!important}
  .leadership .profile-name{font-size:clamp(18px,1.35vw,21px)!important}
  .infra-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .infra-card{min-height:270px!important;padding:20px 18px!important}
  .infra-card h3{font-size:clamp(22px,1.75vw,28px)!important;line-height:.98!important}
  .infra-card p{font-size:13px!important;line-height:1.42!important}
}

/* About-page photographic handoff: crisp white divider with restrained gold accents. */
.about-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:8px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:linear-gradient(90deg,#fff 0 11%,var(--aurum-gold) 11% 17%,#fff 17% 83%,var(--aurum-gold) 83% 89%,#fff 89% 100%)!important;
  pointer-events:none!important;
}
.about-introduction-media::before{
  display:none!important;
}
@media(max-width:850px){
  .about-hero::after{height:6px!important}
}

/* About overview gateways and dedicated detail routes. */
.about-gateways{background:#fff!important}
.about-purpose{display:grid!important;grid-template-columns:minmax(300px,.78fr) minmax(460px,1.22fr)!important;gap:clamp(44px,7vw,110px)!important;align-items:stretch!important;background:#fff!important}
.about-purpose .section-head{display:flex!important;height:100%!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;margin:0!important}
.about-purpose .section-index{margin:0 0 28px!important}
.about-purpose .section-head h2{max-width:560px!important;font-size:clamp(58px,6.7vw,94px)!important;line-height:.86!important}
.about-purpose .section-head h2 em{color:var(--aurum-red)!important}
.about-purpose .section-head .lead{max-width:560px!important;margin:clamp(42px,5vw,66px) 0 0!important;padding:0!important;font-size:clamp(21px,1.7vw,25px)!important;line-height:1.56!important}
.about-purpose .purpose-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
.about-purpose .purpose-card{display:flex!important;min-height:230px!important;flex-direction:column!important;justify-content:space-between!important;padding:clamp(28px,3.2vw,44px)!important}
.about-purpose .purpose-card h3{max-width:680px!important;margin:38px 0 0!important;font-size:clamp(28px,3.2vw,46px)!important;line-height:1!important}
.gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gateway-card{display:flex;min-height:250px;flex-direction:column;padding:clamp(26px,3.2vw,44px);border-radius:var(--modern-radius);color:#fff;text-decoration:none;overflow:hidden;transition:transform .28s ease}
.gateway-card:hover{transform:translateY(-4px)}
.gateway-history{background:var(--aurum-ink)}
.gateway-leadership{background:var(--aurum-teal)}
.gateway-reports{background:var(--aurum-red)}
.gateway-careers{background:var(--aurum-slate)}
.gateway-card span{color:var(--aurum-gold);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.gateway-card h3{max-width:620px;margin:34px 0 14px;color:#fff;font-size:clamp(28px,3vw,42px);line-height:.98;letter-spacing:-.045em}
.gateway-card p{max-width:560px;margin:0 0 22px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.84)}
.gateway-card b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--aurum-gold)}
.about-detail-history .about-hero,.about-detail-leadership .about-hero{min-height:clamp(380px,48vh,540px)!important}
@media(max-width:850px){.about-purpose{grid-template-columns:1fr!important;gap:34px!important}.about-purpose .purpose-card{min-height:210px!important}.gateway-grid{grid-template-columns:1fr}.gateway-card{min-height:230px}.about-gateways{padding:54px 22px!important}}

/* What We Do overview and dedicated discipline routes. */
.work-pathways{background:#fff!important}
.pathway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pathway-card{display:grid;grid-template-rows:190px 1fr;min-width:0;overflow:hidden;border-radius:var(--modern-radius);color:var(--aurum-ink);text-decoration:none;transition:transform .3s ease}
.pathway-card:hover{transform:translateY(-5px)}
.pathway-card figure{height:190px;margin:0;overflow:hidden;background:var(--aurum-ink)}
.pathway-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pathway-card>div{display:flex;min-height:300px;flex-direction:column;padding:26px}
.pathway-clinical>div{background:var(--aurum-red);color:#fff}.pathway-implementation>div{background:var(--aurum-teal);color:#fff}.pathway-systems>div{background:var(--aurum-gold)}
.pathway-card span,.pathway-card b{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.pathway-card span{color:var(--aurum-gold)}.pathway-systems span{color:var(--aurum-red)}
.pathway-card h3{margin:32px 0 14px;font-size:clamp(28px,2.6vw,40px);line-height:.96;letter-spacing:-.05em}
.pathway-card p{margin:0 0 26px;font-size:14px;line-height:1.5;opacity:.85}
.pathway-card b{margin-top:auto;color:inherit}
.work-overview-infrastructure{background:var(--aurum-ink)!important;color:#fff}
.infrastructure-intro{display:grid;grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:clamp(38px,6vw,90px);align-items:center}
.infrastructure-intro figure{height:clamp(320px,32vw,460px);margin:0;overflow:hidden;border-radius:var(--modern-radius)}
.infrastructure-intro img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.infrastructure-intro .lead{color:rgba(255,255,255,.76)}
.infrastructure-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:38px}
.infrastructure-tiles article{min-height:140px;padding:20px;border:1px solid rgba(255,255,255,.22);border-top:3px solid var(--aurum-gold)}
.infrastructure-tiles b{font-size:10px;color:var(--aurum-gold)}
.infrastructure-tiles h3{margin:34px 0 0;font-size:clamp(17px,1.5vw,22px);line-height:1.02}
.overview-text-link{display:inline-flex;margin-top:26px;color:var(--aurum-gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.work-detail-clinical .work-hero,.work-detail-implementation .work-hero,.work-detail-systems .work-hero{min-height:clamp(420px,54vh,590px)!important}
@media(max-width:850px){.pathway-grid{grid-template-columns:1fr}.pathway-card{grid-template-rows:180px 1fr}.pathway-card>div{min-height:260px}.infrastructure-intro{grid-template-columns:1fr}.infrastructure-intro figure{height:auto}.infrastructure-intro img{height:auto;object-fit:contain}.infrastructure-tiles{grid-template-columns:1fr 1fr}.infrastructure-tiles article:last-child{grid-column:1/-1}}

/* Unique editorial media for selected health-area introductions. */
.area-hero-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
.area-hero.has-area-media{padding:0!important}
.area-hero.has-area-media .area-hero-layout{grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);min-height:clamp(520px,62vh,680px)}
.area-hero.has-area-media .area-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,8vw,124px) clamp(38px,7vw,116px)}
.area-hero-media{min-width:0;margin:0;overflow:hidden;background:var(--aurum-ink)}
.area-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:850px){.area-hero.has-area-media .area-hero-layout{grid-template-columns:1fr;min-height:0}.area-hero.has-area-media .area-hero-copy{padding:56px 22px 38px}.area-hero-media{height:auto}.area-hero-media img{height:auto;max-height:none;object-fit:contain}}

/* 2026-08-04 visual correction: hero media should feel integrated, not split in half. */
@media(min-width:851px){
  .work-overview .page-hero.work-hero.has-work-media,
  .work-detail-clinical .page-hero.work-hero.has-work-media{
    display:block!important;
    min-height:clamp(620px,64vh,780px)!important;
    padding:0!important;
    background:var(--aurum-ink)!important;
    color:#fff!important;
  }
  .work-overview .work-hero-copy,
  .work-detail-clinical .work-hero-copy{
    position:relative!important;
    z-index:4!important;
    width:min(680px,52vw)!important;
    max-width:none!important;
    min-height:inherit!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:clamp(96px,9vw,132px) clamp(42px,7vw,116px)!important;
  }
  .work-overview .work-hero-copy h1,
  .work-detail-clinical .work-hero-copy h1{
    font-size:clamp(66px,6.4vw,104px)!important;
    line-height:.88!important;
  }
  .work-overview .work-hero-copy .lead,
  .work-detail-clinical .work-hero-copy .lead{
    color:rgba(255,255,255,.88)!important;
  }
  .work-overview .work-hero-media,
  .work-detail-clinical .work-hero-media{
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--aurum-ink)!important;
  }
  .work-overview .work-hero-media img,
  .work-detail-clinical .work-hero-media img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    filter:saturate(1.06) contrast(1.03)!important;
  }
  .work-overview .work-hero-media img{
    object-position:55% 45%!important;
  }
  .work-detail-clinical .work-hero-media img{
    object-position:63% 45%!important;
  }
  .work-overview .work-hero-media::before,
  .work-detail-clinical .work-hero-media::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    width:auto!important;
    background:
      linear-gradient(90deg,rgba(25,22,19,.92) 0%,rgba(25,22,19,.78) 30%,rgba(205,32,38,.22) 52%,rgba(25,22,19,.08) 100%),
      linear-gradient(0deg,rgba(25,22,19,.68),transparent 48%)!important;
    pointer-events:none!important;
  }
  .work-overview .work-hero-media::after,
  .work-detail-clinical .work-hero-media::after{
    content:""!important;
    position:absolute!important;
    z-index:3!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:7px!important;
    background:linear-gradient(90deg,var(--aurum-red),var(--aurum-gold),var(--aurum-teal),var(--aurum-orange))!important;
  }
  .work-overview .work-hero-media figcaption,
  .work-detail-clinical .work-hero-media figcaption{
    left:auto!important;
    right:clamp(30px,5vw,72px)!important;
    bottom:clamp(28px,4vw,52px)!important;
    z-index:4!important;
    text-align:right!important;
  }
}
@media(max-width:850px){
  .work-overview .page-hero.work-hero.has-work-media,
  .work-detail-clinical .page-hero.work-hero.has-work-media{
    display:flex!important;
    min-height:640px!important;
    padding:0!important;
    align-items:flex-end!important;
    color:#fff!important;
    background:var(--aurum-ink)!important;
  }
  .work-overview .work-hero-copy,
  .work-detail-clinical .work-hero-copy{
    position:relative!important;
    z-index:4!important;
    padding:120px 22px 44px!important;
  }
  .work-overview .work-hero-media,
  .work-detail-clinical .work-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    border-radius:0!important;
  }
  .work-overview .work-hero-media img,
  .work-detail-clinical .work-hero-media img{
    height:100%!important;
    width:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .work-overview .work-hero-media::before,
  .work-detail-clinical .work-hero-media::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    width:auto!important;
    background:linear-gradient(0deg,rgba(25,22,19,.9) 0%,rgba(25,22,19,.5) 58%,rgba(25,22,19,.18) 100%)!important;
  }
  .work-overview .work-hero-media figcaption,
  .work-detail-clinical .work-hero-media figcaption{
    display:none!important;
  }
}

.work-overview-infrastructure{
  background:
    radial-gradient(circle at 12% 0%,rgba(205,32,38,.28),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(7,113,135,.34),transparent 31%),
    linear-gradient(135deg,#171310 0%,#1f1713 62%,#4b241c 100%)!important;
}
.work-overview-infrastructure .section-index{
  color:var(--aurum-red)!important;
}
.work-overview-infrastructure h2 em{
  color:var(--aurum-gold)!important;
}
.work-overview-infrastructure .infrastructure-intro figure{
  border:1px solid rgba(224,172,38,.58)!important;
  border-top:6px solid var(--aurum-gold)!important;
}
.infrastructure-tiles article:nth-child(1){border-top-color:var(--aurum-red)!important}
.infrastructure-tiles article:nth-child(2){border-top-color:var(--aurum-teal)!important}
.infrastructure-tiles article:nth-child(3){border-top-color:var(--aurum-gold)!important}
.infrastructure-tiles article:nth-child(4){border-top-color:var(--aurum-orange)!important}
.infrastructure-tiles article:nth-child(5){border-top-color:var(--aurum-light-blue)!important}
.infrastructure-tiles article{
  background:rgba(255,255,255,.045)!important;
}

/* TB health area: use the supplied lab-sign image as a full editorial hero. */
body[data-area="tb"] .area-hero.has-area-media{
  padding:0!important;
  background:var(--aurum-ink)!important;
  color:#fff!important;
}
@media(min-width:851px){
  body[data-area="tb"] .area-hero.has-area-media .area-hero-layout{
    display:block!important;
    min-height:clamp(560px,64vh,760px)!important;
  }
  body[data-area="tb"] .area-hero-copy{
    position:relative!important;
    z-index:4!important;
    width:min(720px,54vw)!important;
    min-height:inherit!important;
    justify-content:center!important;
    padding:clamp(92px,9vw,132px) clamp(42px,7vw,116px)!important;
  }
  body[data-area="tb"] .area-hero-media{
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:0!important;
  }
  body[data-area="tb"] .area-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 46%!important;
    filter:saturate(1.08) contrast(1.02)!important;
  }
  body[data-area="tb"] .area-hero-media::after{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:
      linear-gradient(90deg,rgba(25,22,19,.94) 0%,rgba(25,22,19,.78) 38%,rgba(205,32,38,.24) 58%,rgba(7,113,135,.1) 100%),
      linear-gradient(0deg,rgba(25,22,19,.62),transparent 50%)!important;
  }
}
@media(max-width:850px){
  body[data-area="tb"] .area-hero.has-area-media .area-hero-layout{
    min-height:640px!important;
    display:flex!important;
    align-items:flex-end!important;
  }
  body[data-area="tb"] .area-hero-copy{
    position:relative!important;
    z-index:4!important;
    padding:120px 22px 42px!important;
  }
  body[data-area="tb"] .area-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  body[data-area="tb"] .area-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
body[data-area="tb"] .area-hero-media::after{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:linear-gradient(0deg,rgba(25,22,19,.92),rgba(25,22,19,.3) 78%)!important;
  }
}

/* 2026-08-04 focused fixes: clearer heroes, cleaner history, intentional About divider. */
.about-hero::after{
  z-index:5!important;
  height:8px!important;
  background:
    linear-gradient(90deg,var(--aurum-red) 0 28%,var(--aurum-gold) 28% 48%,var(--aurum-teal) 48% 78%,var(--aurum-orange) 78% 100%)!important;
}
.about-introduction{
  border-top:0!important;
}
.about-introduction .about-introduction-grid{
  border-top:0!important;
}
.about-introduction-media{
  border-top:0!important;
}

@media(min-width:851px){
  .work-overview .work-hero-media::before{
    background:
      linear-gradient(90deg,rgba(25,22,19,.93) 0%,rgba(25,22,19,.74) 28%,rgba(25,22,19,.42) 48%,rgba(25,22,19,.12) 74%,rgba(25,22,19,.18) 100%),
      linear-gradient(0deg,rgba(25,22,19,.66),transparent 52%)!important;
  }
  .work-detail-clinical .work-hero-media::before{
    background:
      linear-gradient(90deg,rgba(25,22,19,.94) 0%,rgba(25,22,19,.78) 36%,rgba(25,22,19,.28) 58%,rgba(25,22,19,.08) 100%),
      linear-gradient(0deg,rgba(25,22,19,.62),transparent 50%)!important;
  }
  .work-overview .work-hero-media img{
    object-position:58% 42%!important;
    filter:saturate(1.04) contrast(1.04)!important;
  }
  .work-detail-clinical .work-hero-media img{
    object-position:61% 44%!important;
    filter:saturate(1.04) contrast(1.03)!important;
  }
}

.work-image-operations figure img{
  object-position:center 44%!important;
}

@media(min-width:851px){
  .work-detail-implementation .page-hero.work-hero.has-work-media{
    position:relative!important;
    display:block!important;
    min-height:clamp(620px,72vh,760px)!important;
    overflow:hidden!important;
    background:#17120f!important;
  }
  .work-detail-implementation .work-hero-copy{
    position:relative!important;
    z-index:4!important;
    width:min(760px,54vw)!important;
    min-height:inherit!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:clamp(82px,8vw,118px) clamp(56px,7vw,110px)!important;
  }
  .work-detail-implementation .work-hero-copy h1{
    max-width:720px!important;
  }
  .work-detail-implementation .work-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .work-detail-implementation .work-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:54% 50%!important;
    filter:saturate(1.08) contrast(1.05)!important;
  }
  .work-detail-implementation .work-hero-media::before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:
      linear-gradient(90deg,rgba(25,22,19,.97) 0%,rgba(25,22,19,.88) 32%,rgba(25,22,19,.52) 52%,rgba(25,22,19,.12) 76%,rgba(25,22,19,.2) 100%),
      radial-gradient(circle at 74% 76%,rgba(224,172,38,.18),transparent 38%),
      linear-gradient(0deg,rgba(25,22,19,.66),transparent 54%)!important;
  }
  .work-detail-implementation .work-hero-media::after{
    content:""!important;
    position:absolute!important;
    z-index:3!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:7px!important;
    background:linear-gradient(90deg,var(--aurum-red),var(--aurum-gold),var(--aurum-teal),var(--aurum-orange))!important;
  }
  .work-detail-implementation .work-hero-media figcaption{
    z-index:4!important;
    right:clamp(34px,4vw,58px)!important;
    bottom:clamp(28px,3vw,46px)!important;
  }

  .work-image-operations{
    position:relative!important;
    display:block!important;
    min-height:clamp(560px,48vw,700px)!important;
    padding:0!important;
    overflow:hidden!important;
    background:#17120f!important;
  }
  .work-image-operations figure{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .work-image-operations figure img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:64% 48%!important;
    filter:saturate(1.04) contrast(1.04)!important;
  }
  .work-image-operations figure::after{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:
      linear-gradient(90deg,rgba(25,22,19,.56) 0%,rgba(25,22,19,.22) 30%,rgba(25,22,19,.04) 58%,rgba(25,22,19,.32) 100%),
      linear-gradient(0deg,rgba(25,22,19,.82),transparent 48%)!important;
  }
  .work-image-operations .work-image-band-copy{
    position:absolute!important;
    z-index:3!important;
    left:clamp(42px,7vw,118px)!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:min(480px,36vw)!important;
    margin:0!important;
    padding:clamp(30px,3.2vw,46px)!important;
    border-top:5px solid var(--aurum-gold)!important;
    border-radius:var(--modern-radius)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.22)!important;
  }
}

@media(max-width:850px){
  .work-detail-implementation .page-hero.work-hero.has-work-media{
    position:relative!important;
    display:block!important;
    min-height:620px!important;
    overflow:hidden!important;
    background:#17120f!important;
  }
  .work-detail-implementation .work-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }
  .work-detail-implementation .work-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:58% 50%!important;
  }
  .work-detail-implementation .work-hero-media::before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0!important;
    background:
      linear-gradient(0deg,rgba(25,22,19,.92) 0%,rgba(25,22,19,.58) 52%,rgba(25,22,19,.22) 100%),
      linear-gradient(90deg,rgba(25,22,19,.72),rgba(25,22,19,.08))!important;
  }
  .work-detail-implementation .work-hero-copy{
    position:relative!important;
    z-index:4!important;
    min-height:620px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    padding:120px 24px 54px!important;
  }
  .work-image-operations .work-image-band-copy{
    margin:16px!important;
  }
}

/* 2026-08-07: the dark history band and its 4/5-column card grid were
   replaced by the light zigzag timeline. All of that section's styling now
   lives in history-timeline.css, which loads last on history.html — the
   old block was removed here rather than overridden so the two don't fight
   through !important. Scoped to .about-detail-history, so history.html was
   the only page affected. */
.about-detail-history .phase8-history-image{
  border:1px solid rgba(224,172,38,.42)!important;
  border-top:6px solid var(--aurum-gold)!important;
  border-radius:var(--modern-radius)!important;
  overflow:hidden!important;
}

@media(max-width:850px){
  .about-hero::after{height:7px!important}
  .about-detail-history .history .section-head{
    align-items:start!important;
  }
}

/* 2026-08-10: client wants the photo hero gone on every subpage except the
   6 primary-nav hub pages plus Leadership and History — those keep their
   hero as-is. The images have been pulled from clinical-research.html,
   implementation-research.html, health-systems.html, health-area.html,
   project.html and the 4 story pages, but the min-height/padding rules
   earlier in this file (lines 6, 8 and 194) still force a tall band on
   .page-hero/.area-hero/.project-hero/.work-hero regardless of whether a
   photo is present. This block, appended last so it wins on source order,
   collapses those hero sections down to a slim text-only header. */
.work-detail-clinical .page-hero.work-hero,
.work-detail-implementation .page-hero.work-hero,
.work-detail-systems .page-hero.work-hero,
.area-hero,
.project-hero{
  min-height:0!important;
  padding-top:clamp(96px,10vw,132px)!important;
  padding-bottom:clamp(40px,5vw,56px)!important;
}
/* The old split-layout copy box positioned/padded itself off the ancestor
   body class alone (.work-detail-clinical .work-hero-copy etc.), never
   checking whether .has-work-media was actually present on the hero — so
   removing that modifier class from the hero didn't stop this from firing.
   Reset it back to a normal static block here, both breakpoints, since the
   old rules it's competing with are also scoped to min-width:851px and
   max-width:850px. */
.work-detail-clinical .work-hero-copy,
.work-detail-implementation .work-hero-copy,
.work-detail-systems .work-hero-copy{
  position:static!important;
  z-index:auto!important;
  width:auto!important;
  max-width:760px!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  padding:0!important;
}
@media(max-width:850px){
  .work-detail-clinical .page-hero.work-hero,
  .work-detail-implementation .page-hero.work-hero,
  .work-detail-systems .page-hero.work-hero,
  .area-hero,
  .project-hero{
    padding-top:92px!important;
    padding-bottom:36px!important;
  }
}

/* 2026-08-10b: removing the min-height/padding forcing above wasn't enough —
   these slim heroes still render huge because the h1/.lead inside them were
   inheriting the same 54-116px display type used on the six big hub-page
   heroes (and, for the clinical/implementation/systems trio, an even bigger
   66-104px override further up this file that only checked the ancestor
   body class, never .has-work-media). project.html is worse again since it
   stacks two .lead paragraphs plus a meta row plus action buttons under the
   headline. This block cuts the type scale down for a real text-only header
   and tightens the stacked spacing, without touching the hub pages,
   Leadership or History. */
.work-detail-clinical .work-hero-copy h1,
.work-detail-implementation .work-hero-copy h1,
.work-detail-systems .work-hero-copy h1,
.area-hero h1,
.project-hero h1{
  font-size:clamp(34px,4.2vw,54px)!important;
  line-height:.98!important;
  letter-spacing:-.03em!important;
  max-width:760px!important;
}
.work-detail-clinical .work-hero-copy .lead,
.work-detail-implementation .work-hero-copy .lead,
.work-detail-systems .work-hero-copy .lead,
.area-hero .lead,
.project-hero .lead{
  font-size:17px!important;
  line-height:1.5!important;
  max-width:640px!important;
  margin-top:14px!important;
}
.project-hero .lead + .lead{
  margin-top:8px!important;
}
.work-detail-clinical .work-hero-copy .eyebrow,
.work-detail-implementation .work-hero-copy .eyebrow,
.work-detail-systems .work-hero-copy .eyebrow,
.area-hero .eyebrow,
.project-hero .eyebrow{
  margin-bottom:14px!important;
}
.project-hero .project-meta{
  margin-top:18px!important;
}
.project-hero .project-actions{
  margin-top:18px!important;
}
@media(max-width:850px){
  .work-detail-clinical .work-hero-copy h1,
  .work-detail-implementation .work-hero-copy h1,
  .work-detail-systems .work-hero-copy h1,
  .area-hero h1,
  .project-hero h1{
    font-size:clamp(32px,8vw,44px)!important;
  }
}

/* 2026-08-10c: the TB health-area page has its own unscoped
   body[data-area="tb"] .area-hero-copy rule (lines ~381 and ~420) that,
   like the .work-hero-copy rules above, never checked .has-area-media —
   so it kept centering/padding the copy block as if the removed lab-sign
   photo were still there. Same leftover-trap pattern, same fix: reset it
   back to a normal static block so the type-scale rules above actually
   control the visible size. */
body[data-area="tb"] .area-hero-copy{
  position:static!important;
  z-index:auto!important;
  width:auto!important;
  min-height:0!important;
  justify-content:flex-start!important;
  padding:0!important;
}


/* =====================================================================
   2026-09-03 — LEADERSHIP CARD CONTENT ALIGNMENT
   Authoritative card geometry: equal content slots across every profile.
   ===================================================================== */
.leadership .profile--link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.leadership .profile--link .profile-meta {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Reserve the same role/title zone on every card, including long Board roles. */
.leadership .profile--link .profile-role {
  display: block !important;
  min-height: 5.6em !important;
  margin: 0 !important;
}

/* Reserve an identical two-line name zone so names start/end consistently. */
.leadership .profile--link .profile-name {
  display: block !important;
  min-height: 2.1em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Lock every CTA to the same bottom baseline regardless of text wrapping above. */
.leadership .profile--link .profile-action {
  display: block !important;
  margin-top: auto !important;
  padding-top: 14px !important;
}

@media (max-width: 850px) {
  /* Mobile remains compact but uses the same deterministic card structure. */
  .leadership .profile--link .profile-role {
    min-height: 0 !important;
  }
  .leadership .profile--link .profile-name {
    min-height: 0 !important;
  }
  .leadership .profile--link .profile-action {
    margin-top: 10px !important;
    padding-top: 0 !important;
  }
}


/* President Emeritus uses the same complete content stack as every other card. */
.leadership .leadership-group--first .profile--link .profile-name{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--aurum-ink,#171514)!important;
  min-height:2.1em!important;
}
.leadership .leadership-group--first .profile--link .profile-meta{
  min-height:148px!important;
}
.leadership .leadership-group--first .profile--link .profile-action{
  margin-top:auto!important;
}

/* 2026-09-10 desktop recovery: the density pass made the leadership page too
   compressed at large widths. Keep it polished and readable instead. */
@media (min-width: 980px) {
  .leadership.leadership--people-first {
    padding-top: clamp(46px, 5vw, 72px) !important;
  }

  .leadership.leadership--people-first .profile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
  }

  .leadership.leadership--people-first .portrait-placeholder {
    height: clamp(210px, 17vw, 246px) !important;
    background: #fff !important;
  }

  .leadership.leadership--people-first .profile-meta {
    min-height: 0 !important;
    padding: 16px 20px 18px !important;
  }

  .leadership.leadership--people-first .profile-role {
    min-height: 3.2em !important;
  }

  .leadership.leadership--people-first .profile-name {
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--aurum-ink, #171514) !important;
  }

  .leadership.leadership--people-first .profile-action {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }
}

/* 2026-09-10 restore pass: do not let reserved metadata slots hide names or
   create long blank leadership cards. */
.leadership.leadership--people-first .profile--link {
  min-height: 0 !important;
}
.leadership.leadership--people-first .profile--link .profile-meta {
  flex: 0 0 auto !important;
}
.leadership.leadership--people-first .profile--link .profile-role,
.leadership.leadership--people-first .profile--link .profile-name {
  min-height: 0 !important;
}
.leadership.leadership--people-first .profile--link .profile-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--aurum-ink, #171514) !important;
  font-size: clamp(19px, 1.45vw, 24px) !important;
  line-height: 1.04 !important;
}

/* ===== SOURCE: phase9.css ===== */
/* Phase 9: motion that explains hierarchy without hiding research content. */
.timeline{--timeline-progress:0;position:relative}
.timeline-progress{position:absolute;z-index:1;left:93px;top:0;width:2px;height:100%;background:var(--aurum-red);transform-origin:top;transform:scaleY(var(--timeline-progress));pointer-events:none;transition:transform .16s linear}
.timeline-item{will-change:opacity,transform}
.profile summary,.faq-list summary{transition:color .25s var(--ease-editorial)}
.profile summary:hover,.profile summary:focus-visible,.faq-list summary:hover,.faq-list summary:focus-visible{color:var(--aurum-red)}
.map-marker{cursor:pointer;outline:none}
.map-marker:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:4px}
.place-button:focus-visible,.filter-chip:focus-visible,.button:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:4px}
@media(max-width:850px){.timeline-progress{left:12px}}
@media(prefers-reduced-motion:reduce){.timeline-progress{transition:none!important}.profile summary,.faq-list summary{transition:none}}

/* ===== SOURCE: global-footer.css ===== */
/* ========================================================================
   Aurum global footer — 2026-08-09
   ======================================================================== */

.site-footer.aurum-footer,
body > footer.aurum-footer{
  position:relative;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--aurum-cream,#F7F5EB)!important;
  color:var(--aurum-ink,#191613)!important;
  box-shadow:none!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}

.aurum-footer *{box-sizing:border-box}

/* 2026-08-16: top hairline glow + staggered blur/fade-up entrance —
   adapted from a shadcn "Footer" reference component the client liked, kept
   to Aurum's own white/red palette rather than the reference's dark theme.
   Content and layout are untouched; this is purely an entrance treatment
   layered on top. */
.aurum-footer-glow{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:33%;
  height:2px;
  border-radius:999px;
  background:var(--aurum-red,#CD2026);
  opacity:.4;
  filter:blur(6px);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.aurum-footer-reveal{
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity .7s var(--ease-editorial,ease),transform .7s var(--ease-editorial,ease),filter .5s var(--ease-editorial,ease);
  transition-delay:var(--reveal-delay,0s);
}
.aurum-footer-enhanced .aurum-footer-reveal{
  opacity:0;
  transform:translateY(14px);
  filter:blur(4px);
}
.aurum-footer-enhanced .aurum-footer-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
@media(prefers-reduced-motion:reduce){
  .aurum-footer-reveal{transition:none;opacity:1;transform:none;filter:none}
}

.aurum-footer-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(22px,3vw,32px) clamp(24px,6vw,96px);
  border-bottom:1px solid rgba(25,22,19,.1);
}
.aurum-footer-summary-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.aurum-footer-summary .aurum-footer-logo{display:inline-flex;margin:0}
.aurum-footer-summary .aurum-footer-logo img{
  width:148px!important;
  height:auto!important;
  object-fit:contain!important;
}
.aurum-footer-summary-statement{
  margin:0;
  padding-left:18px;
  border-left:1px solid rgba(25,22,19,.14);
  color:rgba(25,22,19,.88);
  font-size:clamp(23px,2vw,30px)!important;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0!important;
  text-transform:none!important;
}
.aurum-footer-summary-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.aurum-footer-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:11px 20px 11px 22px;
  border:1px solid rgba(25,22,19,.16);
  border-radius:999px;
  background:#fff!important;
  color:var(--aurum-red,#CD2026)!important;
  font-size:12px!important;
  font-weight:700;
  letter-spacing:.03em!important;
  text-transform:none!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

.aurum-footer-enhanced .aurum-footer-toggle{display:inline-flex}

.aurum-footer-toggle:hover{background:var(--aurum-red,#CD2026);border-color:var(--aurum-red,#CD2026);color:#fff!important;transform:translateY(-1px)}
.aurum-footer-toggle-icon{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-editorial,ease)}
.aurum-footer-toggle[aria-expanded="true"] .aurum-footer-toggle-icon{transform:rotate(180deg)}

.aurum-footer-more{
  max-height:none;
  overflow:visible;
  visibility:visible;
}
.aurum-footer-enhanced .aurum-footer-more{
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s;
}
.aurum-footer-enhanced .aurum-footer-more.is-open{
  max-height:2400px;
  visibility:visible;
  transition:max-height .55s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
}

.aurum-footer-donate{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(26px,3vw,38px) clamp(24px,6vw,96px);
  background:var(--aurum-red,#CD2026);
  border-bottom:4px solid var(--aurum-gold,#E0AC26);
}
.aurum-footer-donate-copy{max-width:560px}
.aurum-footer-donate-copy p.aurum-footer-eyebrow{
  margin:0 0 6px;
  color:var(--aurum-gold,#E0AC26)!important;
  font-size:11px!important;
  font-weight:700;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.aurum-footer-donate-copy h2{
  margin:0 0 6px;
  color:#fff!important;
  font-size:clamp(20px,2.4vw,28px)!important;
  font-weight:700;
  line-height:1.15;
  letter-spacing:0!important;
  text-transform:none!important;
}
.aurum-footer-donate-copy p.aurum-footer-donate-lead{
  margin:0;
  color:rgba(255,255,255,.86)!important;
  font-size:14px!important;
  line-height:1.5;
  letter-spacing:0!important;
  text-transform:none!important;
}
/* 2026-08-16: was its own bespoke white/red hover-lift style, entirely
   separate from the sitewide .button hover-fill effect (see button-hover.js
   + .button/.button-invert in modern-refresh.css) — that's why it didn't
   "behave like the other buttons". Now uses class="button button-invert"
   in the markup below. Needs flex-shrink so it doesn't get squeezed by the
   copy column, and align-self:center to override .button's sitewide
   align-self:flex-start (added elsewhere to stop buttons stretching in
   flex containers) — without this override it pins to the TOP of the row
   instead of centering against the taller two-line copy block next to it,
   which is exactly what read as "stuck in the corner". */
.aurum-footer-donate-button.button{flex-shrink:0;align-self:center}

.aurum-footer-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:clamp(30px,3.2vw,56px);
  padding:clamp(42px,5vw,64px) clamp(24px,6vw,96px) clamp(42px,5vw,72px);
}

.aurum-footer-heading{
  margin:0 0 20px;
  color:var(--aurum-red,#CD2026);
  font-size:11px!important;
  font-weight:700;
  line-height:1;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}

.aurum-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.aurum-footer-column>a,
.aurum-footer-contact address,
.aurum-footer-contact address span{
  font-size:13.5px!important;
  line-height:1.45;
  letter-spacing:0!important;
  text-transform:none!important;
}

.aurum-footer-column>a{
  position:relative;
  color:var(--aurum-ink,#191613)!important;
  transition:color .2s ease,transform .2s ease;
}
.aurum-footer-column>a:hover{color:var(--aurum-red,#CD2026)!important;transform:translateX(3px)}
.aurum-footer-compliance>a{padding-bottom:2px}
.aurum-footer-compliance>a span{color:var(--aurum-gold,#E0AC26)}

.aurum-footer-contact address{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 0 7px;
  color:var(--aurum-ink,#191613)!important;
  font-style:normal;
  font-family:var(--font-primary,Arial,sans-serif)!important;
  font-weight:500;
}

.aurum-footer-contact address span,
.aurum-footer-contact>a:not(.button){
  color:var(--aurum-ink,#191613)!important;
  font-family:var(--font-primary,Arial,sans-serif)!important;
  font-weight:500;
}

.aurum-footer-contact-link.button{
  margin-top:12px;
}

.aurum-bbee-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:15px;
  padding:8px 12px;
  border:1px solid rgba(25,22,19,.12);
  border-left:3px solid var(--aurum-gold,#E0AC26);
  border-radius:7px;
  background:#fff;
}
.aurum-bbee-badge span{
  color:rgba(25,22,19,.56);
  font-size:9px!important;
  font-weight:700;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.aurum-bbee-badge strong{color:var(--aurum-red,#CD2026);font-size:13px}

.aurum-footer-social{display:flex;gap:12px;align-items:center}
.aurum-footer-social a{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:var(--brand-color,var(--aurum-ink));
  color:#fff!important;
  box-shadow:0 6px 16px rgba(25,22,19,.14);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.aurum-footer-social a:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(25,22,19,.22);
  filter:brightness(1.08);
}
.aurum-footer-social svg{
  width:22px;
  height:22px;
  fill:currentColor;
  stroke:none;
}
.aurum-footer-social svg.is-outline{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.aurum-footer-bottom{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:16px clamp(24px,6vw,96px) 18px;
  border-top:1px solid rgba(25,22,19,.11);
  background:#fff;
}
.aurum-footer-bottom p,
.aurum-footer-bottom a{
  margin:0;
  color:rgba(25,22,19,.62)!important;
  font-size:11px!important;
  line-height:1.35;
  letter-spacing:.035em!important;
  text-transform:none!important;
}
.aurum-footer-bottom p:nth-child(2){justify-self:center}
.aurum-footer-bottom a{justify-self:end;color:var(--aurum-red,#CD2026)!important;font-weight:700}

@media(max-width:1320px){
  .aurum-footer-main{grid-template-columns:repeat(4,minmax(140px,1fr));gap:clamp(28px,3vw,48px)}
}

@media(max-width:1050px){
  .aurum-footer-main{grid-template-columns:repeat(2,1fr);gap:44px 60px}
  .aurum-footer-summary-statement{display:block}
  .aurum-footer-donate{justify-content:flex-start}
}

@media(max-width:650px){
  .aurum-footer-summary{padding:20px 22px}
  .aurum-footer-summary-right{width:100%;justify-content:space-between}
  .aurum-footer-main{grid-template-columns:1fr;gap:34px;padding:38px 22px}
  .aurum-footer-column{padding-top:24px;border-top:1px solid rgba(25,22,19,.1)}
  .aurum-footer-bottom{grid-template-columns:1fr;gap:8px;padding:16px 22px 20px}
  .aurum-footer-bottom p:nth-child(2),.aurum-footer-bottom a{justify-self:start}
  .aurum-footer-donate{padding:24px 22px;text-align:left}
  .aurum-footer-donate-button{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .aurum-footer-column>a,.aurum-footer-social a,.aurum-footer-toggle,.aurum-footer-toggle-icon,.aurum-footer-more{transition:none}
}


/* Homepage/footer revisions — 2026-08-24. */
.aurum-footer-toggle{display:none!important}
.aurum-footer-enhanced .aurum-footer-more,
.aurum-footer-more{
  max-height:none!important;
  overflow:visible!important;
  visibility:visible!important;
  transition:none!important;
}
@media(max-width:650px){
  .aurum-footer-summary-brand{align-items:flex-start}
  .aurum-footer-summary-statement{
    width:100%;
    padding-left:0;
    padding-top:12px;
    border-left:0;
    border-top:1px solid rgba(25,22,19,.14);
    font-size:22px!important;
    line-height:1.2;
  }
}

/* Footer brand statement prominence — 2026-08-24. */
.aurum-footer-summary-brand{
  flex:1 1 auto;
  flex-wrap:nowrap;
  gap:24px;
  min-width:0;
}
.aurum-footer-summary .aurum-footer-logo img{
  width:190px!important;
  max-width:none!important;
}
.aurum-footer-summary-statement{
  flex:1 1 auto;
  max-width:680px;
  font-size:clamp(28px,2.25vw,36px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}
@media(max-width:1050px){
  .aurum-footer-summary-brand{flex-wrap:wrap}
  .aurum-footer-summary-statement{max-width:620px}
}
@media(max-width:650px){
  .aurum-footer-summary-brand{
    width:100%;
    gap:16px;
    flex-wrap:wrap;
  }
  .aurum-footer-summary .aurum-footer-logo img{
    width:158px!important;
  }
  .aurum-footer-summary-statement{
    width:100%;
    max-width:none;
    padding-top:16px;
    font-size:clamp(24px,7vw,30px)!important;
    line-height:1.08!important;
  }
}

/* ===== SOURCE: revision-20260824.css ===== */
/* Aurum client revision pass — 24 August 2026. Scoped overrides only. */

/* Global: remove legacy decorative section numbering from header-like treatments. */
.work-hero::after{display:none!important}
.work-image-operations::before{content:"SCIENTIFIC INFRASTRUCTURE"!important}
.work-image-human::before{content:"IMPLEMENTATION RESEARCH"!important}
.work-image-access::before{content:"HEALTH SYSTEMS"!important}
.work-community-context::after{content:"COMMUNITY CONTEXT"!important}
.nav-drop-col-heading--static{display:block;color:var(--aurum-ink);font:inherit;font-weight:800;cursor:default;text-decoration:none}

/* WHO WE ARE */
.about-purpose--mission-vision-only{padding-top:clamp(38px,5vw,72px)!important}
.about-purpose--mission-vision-only .purpose-grid{margin-top:0}
.about-gateways--clean .section-head{grid-template-columns:1fr!important;margin-bottom:clamp(28px,4vw,46px)!important}
.about-gateways--clean .section-head h2{max-width:none!important}
.about-gateways--clean .gateway-card>span{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aurum-red)}

/* HISTORY */
.about-detail-history .history>.section-head{grid-template-columns:1fr!important}
.htl-media--image-placeholder{min-height:220px;background:linear-gradient(135deg,rgba(224,172,38,.12),rgba(7,113,135,.14))!important;border:1px dashed rgba(255,255,255,.28)}
.htl-media--image-placeholder::before,.htl-media--image-placeholder::after{content:none!important}

/* LEADERSHIP */
.leadership--people-first{padding-top:clamp(42px,5vw,72px)!important}
.leadership--people-first .leadership-group--first{margin-top:0!important}
.profile--link{display:block;text-decoration:none!important;color:var(--aurum-ink)!important;transition:transform .28s ease,box-shadow .28s ease}
.profile--link:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(25,22,19,.17)}
.profile--link .portrait-placeholder{height:clamp(190px,18vw,250px)}
.profile--link .profile-meta{min-height:128px;display:flex;flex-direction:column}
.profile--link .profile-action{margin-top:auto;padding-top:18px}
.leadership-profile-page{background:#fff;padding:clamp(84px,10vw,140px) clamp(22px,9vw,150px)}
.leadership-profile-article{max-width:1080px;margin:0 auto}
.leadership-profile-header{border-bottom:1px solid var(--aurum-line);padding-bottom:clamp(26px,4vw,46px);margin-bottom:clamp(30px,4vw,52px)}
.leadership-profile-header .eyebrow{color:var(--aurum-red)!important}
.leadership-profile-header h1{font-size:clamp(48px,7vw,92px);line-height:.9;letter-spacing:-.055em;margin:14px 0 0}
.leadership-profile-copy{font-size:clamp(16px,1.35vw,20px);line-height:1.72;color:#403d39}
.leadership-profile-copy::after{content:"";display:block;clear:both}
.leadership-profile-copy p{margin:0 0 1.2em}
.leadership-profile-portrait{float:left;width:min(34vw,330px);margin:0 clamp(26px,4vw,52px) 24px 0;border-radius:14px;overflow:hidden;background:var(--aurum-smoke)}
.leadership-profile-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* Shared placeholders: deliberately content-free until approved imagery arrives. */
.content-image-placeholder,.project-image-placeholder,.latest-story-image-placeholder{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(224,172,38,.12),rgba(7,113,135,.13));border:1px dashed rgba(23,21,20,.18)}
.content-image-placeholder::after,.project-image-placeholder::after,.latest-story-image-placeholder::after{content:"";position:absolute;inset:18%;border:1px solid rgba(23,21,20,.12);border-radius:50%;animation:aurumPlaceholderPulse 3.6s ease-in-out infinite}
@keyframes aurumPlaceholderPulse{0%,100%{transform:scale(.9);opacity:.28}50%{transform:scale(1.05);opacity:.65}}

/* CLINICAL RESEARCH — cleaner teal information architecture. */
.clinical-research-panel{padding-top:clamp(58px,7vw,92px)!important}
.clinical-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(22px,4vw,56px);align-items:stretch;margin-bottom:28px}
.clinical-copy-block,.clinical-network-card,.clinical-infrastructure-head{padding:clamp(26px,3vw,42px);border:1px solid rgba(255,255,255,.28);border-radius:18px;background:rgba(255,255,255,.08)}
.clinical-copy-block h2,.clinical-network-card h2,.clinical-infrastructure-head h2{font-size:clamp(42px,5vw,72px)!important;line-height:.92;margin:0 0 24px;letter-spacing:-.055em}
.clinical-copy-block .lead,.clinical-network-card .lead,.clinical-infrastructure-head .lead{font-size:clamp(15px,1.2vw,18px)!important;line-height:1.62!important;margin:0!important}
.clinical-partnership-block{display:flex;flex-direction:column;justify-content:space-between}
.clinical-partnership-block .discipline-statement{font-size:clamp(34px,4vw,58px)!important;line-height:.95!important}
.clinical-partnership-block .discipline-note{border:0!important;padding:28px 0 0!important;margin:0!important;align-self:auto!important}
.clinical-network-card{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:32px;align-items:start;margin-bottom:28px}
.clinical-infrastructure-head{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:32px;align-items:start;margin-bottom:20px}
.infra-grid--with-images{border:0!important;gap:12px!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
.infra-grid--with-images .infra-card{display:flex;flex-direction:column;min-height:390px!important;padding:14px 14px 20px!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:14px;background:rgba(255,255,255,.07)}
.infra-grid--with-images .content-image-placeholder{height:128px;border-color:rgba(255,255,255,.26);border-radius:9px;margin-bottom:18px}
.infra-grid--with-images .infra-card b{margin-bottom:16px}
.infra-grid--with-images .infra-card h3{font-size:clamp(20px,1.9vw,29px)!important;line-height:1!important;margin:0 0 14px!important}
.infra-grid--with-images .infra-card p{margin-top:auto!important}
.credential-grid--animated{border:0!important;gap:12px!important;margin-top:42px!important}
.credential-grid--animated .credential-card{position:relative;min-height:230px!important;padding:24px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:14px;background:rgba(255,255,255,.08);overflow:hidden;justify-content:flex-end!important}
.credential-grid--animated .credential-card b{font-size:clamp(28px,3vw,44px)!important}
.credential-grid--animated .credential-card--text b{font-size:clamp(20px,2vw,29px)!important;line-height:1.05!important}
.revision-icon{width:58px;height:58px;position:absolute;top:22px;right:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--aurum-gold);opacity:.96;filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));animation:aurumIconFloat 4.2s ease-in-out infinite}
.revision-icon path,.revision-icon circle,.revision-icon rect{stroke-dasharray:180;stroke-dashoffset:180;animation:aurumIconDraw 2.2s ease forwards}
@keyframes aurumIconDraw{to{stroke-dashoffset:0}}
@keyframes aurumIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1.5deg)}}

/* Shared latest-story module. */
.latest-stories{background:#fff;padding:clamp(58px,7vw,96px) clamp(22px,7vw,116px)!important}
.latest-stories-head{margin-bottom:clamp(28px,4vw,46px)}
.latest-stories-head h2{font-size:clamp(38px,4.5vw,66px);line-height:.95;letter-spacing:-.05em;margin:0;max-width:920px}
.latest-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.latest-story-card{display:flex;flex-direction:column;min-height:340px;border:1px solid rgba(23,21,20,.1);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 32px rgba(23,21,20,.06)}
.latest-story-card figure,.latest-story-image-placeholder{height:190px;margin:0}
.latest-story-card figure img{display:block;width:100%;height:100%;object-fit:cover}
.latest-story-card-copy{display:flex;flex-direction:column;flex:1;padding:22px}
.latest-story-card-copy h3{font-size:clamp(22px,2vw,30px);line-height:1.04;letter-spacing:-.035em;margin:0 0 24px}
.latest-story-card-copy a,.latest-story-link{margin-top:auto;display:inline-flex;align-items:center;color:var(--aurum-red);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.latest-story-link--disabled{opacity:.48}
.latest-story-card--placeholder .latest-story-card-copy:empty{display:none}

/* IMPLEMENTATION RESEARCH */
.bammisho-panel{background:#ececeb!important;color:var(--aurum-ink)!important;padding:clamp(60px,8vw,108px) clamp(22px,9vw,150px)!important}
.bammisho-panel .section-head{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:42px;align-items:start;margin:0 0 30px!important}
.bammisho-panel .section-head h2{font-size:clamp(48px,6vw,86px)!important;color:var(--aurum-ink)!important;margin:0}
.bammisho-panel .section-head .lead{color:#4d4944!important;opacity:1!important;margin:0!important}
.bammisho-copy{max-width:820px;margin-left:auto;padding-top:28px;border-top:1px solid rgba(23,21,20,.16);font-size:17px;line-height:1.65}
.bammisho-copy .button{margin-top:20px}

/* HEALTH AREA / PROJECT-LANDING STRUCTURE */
.area-hero--revised .eyebrow{letter-spacing:.14em!important}
.area-work-section{background:var(--aurum-teal);color:#fff}
.area-work-section .section-head--single,.area-focus-icons .section-head--single,.market-access-work .section-head--single,.market-expertise .section-head--single{display:block!important;margin-bottom:34px!important}
.area-work-section .section-head--single h2,.area-focus-icons .section-head--single h2,.market-access-work .section-head--single h2,.market-expertise .section-head--single h2{font-size:clamp(42px,5vw,72px)!important;margin:0!important;max-width:none!important}
.feature-grid--aligned{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-top:0!important}
.feature-card--revised{display:flex!important;flex-direction:column!important;min-height:430px!important;padding:14px 18px 22px!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:14px!important}
.feature-card--revised .project-image-placeholder{height:150px;border-color:rgba(255,255,255,.28);border-radius:9px;margin-bottom:22px}
.feature-card--revised h3{font-size:clamp(27px,2.4vw,38px)!important;line-height:.95!important;margin:0 0 14px!important}
.feature-card--revised p{font-size:14px!important;line-height:1.55!important;margin:0 0 22px!important}
.feature-card--revised .feature-card-link{margin-top:auto!important;padding-top:18px!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.22);font-size:11px!important;font-weight:700!important;letter-spacing:.1em!important;text-decoration:none!important}
.feature-card-link--disabled{opacity:.45}
.feature-card--placeholder{min-height:300px!important}
.area-focus-icons{background:#f7f7f5}
.focus-list--icons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin:0!important}
.focus-card--icon{position:relative!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-height:260px!important;padding:28px!important;border:1px solid rgba(23,21,20,.1)!important;border-top:4px solid var(--aurum-red)!important;border-left:1px solid rgba(23,21,20,.1)!important;background:#fff!important;box-shadow:0 12px 28px rgba(23,21,20,.06)!important}
.focus-card--icon .revision-icon{position:static;width:68px;height:68px;color:var(--aurum-red);margin-bottom:38px}
.focus-card--icon:nth-child(3n+2) .revision-icon{color:var(--aurum-teal)}
.focus-card--icon:nth-child(3n+3) .revision-icon{color:var(--aurum-gold)}
.focus-card--icon h3{font-size:clamp(25px,2.3vw,36px)!important;line-height:1!important;margin:0!important}
.focus-card--icon p{grid-column:auto!important;color:#57534e!important;margin:16px 0 0!important;font-size:14px!important;line-height:1.55!important}

/* MARKET ACCESS */
.market-access-intro,.market-access-work,.market-expertise,.market-access-matters{padding:clamp(58px,7vw,96px) clamp(22px,7vw,116px)!important}
.market-access-opening{max-width:900px;font-size:clamp(21px,2.1vw,32px);line-height:1.35;letter-spacing:-.025em;margin-bottom:58px}
.market-access-what-grid,.market-expertise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.market-access-what-grid article,.market-expertise-grid article{padding:28px;border-top:4px solid var(--aurum-red);background:#fff;box-shadow:0 12px 30px rgba(23,21,20,.06);border-radius:12px}
.market-access-what-grid article:nth-child(2),.market-expertise-grid article:nth-child(2){border-top-color:var(--aurum-teal)}
.market-access-what-grid article:nth-child(3),.market-expertise-grid article:nth-child(3){border-top-color:var(--aurum-gold)}
.market-access-what-grid article:nth-child(4),.market-expertise-grid article:nth-child(4){border-top-color:var(--aurum-orange)}
.market-access-what-grid h3,.market-expertise-grid h3{font-size:clamp(23px,2vw,32px);line-height:1;margin:0 0 18px}
.market-access-what-grid p,.market-expertise-grid p{font-size:14px;line-height:1.55;margin:0;color:#5a5651}
.market-access-work{background:var(--aurum-teal);color:#fff}
.market-access-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.market-access-project-card{display:flex;flex-direction:column;min-height:450px;padding:14px 18px 22px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.1)}
.market-access-project-card .project-image-placeholder{height:130px;border-color:rgba(255,255,255,.28);border-radius:8px;margin-bottom:20px}
.market-access-project-card h3{font-size:clamp(25px,2.2vw,34px);line-height:1;margin:0 0 10px}
.market-access-project-card h4{font-size:17px;line-height:1.3;margin:0 0 16px;color:var(--aurum-gold)}
.market-access-project-card p{font-size:14px;line-height:1.55;margin:0 0 24px;opacity:.88}
.market-access-project-card a,.market-card-link--disabled{margin-top:auto;color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.market-card-link--disabled{opacity:.45}
.market-access-matters{background:#f3f0e7}
.market-matters-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,78px)}
.market-matters-grid h2{font-size:clamp(36px,4vw,58px);line-height:.98;margin:0 0 24px}
.market-matters-grid h3{font-size:22px;line-height:1.2;margin:28px 0 12px}
.market-matters-grid p{font-size:16px;line-height:1.65;margin:0 0 18px}

/* Climate audit content. */
.climate-content{background:#fff}
.climate-copy{max-width:980px;margin:auto;font-size:17px;line-height:1.65}
.climate-copy>h2{font-size:clamp(38px,4vw,60px);margin:60px 0 12px}
.climate-copy>h3{font-size:clamp(22px,2.2vw,32px);line-height:1.2;margin:0 0 24px}
.climate-focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.climate-focus-grid article{padding:24px;background:#f3f0e7;border-radius:12px}
.climate-focus-grid h3{margin:0 0 12px}

/* Responsive */
@media(max-width:1100px){
  .infra-grid--with-images{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .feature-grid--aligned,.market-access-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .market-access-what-grid,.market-expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  .leadership-profile-page{padding-left:20px;padding-right:20px}
  .leadership-profile-portrait{float:none;width:min(78vw,320px);margin:0 0 30px}
  .clinical-overview-grid,.clinical-network-card,.clinical-infrastructure-head{grid-template-columns:1fr!important}
  .clinical-overview-grid{gap:14px}
  .infra-grid--with-images{grid-template-columns:1fr!important}
  .credential-grid--animated{grid-template-columns:1fr 1fr!important}
  .latest-story-grid,.feature-grid--aligned,.focus-list--icons,.market-access-project-grid,.climate-focus-grid{grid-template-columns:1fr!important}
  .market-access-what-grid,.market-expertise-grid,.market-matters-grid{grid-template-columns:1fr}
  .bammisho-panel .section-head{grid-template-columns:1fr;gap:18px}
  .bammisho-copy{margin-left:0}
  .feature-card--revised{min-height:390px!important}
}
@media(max-width:540px){
  .credential-grid--animated{grid-template-columns:1fr!important}
  .latest-stories{padding-left:18px!important;padding-right:18px!important}
  .latest-story-card figure,.latest-story-image-placeholder{height:170px}
  .leadership-profile-header h1{font-size:clamp(42px,13vw,62px)}
  .leadership-profile-copy{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .revision-icon,.revision-icon path,.revision-icon circle,.revision-icon rect,.content-image-placeholder::after,.project-image-placeholder::after,.latest-story-image-placeholder::after{animation:none!important;stroke-dashoffset:0!important}
}
/* Legacy What We Do index: keep the two non-clickable grouping concepts separate. */
.health-index .health-index-subgroup{margin-top:clamp(54px,7vw,90px)}


/* Audit-priority finishing pass — batch 2. */
.leadership-section-head--moved{margin:clamp(46px,6vw,82px) 0 clamp(18px,3vw,34px)!important;grid-template-columns:1fr!important}
.leadership-section-head--moved h2{color:#fff!important;font-size:clamp(40px,5vw,72px)!important;line-height:.92!important;margin:0!important}

/* Image-ready hero scaffolds requested in the audit. No unapproved imagery is inserted. */
.area-hero--image-ready{padding:0!important;overflow:hidden}
.area-hero--image-ready .area-hero-layout{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr)!important;min-height:clamp(500px,58vh,660px)}
.area-hero--image-ready .area-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,7vw,106px) clamp(32px,7vw,112px)!important}
.area-hero--image-ready .area-hero-media{margin:0!important;min-height:100%;border:0!important;border-left:1px solid rgba(255,255,255,.16)!important;border-radius:0!important;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(224,172,38,.2))!important}
.area-hero--image-ready .area-hero-media::after{border-color:rgba(255,255,255,.22)!important}

/* BAMMISHO: reserved logo slot from the audit, ready for the approved asset. */
.bammisho-logo-placeholder{width:min(320px,42vw);height:92px;margin:0 0 clamp(30px,4vw,48px) auto;border-style:dashed;background:rgba(255,255,255,.46)}

/* HIV audit asks for project imagery as the card background rather than a separate top strip. */
.feature-card--image-background{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,3vw,40px)!important;min-height:430px!important;background:var(--aurum-teal)!important}
.feature-card--image-background>.project-image-placeholder{position:absolute!important;inset:0!important;z-index:-2!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;background:linear-gradient(145deg,rgba(7,113,135,.72),rgba(23,21,20,.58))!important}
.feature-card--image-background>.project-image-placeholder::after{inset:28%!important;border-color:rgba(255,255,255,.2)!important}
.feature-card--image-background::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,20,22,.12) 0%,rgba(10,20,22,.82) 82%)}
.feature-card--image-background h3{margin-top:auto!important;color:#fff!important}
.feature-card--image-background p{color:#fff!important;opacity:.9!important}

/* Audit asks for an additional supporting visual on AMR and QI; image arrives in the image pass. */
.focus-supporting-image{height:clamp(210px,25vw,340px);margin:0 0 24px;border-radius:14px}

/* Coming-soon story cards are intentionally explicit rather than empty boxes. */
.latest-story-card--placeholder .latest-story-card-copy{display:flex!important}
.latest-story-card--placeholder .latest-story-card-copy h3{color:#77716a}

/* Icons need to read as animated editorial devices, not tiny decorative glyphs. */
.focus-card--icon .revision-icon{width:78px;height:78px;padding:12px;border-radius:50%;background:rgba(205,32,38,.07);box-shadow:0 0 0 0 rgba(205,32,38,.18);animation:aurumIconFloat 3.3s ease-in-out infinite,aurumIconPulse 2.8s ease-in-out infinite}
.focus-card--icon:nth-child(3n+2) .revision-icon{background:rgba(7,113,135,.08);box-shadow:0 0 0 0 rgba(7,113,135,.18)}
.focus-card--icon:nth-child(3n+3) .revision-icon{background:rgba(224,172,38,.12);box-shadow:0 0 0 0 rgba(224,172,38,.22)}
@keyframes aurumIconPulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 10px transparent}}
.pathway-card--static{cursor:default}
.pathway-card--static:hover{transform:none!important}

@media(max-width:850px){
  .area-hero--image-ready .area-hero-layout{grid-template-columns:1fr!important;min-height:0}
  .area-hero--image-ready .area-hero-copy{padding:56px 22px 38px!important}
  .area-hero--image-ready .area-hero-media{min-height:240px;border-left:0!important;border-top:1px solid rgba(255,255,255,.16)!important}
  .bammisho-logo-placeholder{width:min(280px,74vw);margin-left:0}
  .leadership-section-head--moved{margin-top:42px!important}
}


/* 2026-08-29 leadership/search/nav/mobile correction pass. */
.leadership-search-anchor{margin:0 0 clamp(34px,4vw,54px)}
.leadership-search-anchor .profile-search{max-width:none;margin:0!important}
.leadership-search-anchor .profile-search label{display:block}
.leadership--people-first .leadership-section-head--moved{display:none!important}

/* What We Do: four intentional columns. Prevent the first two headings from
   colliding and keep parent headings visually separate from their children. */
.nav-drop--work .nav-drop-menu--mega{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  width:min(1180px,calc(100vw - 48px))!important;
  max-width:min(1180px,calc(100vw - 48px))!important;
  padding:24px 26px 26px!important;
  box-sizing:border-box!important;
}
.nav-drop--work .nav-drop-col{
  min-width:0!important;
  padding:0 24px!important;
  border-left:1px solid rgba(20,20,20,.10)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
.nav-drop--work .nav-drop-col:first-child{border-left:0!important;padding-left:0!important}
.nav-drop--work .nav-drop-col:last-child{padding-right:0!important}
.nav-drop--work .nav-drop-col-heading{
  display:block!important;
  font-size:16px!important;
  line-height:1.08!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  margin:0 0 16px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(20,20,20,.12)!important;
}
.nav-drop--work .nav-drop-col>a:not(.nav-drop-col-heading){
  display:block!important;
  padding:8px 0!important;
  line-height:1.25!important;
  white-space:normal!important;
}

@media (max-width: 850px){
  /* Every leadership portrait is visually centered on narrow screens. */
  .leadership-profile-portrait{float:none!important;width:min(82vw,330px)!important;margin:0 auto 30px!important}
  .leadership-profile-portrait img{object-position:center top!important}
  .leadership .portrait-placeholder{display:flex!important;justify-content:center!important;align-items:flex-start!important}
  .leadership .portrait-placeholder img{display:block!important;margin-left:auto!important;margin-right:auto!important;object-position:center top!important}
  .leadership-search-anchor{margin-bottom:34px!important}
  .leadership-search-anchor .profile-search{width:100%!important}
}


/* 2026-08-29 polish: keep clinical metric cards visually centred and stop the
   base .credential-card span rule from shrinking animated counter values. */
.credential-grid--animated .credential-card{
  display:grid!important;
  grid-template-rows:64px minmax(56px,auto) auto;
  align-content:center!important;
  justify-items:center!important;
  justify-content:stretch!important;
  gap:14px!important;
  padding:28px 22px!important;
  text-align:center!important;
}
.credential-grid--animated .credential-card .revision-icon{
  position:static!important;
  width:52px!important;
  height:52px!important;
  margin:0 auto!important;
  align-self:center!important;
}
.credential-grid--animated .credential-card b{
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:.08em!important;
  width:100%!important;
  margin:0!important;
  font-size:clamp(32px,3vw,46px)!important;
  line-height:1!important;
  text-align:center!important;
}
.credential-grid--animated .credential-card b > span{
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  opacity:1!important;
}
.credential-grid--animated .credential-card > span:not([data-aurum-count]){
  display:block!important;
  width:100%!important;
  max-width:230px!important;
  margin:0 auto!important;
  font-size:13px!important;
  line-height:1.42!important;
  text-align:center!important;
  opacity:.9!important;
}
.credential-grid--animated .credential-card--text b{
  align-self:center!important;
  max-width:230px!important;
  font-size:clamp(23px,2vw,31px)!important;
  line-height:1.05!important;
}

/* Latest-story CTAs use the same red button interaction as the homepage hero. */
.latest-story-card-copy .latest-story-button{
  margin-top:auto!important;
  align-self:flex-start!important;
  color:#fff!important;
  border:0!important;
  padding:14px 18px!important;
  font-size:10px!important;
  letter-spacing:.1em!important;
  text-decoration:none!important;
  border-radius:3px!important;
}
.latest-story-card-copy .latest-story-button span{
  display:inline-flex!important;
  align-items:center!important;
  color:#fff!important;
  margin-left:0!important;
}
.latest-story-card-copy .latest-story-button svg{width:15px;height:15px}

@media(max-width:850px){
  .credential-grid--animated .credential-card{
    min-height:220px!important;
    padding:26px 20px!important;
  }
}

/* 2026-08-31 Leadership portrait desktop/base contract. */
.leadership .profile--link .portrait-placeholder{
  overflow:hidden;
  background:#fff;
}
.leadership .profile--link .portrait-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

/* 2026-09-13 Leadership mobile cleanup.
   Generic card sizing/alignment now lives only in leadership-cards-20260912.css.
   Keep this file responsible solely for the per-person focal positions and
   individual profile-page portrait crops, preventing older mobile card rules
   from competing with the final Leadership card contract. */
@media (max-width:850px){
  /* Individually tuned card crops: head fully visible, frame ends just below shoulders. */
  .profile--prof-gavin-churchyard .portrait-placeholder img{object-position:center 14%!important}
  .profile--dr-jerry-gule .portrait-placeholder img{object-position:center 7%!important}
  .profile--prof-dave-clark .portrait-placeholder img{object-position:center 8%!important}
  .profile--ms-paula-fray .portrait-placeholder img{object-position:center 8%!important}
  .profile--prof-pontiano-kaleebu .portrait-placeholder img{object-position:center 9%!important}
  .profile--advocate-louisa-zondo .portrait-placeholder img{object-position:center 6%!important}
  .profile--mr-arshad-hassim .portrait-placeholder img{object-position:center 7%!important}
  .profile--ms-sarah-luthuli .portrait-placeholder img{object-position:center 7%!important}
  .profile--dr-angelica-salomao .portrait-placeholder img{object-position:center 7%!important}
  .profile--mr-alex-darko .portrait-placeholder img{object-position:center 8%!important}
  .profile--mr-gary-tamblyn .portrait-placeholder img{object-position:center 7%!important}
  .profile--mr-yaw-peprah .portrait-placeholder img{object-position:center 7%!important}
  .profile--prof-vinodh-edward .portrait-placeholder img{object-position:center 11%!important}
  .profile--prof-salome-charalambous .portrait-placeholder img{object-position:center 7%!important}
  .profile--prof-violet-chihota .portrait-placeholder img{object-position:center 8%!important}
  .profile--mr-michael-mcmillan .portrait-placeholder img{object-position:center 7%!important}

  /* Individual profile pages retain the approved shoulder-level crop. */
  .leadership-profile-portrait{
    width:100%!important;
    max-width:420px!important;
    height:auto!important;
    aspect-ratio:16 / 10!important;
    overflow:hidden!important;
    margin:0 auto 28px!important;
    background:#fff!important;
  }
  .leadership-profile-portrait img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 10%!important;
  }
  .leadership-profile-portrait--prof-gavin-churchyard img{object-position:center 14%!important}
  .leadership-profile-portrait--prof-vinodh-edward img{object-position:center 11%!important}
  .leadership-profile-portrait--dr-jerry-gule img{object-position:center 7%!important}
  .leadership-profile-portrait--prof-dave-clark img{object-position:center 8%!important}
  .leadership-profile-portrait--ms-paula-fray img{object-position:center 8%!important}
  .leadership-profile-portrait--prof-pontiano-kaleebu img{object-position:center 9%!important}
  .leadership-profile-portrait--advocate-louisa-zondo img{object-position:center 6%!important}
  .leadership-profile-portrait--mr-arshad-hassim img{object-position:center 7%!important}
  .leadership-profile-portrait--ms-sarah-luthuli img{object-position:center 7%!important}
  .leadership-profile-portrait--mr-alex-darko img{object-position:center 8%!important}
  .leadership-profile-portrait--mr-gary-tamblyn img{object-position:center 7%!important}
  .leadership-profile-portrait--mr-yaw-peprah img{object-position:center 7%!important}
  .leadership-profile-portrait--prof-salome-charalambous img{object-position:center 7%!important}
  .leadership-profile-portrait--prof-violet-chihota img{object-position:center 8%!important}
  .leadership-profile-portrait--mr-michael-mcmillan img{object-position:center 7%!important}
}


/* 2026-09-02 — Clinical Research heading contrast only.
   No copy or layout changes. */
.clinical-research-panel .clinical-copy-block h2,
.clinical-research-panel .clinical-network-card h2,
.clinical-research-panel .clinical-infrastructure-head h2 {
  color: #fff !important;
}


/* =====================================================================
   2026-09-03 — LATEST STORIES: one card-image contract with explicit focal
   points. The supplied originals are never transformed or regenerated.
   ===================================================================== */
.latest-story-card figure{background:#f4f2ef;overflow:hidden;}
.latest-story-card figure img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:var(--story-object-position,50% 50%)!important;
  transform:none!important;
}
.latest-story-card-copy h3{font-family:var(--font-primary)!important;}
@media(max-width:850px){
  .latest-story-card figure{height:210px;}
  .latest-story-card figure img{object-position:var(--story-object-position,50% 50%)!important;}
}


/* Real latest-story logo fallbacks are artwork, not empty placeholders. */
.latest-story-image-placeholder--logo{
  background:#fff!important;
  border-style:solid!important;
}
.latest-story-image-placeholder--logo::after{
  content:none!important;
  display:none!important;
}

/* ===== SOURCE: sitewide-section-headings-20260903.css ===== */

/* ==========================================================================
   AURUM SITE-WIDE SECTION HEADING SYSTEM — 2026-09-03
   Single authoritative treatment based on the approved DriveDx Option 2 style.

   RULES
   - Section headings only; page/hero H1s are intentionally excluded.
   - Same font, weight, size, line-height, tracking and red left rule everywhere.
   - Light/white surfaces: black heading text.
   - Teal/dark/coloured surfaces: white heading text.
   - Old italic/gold <em> styling inside section headings is neutralised so all
     section headings read as one system.
   ========================================================================== */

:root{
  --aurum-section-heading-size:clamp(32px,3vw,46px);
  --aurum-section-heading-size-mobile:clamp(28px,8.2vw,35px);
  --aurum-section-heading-line:5px;
  --aurum-section-heading-line-mobile:4px;
  --aurum-section-heading-inset:20px;
  --aurum-section-heading-inset-mobile:14px;
}

/* Decorative indices have no place in section headings, cards or navigation.
   Keep numerical evidence, dates, programme names and timeline years visible. */
.work-hero::after,
.mobile-nav a::before,
.work-image-operations figure::after,
.work-image-access figure::before{
  content:none!important;
  display:none!important;
}
.work-image-operations::before{content:"SCIENTIFIC INFRASTRUCTURE"!important}
.work-image-human::before{content:"IMPLEMENTATION RESEARCH"!important}
.work-image-access::before{content:"HEALTH SYSTEMS"!important}
.work-community-context::after{content:"COMMUNITY CONTEXT"!important}
.mobile-nav a{gap:0!important}
.infra-card h3{margin-top:20px!important}
.why-card h3{margin-top:20px!important}

/* ---------- CANONICAL HEADING GEOMETRY ---------- */
:where(
  .section-head > h2,
  .section-head--single > h2,
  .latest-stories-head > h2,
  .about-introduction-copy > h2,
  .infrastructure-intro h2,
  .work-image-band-copy h2,
  .leadership-group > h3,
  .clinical-copy-block > h2,
  .clinical-network-card > h2,
  .clinical-infrastructure-head > h2,
  .bammisho-editorial__content > h2,
  .market-matters-grid > div > h2,
  .climate-copy > h2,
  .astra-feature__copy > h2,
  .drivedx-section-head > h2,
  .drivedx-connected h2,
  .home-strap-head > h2,
  .aurum-focus-title
){
  box-sizing:border-box!important;
  position:relative!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin-top:0!important;
  padding-left:var(--aurum-section-heading-inset)!important;
  border-left:var(--aurum-section-heading-line) solid var(--aurum-red)!important;
  font-family:var(--font-primary,"Neue Haas Grotesk","Archivo",Arial,sans-serif)!important;
  font-size:var(--aurum-section-heading-size)!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}

/* Neutralise previous oversized pseudo-line implementations. */
:where(
  .section-head > h2,
  .section-head--single > h2,
  .latest-stories-head > h2,
  .about-introduction-copy > h2,
  .infrastructure-intro h2,
  .work-image-band-copy h2,
  .leadership-group > h3,
  .clinical-copy-block > h2,
  .clinical-network-card > h2,
  .clinical-infrastructure-head > h2,
  .bammisho-editorial__content > h2,
  .market-matters-grid > div > h2,
  .climate-copy > h2,
  .astra-feature__copy > h2,
  .home-strap-head > h2,
  .aurum-focus-title
)::before{
  content:none!important;
  display:none!important;
}

/* DriveDx already uses border-left; make it share the exact token values. */
.drivedx-page :where(.drivedx-section-head > h2,.drivedx-connected h2){
  padding-left:var(--aurum-section-heading-inset)!important;
  border-left-width:var(--aurum-section-heading-line)!important;
  border-left-color:var(--aurum-red)!important;
}

/* Old subpage headings often wrapped the second line in <em>; section headers
   now use the same DriveDx typography instead of italic/gold fragments. */
:where(
  .section-head > h2,
  .section-head--single > h2,
  .about-introduction-copy > h2,
  .infrastructure-intro h2,
  .work-image-band-copy h2,
  .clinical-copy-block > h2,
  .clinical-network-card > h2,
  .clinical-infrastructure-head > h2
) em{
  color:inherit!important;
  font:inherit!important;
  font-style:normal!important;
}

/* ---------- DEFAULT: LIGHT / WHITE SURFACES ---------- */
:where(
  .section-head > h2,
  .section-head--single > h2,
  .latest-stories-head > h2,
  .about-introduction-copy > h2,
  .infrastructure-intro h2,
  .bammisho-editorial__content > h2,
  .market-matters-grid > div > h2,
  .climate-copy > h2,
  .astra-feature__copy > h2,
  .home-strap-head > h2,
  .aurum-focus-title,
  .drivedx-page .drivedx-section-head > h2,
  .drivedx-page .drivedx-connected h2
){
  color:var(--aurum-ink,#171514)!important;
}

/* ---------- COLOURED / DARK SURFACES ---------- */
/* Explicit contexts beat inherited legacy colours. */
:where(
  .leadership,
  .clinical-research-panel,
  .discipline.teal,
  .area-work-section,
  .area-work-section--market,
  .project-section.teal,
  .project-section.dark,
  .page-section.teal,
  .page-section.dark,
  .people,
  .purpose,
  .dark-section,
  .teal-section
) :where(
  .section-head > h2,
  .section-head--single > h2,
  .leadership-group > h3,
  .clinical-copy-block > h2,
  .clinical-network-card > h2,
  .clinical-infrastructure-head > h2
){
  color:#fff!important;
}

/* Leadership is a teal page but its groups use h3, not h2. */
.leadership .leadership-group > h3{
  color:#fff!important;
  margin-bottom:26px!important;
}

/* Health area "Our Work" blocks are teal in the current system. */
.area-work-section .section-head--single > h2{
  color:#fff!important;
}

/* Health-area Focus Areas / expertise panels use a white surface. */
.area-focus-icons .section-head--single > h2,
.area-focus-icons .section-head > h2{
  color:var(--aurum-ink,#171514)!important;
}

/* Clinical Research main block is teal. */
.clinical-research-panel :where(
  .clinical-copy-block > h2,
  .clinical-network-card > h2,
  .clinical-infrastructure-head > h2
){
  color:#fff!important;
}

/* History timeline is a white surface. */
.history .section-head > h2{
  color:var(--aurum-ink,#171514)!important;
}

/* ---------- PAGE-SPECIFIC ALIGNMENT WITHOUT CHANGING THE SYSTEM ---------- */
/* Keep the homepage Areas of Focus heading centred as previously approved. */
.aurum-focus-title{
  margin-left:0!important;
  margin-right:0!important;
}

/* A heading in a two-column section should not inherit old giant widths. */
.section-head{
  align-items:start!important;
}
.section-head > h2{
  max-width:min(100%,900px)!important;
}

/* Latest Stories uses same hierarchy, not a special giant headline. */
.latest-stories-head{
  margin-bottom:34px!important;
}
.latest-stories-head > h2{
  max-width:min(100%,980px)!important;
}

/* Clinical headings were explicitly set as high as 72px in revision CSS.
   This is the authoritative override back to the DriveDx scale. */
.clinical-copy-block > h2,
.clinical-network-card > h2,
.clinical-infrastructure-head > h2{
  margin-bottom:24px!important;
}

/* About "Who we are" should read as a proper section heading on white. */
.about-introduction-copy > h2{
  color:var(--aurum-ink,#171514)!important;
  margin-bottom:28px!important;
}

/* Leadership page section headings all follow the same scale. */
.leadership-group > h3{
  font-size:var(--aurum-section-heading-size)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  font-weight:800!important;
}

/* Market Access standalone section headings on white. */
.market-matters-grid > div > h2,
.climate-copy > h2,
.astra-feature__copy > h2{
  color:var(--aurum-ink,#171514)!important;
  margin-bottom:22px!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
  .aurum-focus-title{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  :where(
    .section-head > h2,
    .section-head--single > h2,
    .latest-stories-head > h2,
    .about-introduction-copy > h2,
    .infrastructure-intro h2,
    .work-image-band-copy h2,
    .leadership-group > h3,
    .clinical-copy-block > h2,
    .clinical-network-card > h2,
    .clinical-infrastructure-head > h2,
    .bammisho-editorial__content > h2,
    .market-matters-grid > div > h2,
    .climate-copy > h2,
    .astra-feature__copy > h2,
    .drivedx-section-head > h2,
    .drivedx-connected h2,
    .home-strap-head > h2,
    .aurum-focus-title
  ){
    padding-left:var(--aurum-section-heading-inset-mobile)!important;
    border-left-width:var(--aurum-section-heading-line-mobile)!important;
    font-size:var(--aurum-section-heading-size-mobile)!important;
    line-height:1.05!important;
  }
}


/* =====================================================================
   2026-09-03 FINAL CONTEXT CORRECTIONS
   ===================================================================== */

/* About: the complete authored "Who We Are" heading is Aurum gold.
   The red section rule remains; only the text colour is special here. */
.about-introduction .about-introduction-copy > h2,
.about-introduction .about-introduction-copy > h2 em{
  color:var(--aurum-gold,#e0ac26)!important;
}

/* Clinical Research: give Scientific infrastructure safe breathing room
   from the red rule without increasing the heading itself. */
.clinical-infrastructure-head > h2{
  padding-left:30px!important;
  max-width:100%!important;
}

/* User-requested Market Access heading is intentionally a little smaller
   than other coloured-panel section headings. */
.area-work-section--market .section-head--single > h2{
  font-size:clamp(28px,2.65vw,40px)!important;
}
@media(max-width:700px){
  .clinical-infrastructure-head > h2{padding-left:20px!important;}
  .area-work-section--market .section-head--single > h2{
    font-size:clamp(26px,7.4vw,33px)!important;
  }
}

/* ===== SOURCE: sitewide-hero-integrity-20260902.css ===== */
/*
 * Aurum Institute — Site-wide Hero Integrity + Typography Pass
 * 2026-09-02
 * Scope: hero rendering, hero typography, responsive hero composition only.
 * Deliberately does NOT alter page content, navigation, project cards, footer,
 * leadership profiles, history timeline, or below-hero sections.
 */

/* ---------- Shared hero text hierarchy ---------- */
.page-hero .eyebrow,
.area-hero .eyebrow,
.tb-isolated-hero__eyebrow,
.hiv-photo-hero__eyebrow,
.implementation-feature-hero__eyebrow {
  font-size: clamp(.76rem, .72vw, .9rem) !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

/* The image-backed hero titles were reading too much like section headings.
   Increase presence without allowing them to take over the photograph. */
.area-hero--image-ready .area-hero-copy h1,
.tb-isolated-hero__content h1,
.hiv-photo-hero__content h1,
.clinical-research-hero__content h1,
.implementation-feature-hero__content h1 {
  font-size: clamp(3.2rem, 5.2vw, 4.8rem) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.area-hero--image-ready .area-hero-copy .lead,
.tb-isolated-hero__content > p:last-child,
.hiv-photo-hero__content > p:last-child,
.clinical-research-hero__content p,
.implementation-feature-hero__lead {
  font-size: clamp(1.04rem, 1.28vw, 1.22rem) !important;
  line-height: 1.52 !important;
}

/* About / History / Leadership are editorial heroes. They are already larger;
   only strengthen them slightly and preserve the existing gold emphasis. */
.page-hero.about-hero > h1 {
  font-size: clamp(4rem, 5.4vw, 5.45rem) !important;
  line-height: .9 !important;
  max-width: 10.5ch !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.page-hero.about-hero > .lead {
  font-size: clamp(1.06rem, 1.28vw, 1.22rem) !important;
  line-height: 1.55 !important;
  max-width: 44rem !important;
}

/* Work overview split hero: stronger copy while keeping image dominant. */
.page-hero.work-hero.has-work-media .work-hero-copy h1 {
  font-size: clamp(4rem, 5.8vw, 5.8rem) !important;
  line-height: .9 !important;
}
.page-hero.work-hero.has-work-media .work-hero-copy .lead {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
  line-height: 1.55 !important;
}

/* ---------- Asset rendering guards ---------- */
.about-hero-image,
.area-hero-media--photo img,
.tb-isolated-hero__image,
.hiv-photo-hero__image,
.clinical-research-hero__media img,
.implementation-feature-hero__image,
.work-hero-media img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The About-family source photographs are absolute layers. Keep a real
   stacking context so text/overlay cannot accidentally paint underneath. */
.page-hero.about-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #191613 !important;
}
.page-hero.about-hero .about-hero-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
.page-hero.about-hero::before {
  z-index: 1 !important;
}
.page-hero.about-hero > .eyebrow,
.page-hero.about-hero > h1,
.page-hero.about-hero > .lead {
  position: relative !important;
  z-index: 2 !important;
}

/* Page-specific focal points. These are deliberately separate instead of
   forcing one crop across three unrelated photographs. */
body.page-template-page-about .about-hero-image,
body.about-us .about-hero-image {
  object-position: 61% 46% !important;
}
body.page-template-page-history .about-hero-image,
body.about-detail-history .about-hero-image {
  object-position: 58% 43% !important;
}
body.page-template-page-leadership .about-hero-image,
body.about-detail-leadership .about-hero-image {
  object-position: 62% 28% !important;
}

/* Health-area photo heroes retain the source-specific focal vars already
   defined in single-health_area.php. This layer only guarantees the media
   fills the composition and the copy stays readable. */
.area-hero--image-ready .area-hero-media--photo {
  background: #191613 !important;
}
.area-hero--image-ready .area-hero-media--photo img {
  object-fit: cover !important;
  min-width: 100% !important;
}

/* TB/HIV dedicated heroes: protect full-bleed media from legacy rules. */
.tb-isolated-hero,
.hiv-photo-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.tb-isolated-hero__image,
.hiv-photo-hero__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---------- Mobile: intentionally separate composition ---------- */
@media (max-width: 900px) {
  /* Image-first readability: copy sits in lower third, photograph still has
     breathing room above it. */
  .area-hero--image-ready .area-hero-copy h1,
  .tb-isolated-hero__content h1,
  .hiv-photo-hero__content h1,
  .clinical-research-hero__content h1,
  .implementation-feature-hero__content h1 {
    font-size: clamp(2.55rem, 10.5vw, 3.65rem) !important;
    line-height: .96 !important;
    max-width: 12.5ch !important;
  }

  .area-hero--image-ready .area-hero-copy .lead,
  .tb-isolated-hero__content > p:last-child,
  .hiv-photo-hero__content > p:last-child,
  .clinical-research-hero__content p,
  .implementation-feature-hero__lead {
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }

  .page-hero.about-hero {
    min-height: clamp(520px, 126vw, 650px) !important;
    padding: clamp(72px, 18vw, 104px) 22px clamp(40px, 10vw, 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .page-hero.about-hero > h1 {
    font-size: clamp(3rem, 12vw, 4rem) !important;
    line-height: .93 !important;
    max-width: 9.8ch !important;
  }
  .page-hero.about-hero > .lead {
    font-size: clamp(1rem, 4.1vw, 1.1rem) !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin-top: 22px !important;
  }
  .page-hero.about-hero::before {
    background:
      linear-gradient(180deg, rgba(18,16,14,.08) 0%, rgba(18,16,14,.18) 32%, rgba(18,16,14,.66) 65%, rgba(18,16,14,.92) 100%) !important;
  }

  /* Mobile crops are not inherited blindly from desktop. */
  body.page-template-page-about .about-hero-image,
  body.about-us .about-hero-image {
    object-position: 63% 42% !important;
  }
  body.page-template-page-history .about-hero-image,
  body.about-detail-history .about-hero-image {
    object-position: 56% 42% !important;
  }
  body.page-template-page-leadership .about-hero-image,
  body.about-detail-leadership .about-hero-image {
    object-position: 60% 28% !important;
  }

  .page-hero.work-hero.has-work-media .work-hero-copy h1 {
    font-size: clamp(3rem, 11vw, 4rem) !important;
    line-height: .94 !important;
  }
  .page-hero.work-hero.has-work-media .work-hero-copy .lead {
    font-size: clamp(1rem, 4vw, 1.08rem) !important;
  }
}

/* Remove the generic right-side glow and concentric ring from page heroes.
   More-specific photo-hero readability overlays remain intact. */
.page-hero::before {
  background: none !important;
}
.page-hero::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none;
}

@media (max-width: 560px) {
  /* Long health-area names need one smaller ceiling so they never blanket
     the photo on narrow phones. */
  .area-hero--amr .area-hero-copy h1,
  .area-hero--maternal .area-hero-copy h1,
  .area-hero--quality .area-hero-copy h1,
  .area-hero--climate .area-hero-copy h1 {
    font-size: clamp(2.28rem, 10.4vw, 3.05rem) !important;
    max-width: 12.8ch !important;
  }

  .page-hero.about-hero > h1 {
    font-size: clamp(2.85rem, 12vw, 3.55rem) !important;
  }
}

/* ---------- About-page content integrity ---------- */
/* Who We Are is intentionally preserved and kept visible. This is a guard
   against broad hero/layout rules accidentally hiding the section. */
.about-introduction,
.about-introduction-grid,
.about-introduction-copy {
  visibility: visible !important;
  opacity: 1 !important;
}
.about-introduction-copy h2 {
  display: block !important;
}
.about-introduction-copy h2 em {
  color: var(--aurum-gold, #e0ac26) !important;
}

/* ========================================================================
   2026-09-02 — MOBILE HERO COMPOSITION VERIFICATION PASS
   Reference behaviour: TB mobile hero. The image remains full-bleed behind
   the copy; mobile gets its own focal point; no desktop hero geometry moves.
   ======================================================================== */
@media (max-width: 900px) {
  /* About / History / Leadership: keep the photograph visible THROUGH the
     text zone rather than visually turning the lower half into a black panel. */
  .page-hero.about-hero {
    min-height: clamp(610px, 145vw, 760px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(90px, 20vw, 118px) 22px clamp(38px, 9vw, 54px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    background-color: #191613 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  .page-hero.about-hero .about-hero-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .page-hero.about-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.05) 0%,
      rgba(18,16,14,.08) 31%,
      rgba(18,16,14,.28) 55%,
      rgba(18,16,14,.62) 76%,
      rgba(18,16,14,.78) 100%) !important;
    pointer-events: none !important;
  }
  .page-hero.about-hero > .eyebrow,
  .page-hero.about-hero > h1,
  .page-hero.about-hero > .lead {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.34) !important;
  }
  .page-hero.about-hero > .eyebrow { color: #e0ac26 !important; }
  .page-hero.about-hero > h1 {
    font-size: clamp(2.9rem, 11.7vw, 3.8rem) !important;
    line-height: .94 !important;
    max-width: 10.5ch !important;
    margin-bottom: 18px !important;
  }
  .page-hero.about-hero > .lead {
    margin-top: 0 !important;
    max-width: 34ch !important;
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.5 !important;
  }

  /* Real image fallbacks at the same exact approved source paths. These do
     not replace the <img>; they stop a legacy rule from leaving a black hero
     if the image element is temporarily suppressed during responsive layout. */
  body.page-template-page-about .page-hero.about-hero,
  body.about-overview .page-hero.about-hero {
    background-image: url("../photos/client/about/site-visit-laboratory.jpg") !important;
    background-position: 61% 43% !important;
  }
  /* History owns one real <picture>. A CSS background here duplicated the
     image and delayed mobile LCP until this stylesheet had downloaded. */
  body.page-template-page-history .page-hero.about-hero,
  body.about-detail-history .page-hero.about-hero {
    background-image: none !important;
  }
  body.page-template-page-leadership .page-hero.about-hero,
  body.about-detail-leadership .page-hero.about-hero {
    background-image: none !important;
  }
  body.page-template-page-about .about-hero-image,
  body.about-overview .about-hero-image { object-position: 61% 43% !important; }
  body.page-template-page-history .about-hero-image,
  body.about-detail-history .about-hero-image { object-position: 55% 43% !important; }
  body.page-template-page-leadership .about-hero-image,
  body.about-detail-leadership .about-hero-image { object-position: 52% 25% !important; }

  /* Implementation Research: same full-bleed mobile behaviour as TB.
     The CSS background is a fallback only; the approved <img> remains first. */
  .implementation-feature-hero {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(640px, 150vw, 790px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #191613 !important;
  }
  .implementation-feature-hero__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 59% center !important;
    display: block !important;
  }
  .implementation-feature-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.04) 0%,
      rgba(18,16,14,.12) 36%,
      rgba(18,16,14,.47) 66%,
      rgba(18,16,14,.82) 100%) !important;
  }
  .implementation-feature-hero__content {
    position: absolute !important;
    z-index: 2 !important;
    left: 22px !important;
    right: 22px !important;
    top: auto !important;
    bottom: 36px !important;
    transform: none !important;
    width: auto !important;
    max-width: 620px !important;
    padding: 0 !important;
    color: #fff !important;
  }
  .implementation-feature-hero__content h1 {
    font-size: clamp(2.8rem, 11vw, 3.65rem) !important;
    line-height: .94 !important;
    max-width: 11.5ch !important;
    margin: 0 0 16px !important;
  }
  .implementation-feature-hero__lead {
    max-width: 34ch !important;
    font-size: clamp(.96rem, 3.9vw, 1.06rem) !important;
    line-height: 1.48 !important;
  }

  /* HIV: dedicated picture element gets the same full-bleed contract. The
     mobile-approved source remains in <picture>, with a fallback background. */
  .hiv-photo-hero.hiv-photo-hero--premium {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(650px, 150vw, 800px) !important;
    height: auto !important;
    overflow: hidden !important;
    background: #191613 url("../responsive/images/hiv/hiv-hero-final-approved-20260831-1200.webp") 68% 50% / cover no-repeat !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 68% 50% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hiv-photo-hero--premium::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.02) 0%,
      rgba(18,16,14,.07) 34%,
      rgba(18,16,14,.35) 62%,
      rgba(18,16,14,.78) 100%) !important;
    pointer-events: none !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 32px 22px 34px !important;
    color: #fff !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content > * {
    width: 100% !important;
    max-width: 34ch !important;
  }
  .hiv-photo-hero--premium h1 {
    font-size: clamp(3rem, 12vw, 3.8rem) !important;
    line-height: .94 !important;
    margin: 0 0 14px !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content > p:last-child {
    font-size: clamp(.96rem, 3.9vw, 1.05rem) !important;
    line-height: 1.48 !important;
  }

  /* Clinical Research uses a separate component; protect it as full-bleed
     on phones rather than allowing a split image/text composition. */
  .clinical-research-hero {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(620px, 145vw, 760px) !important;
    height: auto !important;
    overflow: hidden !important;
    background: #191613 !important;
  }
  .clinical-research-hero__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .clinical-research-hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 59% 42% !important;
    display: block !important;
  }
  .clinical-research-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,rgba(18,16,14,.03),rgba(18,16,14,.14) 40%,rgba(18,16,14,.78) 100%) !important;
  }
  .clinical-research-hero__content {
    position: absolute !important;
    z-index: 2 !important;
    left: 22px !important;
    right: 22px !important;
    top: auto !important;
    bottom: 36px !important;
    transform: none !important;
    width: auto !important;
    max-width: 620px !important;
    padding: 0 !important;
    color: #fff !important;
  }
  .clinical-research-hero__content h1 {
    font-size: clamp(2.9rem, 11.5vw, 3.75rem) !important;
    line-height: .94 !important;
    margin: 0 0 16px !important;
  }
  .clinical-research-hero__content p {
    max-width: 34ch !important;
    font-size: clamp(.96rem, 3.9vw, 1.05rem) !important;
    line-height: 1.48 !important;
  }

  /* Existing image-backed Health Areas already follow the correct AMR/TB
     model. Tighten the contract so no legacy responsive rule can make their
     media disappear. */
  .area-hero--image-ready {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: clamp(610px, 145vw, 760px) !important;
  }
  .area-hero--image-ready .area-hero-layout,
  .area-hero--image-ready .area-hero-media--photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .area-hero--image-ready .area-hero-media--photo { z-index: 0 !important; margin: 0 !important; }
  .area-hero--image-ready .area-hero-media--photo img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-object-position-mobile, center center) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .area-hero--image-ready .area-hero-layout::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,rgba(18,16,14,.02),rgba(18,16,14,.12) 38%,rgba(18,16,14,.42) 65%,rgba(18,16,14,.80) 100%) !important;
    pointer-events: none !important;
  }
  .area-hero--image-ready .area-hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 30px 22px 36px !important;
  }
}

/* History hero: one discoverable, high-priority responsive image. */
body.page-template-page-history .history-hero-picture,
body.about-detail-history .history-hero-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body.page-template-page-history .history-hero-picture .about-hero-image,
body.about-detail-history .history-hero-picture .about-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Leadership owns one responsive <picture>; do not make CSS request a
   duplicate hero or the LCP candidate. */
body.page-template-page-leadership .leadership-hero-picture,
body.about-detail-leadership .leadership-hero-picture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
body.page-template-page-leadership .leadership-hero-picture .about-hero-image,
body.about-detail-leadership .leadership-hero-picture .about-hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 560px) {
  .implementation-feature-hero,
  .hiv-photo-hero.hiv-photo-hero--premium,
  .clinical-research-hero,
  .area-hero--image-ready,
  .page-hero.about-hero {
    min-height: clamp(620px, 158vw, 760px) !important;
  }
}

/* About section title requested in Aurum gold. This is intentionally scoped
   to the real "Who we are" title only; body copy and other About headings stay. */
.about-introduction .about-introduction-copy h2,
.about-introduction .about-introduction-copy h2 em {
  color: #e0ac26 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.34) !important;
}


/* 2026-09-02 final three mobile hero focal fixes — mobile only. */
@media (max-width: 760px) {
  .area-hero--amr .area-hero-media--photo img { object-position: 27% 50% !important; }
  .area-hero--climate .area-hero-media--photo img { object-position: 31% 62% !important; }
}

/* Final approved mobile focal-point lock. Kept together so later passes do not
   silently return unrelated heroes to generic centre/cover positioning. */
@media (max-width: 900px) {
  body.about-overview .about-hero-image { object-position: 61% 43% !important; }
  body.about-detail-history .about-hero-image { object-position: 55% 43% !important; }
  body.about-detail-leadership .about-hero-image { object-position: 52% 25% !important; }
  .implementation-feature-hero__image { object-position: 59% 50% !important; }
  .clinical-research-hero__media img { object-position: 59% 42% !important; }
  .hiv-photo-hero--premium .hiv-photo-hero__image { object-position: 68% 50% !important; }
  .area-hero--diagnostics .area-hero-media--photo img { object-position: 56% 42% !important; }
  .area-hero--amr .area-hero-media--photo img { object-position: 27% 50% !important; }
  .area-hero--maternal .area-hero-media--photo img { object-position: 61% 36% !important; }
  .area-hero--market .area-hero-media--photo img { object-position: 63% 50% !important; }
  .area-hero--quality .area-hero-media--photo img { object-position: 52% 42% !important; }
  .area-hero--climate .area-hero-media--photo img { object-position: 31% 62% !important; }
}

/* ===== SOURCE: sitewide-search-20260913.css ===== */
/* Authoritative site-wide search UI — 2026-09-13. */
.nav-search-panel{
  width:min(720px,calc(100vw - 48px))!important;
  min-width:min(720px,calc(100vw - 48px))!important;
  max-width:min(720px,calc(100vw - 48px))!important;
  padding:10px!important;
  border-radius:14px!important;
  z-index:10050!important;
}
.nav-search-form{
  min-width:0!important;
  padding:4px 8px 8px!important;
}
.nav-search-form input{
  min-width:0!important;
  width:100%!important;
  padding:12px 4px!important;
  font-size:15px!important;
}
.nav-search-results{
  max-height:min(62vh,620px);
  overflow:auto;
  overscroll-behavior:contain;
  border-top:1px solid rgba(25,22,19,.08);
}
.nav-search-result{
  display:grid!important;
  grid-template-columns:105px minmax(0,1fr)!important;
  gap:2px 14px!important;
  padding:13px 14px!important;
  border-radius:9px!important;
  text-decoration:none!important;
}
.nav-search-result__type{
  grid-row:1 / span 2;
  align-self:start;
  color:var(--aurum-red);
  font-size:9px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding-top:3px;
}
.nav-search-result strong{
  color:var(--aurum-ink);
  font-size:14px;
  line-height:1.25;
}
.nav-search-result small{
  display:block;
  color:var(--aurum-slate);
  font-size:12px;
  line-height:1.4;
  font-weight:400;
}
.nav-search-loading,.nav-search-empty{
  margin:0;
  padding:18px 14px;
  color:var(--aurum-slate);
  font-size:13px;
}

/* Full results page. */
.site-search-page{
  min-height:65vh;
  background:#fff;
  padding:clamp(110px,12vw,160px) clamp(22px,8vw,120px) 90px;
}
.site-search-page__inner{max-width:1100px;margin:0 auto}
.site-search-page h1{margin:0 0 12px;font-size:clamp(42px,6vw,78px);letter-spacing:-.05em}
.site-search-page__summary{margin:0 0 30px;color:var(--aurum-slate);font-size:16px}
.site-search-page__form{display:flex;gap:10px;margin-bottom:34px}
.site-search-page__form input{flex:1;min-width:0;padding:15px 18px;border:1px solid var(--aurum-line);border-radius:10px;font:inherit}
.site-search-page__form button{border:0;border-radius:999px;padding:0 24px;background:var(--aurum-red);color:#fff;font:inherit;font-size:13px;font-weight:650}
.site-search-results{display:grid;gap:10px}
.site-search-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 18px;padding:20px;border:1px solid var(--aurum-line);border-radius:11px;color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.site-search-card:hover{transform:translateY(-2px);border-color:rgba(215,48,41,.3);box-shadow:0 10px 30px rgba(25,22,19,.06)}
.site-search-card__type{grid-row:1 / span 2;color:var(--aurum-red);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.site-search-card h2{margin:0;font-size:21px;line-height:1.2}
.site-search-card p{margin:4px 0 0;color:var(--aurum-slate);font-size:14px;line-height:1.5}

@media(max-width:850px){
  .nav-search-panel{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .nav-search-result{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  .nav-search-result__type{grid-row:auto}
  .nav-search-form input{font-size:16px!important}
  .site-search-page{padding:100px 18px 64px}
  .site-search-page__form{flex-direction:column}
  .site-search-page__form button{min-height:48px}
  .site-search-card{grid-template-columns:1fr;padding:17px}
  .site-search-card__type{grid-row:auto}
}

/* ===== SOURCE: sitewide-card-pop-20260918.css ===== */
/* Sitewide desktop card interaction. Outlines do not affect layout or load images. */
@media (hover:hover) and (pointer:fine){
  :is(.footprint-box,.work-card,.why-card,.gateway-card,.infra-card,.drivedx-card,.site-search-card,.values-grid>article,.feature-card,.story-card,.module-card,.proof-card,.focus-card,.resource-card,.latest-story-card,.usa-news-card,.usa-work-card,.ghana-impact-card,.stat-card,.drivedx-approach-card,.drivedx-future-card,.drivedx-update-card,.market-access-project-card,.clinical-network-card,.clinical-infrastructure-head,.clinical-copy-block,.office-card,.credential-card,.evidence-card,.invite-card,.through-card,.process-card,.timeline-card,.htl-card,.pathway-card,.purpose-card,.card,.leadership .profile,.market-access-opening,.market-access-what-grid>article,.market-expertise-grid>article,.market-matters-grid>div,.reach-feature,.resource-feature,.resource-aside,.publication-item,.publication-year__summary):hover{
    outline:2px solid #e0ac26;
    outline-offset:0;
  }
  /* Gold surfaces use red for a visible outline. */
  :is(.purpose-card:not(.red),.project-page--fundacao .project-section.teal .module-card:nth-child(4n+2)):hover{
    outline-color:#cd2026;
  }
  /* Report covers already have their own small image lift; no oversized card outline. */
  .annual-reports-library .annual-report-card:hover{outline:none;box-shadow:none;translate:none}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Independent translate preserves scroll-reveal transforms and existing layouts. */
  :is(.footprint-box,.why-card,.gateway-card,.drivedx-card,.site-search-card,.values-grid>article,.feature-card,.story-card,.module-card,.proof-card,.focus-card,.resource-card,.latest-story-card,.usa-news-card,.usa-work-card,.ghana-impact-card,.stat-card,.drivedx-approach-card,.drivedx-future-card,.drivedx-update-card,.market-access-project-card,.clinical-network-card,.clinical-infrastructure-head,.clinical-copy-block,.office-card,.credential-card,.evidence-card,.invite-card,.through-card,.process-card,.timeline-card,.htl-card,.pathway-card,.purpose-card,.card,.market-access-opening,.market-access-what-grid>article,.market-expertise-grid>article,.market-matters-grid>div,.reach-feature,.resource-feature,.resource-aside){
    transition:translate .23s cubic-bezier(.2,.7,.2,1),outline-color .23s ease;
  }
  :is(.footprint-box,.why-card,.gateway-card,.drivedx-card,.site-search-card,.values-grid>article,.feature-card,.story-card,.module-card,.proof-card,.focus-card,.resource-card,.latest-story-card,.usa-news-card,.usa-work-card,.ghana-impact-card,.stat-card,.drivedx-approach-card,.drivedx-future-card,.drivedx-update-card,.market-access-project-card,.clinical-network-card,.clinical-infrastructure-head,.clinical-copy-block,.office-card,.credential-card,.evidence-card,.invite-card,.through-card,.process-card,.timeline-card,.htl-card,.pathway-card,.purpose-card,.card,.market-access-opening,.market-access-what-grid>article,.market-expertise-grid>article,.market-matters-grid>div,.reach-feature,.resource-feature,.resource-aside):hover{
    translate:0 -5px;
  }
  /* Existing work, infrastructure, Leadership and publication lifts stay in charge. */
}
:is(.footprint-box,.usa-news-card):focus-visible{outline:3px solid #e0ac26;outline-offset:3px}

/* v59 Where We Work accessible focus ownership */
.footprint-explorer .place-button:focus-visible{outline:2px solid #fff!important;outline-offset:1px!important;box-shadow:0 0 0 4px #191613!important}
.footprint-explorer .detail-work-links .button-invert,.footprint-explorer .detail-work-links .button-invert .button-label{color:#CD2026!important}
.footprint-explorer .detail-work-links .button-invert .button-label-hover{color:#191613!important}