/* Aurum homepage performance bundle v30 — source order preserved. */

/* ===== 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)}


/* ===== styles.css ===== */

:root{--red:#CD2026;--gold:#E0AC26;--orange:#DC602E;--teal:#077187;--green:#74A57F;--blue:#B6E2E9;--cream:#F7F5EB;--ink:#101010;--line:rgba(16,16,16,.18);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-primary);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:92px;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;gap:42px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);transition:height .45s var(--ease),background .45s}.site-header.is-compact{height:68px;background:rgba(255,255,255,.98)}.brand{display:block;width:143px;flex:none}.brand img{width:100%;height:auto}.site-header nav{display:flex;gap:clamp(18px,3vw,45px);margin-left:auto}.site-header nav a,.header-link{font-size:11px;text-transform:uppercase;letter-spacing:.1em}.site-header nav a:hover,.header-link:hover{color:var(--red)}.header-link{border-left:1px solid var(--line);padding-left:28px}.header-link span,.button span{color:var(--red);margin-left:9px}.menu-toggle{display:none}.mobile-nav{display:none}.hero{height:100svh;min-height:680px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--red);color:#fff}.hero-image,.hero-shade{position:absolute;inset:0}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 39%;filter:saturate(.9)}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.68),transparent 52%)}.hero-brand{position:absolute;top:124px;right:clamp(22px,5vw,72px);width:100px;padding:15px;background:#fff}.hero-content{position:relative;z-index:2;padding:0 clamp(22px,8vw,140px) clamp(28px,4vh,52px);max-width:1020px}.eyebrow,.section-index,.work-card>p{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em}.eyebrow{color:var(--gold)}.hero h1{font-size:clamp(58px,9vw,138px);line-height:.86;letter-spacing:-.07em;margin:24px 0 45px;max-width:980px}.hero h1 em,.display em,.purpose h2 em,.closing h2 em{font-style:italic;color:var(--gold)}.hero-scroll{display:inline-flex;gap:30px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.7);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.hero-caption{position:absolute;z-index:2;right:clamp(22px,5vw,72px);bottom:58px;text-align:right;font-size:10px;line-height:1.6;text-transform:uppercase;letter-spacing:.13em}.hero-caption span{color:var(--gold)}.ruled{background-image:repeating-linear-gradient(to bottom,rgba(16,16,16,.055) 0,rgba(16,16,16,.055) 1px,transparent 1px,transparent 46px)}.statement,.values,.work-section,.people{padding:clamp(90px,12vw,180px) clamp(22px,8vw,140px)}.section-index{color:var(--red);border-top:2px solid var(--gold);padding-top:13px;margin-bottom:65px}.statement-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,8vw,130px);align-items:end}.display{font-size:clamp(48px,7vw,105px);line-height:.91;letter-spacing:-.065em;margin:0}.body-copy{color:#5e5b55;font-size:17px;line-height:1.65}.body-copy p{margin:0 0 22px}.purpose{display:grid;grid-template-columns:1fr 1fr;min-height:670px;background:var(--red);color:#fff}.purpose-panel{padding:clamp(80px,10vw,150px) clamp(22px,8vw,140px);align-self:center}.purpose-panel h2{font-size:clamp(55px,7vw,110px);line-height:.9;letter-spacing:-.065em;margin:30px 0 35px}.purpose-panel>p:last-child{max-width:560px;font-size:18px;line-height:1.6}.purpose-art{position:relative;overflow:hidden;background:var(--gold);display:grid;place-items:center}.purpose-art:before{content:"A";position:absolute;font-size:65vw;font-weight:700;line-height:.7;color:rgba(255,255,255,.12);transform:rotate(-12deg)}.purpose-art span{position:relative;z-index:1;width:110px;height:110px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:44px}.purpose-art i{position:absolute;width:42%;aspect-ratio:1;border:1px solid rgba(255,255,255,.55);border-radius:50%;animation:orbit 12s linear infinite}.purpose-art i:nth-child(3){width:62%;animation-direction:reverse;animation-duration:16s}.purpose-art i:nth-child(4){width:82%;animation-duration:22s}@keyframes orbit{to{transform:rotate(360deg)}}.values-head,.work-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,8vw,130px);align-items:end;margin-bottom:70px}.values-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.values-grid article{min-height:270px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:transform .45s var(--ease),background .45s,color .45s}.values-grid article:hover{background:var(--red);color:#fff;transform:translateY(-10px)}.values-grid b{font-size:10px;color:var(--gold)}.values-grid h3{font-size:clamp(25px,3vw,43px);letter-spacing:-.05em;margin:90px 0 16px}.values-grid p{font-size:14px;line-height:1.5;color:#5e5b55;margin:0}.values-grid article:hover p{color:#fff}.work-section{background:#fff}.work-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.work-card{background:#fff;border-top:3px solid var(--gold);padding:15px;transition:transform .55s var(--ease),box-shadow .55s}.work-card:hover{transform:translateY(-12px);box-shadow:0 30px 60px rgba(16,16,16,.15)}.work-photo{height:clamp(240px,32vw,420px);overflow:hidden;margin-bottom:22px;background:var(--ink)}.work-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.work-card:hover .work-photo img{transform:scale(1.08)}.work-card>p{color:var(--red);margin:0 0 12px}.work-card h3{font-size:clamp(28px,3.5vw,52px);line-height:.95;letter-spacing:-.055em;margin:0 0 28px}.work-card>a{font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:10px}.people{background:var(--teal);color:#fff}.people .section-index{color:var(--gold)}.people-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.people figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}.people-feature{height:600px}.people-side{display:grid;gap:16px}.people-side figure{height:292px}.people img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.9)}.people figure:hover img{transform:scale(1.07)}.people figcaption{position:absolute;bottom:18px;left:20px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.closing{background:var(--gold);text-align:center;padding:clamp(100px,15vw,210px) 22px}.closing .eyebrow{color:var(--red)}.closing h2{font-size:clamp(58px,9vw,140px);line-height:.84;letter-spacing:-.07em;margin:28px auto 45px}.closing>p:not(.eyebrow){max-width:600px;margin:0 auto 34px;font-size:18px;line-height:1.5}.button{display:inline-flex;align-items:center;gap:18px;background:var(--red);color:#fff;padding:18px 23px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;transition:transform .3s var(--ease)}.button:hover{transform:translateY(-4px)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px clamp(22px,5vw,72px);background:#fff;border-top:1px solid var(--line)}footer img{width:120px}footer p,footer a{font-size:10px;text-transform:uppercase;letter-spacing:.1em}footer a{color:var(--red)}.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal.in-view{opacity:1;transform:none}@media(max-width:850px){.site-header{height:72px}.site-header nav,.header-link{display:none}.menu-toggle{display:block;margin-left:auto;border:0;background:none;width:44px;height:44px}.menu-toggle span{display:block;width:24px;height:2px;background:var(--red);margin:5px}.menu-toggle b{position:absolute;clip:rect(0 0 0 0)}.mobile-nav{position:fixed;z-index:19;inset:0;background:var(--red);color:#fff;padding:125px 28px;display:flex;flex-direction:column;gap:22px;transform:translateX(100%);transition:transform .55s var(--ease)}.mobile-nav.open{transform:none}.mobile-nav a{font-size:48px;line-height:.9;letter-spacing:-.06em}.brand{width:120px}.hero{min-height:760px}.hero-brand{top:94px;width:82px}.hero-content{padding:0 22px 56px}.hero h1{font-size:clamp(52px,14vw,90px)}.hero-caption{display:none}.statement-grid,.purpose,.values-head,.work-intro,.people-grid{grid-template-columns:1fr}.purpose-art{min-height:430px}.values-grid{grid-template-columns:1fr 1fr}.work-rail{grid-template-columns:1fr}.people-feature{height:420px}.people-side figure{height:250px}.section-index{margin-bottom:45px}}@media(max-width:500px){.hero-image img{object-position:56% center}.hero-shade{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.1) 75%)}.hero-brand{right:22px}.values-grid{grid-template-columns:1fr}.values-grid h3{margin-top:60px}footer{flex-wrap:wrap}footer p{margin-left:auto}}

/* Layer 2: typography and colour-led composition without forced imagery. */
.hero-content{padding-bottom:clamp(28px,4vh,52px)}
.work-card{position:relative;min-height:390px;background:#fff;border-top:3px solid var(--gold);padding:26px;display:flex;flex-direction:column;transition:transform .55s var(--ease),background .55s,color .55s,box-shadow .55s}
.work-card:nth-child(2){background:var(--blue);border-top-color:var(--teal)}
.work-card:nth-child(3){background:var(--orange);color:#fff;border-top-color:var(--red)}
.work-card:hover{transform:translateY(-12px);box-shadow:0 30px 60px rgba(16,16,16,.15)}
.work-card>p{color:var(--red);margin:0 0 auto}.work-card:nth-child(3)>p{color:#fff}
.work-card h3{font-size:clamp(36px,4.5vw,68px);line-height:.9;letter-spacing:-.065em;margin:0 0 22px;max-width:300px}
.work-card>a{font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:10px;align-self:flex-start}
.card-arrow{position:absolute;right:25px;top:23px;font-size:32px;color:var(--red)}.work-card:nth-child(3) .card-arrow{color:#fff}
.people-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,10vw,170px);align-items:end}.people-layout .display em{color:var(--gold)}
.people-note{position:relative;min-height:370px;padding:30px;border-left:1px solid rgba(255,255,255,.6);display:flex;flex-direction:column;justify-content:flex-end}.people-note p{max-width:360px;font-size:18px;line-height:1.55;margin:0 0 28px}.people-note a{font-size:10px;text-transform:uppercase;letter-spacing:.11em;border-bottom:1px solid #fff;padding-bottom:10px;align-self:flex-start}.people-mark{position:absolute;top:-25px;right:0;color:rgba(255,255,255,.16);font-size:260px;line-height:1;font-weight:700}
@media(max-width:850px){.people-layout{grid-template-columns:1fr}.people-note{min-height:290px;margin-top:20px}}

/* Layer 3: restrained radius for a more welcoming system. */
.purpose-panel,.purpose-art,.work-card,.values-grid article{border-radius:7px;overflow:hidden}
.button{border-radius:3px}
.hero-brand{border-radius:2px}
@media(max-width:850px){.work-card{border-radius:6px}}

/* Phase 1: accessible shell and complete footer navigation. */
.skip-link{position:fixed;z-index:40;left:18px;top:12px;transform:translateY(-160%);background:var(--red);color:#fff;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;transition:transform .25s var(--ease)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;max-width:620px}
.footer-nav a{font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.footer-nav a:hover{color:var(--red)}
@media(max-width:850px){.footer-nav{order:3;width:100%;justify-content:flex-start;border-top:1px solid var(--line);padding-top:18px}.footer-nav a{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.purpose-art i,.reveal,.button,.work-card,.values-grid article{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Phase 1 token bridge: page rules consume the verified Brand Guide values. */
:root{--red:var(--aurum-red);--gold:var(--aurum-gold);--orange:var(--aurum-orange);--teal:var(--aurum-teal);--green:var(--aurum-green);--blue:var(--aurum-light-blue);--cream:var(--aurum-cream);--ink:var(--aurum-ink);--line:var(--aurum-line);--ease:var(--ease-editorial)}
body{font-family:var(--font-primary);line-height:var(--leading-body)}
.hero h1,.display,.purpose h2,.closing h2{font-weight:700}
.hero h1 em,.display em,.purpose h2 em,.closing h2 em{font-family:var(--font-secondary);font-style:italic;font-weight:600}
.eyebrow,.section-index,.work-card>p,.footer-nav a{font-family:var(--font-primary)}
.hero-deck{max-width:620px;margin:-22px 0 30px;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:rgba(255,255,255,.9)}
@media(max-width:850px){.hero-deck{margin:-15px 0 26px;font-size:16px}}
.hero--story h1{max-width:900px}.hero--story .hero-deck{max-width:660px}.hero--story .hero-image img{object-position:center center}
@media(max-width:850px){.hero--story h1{font-size:clamp(42px,11.8vw,78px);line-height:.88}.hero--story .hero-image img{object-position:58% center}.hero--story .hero-content{padding-bottom:clamp(34px,7vh,72px)}}

/* Homepage fit pass: keep the stacked mark inside the header and give the
   SANAS lead story enough breathing room at short desktop viewports. */
.site-header{height:84px;overflow:visible}
.brand{width:94px;height:74px;display:flex;align-items:center;overflow:visible}
.brand img{width:94px;height:74px;object-fit:contain;object-position:center}
.hero-brand{width:78px;height:78px;max-height:78px;padding:10px;overflow:hidden}
.hero-brand img{width:100%;height:100%;object-fit:contain;object-position:center}
.hero-content{padding-top:120px;padding-bottom:clamp(28px,4vh,52px);max-width:min(900px,82vw)}
.hero--story h1{font-size:clamp(42px,6.3vw,94px);line-height:.9;max-width:760px;margin:18px 0 28px}
.hero--story .hero-deck{max-width:560px;font-size:clamp(15px,1.2vw,18px)}
@media (min-width:851px) and (max-height:760px){
  .hero--story h1{font-size:clamp(40px,5.8vw,78px);margin-bottom:24px}
  .hero-content{padding-top:104px}
  .hero--story .hero-deck{max-width:500px}
}
@media(max-width:850px){
  .site-header{height:72px}
  .brand{width:78px;height:58px}
  .brand img{width:78px;height:58px}
  .hero-brand{top:94px;width:64px;height:64px;max-height:64px;padding:8px}
  .hero-content{padding-top:100px;max-width:none}
  .hero--story h1{font-size:clamp(38px,10vw,70px);max-width:100%;margin-bottom:22px}
}


/* ===== 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;
  }
}


/* ===== home-rebuild.css ===== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* Homepage revision 2026-08-24: slide 4 Aurum USA text is linked
   without changing the authored headline wording. */
.hero-content .hero-headline-link{
  color:inherit;
  text-decoration:none;
}
.hero-content .hero-headline-link:hover em,
.hero-content .hero-headline-link:focus-visible em{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}


/* ===== home-african-voices-20260913.css ===== */

/* Africa Voices of Science — composition-owned article hero.
   One desktop contract + one mobile contract. The shared hero system continues
   to own hero height, carousel controls, CTA styling/behaviour and CTA baseline. */

body.home .hero--story .hero-slide--african-voices .hero-image img,
body.home .hero--story .hero-slide--african-voices .hero-image picture img{
  object-fit:cover;
  object-position:center center;
}

/* Full-height stack anchors the shared CTA at the same bottom baseline as the
   other story slides; quote and article copy expand upward from it. */
body.home .hero--story .hero-slide--african-voices .hero-content{
  width:min(960px,66vw);
  max-width:min(960px,66vw);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
}

/* Quote only: deliberately around half the generic promo-hero scale. */
body.home .hero--story .hero-slide--african-voices .hero-heading--african-voices{
  width:auto;
  max-width:19ch;
  margin:0 0 18px;
  font-family:var(--font-primary);
  font-size:clamp(46px,3.75vw,56px);
  line-height:1.07;
  letter-spacing:-.025em;
  font-weight:600;
  font-style:normal;
  text-wrap:pretty;
}
body.home .hero--story .hero-slide--african-voices .hero-heading--african-voices em{
  font-family:inherit;
  color:var(--aurum-gold);
  font-style:normal;
  font-weight:inherit;
  letter-spacing:inherit;
}

body.home .hero--story .hero-slide--african-voices .hero-article-intro{
  max-width:720px;
  margin:0 0 22px;
  color:rgba(255,255,255,.92);
  font-size:clamp(18px,1.35vw,20px);
  line-height:1.46;
  font-weight:400;
}
body.home .hero--story .hero-slide--african-voices .hero-article-intro strong{
  font-weight:650;
  color:#fff;
}

@media(max-width:850px){
  body.home .hero--story .hero-slide--african-voices .hero-image img,
  body.home .hero--story .hero-slide--african-voices .hero-image picture img{
    object-position:center top;
  }
  body.home .hero--story .hero-slide--african-voices .hero-content{
    width:100%;
    max-width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
  }
  body.home .hero--story .hero-slide--african-voices .hero-heading--african-voices{
    width:auto;
    max-width:17.5ch;
    margin:0 0 16px;
    font-family:var(--font-primary);
    font-size:clamp(31px,8vw,38px);
    line-height:1.08;
    letter-spacing:-.025em;
    font-weight:600;
    font-style:normal;
    text-wrap:pretty;
  }
  body.home .hero--story .hero-slide--african-voices .hero-heading--african-voices em{
    font-family:inherit;
    font-style:normal;
    font-weight:inherit;
    letter-spacing:inherit;
  }
  body.home .hero--story .hero-slide--african-voices .hero-article-intro{
    display:block;
    max-width:36em;
    margin:0 0 20px;
    font-size:clamp(16px,4.1vw,18px);
    line-height:1.48;
    color:rgba(255,255,255,.94);
  }
}


/* ===== home-focus-redesign.css ===== */

/* 2026-08-17: "Areas of focus" + "Our Impact" editorial redesign.
   Scoped entirely under .aurum-focus- and .aurum-impact- — new class
   names, so nothing here touches any other section's CSS. Colours pull
   from the site's real design tokens (design-tokens.css) rather than
   one-off hex values so this stays in sync if the palette ever changes.
   Focus areas reuse the site's existing .focus-pill/.focus-pills
   component (defined in home-rebuild.css, minus its old arrow) instead of
   a new button language, per direct instruction — not redefined here. */

.aurum-focus-section{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:54px 0 50px;
}

.aurum-focus-container{
  position:relative;
  z-index:2;
  width:min(calc(100% - 100px),1500px);
  margin-inline:auto;
}

/* 2026-08-17b: map + curve moved from being children of .aurum-focus-container
   (which spans the WHOLE section, impact strip included) to children of
   .aurum-focus-layout (the upper composition only) — .aurum-focus-layout
   is their sole positioning context now, so neither can ever reach far
   enough down to overlap .aurum-impact regardless of exact height. */
/* 2026-08-17d: the content column's own text (a short 2-col link list) never
   used anywhere near its full 46% share, leaving a wide dead gap before the
   photo — client feedback was the photo needed to sit closer/protrude
   further left, not just get a wider gap. Shifting more of the column
   split to the image (and tightening the gap) pulls it left without
   touching the content side's own sizing. */
.aurum-focus-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,38%) minmax(0,62%);
  gap:clamp(20px,2.2vw,36px);
  align-items:center;
}

/* Reuses the existing gold dotted-world-map asset (also used by the "Why
   Aurum" section) — enlarged and shifted right/up so it reads as a broad
   global backdrop rather than a small circle sitting behind the heading. */
.aurum-focus-map{
  position:absolute;
  z-index:0;
  width:1050px;
  height:600px;
  left:27%;
  top:-65px;
  opacity:.2;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
}

.aurum-focus-content{position:relative;z-index:3}

.aurum-focus-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  color:var(--aurum-red);
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.aurum-focus-eyebrow::before{
  content:"";
  width:38px;
  height:2px;
  flex:0 0 auto;
  background:var(--aurum-gold);
}

.aurum-focus-title{
  margin:0 0 24px;
  max-width:700px;
  color:var(--aurum-ink);
  font-size:clamp(64px,5.5vw,88px);
  line-height:.93;
  font-weight:700;
  letter-spacing:-.055em;
}

.aurum-focus-intro{
  margin:0 0 24px;
  max-width:560px;
  color:var(--aurum-slate);
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.5;
}

/* 2026-08-17c: reverted from pill buttons back to editorial rows per
   direct feedback — the pill request itself was really about the raw "→"
   Unicode arrow rendering as a colour emoji on iOS, not the row layout.
   That's fixed at the source now (aurum_arrow_icon() in functions.php,
   used below instead of a literal arrow character), so the rows can keep
   their arrow. */
.aurum-focus-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,40px);
}
.aurum-focus-link{
  display:grid;
  grid-template-columns:31px minmax(0,1fr) 16px;
  align-items:center;
  gap:10px;
  min-height:54px;
  color:var(--aurum-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(25,22,19,.15);
  transition:color .18s ease,border-color .18s ease;
}
.aurum-focus-link__icon{display:flex;align-items:center;justify-content:center;width:27px;height:27px}
.aurum-focus-link__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aurum-focus-link__icon--red{color:var(--aurum-red)}
.aurum-focus-link__icon--gold{color:var(--aurum-gold)}
.aurum-focus-link__icon--teal{color:var(--aurum-teal)}
.aurum-focus-link__icon--green{color:var(--aurum-green)}
.aurum-focus-link__label{font-size:clamp(15px,1.12vw,17px);font-weight:650;line-height:1.28}
.aurum-focus-link__arrow{color:var(--aurum-gold);transition:transform .18s ease,color .18s ease}
.aurum-focus-link:hover{color:var(--aurum-red);border-color:rgba(205,32,38,.45)}
.aurum-focus-link:hover .aurum-focus-link__arrow{color:var(--aurum-red);transform:translateX(3px)}
.aurum-focus-link:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:3px}
@media(max-width:760px){.aurum-focus-links{grid-template-columns:1fr}}

/* Restores the original design's curved left edge (ellipse clip-path) that
   the section had before this rebuild — a plain rounded-rect read as a
   generic floating card instead. Ellipse centred on the box's right edge
   with a vertical radius larger than the box's own half-height keeps the
   curve gentle and roughly even top-to-bottom instead of pinching the
   corners to a point. */
.aurum-focus-media{
  position:relative;
  z-index:2;
  width:100%;
  height:clamp(390px,31vw,460px);
  margin:0;
  overflow:hidden;
  clip-path:ellipse(70% 130% at 100% 50%);
}
.aurum-focus-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.aurum-focus-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.16) 8%,rgba(255,255,255,0) 23%);
}

/* ---- Our Impact ---- */
.aurum-impact{
  position:relative;
  z-index:2;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(224,172,38,.6);
}
.aurum-impact__heading{
  margin-bottom:22px;
  color:var(--aurum-red);
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.aurum-impact__grid{
  display:grid;
  grid-template-columns:1.35fr 1.2fr 1.3fr 1.15fr .6fr;
  align-items:stretch;
}
.aurum-impact-stat{
  position:relative;
  min-width:0;
  padding:4px clamp(18px,2.2vw,34px);
}
.aurum-impact-stat:first-child{padding-left:0}
.aurum-impact-stat:last-child{padding-right:0}
.aurum-impact-stat:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:rgba(224,172,38,.82);
}
/* display:flex is load-bearing, not decoration: the ticker's thousands
   grouping (script.js buildTicker()) is a zero-width .stat-digit-gap span
   between digit groups whose CSS width (home-rebuild.css) only applies
   inside a flex container — the original .stat-ticker wrapper had
   display:flex for exactly this reason. Without it here, the gaps
   collapsed to nothing and every stat rendered as one run-together number
   (reported live 2026-08-17: "1471665" instead of "1,471,665"). */
.aurum-impact-stat__value{
  display:flex;
  align-items:baseline;
  margin:0 0 10px;
  font-size:clamp(40px,3.4vw,58px);
  line-height:.95;
  font-weight:700;
  letter-spacing:-.04em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* The digit-ticker JS (script.js) rebuilds this element's contents into
   .stat-digit spans on scroll-into-view — those carry their own fixed
   font-size/colour from home-rebuild.css (sized for the old .stat-card
   design), so they need to explicitly inherit this section's size/colour
   instead or the animated number renders small and off-palette. */
.aurum-impact-stat__value .stat-digit{
  font-size:inherit;
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  width:.58em;
}
/* Red / teal / gold / teal / red rhythm across the 5 stats, by position —
   independent of each Impact Stat post's own colour field, which drives a
   different (icon-card) display elsewhere and doesn't need to match this
   section's specific rhythm. */
/* The headline stat's value is a phrase ("Over 13 million"), not a bare
   number — at the same size/nowrap treatment as the pure-number stats it
   overflowed its column and visually collided with the next one (reported
   live 2026-08-17). Smaller size + normal wrapping fixes it without
   hardcoding a shorter value in place of the real dynamic field. */
.aurum-impact-stat--headline .aurum-impact-stat__value{
  font-size:clamp(30px,2.5vw,42px);
  white-space:normal;
}
/* 2026-08-24: the HIV value is a phrase rather than a bare number. Keep it
   on one clean line without colliding with the next stat column. */
.aurum-impact-stat:nth-child(3) .aurum-impact-stat__value{
  font-size:clamp(29px,2.35vw,38px);
  letter-spacing:-.05em;
  white-space:nowrap;
}
.aurum-impact-stat:nth-child(1) .aurum-impact-stat__value{color:var(--aurum-red)}
.aurum-impact-stat:nth-child(2) .aurum-impact-stat__value{color:var(--aurum-teal)}
.aurum-impact-stat:nth-child(3) .aurum-impact-stat__value{color:var(--aurum-gold)}
.aurum-impact-stat:nth-child(4) .aurum-impact-stat__value{color:var(--aurum-teal)}
.aurum-impact-stat:nth-child(5) .aurum-impact-stat__value{color:var(--aurum-red)}
.aurum-impact-stat__description{
  margin:0;
  max-width:245px;
  color:var(--aurum-ink);
  font-size:14px;
  line-height:1.4;
  font-weight:400;
}

@media(max-width:1100px){
  .aurum-focus-layout{
    grid-template-columns:minmax(0,1fr) minmax(400px,.9fr);
    gap:44px;
  }
  .aurum-focus-title{white-space:normal}
  .aurum-impact__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:38px;
  }
  .aurum-impact-stat:nth-child(4)::before{display:none}
}

@media(max-width:760px){
  .aurum-focus-section{padding:64px 0 68px}
  .aurum-focus-container{width:calc(100% - 40px)}
  .aurum-focus-layout{display:flex;flex-direction:column;gap:34px}
  .aurum-focus-title{order:2;margin-top:-12px;font-size:clamp(46px,14vw,64px);white-space:normal}
  .aurum-focus-eyebrow{order:1}
  .aurum-focus-content{order:3;display:contents}
  .aurum-focus-intro{margin-top:-14px;font-size:17px}
  /* 2026-08-17: mobile-only — "this should just be a full image on
     mobile." The desktop semi-circle clip-path cut (a confirmed, wanted
     design choice — see the long comment above .aurum-focus-media) plus
     object-fit:cover was cropping real photo content out of frame at
     mobile's shorter box. Dropped both here: plain rounded rect, no clip,
     and object-fit:contain so the whole photo is always visible — desktop
     keeps its shaped-card treatment untouched. */
  .aurum-focus-media{order:4;height:auto;aspect-ratio:3/2;border-radius:10px;clip-path:none;background:transparent}
  .aurum-focus-media img{object-fit:cover;object-position:center}
  .aurum-focus-links{order:5;width:100%;margin-top:2px}
  .aurum-focus-map{opacity:.16;left:auto;right:-10%;top:-20px;width:700px;height:420px}
  .aurum-impact{margin-top:44px;padding-top:24px}
  .aurum-impact__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .aurum-impact-stat{padding:0 18px}
  .aurum-impact-stat:nth-child(odd){padding-left:0}
  .aurum-impact-stat:nth-child(odd)::before{display:none}
  .aurum-impact-stat__value{font-size:clamp(34px,9.5vw,47px);white-space:normal}
}

@media(max-width:480px){
  .aurum-impact__grid{grid-template-columns:1fr}
  .aurum-impact-stat{padding:24px 0;border-bottom:1px solid rgba(25,22,19,.1)}
  .aurum-impact-stat:first-child{padding-top:0}
  .aurum-impact-stat::before{display:none!important}
  .aurum-impact-stat__value{font-size:46px}
  .aurum-impact-stat__description{max-width:310px;font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  .focus-pill{transition:none}
}


/* =====================================================================
   2026-09-02 — HOMEPAGE RESPONSIVE COMPOSITION CONTRACT
   Desktop and mobile are separate compositions.
   ===================================================================== */

/* The dedicated portrait is a MOBILE asset. It must never render on desktop. */
body.home .hero--story .hero-mobile-person-centered {
  display: none !important;
}

/* 2026-09-10: Prof Setswe and Dr Ratevosian now use purpose-built wide
   hero images. Keep the full banner edge-to-edge without the older oversize
   desktop crop cutting heads, shoulders or clothing. */
body.home .hero--story .hero-slide--setswe .hero-image img,
body.home .hero--story .hero-slide--setswe .hero-image picture img,
body.home .hero--story .hero-slide--ratevosian .hero-image img,
body.home .hero--story .hero-slide--ratevosian .hero-image picture img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  filter: saturate(.96) !important;
}

@media (max-width: 850px) {
  /* SETSWE — approved final mobile focal point. */
  body.home .hero--story .hero-slide--setswe .hero-image img,
  body.home .hero--story .hero-slide--setswe .hero-image picture img {
    object-position: 62% 50% !important;
    transform: none !important;
  }

  /* JIRAIR — mobile composition only.
     Hide the desktop/WP featured image and show the dedicated portrait. */
  body.home .hero--story .hero-slide--ratevosian .hero-image {
    overflow: hidden !important;
  }

  body.home .hero--story .hero-slide--ratevosian .hero-image > *:not(.hero-mobile-person-centered) {
    display: none !important;
  }

  body.home .hero--story .hero-slide--ratevosian .hero-mobile-person-centered {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
  }

  /* WHAT WE DO — centre only the mobile heading group.
     The area links remain left-aligned for readability. */
  body.home .aurum-focus-eyebrow,
  body.home .aurum-focus-title {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.home .aurum-focus-eyebrow {
    justify-content: center !important;
  }

  body.home .aurum-focus-eyebrow::before {
    flex: 0 0 38px !important;
  }
}

/* 2026-09-18 v29 — authoritative Areas of Focus cinematic composition.
   Single-source image, full-viewport width, and layout-level edge fades.
   This replaces the previous v23/v24/v28 stacked overrides so the focus
   section has one responsive rule set and no competing geometry. */
body.home .aurum-focus-layout{
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(570px,45vw,700px);
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:#171918;
}
body.home .aurum-focus-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
}
body.home .aurum-focus-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      #fff 0%,
      rgba(255,255,255,.82) 1.8%,
      rgba(255,255,255,.32) 4.8%,
      rgba(255,255,255,0) 10%,
      rgba(255,255,255,0) 100%),
    linear-gradient(90deg,
      rgba(14,17,17,.96) 0%,
      rgba(18,20,19,.90) 29%,
      rgba(18,20,19,.55) 47%,
      rgba(18,20,19,.08) 68%,
      rgba(18,20,19,0) 100%);
}
body.home .aurum-focus-backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
body.home .aurum-focus-content{
  position:relative;
  z-index:2;
  width:min(58%,820px);
  padding:clamp(62px,5.5vw,88px) clamp(44px,5.25vw,84px);
}
body.home .aurum-focus-eyebrow{color:#ef3d35;margin-bottom:24px}
body.home .aurum-focus-title{color:#fff!important;font-size:clamp(54px,5vw,80px);line-height:.98;margin-bottom:34px}
body.home .aurum-focus-links{column-gap:clamp(26px,3vw,48px)}
body.home .aurum-focus-link,
body.home .aurum-focus-link:link,
body.home .aurum-focus-link:visited{
  color:#fff!important;
  border-bottom:0;
  min-height:66px;
  padding:7px 10px;
  margin-left:-10px;
  border:1px solid transparent;
  border-radius:7px;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
body.home .aurum-focus-link:hover{color:#fff!important;transform:translateX(4px);background:rgba(255,255,255,.055);border-color:rgba(224,172,38,.72)}
body.home .aurum-focus-link:hover .aurum-focus-link__icon{transform:translateX(2px) scale(1.04)}
body.home .aurum-focus-link__icon{width:clamp(25px,1.9vw,31px);height:clamp(25px,1.9vw,31px);transition:transform .2s ease}
body.home .aurum-focus-link__arrow{color:var(--aurum-gold)}
body.home .aurum-focus-link:hover .aurum-focus-link__arrow{color:var(--aurum-gold);transform:translateX(5px)}
body.home .aurum-focus-link__label{color:#fff!important;font-size:clamp(16px,1.2vw,20px);font-weight:650}
body.home .aurum-focus-media,body.home .aurum-focus-map{display:none!important}

@media(max-width:760px){
  body.home .aurum-focus-section{padding-top:36px}
  body.home .aurum-focus-layout{
    width:100vw;
    margin-left:calc(50% - 50vw);
    min-height:0;
    display:block;
    overflow:hidden;
    background:#171918;
  }
  body.home .aurum-focus-backdrop{
    position:relative;
    inset:auto;
    height:clamp(255px,78vw,370px);
  }
  body.home .aurum-focus-backdrop::after{
    background:
      linear-gradient(180deg,
        #fff 0%,
        rgba(255,255,255,.68) 3%,
        rgba(255,255,255,0) 13%,
        rgba(255,255,255,0) 100%);
  }
  body.home .aurum-focus-backdrop img{object-position:68% center}
  body.home .aurum-focus-content{width:100%;padding:8px 20px 34px;margin-top:-2px;background:#171918}
  body.home .aurum-focus-eyebrow{margin:0 0 18px;display:flex;order:initial}
  body.home .aurum-focus-title{margin:0 0 24px;color:#fff!important;font-size:clamp(42px,12vw,58px);order:initial}
  body.home .aurum-focus-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;width:100%;margin:0;order:initial}
  body.home .aurum-focus-link{grid-template-columns:25px minmax(0,1fr) 13px;gap:7px;min-height:62px;padding:7px 4px;margin:0;border-radius:5px}
  body.home .aurum-focus-link__icon{width:23px;height:23px}
  body.home .aurum-focus-link__label{color:#fff!important;font-size:13px;line-height:1.18}
  body.home .aurum-focus-link:hover{transform:none}
  body.home .aurum-impact{margin-top:30px}
}
@media(max-width:390px){
  body.home .aurum-focus-content{padding-inline:16px}
  body.home .aurum-focus-links{gap:2px 8px}
  body.home .aurum-focus-link{grid-template-columns:22px minmax(0,1fr) 11px;gap:5px}
  body.home .aurum-focus-link__icon{width:21px;height:21px}
  body.home .aurum-focus-link__label{font-size:12px}
}


/* ===== home-work-stopped-tb-20260913.css ===== */

/* "When the work stopped, TB did not." — slide 1 composition.
   The shared hero system owns height, CTA baseline, arrows, dots and mechanics. */

body.home .hero--story .hero-slide--work-stopped-tb{
  background:#324765;
  color:#fff;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-image,
body.home .hero--story .hero-slide--work-stopped-tb .hero-image picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-image img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-shade{
  display:block;
  background:linear-gradient(90deg,rgba(24,39,61,.82) 0%,rgba(24,39,61,.62) 38%,rgba(24,39,61,.14) 65%,rgba(24,39,61,0) 80%);
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-content{
  width:min(760px,52vw);
  max-width:min(760px,52vw);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  color:#fff;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-heading--work-stopped{
  max-width:14ch;
  margin:0 0 18px;
  color:#fff;
  font-family:var(--font-primary);
  font-size:clamp(48px,4vw,64px);
  line-height:1.01;
  letter-spacing:-.04em;
  font-weight:650;
  font-style:normal;
  text-wrap:pretty;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-heading--work-stopped em{
  color:var(--aurum-gold);
  font-style:normal;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-intro,
body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-deck{
  max-width:680px;
  color:rgba(255,255,255,.94);
  font-size:clamp(15px,1.08vw,17px);
  line-height:1.48;
}
body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-intro{margin:0 0 8px}
body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-deck{margin:0 0 20px}
body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-intro strong{
  color:#fff;
  font-weight:650;
}

/* MOBILE ONLY: same full-bleed behaviour as Slide 3.
   One image plane, one content plane. No contained portrait or lower colour panel. */
@media(max-width:850px){
  body.home .hero--story .hero-slide--work-stopped-tb .hero-image,
  body.home .hero--story .hero-slide--work-stopped-tb .hero-image picture{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
  }

  body.home .hero--story .hero-slide--work-stopped-tb .hero-image img,
  body.home .hero--story .hero-slide--work-stopped-tb .hero-image picture img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:64% center!important;
    transform:none!important;
  }

  body.home .hero--story .hero-slide--work-stopped-tb .hero-content{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }

  body.home .hero--story .hero-slide--work-stopped-tb .hero-heading--work-stopped{
    max-width:15ch!important;
    margin-bottom:14px!important;
    font-size:clamp(31px,8vw,38px)!important;
    line-height:1.04!important;
  }

  body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-intro,
  body.home .hero--story .hero-slide--work-stopped-tb .hero-work-stopped-deck{
    max-width:36em!important;
    font-size:clamp(15px,3.9vw,17px)!important;
    line-height:1.45!important;
  }
}

@media(max-width:430px){
  body.home .hero--story .hero-slide--work-stopped-tb .hero-image img,
  body.home .hero--story .hero-slide--work-stopped-tb .hero-image picture img{
    object-position:66% center!important;
  }
}


/* ===== home-leadership-matters-20260913.css ===== */

/* When Leadership Matters Most — slide-owned composition.
   Shared hero system continues to own hero height, CTA button styling/baseline,
   carousel arrows/dots and slide mechanics. This file owns only slide 2. */

body.home .hero--story .hero-slide--leadership-matters{
  background:#fff;
  color:var(--aurum-ink);
}

body.home .hero--story .hero-slide--leadership-matters .hero-image img,
body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}

body.home .hero--story .hero-slide--leadership-matters .hero-shade{
  display:none;
}

/* The content stack is bottom-anchored so the shared CTA stays on the same
   baseline as every other homepage hero. Copy grows upward from it. */
body.home .hero--story .hero-slide--leadership-matters .hero-content{
  width:min(760px,52vw);
  max-width:min(760px,52vw);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  color:var(--aurum-ink);
}

body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
  width:auto;
  max-width:17ch;
  margin:0 0 18px;
  color:var(--aurum-red);
  font-family:var(--font-primary);
  font-size:clamp(42px,3.8vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:650;
  font-style:normal;
  text-wrap:pretty;
}

body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro{
  max-width:650px;
  margin:0 0 12px;
  color:rgba(25,22,19,.88);
  font-size:clamp(16px,1.12vw,18px);
  line-height:1.5;
  font-weight:400;
}
body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro strong{
  color:var(--aurum-ink);
  font-weight:650;
}

body.home .hero--story .hero-slide--leadership-matters .hero-leadership-question{
  max-width:650px;
  margin:0 0 20px;
  color:var(--aurum-ink);
  font-size:clamp(16px,1.16vw,18px);
  line-height:1.42;
  font-weight:650;
}

body.home .hero--story .hero-slide--leadership-matters .hero-scroll{
  color:#fff!important;
  border-bottom-color:transparent;
}

/* Controls remain in the exact shared bottom-right location; only their colour
   changes so they read on the white slide. */
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-arrow{
  border-color:rgba(25,22,19,.2);
  background:rgba(255,255,255,.9);
  color:var(--aurum-ink);
}
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-dots button{
  background:rgba(25,22,19,.22);
}
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-dots button[aria-selected="true"]{
  background:var(--aurum-red);
}

/* MOBILE ONLY: same full-bleed behaviour as Slide 3.
   The white background remains inside the actual image canvas; no separate panel. */
@media(max-width:850px){
  body.home .hero--story .hero-slide--leadership-matters .hero-image,
  body.home .hero--story .hero-slide--leadership-matters .hero-image picture{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-image img,
  body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:64% center!important;
    transform:none!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-content{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
    position:absolute!important;
    top:clamp(118px,17vh,155px)!important;
    left:22px!important;
    width:min(58vw,300px)!important;
    max-width:none!important;
    margin:0!important;
    z-index:4!important;
    font-size:clamp(29px,7.4vw,35px)!important;
    line-height:1.04!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro{
    max-width:36em!important;
    margin-bottom:8px!important;
    font-size:clamp(15px,3.9vw,17px)!important;
    line-height:1.44!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-question{
    max-width:36em!important;
    margin-bottom:18px!important;
    font-size:clamp(15px,3.9vw,17px)!important;
    line-height:1.38!important;
  }
}

@media(max-width:430px){
  body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
    top:112px!important;
    left:20px!important;
    width:60vw!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-image img,
  body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
    object-position:66% center!important;
  }
}


/* ===== 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;
}


/* ===== 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}}


/* ===== 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;
  }
}


/* ===== 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;
}


/* ===== 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;
  }
}


/* ===== 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 url("../images/implementation-research-hero.jpg") 59% center / cover no-repeat !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; }
}


/* ===== 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}
}


/* ===== sitewide-card-pop-20260918.css ===== */

/* Sitewide desktop card interaction. Outlines do not affect layout or load images. */
@media (hover:hover) and (pointer:fine){
  :is(.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-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(.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-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(.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-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. */
}