#services .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:24px}
#services .cards .service{height:100%;min-width:0;display:flex;flex-direction:column;padding:32px;position:relative;top:auto}
#services .service .icon{flex-shrink:0}
#services .service .post-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:24px}
#services .service p{flex:1;line-height:1.9}
#services .service>.plain{margin-top:auto;white-space:nowrap;min-height:44px;width:auto;align-self:flex-start}
.service-detail{max-width:860px;padding:32px;overscroll-behavior:contain}
.service-detail .service-close{display:block;margin-inline-start:auto;margin-bottom:16px;min-height:44px}
.service-detail h2{margin:0 0 20px}
.service-detail h3{margin:28px 0 10px;font-size:1.2rem}
.service-detail p{white-space:pre-line;line-height:1.9;margin:0;color:var(--muted)}
.service-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 28px}
.service-examples video{display:block;width:100%;max-height:440px;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:10px}
.service-detail>.primary{display:flex;justify-content:center;text-align:center;min-height:52px;white-space:normal}
@media(max-width:760px){
 #services .cards{grid-template-columns:1fr;gap:20px}
 html.motion body:not(.dashboard-mode) #services .cards .service{position:relative;top:auto;transform:none!important;padding:28px;height:100%}
 html.motion body:not(.dashboard-mode) #services .service :is(h3,p,.plain,.icon){transform:none!important;opacity:1!important}
 html.motion body:not(.dashboard-mode) #services .service::before,html.motion body:not(.dashboard-mode) #services .service::after{display:none}
 .services-hud{display:none!important}
 .service-detail{padding:24px;width:calc(100% - 24px);max-height:90dvh}
 .service-examples{grid-template-columns:1fr}
 .service-examples video{max-height:65dvh}
}