/* V9.12: Mission & Vision hero uses the approved infographic, styled like the Home and About heroes.
   The infographic's Mission / Vision / Values panels sit in its right ~35%, so the overlay only
   darkens the building on the left and the hero copy is kept narrow enough not to cover them. */
.page-hero.v4-banner.atc-mv-hero{
  background:
    linear-gradient(90deg,rgba(7,23,30,.9) 0%,rgba(7,23,30,.78) 30%,rgba(7,23,30,.35) 48%,rgba(7,23,30,0) 60%),
    url('assets/mission-vision-approved.png') right center/cover no-repeat!important;
  background-color:#0b1c24!important;
  min-height:clamp(410px,37.5vw,680px);
}
.atc-mv-hero .wrap>*{max-width:min(560px,46vw)}
.page-hero.v4-banner.atc-mv-hero h1{font-size:clamp(36px,4.4vw,64px)}

.mv-showcase{background:linear-gradient(0deg,#edf7f5 0,#edf7f5 230px,#fff 230px)}

/* Tablets and phones: show the whole infographic, with the hero copy on a dark band beneath it. */
@media(max-width:1024px){
  .page-hero.v4-banner.atc-mv-hero{
    min-height:0;display:block;
    padding:calc(37.5vw + 34px) 0 44px!important;
    background:url('assets/mission-vision-approved.png') top center/100% auto no-repeat!important;
    background-color:#0b1c24!important;
  }
  .atc-mv-hero .wrap>*{max-width:none}
}