/* Warm medical interiors: shared Services and Contact hero treatment. */
.ambani-site--services .site-hero--subpage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgb(53 35 25 / 76%) 0%, rgb(68 44 29 / 65%) 44%, rgb(76 51 35 / 36%) 100%),
    var(--hero-img-services) !important;
  background-position: center, center;
  background-size: cover, cover;
}

.ambani-site--services .site-hero--subpage .site-hero__content {
  max-width: 47rem;
}

.ambani-site--services .site-hero--subpage h1,
.ambani-site--services .site-hero--subpage .site-hero__desc,
.ambani-site--services .site-hero--subpage .site-hero__desc p {
  color: #fffdf9;
  text-shadow: 0 1px 18px rgb(30 18 12 / 35%);
}

.medical-contact-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 38vw, 30rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgb(45 30 20 / 76%) 0%, rgb(61 40 27 / 60%) 45%, rgb(73 48 32 / 30%) 100%),
    url("/wp-content/themes/flynt-theme/assets/images/generated-medical-interiors/warm-practice-lounge.png");
  background-position: center;
  background-size: cover;
}

.medical-contact-hero__inner {
  width: min(100% - 3rem, 77rem);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  color: #fffdf9;
}

.medical-contact-hero h1 {
  max-width: 13ch;
  margin: 0;
  color: inherit;
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgb(30 18 12 / 35%);
}

.medical-contact-hero p {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: inherit;
  font-size: 1.125rem;
  line-height: 1.55;
  text-shadow: 0 1px 18px rgb(30 18 12 / 35%);
}

@media (max-width: 47.99em) {
  .ambani-site--services .site-hero--subpage {
    min-height: 31rem;
    background-image:
      linear-gradient(180deg, rgb(53 35 25 / 72%) 0%, rgb(68 44 29 / 62%) 60%, rgb(76 51 35 / 46%) 100%),
      var(--hero-img-services-mobile, var(--hero-img-services)) !important;
    background-position: 61% center;
  }

  .medical-contact-hero {
    min-height: 25rem;
    background-position: 58% center;
  }

  .medical-contact-hero__inner {
    width: min(100% - 2.5rem, 77rem);
    padding: 4.5rem 0 3.5rem;
  }

  .medical-contact-hero h1 {
    font-size: clamp(3.25rem, 15vw, 4.75rem);
  }
}