/* Fix the mobile commercial hero photo framing.
   The prior background covered the full tall section, which scaled the portrait photo
   to the section height and pushed the worker below the visible intro. */
@media (max-width: 767px) {
  #commercial-section > .relative.overflow-hidden::before {
    top: -4px !important;
    right: -6px !important;
    bottom: auto !important;
    left: -6px !important;
    height: 34rem !important;
    background-image: url('/commercial-storefront-cleaner-mobile.webp') !important;
    background-size: cover !important;
    background-position: 58% top !important;
    background-repeat: no-repeat !important;
    filter: blur(0.55px) saturate(0.92) contrast(1.04) !important;
    transform: scale(1.012) !important;
  }

  /* Darken the copy side while deliberately leaving the worker visible on the right. */
  #commercial-section > .relative.overflow-hidden::after {
    background:
      linear-gradient(90deg, rgba(2, 10, 22, 0.91) 0%, rgba(3, 13, 27, 0.72) 43%, rgba(4, 13, 25, 0.26) 72%, rgba(4, 10, 18, 0.10) 100%),
      linear-gradient(180deg, rgba(3, 10, 20, 0.13) 0%, rgba(2, 10, 20, 0.20) 18%, rgba(2, 9, 18, 0.62) 38%, rgba(1, 7, 14, 0.96) 55%, #02070d 72%) !important;
  }
}