/* Decorative service illustrations; the existing scroll and swipe behavior stays in site.js. */
.page--home .section--services .service-frame.service-frame--illustrated {
  --color-text: #19213b;
  --color-text-dark: #19213b;
  --color-muted: #53607a;
  --color-muted-strong: #45516a;
  --color-line: #ccd1e4;
  background: #f8f5ef;
  color: #19213b;
}

.page--home .section--services .service-frame__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 78%;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 90%);
}

.page--home .section--services .service-frame.service-frame--illustrated h3,
.page--home .section--services .service-frame.service-frame--illustrated .service-frame__offers li {
  color: #19213b;
}

.page--home .section--services .service-frame.service-frame--illustrated .service-frame__details a {
  color: #304796;
}

.page--home .section--services .service-frame--illustrated .service-frame__offer-block {
  width: 100%;
}

/* Normal-flow cards reserve a separate illustration area, including reduced motion. */
.page--home .section--services:not(.is-cinematic-ready) .service-frame.service-frame--illustrated {
  --service-art-height: clamp(11rem, 24vw, 15rem);
  padding-top: calc(var(--service-art-height) + 1rem);
}

.page--home .section--services:not(.is-cinematic-ready) .service-frame__art {
  height: var(--service-art-height);
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

@media (max-width: 1099px) {
  .page--home .section--services:not(.is-cinematic-ready) .service-frame.service-frame--illustrated {
    --service-art-height: clamp(10rem, 48vw, 13rem);
  }
}