/* Banner v10: restore the supplied image composition; only replace its left-side baked copy. */
.services-page .services-hero.services-image-banner .services-image-banner-art {
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* The supplied visual has baked copy on the left. This is a local, edge-faded clean area for native text. */
.services-page .services-hero.services-image-banner::before {
  background: linear-gradient(90deg, #f9fcff 0%, #f8fcff 43%, rgb(248 252 255 / 97%) 51%, rgb(248 252 255 / 54%) 60%, transparent 70%) !important;
}

.services-image-banner-copy {
  top: 19% !important;
  left: max(6.5vw, calc((100vw - 1280px) / 2)) !important;
  width: min(560px, 42vw) !important;
  max-width: none !important;
}

.services-image-banner-copy h1 {
  font-size: clamp(40px, 3.8vw, 60px) !important;
}

@media (max-width: 900px) {
  .services-page .services-hero.services-image-banner .services-image-banner-art {
    width: 100% !important;
  }

  .services-page .services-hero.services-image-banner::before {
    background: linear-gradient(90deg, #f9fcff 0%, #f8fcff 55%, rgb(248 252 255 / 88%) 70%, transparent 100%) !important;
  }

  .services-image-banner-copy {
    left: 7vw !important;
    width: min(570px, 70vw) !important;
  }
}

@media (max-width: 620px) {
  .services-page .services-hero.services-image-banner .services-image-banner-art {
    object-position: center !important;
  }

  .services-page .services-hero.services-image-banner::before {
    background: linear-gradient(90deg, #f9fcff 0%, #f8fcff 76%, rgb(248 252 255 / 70%) 100%) !important;
  }

  .services-image-banner-copy {
    top: 12% !important;
    left: 6vw !important;
    width: 82vw !important;
  }
}