/* Shared purchase/brokerage hero-person presentation. */
#top .hero-support-illustration.hero-support-illustration--staff-phone-companion {
  justify-self: center;
  align-items: flex-end;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  overflow: visible;
}

#top .hero-support-illustration.hero-support-illustration--staff-phone-companion img {
  margin-inline: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 24, 53, 0.34));
}

#top .hero-support-illustration.hero-support-illustration--staff-phone-companion .hero-person-color-mask {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: auto;
  height: clamp(320px, 34vw, 470px);
  aspect-ratio: 1024 / 1120;
  background:
    radial-gradient(ellipse 25% 21% at 50% 26%, rgba(255, 116, 76, 0.82) 0%, rgba(255, 142, 102, 0.52) 48%, rgba(255, 159, 118, 0) 100%),
    radial-gradient(ellipse 13% 12% at 55% 70%, rgba(255, 126, 86, 0.54) 0%, rgba(255, 153, 111, 0) 100%),
    radial-gradient(ellipse 13% 14% at 70% 72%, rgba(255, 126, 86, 0.5) 0%, rgba(255, 153, 111, 0) 100%);
  -webkit-mask: url("assets/hero-purchase-staff-phone-front-v11-natural-face-hair.png") center bottom / contain no-repeat;
  mask: url("assets/hero-purchase-staff-phone-front-v11-natural-face-hair.png") center bottom / contain no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.38;
  pointer-events: none;
}

#top .hero-support-illustration.hero-support-illustration--staff-phone-companion::before {
  transform: translateX(-50%);
}

@media (min-width: 521px) {
  #top .hero-inner {
    --hero-person-height: clamp(310px, 36vw, 430px);
    grid-template-rows: auto var(--hero-person-height) auto;
    row-gap: 0;
    padding-top: 32px;
    padding-bottom: 24px;
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion {
    width: 100%;
    max-width: none;
    height: var(--hero-person-height);
    margin: 0;
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion img {
    height: clamp(330px, 38.5vw, 462px);
    transform: translateY(14px);
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion .hero-person-color-mask {
    height: clamp(330px, 38.5vw, 462px);
    transform: translate(-50%, 14px);
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion::before {
    top: 6%;
    width: min(82%, 560px);
    height: 88%;
    opacity: 0.76;
    transform: translateX(-50%);
  }
}

@media (max-width: 520px) {
  :root {
    --hero-mobile-person-height: clamp(230px, 65vw, 288px);
  }

  #top .hero-inner {
    grid-template-rows: auto var(--hero-mobile-person-height) auto;
    row-gap: 0;
    padding-top: 20px;
    padding-bottom: 16px;
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion {
    width: 100%;
    max-width: none;
    height: var(--hero-mobile-person-height);
    margin: 0;
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion img {
    height: clamp(242px, 68.2vw, 303px);
    transform: translateY(10px);
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion .hero-person-color-mask {
    height: clamp(242px, 68.2vw, 303px);
    transform: translate(-50%, 10px);
  }

  #top .hero-support-illustration.hero-support-illustration--staff-phone-companion::before {
    top: 8%;
    width: 86%;
    height: 84%;
    opacity: 0.72;
    transform: translateX(-50%);
  }
}