/* Hero scrim — index.html only.
   The hero video is the practice's own storefront: a pale beige facade under a
   bright sky, with the illuminated sign sitting right where the white h1 lands.
   Without a scrim the headline drops well under 4.5:1 and collides with the
   sign lettering. The gradient is heaviest across the headline band and lifts
   over the entrance so the building still reads. */

.section_hero .hero-image-wrapper {
  position: relative;
}

.section_hero .hero-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 17, 34, 0.64) 0%,
    rgba(8, 17, 34, 0.56) 38%,
    rgba(8, 17, 34, 0.3) 68%,
    rgba(8, 17, 34, 0.46) 100%
  );
}

/* Below 480px the theme pins the media to 26.25rem while .hero_wrap is pulled
   up over it, so the last line of the h1 spilled past the bottom edge and sat
   as white type on the white page. Give the media enough height to hold the
   whole headline and let the video fill it. */
@media screen and (max-width: 767px) {
  .section_hero .hero-image-wrapper {
    height: 38rem;
  }
  .section_hero .full-image.hero {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
  }
  /* The 2026-08-22 hero is a WIDE storefront frame, so a phone's narrow window
     onto it lands on blank wall and the sign falls outside the crop entirely.
     Bias the crop hard left, where the sign sits and drifts. Webflow puts
     object-fit on the inner <video>, not on .full-image, so target it directly. */
  .section_hero .full-image.hero > video {
    object-position: 6% 50%;
  }

  /* The theme zeroes .hero_wrap's side padding at mobile and leaves .hero-te at
     its desktop 4.7rem, so "Excellence." rendered wider than a 390px viewport —
     the E and the full stop touched both edges. Give the headline a gutter and a
     size that fits, and tighten the column gap so the whole stack (headline +
     chip marquee + booking card) still lands on the media. */
  /* The theme pulls .hero_wrap up by a PERCENTAGE of the viewport width
     (-55% from 480–767px, -100% below), so where the stack lands on the fixed
     38rem media changed with every screen width — at ~500px the chip marquee
     came to rest straddling the media's bottom edge and read as a cut-off row.
     Pin the pull to the media height instead so it is width-independent. */
  .section_hero .hero_wrap {
    grid-row-gap: 1.5rem;
    margin-top: -27rem;
    top: 0;
    padding-top: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* CAREFUL: the theme's `.text-align-center.fade-in{margin-top:-2.5rem}` hits
     BOTH hero h1s. On desktop the wrap's 2.5rem row-gap cancels it exactly, so
     the pair stacks tight. Any mobile row-gap smaller than 2.5rem therefore goes
     net-NEGATIVE and the two headings physically overlap. Zero the margin here
     and let the gap alone do the spacing — never re-tighten the gap without
     re-checking this. */
  .section_hero .hero_wrap h1.text-align-center.fade-in {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.85rem;
    line-height: 1.25;
  }
  .section_hero .hero_wrap h1.text-align-center.fade-in.hero-te {
    font-size: 3.1rem;
    line-height: 1.1;
  }
  /* The chip marquee is a full-bleed scroller; the wrap's new gutter would
     otherwise inset it and expose its clipped ends inside the content column. */
  .section_hero .hero_content {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}