/* ============ v4 Services: Kiln-style image cards (original clay renders) ============ */
.svc2{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;padding:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,17,21,.04),0 12px 32px -20px rgba(15,17,21,.16);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.svc2:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(15,17,21,.04),0 28px 50px -24px rgba(15,17,21,.24);border-color:var(--line-2)}
.svc2-media{position:relative;border-radius:18px;background:#f4f4f5;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(15,17,21,.04)}
.svc2-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:svcfloat 7s ease-in-out infinite;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.svc2:nth-child(2) .svc2-media img{animation-delay:-2.3s}.svc2:nth-child(3) .svc2-media img{animation-delay:-4.6s}
.svc2:hover .svc2-media img{transform:scale(1.18)}
@keyframes svcfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.svc2-body{display:flex;flex-direction:column;flex:1;padding:22px 18px 18px}
.svc2-body .h3{font-size:24px}
.svc2-body .body{margin-top:10px}
.svc2-toggle{margin-top:auto;padding-top:20px;align-self:flex-start}
/* included panel: slides up over the card */
.svc2-panel{position:absolute;inset:10px;border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);padding:24px 22px;display:flex;flex-direction:column;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.svc2-panel[hidden]{display:flex}
.svc2.open .svc2-panel{opacity:1;transform:none;pointer-events:auto}
.svc2-panel-h{display:flex;align-items:center;justify-content:space-between}
.svc2-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);font-size:18px;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center}
.svc2-close:hover{color:var(--text);background:#f4f5f8}
.svc2-panel .h3{margin-top:10px}
.svc2-panel .checklist{margin-top:16px;gap:10px}
.svc2-cta{margin-top:auto;padding-top:16px}
/* staggered reveal */
#services .grid-3 .svc2.reveal{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
#services .grid-3 .svc2:nth-child(2).reveal{transition-delay:.12s}#services .grid-3 .svc2:nth-child(3).reveal{transition-delay:.24s}
#services .grid-3 .svc2.reveal.in:hover{transition-delay:0s}
@media(max-width:860px){.svc2-body .h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.svc2-media img{animation:none;transform:none}.svc2,.svc2:hover{transform:none}.svc2:hover .svc2-media img{transform:none}.svc2-panel{transition:none}}
/* v2 images (AI clay/paper renders, backgrounds normalised to #f0edeb) */
.svc2-media{background:#f0edeb;border-color:rgba(15,17,21,.035)}
.svc2-media img{transform:scale(1.03)}
.svc2:hover .svc2-media img{transform:scale(1.075)}
/* ===== v5 services: tech images + scroll-linked turn ===== */
#services .grid-3{perspective:1400px;gap:24px}
.svc2{border-radius:14px;padding:8px;box-shadow:none;border:1px solid var(--line);transform-style:preserve-3d;will-change:transform;transition:border-color .3s}
.svc2:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.svc2.reveal,.svc2.reveal.in{opacity:1;transform:none}
.svc2-media{background:#f7f7f7;border-radius:10px;border:0;aspect-ratio:4/3}
.svc2-media img{animation:none;transform:none;will-change:transform}
.svc2:hover .svc2-media img{transform:none}
.svc2-body{padding:22px 16px 16px}
.svc2-body .h3{font-size:22px;font-weight:400;letter-spacing:-.025em}
.svc2-panel{inset:8px;border-radius:10px;background:rgba(255,255,255,.97)}
.svc2-media{perspective:900px}