/* Mobile homepage hero banner fix
   Keeps the hero image and copy in the same overlay system as desktop.
   The previous mobile patch changed the copy to normal flow, which forced
   the image and text to sit beside/under each other and caused clipping. */

@media (max-width: 760px) {
  .homepage-top-visual-banner {
    position: relative !important;
    overflow: hidden !important;
    min-height: clamp(500px, 130vw, 580px) !important;
    height: auto !important;
    display: block !important;
    isolation: isolate !important;
    background: #eaf6fb !important;
  }

  .homepage-top-visual-banner picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .homepage-top-visual-banner img,
  .homepage-top-banner-image,
  .homepage-top-visual-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .homepage-top-visual-banner::before {
    z-index: 1 !important;
    background: linear-gradient(
      180deg,
      rgba(4, 34, 73, 0.10) 0%,
      rgba(4, 34, 73, 0.48) 46%,
      rgba(4, 34, 73, 0.74) 76%,
      rgba(4, 34, 73, 0.90) 100%
    ) !important;
  }

  .homepage-top-visual-banner::after {
    z-index: 2 !important;
  }

  .homepage-top-banner-content,
  .homepage-top-visual-banner-content,
  .homepage-top-banner-copy,
  .homepage-top-visual-copy {
    position: absolute !important;
    inset: auto 22px 34px 22px !important;
    width: auto !important;
    max-width: min(360px, calc(100vw - 44px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
    transform: none !important;
    color: #ffffff !important;
  }

  .homepage-top-visual-banner h1,
  .homepage-top-banner-content h1,
  .homepage-top-banner-copy h1,
  .homepage-top-visual-copy h1 {
    font-size: clamp(34px, 9.8vw, 46px) !important;
    line-height: 1 !important;
    max-width: 11ch !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.052em !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.52) !important;
  }

  .homepage-top-banner-eyebrow {
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  .homepage-top-banner-content p:not(.homepage-top-banner-eyebrow) {
    max-width: 31ch !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42) !important;
  }

  .homepage-top-banner-cta {
    margin-top: 22px !important;
    min-height: 48px !important;
    min-width: 170px !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
  }

  .homepage-top-visual-banner + main,
  .homepage-top-visual-banner + section {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (max-width: 430px) {
  .homepage-top-visual-banner {
    min-height: 510px !important;
  }

  .homepage-top-banner-content,
  .homepage-top-visual-banner-content,
  .homepage-top-banner-copy,
  .homepage-top-visual-copy {
    inset: auto 20px 28px 20px !important;
    max-width: calc(100vw - 40px) !important;
  }

  .homepage-top-visual-banner h1,
  .homepage-top-banner-content h1,
  .homepage-top-banner-copy h1,
  .homepage-top-visual-copy h1 {
    font-size: clamp(34px, 9.5vw, 41px) !important;
    max-width: 11.5ch !important;
  }

  .homepage-top-banner-content p:not(.homepage-top-banner-eyebrow) {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
}