/* Eng To-Do #814: the hero must fit within the visible viewport.
   The sticky header (5rem) and the fixed bottom CTA bar (~5.5rem with its
   1% offset) shrink the usable height, so the hero media is sized from
   100svh minus that chrome. The old rules pulled the content over the
   media with width-percentage negative margins (-57%), which only align
   at one aspect ratio and let the fold spill under the CTA bar. */

@media (min-width: 992px) {
  .section_hero {
    --hero-media-h: clamp(30rem, 100svh - 11.5rem, 46rem);
  }
  .hero-image-wrapper {
    height: var(--hero-media-h);
    max-height: none;
  }
  .full-image.hero {
    aspect-ratio: auto;
    height: 100%;
  }
  .hero_wrap {
    margin-top: calc(-1 * var(--hero-media-h));
    top: 0;
    min-height: calc(var(--hero-media-h) + 5rem);
    padding-top: 5rem;
  }
  /* The appointment card straddles the media's bottom edge (the +5rem
     above) instead of floating mid-video. */
  .hero_wrap .hero_appointment_wrapper {
    margin-top: auto;
  }
}

/* Site-wide zoom-out on shorter screens: the layout is rem-based, so a
   smaller root compacts every section proportionally. !important guards
   against text-autosizing overrides on emulated/odd devices; nothing else
   sets a root font-size. */
@media (min-width: 992px) and (max-height: 940px) {
  html {
    font-size: 15px !important;
  }
}
@media (min-width: 992px) and (max-height: 840px) {
  html {
    font-size: 14px !important;
  }
}