/* 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 <h1> stays in the DOM as .screen-reader-text so the
   page still has a real heading for accessibility/SEO. .screen-reader-text
   is the standard WP-core sr-only pattern; this theme didn't define it
   yet because nothing needed it until now. */
.project-hero-logo--heading{width:clamp(240px,26vw,380px);margin-bottom:28px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.project-hero.has-media .project-partners-line{max-width:calc(100% - min(32vw,450px));margin-right:min(32vw,450px)}
.project-section.teal.has-texture{
  background-image:linear-gradient(125deg,rgba(7,87,102,.88),rgba(19,120,138,.84)),var(--texture-url);
  background-size:auto,cover;
  background-position:left top,center;
  background-repeat:repeat,no-repeat;
}
@media(max-width:850px){
  .project-hero-logo{width:120px;margin-bottom:18px}
  .project-hero.has-media .project-partners-line{max-width:none;margin-right:0}
}

/* 2026-08-17: client rejected the standalone 3-photo strip that sat
   between sections with no text around it ("random looking, out of
   place... add them in blocks with some of the written content") —
   photos now live inside the context/context2 prose sections as a
   text+image split, replacing the isolated .phase8-media-rail band. */
.project-context-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.62fr);gap:clamp(28px,5vw,56px);align-items:center;margin-top:14px}
.project-context-split .lead{margin:0}
.project-context-media{margin:0;min-height:280px;position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--aurum-ink)}
.project-context-media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
@media(max-width:850px){
  .project-context-split{grid-template-columns:1fr}
  .project-context-media{min-height:240px}
}

/* 2026-08-17: client asked to drop the photo from "Closing the TB
   Diagnostics Gap" too and just let the 4 existing paragraphs fill the
   section instead of sitting in one narrow column with empty space
   beside it ("spread the content out nicely... no waste space"). Text
   only, same words, balanced into two columns across the section's full
   width rather than widening the paragraph column itself (which would
   make lines uncomfortably long). */
.lead.project-context-wide{max-width:none;column-count:2;column-gap:clamp(40px,5vw,70px);margin-top:14px}
.lead.project-context-wide p{break-inside:avoid;margin:0 0 26px}
.lead.project-context-wide p:last-child{margin-bottom:0}
@media(max-width:850px){
  .lead.project-context-wide{column-count:1}
}

/* 2026-08-17: "Shaping the Future of TB Diagnosis" editorial redesign —
   exact wording/images/Back button untouched per the client's brief; this
   is layout/spacing/type only. Title up top, two images stacked left,
   the same two existing paragraphs right, no new headings/labels/cards. */
.project-editorial{padding:clamp(60px,8vw,110px) clamp(24px,7vw,110px)}
.project-editorial-inner{max-width:1240px;margin:0 auto}
.project-editorial-title{margin:0 0 clamp(40px,4vw,55px);font-size:clamp(48px,5vw,72px);font-weight:700;line-height:1;letter-spacing:-.03em;max-width:680px;color:var(--aurum-ink)}
.project-editorial-title em{color:var(--aurum-red);font-style:normal}
.project-editorial-grid{display:grid;grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);grid-auto-rows:auto;column-gap:clamp(70px,6vw,100px);row-gap:16px;align-items:center}
.project-editorial-figure{margin:0;border-radius:14px;overflow:hidden;background:var(--aurum-ink)}
.project-editorial-figure img{display:block;width:100%;height:auto;aspect-ratio:1.32;object-fit:cover;filter:saturate(.94)}
.project-editorial-p{margin:0;font-size:clamp(17px,1.1vw,19px);line-height:1.65;max-width:530px;color:#211d1a}
.project-editorial-p:first-of-type{padding-bottom:18px;border-bottom:1px solid rgba(33,29,26,.14)}
@media(max-width:1100px) and (min-width:851px){
  .project-editorial-grid{column-gap:clamp(40px,4vw,64px)}
  .project-editorial-title{font-size:clamp(42px,4.6vw,58px)}
}
@media(max-width:850px){
  .project-editorial-grid{grid-template-columns:1fr;row-gap:16px}
  .project-editorial-p{margin-top:0}
  .project-editorial-p:first-of-type{margin-bottom:32px}
  .project-editorial-title{font-size:clamp(36px,9vw,48px);max-width:none}
}