/* release 8: each service card opens on its picture, flush with the card's top edge (16:10, the landing's service cards; dark plate in every appearance); cards 01, 03 and 04 play their film over it on hover (service-films.js) */
.service-presentation.service-grid{grid-template-rows:repeat(8,auto)}
.service-presentation > .service-card{grid-row:span 8}
.service-card > .sc-pic{position:relative;aspect-ratio:16 / 10;margin:-22px -18px 5px;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;border-bottom:1px solid var(--line);background:var(--film-bg)}
.service-card > .sc-pic img,.service-card > .sc-pic .svc-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--ease)}
.service-card > .sc-pic .svc-film{opacity:0;transition:opacity var(--t-reveal) var(--ease),transform 1100ms var(--ease)}
.service-card.is-playing > .sc-pic .svc-film{opacity:1}
.service-card:hover > .sc-pic img,.service-card:hover > .sc-pic .svc-film{transform:scale(1.03)}
.service-card > .sc-pic + .eyebrow{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);letter-spacing:.04em}
@media (max-width:1279px){.service-presentation.service-grid{grid-template-rows:repeat(16,auto)}}
@media (max-width:699px){.service-presentation.service-grid{grid-template-rows:none}.service-presentation > .service-card{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.service-card:hover > .sc-pic img{transform:none}.service-card > .sc-pic .svc-film{display:none}}