/* ===== SOURCE: design-tokens.css ===== */
:root{
/* Aurum Institute Brand Guide: primary palette */
--aurum-red:#CD2026;--aurum-gold:#E0AC26;
/* Brand Guide: bright secondary palette */
--aurum-orange:#DC602E;--aurum-light-blue:#B6E2E9;--aurum-teal:#077187;--aurum-green:#74A57F;
/* Brand Guide: neutrals */
--aurum-slate:#6F8695;--aurum-cream:#F7F5EB;--aurum-mid-grey:#B7B6C2;--aurum-smoke:#D1D5DE;--aurum-ink:#191613;
--aurum-line:rgba(25,22,19,.18);--aurum-line-light:rgba(247,245,235,.24);
/* Aurum's licensed brand faces (Neue Haas Grotesk primary, Averta Italic
secondary — see the Corporate Identity Manual, p.22-23) aren't
available as web fonts, so free stand-ins carry the same roles until
the client's agency can supply real @font-face files: Archivo for
Neue Haas Grotesk (both loaded via Google Fonts, see functions.php),
Plus Jakarta Sans Italic for Averta's italic-only accent role. The
licensed names stay first in each stack so real @font-face files would
take over automatically the moment they're added, with no CSS changes
needed here. This is the one place these two variables are defined —
every page loads this file first, so fixing it here fixes every page;
it previously fell through straight to bare Arial on every page except
the homepage (which had a homepage-only override), which was the
biggest single cause of the site reading stale. */
--font-primary:"Neue Haas Grotesk","Archivo",Arial,sans-serif;
--font-secondary:"Averta","Plus Jakarta Sans",Arial,sans-serif;
--font-size-label:clamp(9px,.7vw,11px);--font-size-body:clamp(16px,1.2vw,19px);--leading-body:1.62;
--radius-card:7px;--radius-control:3px;--shadow-editorial:0 28px 70px rgba(25,22,19,.14);--ease-editorial:cubic-bezier(.16,1,.3,1)
}
html{font-family:var(--font-primary);background:#fff}body{color:var(--aurum-ink)}a,button{font-family:inherit}a,a:visited{color:inherit;text-decoration:none}button{cursor:pointer}:focus-visible{outline:2px solid var(--aurum-gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.data-table{width:100%;border-collapse:collapse;border-top:2px solid var(--aurum-gold);font-size:15px;background:#fff}.data-table th,.data-table td{padding:16px 18px;border-bottom:1px solid var(--aurum-line);text-align:left;vertical-align:top}.data-table th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--aurum-red);font-weight:700}.data-table td:last-child,.data-table th:last-child{text-align:right}.data-table tr:hover td{background:#fff7df}.status{display:inline-block;padding:5px 8px;border-radius:var(--radius-control);font-size:10px;text-transform:uppercase;letter-spacing:.1em;background:var(--aurum-light-blue);color:var(--aurum-teal)}
@media(max-width:600px){.data-table{font-size:13px;display:block;overflow-x:auto;white-space:normal}.data-table th,.data-table td{padding:13px 12px;min-width:145px}.data-table th:first-child,.data-table td:first-child{min-width:170px}}
/* 2026-08-17: site-wide replacement for the raw →/›/↗ characters — see
aurum_arrow_icon() in functions.php. Sized in em so it scales with
whatever text size/color context it's dropped into. */
.aurum-arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none}
.aurum-arrow-icon--diagonal{transform:rotate(-45deg)}
.aurum-arrow-icon--down{transform:rotate(90deg)}
.aurum-arrow-icon--left{transform:scaleX(-1)}
.aurum-arrow-icon--up{transform:rotate(-90deg)}
.aurum-chevron-icon-wrap{display:inline-flex}
.aurum-chevron-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;transition:transform .2s ease}
.health-work-toggle[aria-expanded="true"] .aurum-chevron-icon{transform:rotate(180deg)}
/* ===== SOURCE: subpage.css ===== */
@import url("design-tokens.css");@import url("subpage-phase2.css");
:root{--red:#CD2026;--gold:#E0AC26;--cream:#F7F5EB;--ink:#191613;--teal:#077187;--line:rgba(25,22,19,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-primary)}.site-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:18px clamp(22px,6vw,90px);background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}.brand{width:128px}.brand img{width:100%}.site-header nav{display:flex;gap:clamp(14px,2.5vw,34px);margin-left:auto}.site-header nav a,.header-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase}.site-header nav a:hover,.header-link:hover{color:var(--red)}.header-link{border-left:1px solid var(--line);padding-left:24px;color:var(--red)}.mobile-nav{display:none}.page-hero{padding:clamp(90px,13vw,190px) clamp(22px,9vw,150px) 80px;background:var(--red);color:#fff}.eyebrow,.kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}h1{font-size:clamp(64px,10vw,150px);line-height:.84;letter-spacing:-.075em;margin:28px 0 0;max-width:1000px}h1 em,h2 em{font-style:italic;color:var(--gold)}.page-section{padding:clamp(75px,10vw,145px) clamp(22px,9vw,150px);border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:54px}h2{font-size:clamp(42px,6vw,86px);line-height:.9;letter-spacing:-.065em;margin:0}.lead{font-size:18px;line-height:1.6;color:#665f57;max-width:560px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{min-height:230px;padding:24px;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:7px;background:#fff;transition:transform .4s ease,background .4s ease}.card:hover{transform:translateY(-8px);background:#fff2d1}.card b{color:var(--red);font-size:11px}.card h3{font-size:32px;letter-spacing:-.05em;margin:70px 0 12px}.card p{font-size:14px;line-height:1.45;color:#665f57}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{padding:34px;border-radius:7px;background:var(--teal);color:#fff;min-height:260px}.panel.gold{background:var(--gold);color:var(--ink)}.panel h3{font-size:42px;letter-spacing:-.06em;margin:45px 0 0}.panel p{line-height:1.55}.site-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:30px clamp(22px,6vw,90px);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.site-footer img{width:110px}.site-footer a{color:var(--red)}@media(max-width:850px){.site-header{padding:16px 22px}.site-header nav,.header-link{display:none}.mobile-nav{display:none;flex-direction:column;gap:20px;padding:28px 22px;background:var(--red);color:#fff}.mobile-nav a{font-size:25px}.section-head,.split{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.site-footer{flex-wrap:wrap}}
.skip-link{position:fixed;z-index:40;left:18px;top:12px;transform:translateY(-170%);background:var(--aurum-red);color:#fff;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;transition:transform .25s var(--ease-editorial)}.skip-link:focus{transform:none}.shell-menu{display:none;margin-left:auto;border:1px solid var(--aurum-red);background:transparent;color:var(--aurum-red);padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.mobile-nav[aria-label="Mobile navigation"] a[aria-current="page"]{color:var(--aurum-gold)}
/* header.php's .menu-toggle button (shared with the homepage) needs its own
desktop-hide rule here — styles.css supplies this on the homepage, but
subpage.css never did, which is what let it render unstyled and overlap
the desktop nav/Contact link on every subpage. modern-refresh.css already
supplies the max-width:850px override that shows it again on mobile. */
.menu-toggle{display:none}
@media(max-width:850px){.shell-menu{display:block}.mobile-nav.is-open{display:flex;position:fixed;z-index:4;inset:74px 0 auto 0;max-height:calc(100svh - 74px);overflow:auto;transform:none}.mobile-nav.is-open a{font-size:25px}}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}
.site-header nav{gap:7px;align-items:center}.site-header nav a{position:relative;display:inline-flex;align-items:center;color:var(--aurum-ink);padding:10px 12px;border:1px solid transparent;border-radius:var(--radius-control);text-decoration:none;transition:color .25s var(--ease-editorial),background .25s var(--ease-editorial),border-color .25s var(--ease-editorial),transform .25s var(--ease-editorial)}.site-header nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--aurum-gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-editorial)}.site-header nav a:hover{color:var(--aurum-red);background:rgba(224,172,38,.12);border-color:rgba(224,172,38,.55);transform:translateY(-1px)}.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}.site-header nav a[aria-current="page"]{color:var(--aurum-red);background:rgba(205,32,38,.055);border-color:rgba(205,32,38,.34)}.site-header nav a[aria-current="page"]::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--aurum-gold)}.site-header .header-link{color:var(--aurum-red);text-decoration:none}.site-header .header-link:hover{color:var(--aurum-ink)}
@media(max-width:850px){.site-header nav a{padding:0;border:0;border-radius:0;background:none}.site-header nav a::after,.site-header nav a::before{display:none}}
@media(prefers-reduced-motion:reduce){.site-header nav a{transition:none}}
/* ===== SOURCE: about-phase3.css ===== */
/* Phase 3: About, history and leadership composition. */
.about-hero{background:var(--aurum-red);color:#fff;position:relative;overflow:hidden}.about-hero::after{content:"A";position:absolute;right:4vw;bottom:-.25em;font-size:45vw;line-height:.7;color:rgba(255,255,255,.08);font-weight:700;pointer-events:none}.about-hero h1{position:relative;z-index:1}.about-hero .lead{position:relative;z-index:1;color:rgba(255,255,255,.86);margin-top:36px;max-width:680px}.about-hero .lead em{color:var(--aurum-gold);font-family:var(--font-secondary);font-style:italic}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.proof-card{padding:28px;min-height:270px;border-radius:var(--radius-card);border-top:3px solid var(--aurum-gold);background:#fff}.proof-card:nth-child(2){background:var(--aurum-light-blue);border-top-color:var(--aurum-teal)}.proof-card:nth-child(3){background:var(--aurum-orange);color:#fff;border-top-color:var(--aurum-red)}.proof-card b{font-size:11px;color:var(--aurum-red);letter-spacing:.12em}.proof-card:nth-child(3) b{color:#fff}.proof-card h3{font-size:clamp(27px,3vw,45px);line-height:.92;letter-spacing:-.06em;margin:68px 0 14px}.proof-card p{font-size:15px;line-height:1.5;margin:0}.purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.purpose-card{min-height:260px;border-radius:var(--radius-card);padding:34px;background:var(--aurum-gold)}.purpose-card.red{background:var(--aurum-red);color:#fff}.purpose-card .kicker{color:var(--aurum-red)}.purpose-card.red .kicker{color:var(--aurum-gold)}.purpose-card h3{font-size:clamp(33px,4vw,58px);line-height:.9;letter-spacing:-.06em;margin:50px 0 0}.history{background:var(--aurum-ink)}.timeline{position:relative;display:grid;gap:0}.timeline::before{content:"";position:absolute;left:94px;top:0;bottom:0;width:2px;background:var(--aurum-gold)}.timeline-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:36px;padding:0 0 56px}.timeline-year{font-size:13px;letter-spacing:.12em;color:var(--aurum-red);font-weight:700;text-align:right;padding-top:5px}.timeline-dot{position:absolute;left:87px;top:4px;width:16px;height:16px;background:var(--aurum-red);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--aurum-red)}.timeline-copy{max-width:740px}.timeline-copy h3{font-size:clamp(27px,3vw,45px);letter-spacing:-.06em;line-height:.92;margin:0 0 14px}.timeline-copy p{font-size:16px;line-height:1.6;color:#665f57;margin:0}.leadership{background:var(--aurum-teal);color:#fff}.leadership .section-head .lead{color:rgba(255,255,255,.78)}.leadership .section-index{color:var(--aurum-gold)}.leadership-group{margin-top:74px}.leadership-group>h3{font-size:clamp(30px,4vw,58px);letter-spacing:-.06em;margin:0 0 28px;color:#fff}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.profile{background:#fff;color:var(--aurum-ink);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 12px 32px rgba(25,22,19,.08);content-visibility:auto;contain-intrinsic-size:1px 340px}.profile summary{list-style:none;cursor:pointer;padding:0}.profile summary::-webkit-details-marker{display:none}.portrait-placeholder{position:relative;height:190px;display:grid;place-items:center;background:linear-gradient(145deg,var(--aurum-smoke),var(--aurum-light-blue));color:var(--aurum-teal);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
/* 2026-08-11: this used to only be set inside modern-refresh.css/density-review.css's
desktop-only (min-width:851px) media query, so below that width the ![]()
had no
sizing rule at all and just sat at its natural size — badly cropped/misaligned
portraits on mobile. Making it unscoped so every breakpoint gets the same
fill-the-frame treatment; the desktop !important rules still apply on top of this
without conflict. */
.portrait-placeholder img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.portrait-placeholder:has(img)::before,.portrait-placeholder:has(img)::after{display:none}.profile:nth-child(3n+2) .portrait-placeholder{background:linear-gradient(145deg,var(--aurum-gold),#f4d982)}.profile:nth-child(3n+3) .portrait-placeholder{background:linear-gradient(145deg,var(--aurum-orange),var(--aurum-red));color:#fff}.profile-meta{padding:20px}.profile-role{display:block;color:var(--aurum-red);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}.profile-name{font-size:27px;line-height:.95;letter-spacing:-.05em;margin:0}.profile-action{display:block;color:var(--aurum-red);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:22px}.profile[open] .profile-action::after{content:""}.profile-bio{padding:0 20px 24px;border-top:1px solid var(--aurum-line);margin-top:0;padding-top:18px;font-size:14px;line-height:1.55;color:#665f57}.profile-bio p{margin:0 0 14px}.experts-note{border:1px solid rgba(255,255,255,.42);padding:24px;border-radius:var(--radius-card);font-size:16px;line-height:1.55;color:rgba(255,255,255,.86)}
@media(max-width:850px){.proof-grid,.purpose-grid,.profile-grid{grid-template-columns:1fr}.timeline::before{left:13px}.timeline-item{grid-template-columns:1fr;gap:8px;padding-left:42px}.timeline-year{text-align:left}.timeline-dot{left:6px}.portrait-placeholder{height:220px}.profile-meta{padding:14px 16px}.profile-name{font-size:21px}.profile-role{margin-bottom:6px}.profile-action{margin-top:12px}}
/* ===== SOURCE: media-phase8.css ===== */
/* Phase 8: approved client media, editorial crops and honest placeholder states. */
.phase8-photo-band{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:14px;margin:clamp(48px,7vw,92px) 0 0;align-items:stretch}.phase8-photo-band figure{margin:0;min-height:360px;position:relative;overflow:hidden;background:var(--aurum-ink);border-radius:var(--radius-card)}.phase8-photo-band figure:nth-child(2){min-height:260px;align-self:end}.phase8-photo-band img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-editorial);filter:saturate(.92)}.phase8-photo-band figure:hover img{transform:scale(1.035)}.phase8-photo-band figcaption{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-size:10px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.45)}.phase8-photo-band figcaption span{display:block;color:var(--aurum-gold);margin-bottom:5px}.phase8-media-section{padding:clamp(74px,9vw,130px) clamp(22px,9vw,150px);background:#fff;border-bottom:1px solid var(--aurum-line)}.phase8-media-section .section-head{margin-bottom:42px}.phase8-media-section .section-head .lead{max-width:700px}.phase8-media-rail{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:14px;align-items:stretch}.phase8-media-rail figure{margin:0;min-height:300px;position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--aurum-ink)}.phase8-media-rail figure:first-child{min-height:410px}.phase8-media-rail img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .9s var(--ease-editorial);filter:saturate(.92)}.phase8-media-rail figure:hover img{transform:scale(1.04)}.phase8-media-rail figcaption{position:absolute;left:15px;right:15px;bottom:13px;color:#fff;font-size:10px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.5)}.phase8-media-rail figcaption span{display:block;color:var(--aurum-gold);margin-bottom:5px}.project-hero.has-media .project-hero-media{position:absolute;z-index:1;right:clamp(22px,8vw,140px);top:clamp(96px,13vw,170px);width:min(28vw,380px);height:min(34vw,440px);margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-card);background:var(--aurum-ink);box-shadow:0 24px 80px rgba(0,0,0,.18)}.project-hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}.project-hero-media figcaption{position:absolute;left:13px;right:13px;bottom:11px;color:#fff;font-size:9px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.45)}.project-hero-media figcaption span{display:block;color:var(--aurum-gold);margin-bottom:4px}.project-hero.has-media h1,.project-hero.has-media>.lead,.project-hero.has-media .project-meta{max-width:calc(100% - min(32vw,450px));margin-right:min(32vw,450px)}.office-visual{margin:0;min-height:280px;overflow:hidden;border-radius:var(--radius-card);background:var(--aurum-ink);position:relative}.office-visual img{width:100%;height:100%;min-height:280px;display:block;object-fit:cover;filter:saturate(.9)}.office-visual figcaption{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.phase8-history-image{display:block;min-height:clamp(340px,42vw,560px);margin:clamp(48px,7vw,92px) 0 0;position:relative;overflow:hidden;background:var(--aurum-ink);border-radius:var(--radius-card)}.phase8-history-image img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.9)}.phase8-history-image figcaption{position:absolute;left:20px;bottom:18px;max-width:320px;color:#fff;font-size:10px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.45)}.phase8-history-image figcaption span{display:block;color:var(--aurum-gold);margin-bottom:5px}
@media(max-width:850px){.phase8-photo-band,.phase8-media-rail{grid-template-columns:1fr}.phase8-photo-band figure,.phase8-photo-band figure:nth-child(2),.phase8-media-rail figure,.phase8-media-rail figure:first-child{min-height:300px}.project-hero.has-media .project-hero-media{position:relative;top:auto;right:auto;width:100%;height:min(78vw,420px);margin:34px 0 0;z-index:1}.project-hero.has-media h1,.project-hero.has-media>.lead,.project-hero.has-media .project-meta{max-width:none;margin-right:0}.project-hero.has-media{padding-bottom:60px}}
.contact-main{background-image:linear-gradient(90deg,rgba(25,22,19,.97) 0%,rgba(25,22,19,.78) 56%,rgba(25,22,19,.58)),url('../photos/client/root/community-mother-child.jpg');background-size:cover;background-position:center 42%}
/* 2026-08-17: DriveDx4TB TOO page build.
- .project-hero-logo: small programme-logo badge above the H1, same
"logo as masthead" treatment used on the SUPREME-SECURE story.
- .project-partners-line: the new partner-credit paragraph needs the
same width squeeze as h1/.lead/.project-meta get from .has-media, or
it runs full-width behind the floating hero photo.
- .project-section.teal.has-texture: layers the DriveDx4TB TOO network
graphic under the section's own teal gradient (semi-transparent so it
reads as texture, not a competing full-strength image) rather than
replacing the flat teal fill outright. */
/* 2026-08-17: full-bleed hero photo variant — "width to width like the
hero images on the home page" (.hero-slide .hero-image), not the small
corner-box .project-hero-media treatment other projects use. Image
fills the whole hero section behind the text; the decorative red/gold
::before gradient (designed to sit on the flat --aurum-ink background)
is switched off in favour of a plain dark bottom-weighted scrim so a
real photo stays legible under white text, matching .hero-shade's own
gradient direction on the homepage slider. */
.project-hero.has-full-media{overflow:hidden}
/* .page-hero::before (modern-refresh.css, a gold radial blob) is designed
to sit tastefully on the flat dark .page-hero background other pages
use — over a real photo it reads as stray colour, so it's switched off.
.page-hero::after (a decorative ring: fixed 260x260 circle, border-radius
50%, box-shadow rings) shares its ::after slot with the dark scrim below
— the scrim rule didn't originally reset ::after's width/height/
border-radius/box-shadow/border, so the ring's shape leaked through
underneath the gradient, showing up as a stray circle behind the hero
copy. Reset explicitly here instead of relying on the scrim rule to
silently override every property. */
.project-hero.has-full-media::before{display:none}
.project-hero.has-full-media .project-hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;background:none}
.project-hero.has-full-media .project-hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.project-hero.has-full-media::after{content:"";position:absolute;inset:0;z-index:1;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:linear-gradient(0deg,rgba(15,13,11,.92),rgba(15,13,11,.62) 45%,rgba(15,13,11,.32));pointer-events:none}
.project-hero.has-full-media>*:not(.project-hero-media){position:relative;z-index:2}
.project-hero-logo{display:block;width:150px;height:auto;margin:0 0 22px}
/* 2026-08-17: client wants the DriveDx4TB TOO logo to BE the big heading
(not a small badge above plain text) — sized like the h1 it replaces
visually; the real