/* ═══ SECTION 6 — SERVICES ═══ */
.services{position:relative;padding:clamp(70px,11vh,120px) var(--gut) clamp(80px,13vh,150px);
  background:#080808;border-top:1px solid var(--border)}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(28px,4.5vh,44px)}
.svc-head h2{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.028em;max-width:16ch}
.svc-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:26ch;text-align:right;flex-shrink:0}
@media(max-width:760px){.svc-head{flex-direction:column;align-items:flex-start}.svc-head .aside{text-align:left}}
.svc-list{border-top:1px solid var(--border)}
.svc-row{display:block;position:relative;border-bottom:1px solid var(--border);
  padding:clamp(20px,3.2vh,34px) 0;overflow:hidden}
.svc-row::before{content:"";position:absolute;inset:0;background:var(--surface);
  transform:translateX(-101%) skewX(-9deg);transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:0}
.svc-row:hover::before,.svc-row:focus-visible::before{transform:translateX(0) skewX(-9deg)}
.svc-inner{position:relative;z-index:1;display:flex;align-items:center;gap:20px;
  padding:0 clamp(0px,2vw,28px);transition:padding .55s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .svc-inner{padding-left:clamp(14px,3.4vw,54px)}
.svc-name{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.25rem,3.7vw,3rem);line-height:1.02;letter-spacing:-.028em;
  color:var(--dim);transition:color .45s ease}
.svc-row:hover .svc-name{color:var(--text)}
.svc-tags{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:44%;opacity:0;transform:translateX(16px);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .svc-tags{opacity:1;transform:none}
.svc-tags span{font-size:10.5px;letter-spacing:.11em;font-weight:600;color:var(--muted);
  border:1px solid var(--border);padding:6px 11px;white-space:nowrap}
@media(max-width:900px){.svc-tags{display:none}}
.svc-arrow{flex-shrink:0;width:34px;height:34px;position:relative;
  opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover .svc-arrow{opacity:1;transform:none}
.svc-arrow::before,.svc-arrow::after{content:"";position:absolute;background:var(--cut)}
.svc-arrow::before{left:4px;top:50%;width:24px;height:2px}
.svc-arrow::after{right:5px;top:50%;width:11px;height:2px;transform-origin:right center;transform:rotate(-45deg) translateY(-1px)}
.svc-thumb{display:none;width:100%;aspect-ratio:16/10;margin-top:14px;overflow:hidden;background:var(--surface-alt)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.85)}
@media(max-width:900px){.svc-thumb{display:block}}
/* cursor-following preview (the .svc-preview element sits at the end of <body>) */
.svc-preview{position:fixed;top:0;left:0;width:clamp(260px,24vw,380px);aspect-ratio:4/3;
  pointer-events:none;z-index:40;opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,13% 100%);
  transition:opacity .35s ease;will-change:transform;overflow:hidden;background:var(--surface-alt)}
.svc-preview.is-on{opacity:1}
.svc-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s ease;filter:grayscale(.25) brightness(.9)}
.svc-preview img.is-active{opacity:1}
@media(max-width:900px),(hover:none){.svc-preview{display:none}}

@media(prefers-reduced-motion:reduce){
  .svc-preview{display:none}
  .svc-name{color:var(--text)}
}