/* ═══ SERVICES · SECTION 2 — SERVICE CARDS ═══ */
.svcs{position:relative;padding:clamp(70px,12vh,140px) var(--gut);
  border-top:1px solid var(--border)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,40px);
  margin-top:clamp(30px,5vh,56px)}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}

.card{position:relative;display:block;background:var(--surface);overflow:hidden;
  border:1px solid var(--border);
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .85s cubic-bezier(.16,1,.3,1),border-color .4s ease}
.card.is-in{opacity:1;transform:none}
.card:hover{border-color:rgba(200,255,0,.35)}

.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-alt);
  clip-path:polygon(0 0,0 0,-36% 100%,-36% 100%);
  transition:clip-path 1s cubic-bezier(.65,0,.2,1) .1s}
.card.is-in .card-media{clip-path:polygon(0 0,136% 0,100% 100%,0 100%)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.34) brightness(.82);transition:filter .6s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{filter:grayscale(0) brightness(.95);transform:scale(1.04)}
.card-media .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 14px,#111 14px 28px)}
.card-media .ph span{font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim)}
.card-media .n{position:absolute;left:16px;top:14px;z-index:3;font-size:10.5px;
  letter-spacing:.16em;font-weight:700;color:var(--text);text-shadow:0 1px 12px rgba(0,0,0,.9)}

.card-body{padding:clamp(20px,2.6vw,32px)}
.card-body h2{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.2rem,2.5vw,1.9rem);line-height:1.04;letter-spacing:-.028em}
.card-body .desc{margin-top:13px;font-size:clamp(.92rem,1.02vw,1.02rem);line-height:1.6;
  color:var(--muted);max-width:46ch}
.card-list{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px}
.card-list span{font-size:10.5px;letter-spacing:.11em;font-weight:600;color:var(--dim);
  border:1px solid var(--border);padding:7px 11px;transition:color .3s ease,border-color .3s ease}
.card:hover .card-list span{color:var(--muted);border-color:rgba(245,244,239,.2)}
.card-go{margin-top:22px;display:inline-flex;align-items:center;gap:11px;
  font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--cut)}
.card-go i{width:26px;height:1px;background:var(--cut);position:relative;display:block;
  transition:width .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-go i{width:44px}
.card-go i::after{content:"";position:absolute;right:0;top:0;width:8px;height:1px;
  background:var(--cut);transform-origin:right center;transform:rotate(-45deg)}

@media(prefers-reduced-motion:reduce){
  .card{opacity:1;transform:none}
  .card-media{clip-path:none!important}
}