/* v39 — hard fix for cropped hero cutouts in accessibility mode.
   Instead of tweaking tiny offsets again, align the accessibility hero with the visual logic
   of the ordinary site: the lower edge of the cutouts is hidden by the white wave. */

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

body.vision-mode .ref-hero__inner{
  align-items:center !important;
  padding-bottom:180px !important;
}

/* The glow rectangle only makes the crop line more visible in the accessibility version. */
body.vision-mode .hero-people__halo{
  display:none !important;
}

/* Prevent any inner wrapper from cutting the PNG silhouettes. */
body.vision-mode .hero-people,
body.vision-mode .hero-people__stage{
  overflow:visible !important;
}

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

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

/* Lower the silhouettes slightly and softly fade the very bottom edge so it disappears under the wave,
   just like the ordinary version visually hides the lower edge. */
body.vision-mode .hero-person{
  max-height:none !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 86%,rgba(0,0,0,.45) 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 86%,rgba(0,0,0,.45) 93%,transparent 100%);
}
body.vision-mode .hero-person--one{--person-bottom:-22px !important}
body.vision-mode .hero-person--two{--person-bottom:-26px !important}
body.vision-mode .hero-person--three{--person-bottom:-30px !important}
body.vision-mode .hero-person--four{--person-bottom:-28px !important}

/* Make the white bottom wave clearly overlap the lower edge of the silhouettes. */
body.vision-mode .ref-hero::after{
  pointer-events:none !important;
  z-index:8 !important;
  left:-7% !important;
  right:-7% !important;
  height:230px !important;
  bottom:-118px !important;
  background:#f7f7f7 !important;
  border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
}

body.vision-mode .ref-hero__copy,
body.vision-mode .ref-actions,
body.vision-mode .ref-actions .ref-button{
  position:relative !important;
  z-index:12 !important;
}

body.vision-mode .hero-people__dots{
  bottom:132px !important;
  z-index:12 !important;
}

@media (max-width:1180px){
  body.vision-mode .ref-hero__inner{padding-bottom:164px !important;}
  body.vision-mode .hero-people{min-height:460px !important;}
  body.vision-mode .hero-person--one{--person-bottom:-18px !important}
  body.vision-mode .hero-person--two{--person-bottom:-22px !important}
  body.vision-mode .hero-person--three{--person-bottom:-24px !important}
  body.vision-mode .hero-person--four{--person-bottom:-22px !important}
  body.vision-mode .ref-hero::after{height:200px !important; bottom:-102px !important;}
  body.vision-mode .hero-people__dots{bottom:116px !important;}
}

@media (max-width:760px){
  body.vision-mode .ref-hero__inner{padding-bottom:118px !important;}
  body.vision-mode .hero-people{min-height:300px !important;}
  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:-16px !important}
  body.vision-mode .hero-person--four{--person-bottom:-14px !important}
  body.vision-mode .ref-hero::after{height:128px !important; bottom:-58px !important;}
  body.vision-mode .hero-people__dots{bottom:74px !important;}
}