/* v38 — finally fix hero cutouts in accessibility mode */

/* The lower edge of the cutout photos must disappear behind the white wave.
   We therefore keep the cutouts a little lower, make sure no inner wrapper crops them,
   and raise the white wave so it covers the visible lower edge. */
body.vision-mode .hero-people,
body.vision-mode .hero-people__stage{
  overflow: visible !important;
}

body.vision-mode .hero-people{
  position: relative !important;
  align-self: stretch !important;
  min-height: 520px !important;
}

body.vision-mode .hero-people__stage{
  position: absolute !important;
  inset: 0 !important;
}

body.vision-mode .hero-person{
  max-height: none !important;
}

/* Desktop / tablet: slightly lower photos + much higher white wave overlay. */
body.vision-mode .hero-person--one{--person-bottom:-10px !important}
body.vision-mode .hero-person--two{--person-bottom:-14px !important}
body.vision-mode .hero-person--three{--person-bottom:-18px !important}
body.vision-mode .hero-person--four{--person-bottom:-14px !important}

body.vision-mode .ref-hero::after{
  z-index: 8 !important;
  height: 188px !important;
  bottom: -82px !important;
  left: -6% !important;
  right: -6% !important;
  background: #f7f7f7 !important;
}

body.vision-mode .ref-hero{
  overflow: hidden !important;
}

body.vision-mode .ref-hero__inner{
  padding-bottom: 170px !important;
}

body.vision-mode .hero-people__dots{
  bottom: 112px !important;
}

@media (max-width: 1180px){
  body.vision-mode .hero-people{min-height: 470px !important;}
  body.vision-mode .hero-person--one{--person-bottom:-8px !important}
  body.vision-mode .hero-person--two{--person-bottom:-12px !important}
  body.vision-mode .hero-person--three{--person-bottom:-14px !important}
  body.vision-mode .hero-person--four{--person-bottom:-12px !important}
  body.vision-mode .ref-hero::after{height: 166px !important; bottom: -72px !important;}
  body.vision-mode .ref-hero__inner{padding-bottom: 154px !important;}
  body.vision-mode .hero-people__dots{bottom: 100px !important;}
}

@media (max-width: 760px){
  body.vision-mode .hero-people{min-height: 290px !important;}
  body.vision-mode .hero-person--one{--person-bottom:-6px !important}
  body.vision-mode .hero-person--two{--person-bottom:-10px !important}
  body.vision-mode .hero-person--three{--person-bottom:-12px !important}
  body.vision-mode .hero-person--four{--person-bottom:-10px !important}
  body.vision-mode .ref-hero::after{height: 118px !important; bottom: -50px !important;}
  body.vision-mode .ref-hero__inner{padding-bottom: 112px !important;}
  body.vision-mode .hero-people__dots{bottom: 68px !important;}
}