/* Visual bugfix pass — 16 Sep 2026. Surgical overrides only. */

/* SERVICE ARCHITECT HERO
   Keep the portrait filling its frame and keep the three approved traits as
   independent red rounded pills. Explicit resets protect this component from
   legacy generic hero-span/mobile rules. */
.page-service-refined .content-hero-media{
  position:relative!important;
  overflow:hidden!important;
  background:#0d0d0d!important;
}
.page-service-refined .content-hero-media>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  background:#0d0d0d!important;
  transform:none!important;
}
.page-service-refined .content-hero-media>.hero-trait-pills{
  position:absolute!important;
  z-index:12!important;
  left:clamp(16px,2vw,24px)!important;
  right:clamp(16px,2vw,24px)!important;
  top:auto!important;
  bottom:clamp(16px,2vw,24px)!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:inherit!important;
  text-align:left!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.page-service-refined .content-hero-media>.hero-trait-pills>span{
  position:static!important;
  inset:auto!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 16px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:999px!important;
  background:#d51f32!important;
  box-shadow:0 9px 24px rgba(0,0,0,.24)!important;
  color:#fff!important;
  font-family:Manrope,Arial,sans-serif!important;
  font-size:9px!important;
  font-weight:800!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-align:center!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}

/* MY STORY — TRILINGUAL CARD
   Legacy paired-card selector had greater specificity than the dark modifier,
   leaving white copy on a cream panel. Lock the intended dark editorial card
   and high-contrast copy. */
.my-story-editorial .my-story-principles-grid>.story-section.my-story-principle--language{
  background:#111!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 18px 50px rgba(8,8,8,.12)!important;
}
.my-story-editorial .my-story-principles-grid>.story-section.my-story-principle--language h2{
  color:#fff!important;
  opacity:1!important;
}
.my-story-editorial .my-story-principles-grid>.story-section.my-story-principle--language .story-body p{
  color:rgba(255,255,255,.82)!important;
  opacity:1!important;
}
.my-story-editorial .my-story-principles-grid>.story-section.my-story-principle--language .story-aside .eyebrow{
  color:#d51f32!important;
  opacity:1!important;
}
.my-story-editorial .my-story-principles-grid>.story-section.my-story-principle--language .story-aside>span{
  color:rgba(255,255,255,.10)!important;
}

/* Responsive safeguards. */
@media(max-width:900px){
  .page-service-refined .content-hero-media{
    aspect-ratio:4/5!important;
    min-height:0!important;
  }
  .page-service-refined .content-hero-media>img{
    object-position:center bottom!important;
  }
  .page-service-refined .content-hero-media>.hero-trait-pills{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    gap:7px!important;
  }
  .page-service-refined .content-hero-media>.hero-trait-pills>span{
    min-height:34px!important;
    padding:0 13px!important;
    font-size:8px!important;
    letter-spacing:.10em!important;
  }
}
@media(max-width:430px){
  .page-service-refined .content-hero-media>.hero-trait-pills{
    gap:6px!important;
  }
  .page-service-refined .content-hero-media>.hero-trait-pills>span{
    min-height:31px!important;
    padding:0 10px!important;
    font-size:7px!important;
    letter-spacing:.08em!important;
  }
}
