/* r97: canonical image element handles the three breakpoints. Existing page CSS remains intact. */
.svc-hero-photo--responsive picture,.svc-hero-photo--responsive picture img{display:block;width:100%;height:100%}
.svc-hero-photo--responsive picture img{object-fit:cover;object-position:center center}
@media(max-width:840px){
 body.services-redesign .svc-hero-photo--responsive{background-image:none}
 body.services-redesign .svc-hero-photo--responsive picture,body.services-redesign .svc-hero-photo--responsive picture img{display:block;width:100%;height:100%}
 body.services-redesign .svc-hero-photo--responsive picture img{object-fit:cover;object-position:center center}
}
@media(max-width:480px){body.services-redesign .svc-hero-photo--responsive picture img{object-position:center center}}

/* r102: only <picture> decides the published cover: desktop/tablet/mobile. */
body.services-redesign[data-service-hero] .svc-hero-art .svc-hero-photo--responsive{background-image:none;background-color:transparent}
body.services-redesign[data-service-hero] .svc-hero-art .svc-hero-photo--responsive picture,
body.services-redesign[data-service-hero] .svc-hero-art .svc-hero-photo--responsive picture img{display:block;width:100%;height:100%;object-fit:cover}