:root {
  --service-accent: #18b9bb;
  --service-accent-strong: #087f87;
  --service-accent-hover: #0da5a8;
  --service-soft: #f1fbfb;
  --service-line: #cce9e9;
  --service-glow: rgba(24, 185, 187, .18);
  --service-footnote: #537879;
  --service-button-text: #fff;
  --service-button-shadow: rgba(8, 127, 135, .2);
  --service-button-shadow-hover: rgba(8, 127, 135, .28);
  --service-visual-border: rgba(24, 185, 187, .24);
  --service-visual-shadow: rgba(8, 85, 92, .17);
  --service-card-border: #cfe8e8;
  --service-card-shadow: rgba(8, 85, 92, .08);
  --service-card-overlay: rgba(5, 61, 67, .24);
  --service-timeline-line: #8fcfd1;
  --service-marker-border: rgba(24, 185, 187, .38);
  --service-nav-current: rgba(24, 185, 187, .12);
  --hero-image: none;
  --hero-placeholder: linear-gradient(145deg, #162a57, #087f87 54%, #68e0d7);
}

.service-hero__visual > img {
  position: absolute;
  z-index: 1;
  right: -15%;
  bottom: 1%;
  width: 132%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(8, 85, 92, .14));
}

.service-hero__visual::before {
  display: none;
}

@media (max-width: 1100px) {
  .service-hero__visual > img {
    right: -18%;
    width: 142%;
  }
}

@media (max-width: 820px) {
  .service-hero__visual > img {
    right: -12%;
    bottom: 2%;
    width: 126%;
  }
}

@media (max-width: 450px) {
  .service-hero__visual > img {
    right: -20%;
    width: 142%;
  }
}

.service-card:nth-child(1) .service-card__media {
  --card-image: none;
  --card-placeholder: linear-gradient(145deg, #17305f, #0d969d 58%, #9af0e6);
}

.service-card:nth-child(2) .service-card__media {
  --card-image: none;
  --card-placeholder: linear-gradient(145deg, #d9ffff, #1bbbbe 54%, #192b57);
}

.service-card:nth-child(3) .service-card__media {
  --card-image: none;
  --card-placeholder: linear-gradient(145deg, #1c315e, #91e9e0 52%, #07818a);
}

.service-card:nth-child(4) .service-card__media {
  --card-image: none;
  --card-placeholder: linear-gradient(145deg, #0a7d86, #70ddd5 52%, #1a2c58);
}

.service-card:nth-child(5) .service-card__media {
  --card-image: none;
  --card-placeholder: linear-gradient(145deg, #142a58, #19b3b8 58%, #b4fff5);
}

.service-card__media > img {
  object-position: center;
}

.service-card__media {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

@media (max-width: 820px) {
  .service-card:nth-child(5) {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}