.service-grid { position: relative; isolation: isolate; }
.service-depth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .86; }
.service-card > img { object-position: center 8%; }
.service-card.depth-ready { background: transparent; }
.service-card.depth-ready > img { opacity: 0; }
.service-card.depth-ready:hover > img { opacity: 0; }
.service-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.service-motion-controls { display: flex; justify-content: flex-end; margin: -18px 0 16px; min-height: 28px; }
.service-motion-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 7px 0 7px 12px; min-height: 44px; background: transparent; color: #b8c9ce; border: 0; font: 500 12px/1.4 var(--ui); letter-spacing: .04em; cursor: pointer; }
.service-motion-toggle[hidden] { display: none; }
.service-motion-toggle:hover { color: var(--cyan); }
.service-motion-toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 5px; }
.service-motion-icon { width: 13px; text-align: center; color: var(--cyan); font-size: 13px; }
@media(max-width:520px){ .service-motion-controls { margin-top: -10px; } }
@media(prefers-reduced-motion:reduce){ .service-card:hover > img { transform: none; } }