/* Visible, distinct service photography: no shared sprite or pseudo-element image fallback.
   Loaded last so legacy hero/image-quality CSS cannot repaint the four cards. */
.service-track > .service-card[data-image-key] {
  isolation:isolate;
  background:#151b24;
}
.service-track > .service-card[data-image-key]::before {
  content:none!important;
  background-image:none!important;
  opacity:0!important;
}
.service-track > .service-card[data-image-key] > img.service-card-photo {
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  z-index:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
}
.service-track > .service-card[data-image-key]::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(8,14,23,.05) 0%,rgba(8,14,23,.24) 35%,rgba(8,14,23,.90) 100%);
  pointer-events:none;
}
.service-track > .service-card[data-image-key] > :not(img.service-card-photo) {
  position:relative;
  z-index:1;
}
.service-track > .service-card[data-image-key] h3,
.service-track > .service-card[data-image-key] .service-icon {
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.38);
}
@media(max-width:680px){
  .service-track > .service-card[data-image-key] > img.service-card-photo {
    object-position:center!important;
  }
}