/*
   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.
*/
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&display=swap');
: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,
.hero--story h1,
.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 {
  margin-top: 18px !important;
  margin-bottom: 28px !important;
}

.hero--story h1 { 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,
  .hero--story h1,
  .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 { 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) — an embedded player up top instead
   of the plain-text card's flat gold rule, name/role caption below it. */
.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>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}
}