/* Service visual system: recognizable imagery without compromising scanability. */
.service-card {
  min-height: 392px;
  padding-top: 174px;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 144px;
  background: var(--service-image) center / cover no-repeat, linear-gradient(135deg, #102c64, #1852d0);
  transition: transform .35s ease;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 104px 0 auto;
  height: 44px;
  background: linear-gradient(180deg, transparent, #fff);
  pointer-events: none;
}

.service-card:hover::before { transform: scale(1.045); }
.service-card > * { position: relative; z-index: 1; }
.service-card .service-icon { position: absolute; z-index: 2; top: 104px; left: 27px; margin: 0; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.94); box-shadow: 0 8px 18px rgba(4,27,76,.16); }
.service-card .card-number { top: 157px; }
.service-card h2, .service-card h3 { max-width: 210px; }
.service-card:hover::after { background: linear-gradient(180deg, transparent, var(--ink)); }

.service-hero { position: relative; overflow: hidden; }
.service-hero .shell { position: relative; z-index: 1; }
.service-hero::after {
  content: '';
  position: absolute;
  inset: 0 0 0 48%;
  background: linear-gradient(90deg, #f5faff 0%, rgba(245,250,255,.66) 18%, rgba(245,250,255,.06) 72%), var(--service-single-image) center / cover no-repeat;
  opacity: .7;
  pointer-events: none;
}

@media (max-width: 640px) {
  .service-card { min-height: 365px; padding-top: 168px; }
  .service-card .service-icon { left: 20px; }
  .service-hero::after { inset: auto 0 0; height: 38%; background: linear-gradient(180deg, #f5faff 0%, rgba(245,250,255,.12) 50%), var(--service-single-image) center / cover no-repeat; opacity: .38; }
}