/* ========================================================================== 
   AURUM SITEWIDE MOBILE HERO SYSTEM — 2026-09-01
   MOBILE ONLY. Desktop hero composition is intentionally untouched.

   Operational modes:
   - cover: dedicated portrait mobile crop fills the hero, copy overlays a
     controlled lower text-safe region.
   - preserve: wide/multi-person composition is shown intact as a clean photo
     panel, with copy below it. No blurred duplicate, no accidental crop.
   ========================================================================== */

@media (max-width:850px){
  .aurum-mobile-hero-picture{
    display:block;
    margin:0;
    padding:0;
  }
  .aurum-mobile-hero-picture img,
  .aurum-mobile-hero-image{
    display:block;
    transform:none!important;
    max-width:none!important;
  }

  /* -----------------------------------------------------------------------
     HOMEPAGE STORY CAROUSEL
     Stable story classes are emitted by PHP, so focal rules never depend on
     WordPress Media Library filenames again.
     ----------------------------------------------------------------------- */
  body.home .hero--slider{
    min-height:clamp(650px,154vw,790px)!important;
    height:clamp(650px,154vw,790px)!important;
    background:#171412!important;
  }
  body.home .hero--slider .hero-slides,
  body.home .hero--slider .hero-slide{
    width:100%!important;
    height:100%!important;
    min-height:inherit!important;
  }
  body.home .hero--slider .hero-slide,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait){
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    align-items:stretch!important;
    background:#171412!important;
    overflow:hidden!important;
  }
  body.home .hero--slider .hero-image,
  body.home .hero--slider .hero-image--portrait,
  body.home .hero--slider .hero-image picture,
  body.home .hero--slider .hero-image img,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-image,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-image img{
    position:absolute!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    min-height:0!important;
    transform:none!important;
    background:#171412!important;
  }
  body.home .hero--slider .hero-image img,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-image img{
    object-fit:cover!important;
    object-position:50% 40%!important;
  }
  /* SANAS, SUPREME, Setswe and Jirair each receive their own portrait-safe
     mobile source. The mobile source itself carries the composition, so the
     renderer never has to chase a face with object-position percentages. */
  body.home .hero--slider .home-story-mobile-picture,
  body.home .hero--slider .supreme-secure-hero-picture{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
  }
  body.home .hero--slider .home-story-mobile-picture img,
  body.home .hero--slider .supreme-secure-hero-picture img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  body.home .hero--slider .hero-shade,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-shade{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(0deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.78) 31%,rgba(11,10,9,.34) 55%,rgba(11,10,9,.08) 76%,rgba(11,10,9,.02) 100%)!important;
    pointer-events:none!important;
  }
  body.home .hero--slider .hero-content,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-content{
    position:relative!important;
    z-index:3!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:110px 22px 92px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    background:transparent!important;
  }
  body.home .hero--slider .hero-content h1,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-content h1{
    width:min(100%,12ch)!important;
    max-width:12ch!important;
    margin:0 0 22px!important;
    color:#fff!important;
    font-size:clamp(40px,10.8vw,58px)!important;
    line-height:.98!important;
    text-shadow:0 2px 22px rgba(0,0,0,.32)!important;
  }
  body.home .hero--slider .hero-scroll,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-scroll{
    align-self:flex-start!important;
    color:#fff!important;
    background:var(--aurum-red)!important;
    border:0!important;
    border-radius:999px!important;
    padding:15px 22px!important;
  }
  body.home .hero--slider .hero-nav{
    right:18px!important;
    bottom:24px!important;
    z-index:7!important;
  }

  /* Fallback homepage photograph gets a true portrait mobile source. */
  body.home .hero-slide .aurum-mobile-hero-picture--home-fallback{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  body.home .hero-slide .aurum-mobile-hero-picture--home-fallback img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  /* -----------------------------------------------------------------------
     ABOUT / LEADERSHIP — portrait-cover mode
     ----------------------------------------------------------------------- */
  body.about-overview .page-hero.about-hero,
  body.about-detail-leadership .page-hero.about-hero{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:clamp(610px,150vw,740px)!important;
    height:auto!important;
    padding:0 22px 42px!important;
    overflow:hidden!important;
    background:#171412!important;
  }
  body.about-overview .about-hero > .aurum-mobile-hero-picture,
  body.about-detail-leadership .about-hero > .aurum-mobile-hero-picture{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
  }
  body.about-overview .about-hero .about-hero-image,
  body.about-detail-leadership .about-hero .about-hero-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.about-overview .about-hero::before,
  body.about-detail-leadership .about-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(0deg,rgba(12,11,10,.92) 0%,rgba(12,11,10,.66) 36%,rgba(12,11,10,.12) 72%,rgba(12,11,10,.03) 100%)!important;
  }
  body.about-overview .about-hero > :not(.aurum-mobile-hero-picture),
  body.about-detail-leadership .about-hero > :not(.aurum-mobile-hero-picture){
    position:relative!important;
    z-index:2!important;
  }

  /* -----------------------------------------------------------------------
     HISTORY — preserve the full four-person photograph, then copy.
     ----------------------------------------------------------------------- */
  body.about-detail-history .page-hero.about-hero{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:0 0 36px!important;
    background:#171412!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  body.about-detail-history .about-hero > .aurum-mobile-hero-picture--history{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/2!important;
    background:#171412!important;
  }
  body.about-detail-history .about-hero .about-hero-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.about-detail-history .about-hero::before{display:none!important;}
  body.about-detail-history .about-hero > .eyebrow{margin:28px 22px 10px!important;padding:0!important;}
  body.about-detail-history .about-hero > h1{margin:0 22px 18px!important;padding:0!important;color:#fff!important;}
  body.about-detail-history .about-hero > .lead{margin:0 22px!important;padding:0!important;color:rgba(255,255,255,.88)!important;}

  /* -----------------------------------------------------------------------
     WHAT WE DO — dedicated portrait crop; desktop two-column is untouched.
     ----------------------------------------------------------------------- */
  body.work-overview .work-hero.has-work-media{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:clamp(620px,150vw,750px)!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    background:#171412!important;
  }
  body.work-overview .work-hero.has-work-media .work-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    z-index:0!important;
    border:0!important;
  }
  body.work-overview .work-hero.has-work-media .work-hero-media .aurum-mobile-hero-picture,
  body.work-overview .work-hero.has-work-media .work-hero-media img{
    width:100%!important;
    height:100%!important;
  }
  body.work-overview .work-hero.has-work-media .work-hero-media img{
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.work-overview .work-hero.has-work-media .work-hero-media::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(0deg,rgba(12,11,10,.93) 0%,rgba(12,11,10,.64) 38%,rgba(12,11,10,.10) 74%)!important;
    pointer-events:none!important;
  }
  body.work-overview .work-hero.has-work-media .work-hero-media figcaption{display:none!important;}
  body.work-overview .work-hero.has-work-media .work-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:300px 22px 40px!important;
    color:#fff!important;
  }

  /* -----------------------------------------------------------------------
     CLINICAL RESEARCH — dedicated portrait crop.
     ----------------------------------------------------------------------- */
  body.work-detail-clinical .clinical-research-hero{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:clamp(620px,150vw,750px)!important;
    height:auto!important;
    overflow:hidden!important;
    background:#171412!important;
  }
  body.work-detail-clinical .clinical-research-hero__media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }
  body.work-detail-clinical .clinical-research-hero__media .aurum-mobile-hero-picture,
  body.work-detail-clinical .clinical-research-hero__media img{
    width:100%!important;
    height:100%!important;
  }
  body.work-detail-clinical .clinical-research-hero__media img{
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.work-detail-clinical .clinical-research-hero__media::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(0deg,rgba(12,11,10,.94) 0%,rgba(12,11,10,.62) 40%,rgba(12,11,10,.08) 76%)!important;
  }
  body.work-detail-clinical .clinical-research-hero__content{
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    width:100%!important;
    max-width:none!important;
    padding:300px 22px 40px!important;
    margin:0!important;
    color:#fff!important;
  }

  /* -----------------------------------------------------------------------
     IMPLEMENTATION RESEARCH — preserve the full team/table composition.
     ----------------------------------------------------------------------- */
  body.work-detail-implementation .implementation-feature-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    min-height:0!important;
    height:auto!important;
    background:#171412!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  body.work-detail-implementation .implementation-feature-hero > .aurum-mobile-hero-picture--implementation{
    position:relative!important;
    inset:auto!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:2048/1058!important;
  }
  body.work-detail-implementation .implementation-feature-hero__image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.work-detail-implementation .implementation-feature-hero__overlay{display:none!important;}
  body.work-detail-implementation .implementation-feature-hero__content{
    position:relative!important;
    inset:auto!important;
    grid-row:2!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:28px 22px 36px!important;
    margin:0!important;
    background:#171412!important;
  }

  /* -----------------------------------------------------------------------
     TB — dedicated portrait crop.
     ----------------------------------------------------------------------- */
  .tb-isolated-hero{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:clamp(620px,150vw,750px)!important;
    height:auto!important;
    overflow:hidden!important;
    background:#171412!important;
  }
  .tb-isolated-hero > .aurum-mobile-hero-picture--tb{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  .tb-isolated-hero__image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  .tb-isolated-hero__shade{
    background:linear-gradient(0deg,rgba(12,11,10,.94) 0%,rgba(12,11,10,.62) 39%,rgba(12,11,10,.10) 76%)!important;
  }
  .tb-isolated-hero__content{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:none!important;
    padding:300px 22px 40px!important;
    margin:0!important;
  }

  /* -----------------------------------------------------------------------
     HIV — preserve both people in one clean image. No blurred duplicate.
     ----------------------------------------------------------------------- */
  .hiv-photo-hero--premium{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    min-height:0!important;
    height:auto!important;
    background:#171412!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  .hiv-photo-hero--premium > .aurum-mobile-hero-picture--hiv{
    position:relative!important;
    inset:auto!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:2/1!important;
    background:#171412!important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    filter:none!important;
  }
  .hiv-photo-hero--premium::before,
  .hiv-photo-hero--premium::after{display:none!important;content:none!important;}
  .hiv-photo-hero--premium .hiv-photo-hero__content{
    position:relative!important;
    inset:auto!important;
    grid-row:2!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:26px 22px 36px!important;
    background:#171412!important;
  }

  /* -----------------------------------------------------------------------
     HEALTH AREA COVER MODE — AMR / Maternal / Climate.
     ----------------------------------------------------------------------- */
  .area-hero--amr.area-hero--image-ready,
  .area-hero--maternal.area-hero--image-ready,
  .area-hero--climate.area-hero--image-ready{
    min-height:clamp(620px,150vw,750px)!important;
    height:auto!important;
    padding:0!important;
    background:#171412!important;
    overflow:hidden!important;
  }
  .area-hero--amr .area-hero-layout,
  .area-hero--maternal .area-hero-layout,
  .area-hero--climate .area-hero-layout{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:inherit!important;
    height:100%!important;
  }
  .area-hero--amr .area-hero-media--photo,
  .area-hero--maternal .area-hero-media--photo,
  .area-hero--climate .area-hero-media--photo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    z-index:0!important;
  }
  .area-hero--amr .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--maternal .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--climate .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--amr .area-hero-media--photo img,
  .area-hero--maternal .area-hero-media--photo img,
  .area-hero--climate .area-hero-media--photo img{
    width:100%!important;
    height:100%!important;
  }
  .area-hero--amr .area-hero-media--photo img,
  .area-hero--maternal .area-hero-media--photo img,
  .area-hero--climate .area-hero-media--photo img{
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  .area-hero--amr .area-hero-layout::after,
  .area-hero--maternal .area-hero-layout::after,
  .area-hero--climate .area-hero-layout::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(0deg,rgba(12,11,10,.94) 0%,rgba(12,11,10,.64) 39%,rgba(12,11,10,.10) 76%)!important;
  }
  .area-hero--amr .area-hero-copy,
  .area-hero--maternal .area-hero-copy,
  .area-hero--climate .area-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:300px 22px 40px!important;
    color:#fff!important;
  }

  /* -----------------------------------------------------------------------
     HEALTH AREA PRESERVE MODE — Diagnostics / Market / Quality.
     The full multi-person or two-focal-point frame stays visible.
     ----------------------------------------------------------------------- */
  .area-hero--diagnostics.area-hero--image-ready,
  .area-hero--market.area-hero--image-ready,
  .area-hero--quality.area-hero--image-ready{
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    background:#171412!important;
    color:#fff!important;
    overflow:hidden!important;
  }
  .area-hero--diagnostics .area-hero-layout,
  .area-hero--market .area-hero-layout,
  .area-hero--quality .area-hero-layout{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
  }
  .area-hero--diagnostics .area-hero-media--photo,
  .area-hero--market .area-hero-media--photo,
  .area-hero--quality .area-hero-media--photo{
    position:relative!important;
    inset:auto!important;
    order:-1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3/2!important;
    margin:0!important;
    overflow:hidden!important;
    background:#171412!important;
  }
  .area-hero--diagnostics .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--market .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--quality .area-hero-media--photo .aurum-mobile-hero-picture,
  .area-hero--diagnostics .area-hero-media--photo img,
  .area-hero--market .area-hero-media--photo img,
  .area-hero--quality .area-hero-media--photo img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  .area-hero--diagnostics .area-hero-media--photo img,
  .area-hero--market .area-hero-media--photo img,
  .area-hero--quality .area-hero-media--photo img{
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  .area-hero--diagnostics .area-hero-layout::after,
  .area-hero--market .area-hero-layout::after,
  .area-hero--quality .area-hero-layout::after{display:none!important;content:none!important;}
  .area-hero--diagnostics .area-hero-copy,
  .area-hero--market .area-hero-copy,
  .area-hero--quality .area-hero-copy{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:26px 22px 36px!important;
    background:#171412!important;
    color:#fff!important;
  }

  /* -----------------------------------------------------------------------
     DRIVEDX
     -----------------------------------------------------------------------
     DriveDx already has a dedicated mobile source + intact-photo mobile
     layout in drivedx-showcase-20260901.css. Do not override it here.
     ----------------------------------------------------------------------- */

  /* -----------------------------------------------------------------------
     GENERIC PROJECT HERO — current non-DriveDx project entries are text-only.
     This guard prevents future photographic project heroes from inheriting a
     desktop overscan transform before an explicit registry entry is added.
     ----------------------------------------------------------------------- */
  .project-hero.has-media .project-hero-media img,
  .project-hero.has-full-media .project-hero-media img{
    transform:none!important;
    max-width:none!important;
  }
}

@media (max-width:520px){
  body.home .hero--slider{
    min-height:clamp(650px,168vw,780px)!important;
    height:clamp(650px,168vw,780px)!important;
  }
  body.home .hero--slider .hero-content,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-content{
    padding:110px 20px 94px!important;
  }
  body.home .hero--slider .hero-content h1,
  body.home .hero--slider .hero-slide:has(.hero-image--portrait) .hero-content h1{
    font-size:clamp(38px,11.5vw,52px)!important;
  }
}