/* Upgrade 198 -- make the mobile home hero photo visible, not frosted.
   Small-device only; desktop sphere/hero rules are intentionally untouched. */

@media (max-width: 980px) {
  .cms-page-home .hero-home {
    background-image:
      radial-gradient(circle at 50% 42%, rgba(7, 88, 216, .10), transparent 34%),
      linear-gradient(90deg, rgba(3, 13, 29, .84) 0%, rgba(4, 26, 61, .70) 42%, rgba(4, 26, 61, .46) 66%, rgba(3, 13, 29, .72) 100%),
      url("/media/pages/heroes/about-hero.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #03162f !important;
    isolation: isolate !important;
  }

  .cms-page-home .hero-home .hero-visual-layer,
  .cms-page-home .hero-home .hero-visual-photo {
    display: none !important;
  }

  .cms-page-home .hero-home::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 1 !important;
    background:
      linear-gradient(90deg, rgba(4,18,39,.82) 0%, rgba(7,34,73,.58) 44%, rgba(4,18,39,.42) 100%),
      radial-gradient(circle at 50% 45%, rgba(7,88,216,.22), transparent 42%) !important;
    pointer-events: none !important;
  }

  .cms-page-home .hero-home::after {
    display: none !important;
    content: none !important;
  }

  .cms-page-home .hero-home .hero-inner {
    position: relative !important;
    z-index: 2 !important;
    width: min(100% - 34px, var(--max)) !important;
    padding-block: clamp(66px, 17vw, 98px) clamp(54px, 13vw, 80px) !important;
  }

  .cms-page-home .hero-home .hero-content {
    max-width: 720px !important;
  }

  .cms-page-home .hero-home h1 {
    max-width: 13.5ch !important;
    margin-top: 34px !important;
  }

  .cms-page-home .hero-home p {
    max-width: 38ch !important;
    margin-top: 24px !important;
  }
}

@media (max-width: 520px) {
  .cms-page-home .hero-home .hero-inner {
    width: min(100% - 32px, var(--max)) !important;
    padding-block: 62px 56px !important;
  }

  .cms-page-home .hero-home h1 {
    max-width: 13.8ch !important;
    font-size: clamp(32px, 9.2vw, 48px) !important;
    margin-top: 32px !important;
  }

  .cms-page-home .hero-home p {
    max-width: 37ch !important;
  }
}