/* PREVIEW: service cards with photos + scroll reveal. Content is fully visible unless JS adds .js-reveal */
.service-card.has-photo{padding:0;overflow:hidden}
.service-card .card-photo{display:block;aspect-ratio:16/10;overflow:hidden;background:#111}
.service-card .card-photo picture,.service-card .card-photo img{display:block;width:100%;height:100%}
.service-card .card-photo img{object-fit:cover;transition:transform .6s ease}
.service-card.has-photo:hover .card-photo img{transform:scale(1.05)}
.service-card .card-body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.service-card .card-body .icon{margin-top:-2.9rem;background:#fff;border:2px solid var(--green);box-shadow:0 2px 8px rgba(0,0,0,.12);position:relative}
.service-card .card-body .icon svg{stroke:var(--green)}
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js-reveal .reveal.is-in{opacity:1;transform:none}
.js-reveal .service-card.reveal .card-photo img{transform:scale(1.12);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js-reveal .service-card.reveal.is-in .card-photo img{transform:scale(1)}
.js-reveal .service-card.reveal.is-in:hover .card-photo img{transform:scale(1.05);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.reveal,.reveal *{transition:none!important;transform:none!important;opacity:1!important}}
/* 7 service cards: centre the last card on the 3-column layout */
@media (min-width:980px){.grid-3>.service-card:last-child:nth-child(3n+1){grid-column:2}}
/* Homepage "More services" link row */
.more-services{margin-top:1.6rem;text-align:center;line-height:2}
.more-services a{white-space:nowrap}