/* ============================================================
   02 · SERVICES  (sticky intro + 9 rows that expand on hover)
   ============================================================ */
.svc{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(40px,5vw,88px);
  padding:clamp(72px,9vw,120px) 0}

.svc-head{position:sticky;top:120px;align-self:start}
.svc-head .btn.line{margin-top:38px}

.svc-list{display:flex;flex-direction:column}

/* row */
.srow{position:relative;display:flex;align-items:center;gap:20px;padding:22px 20px;
  border-top:1px solid var(--line);text-decoration:none;cursor:pointer;isolation:isolate;
  transition:padding .3s var(--ease)}
.srow::before{content:'';position:absolute;inset:0;background:var(--navy);border-radius:5px;
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);z-index:-1}
.srow:hover::before,.srow:focus-visible::before{transform:scaleX(1)}
.srow:hover{padding-left:24px;padding-right:24px}

/* index number */
.srow .ix{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--ink300);width:26px;flex:0 0 auto;transition:color .3s}

/* icon well */
.srow .iw{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--line);color:var(--navy);
  transition:transform .34s var(--ease),border-color .3s,background .3s,color .3s}
.srow .ico{width:18px;height:18px}
.srow:hover .iw{transform:scale(1.12) rotate(-4deg);background:var(--b500);
  border-color:var(--b500);color:#fff}

/* text — description expands on hover via grid-rows trick */
.srow .body{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.srow .nm{font-family:Archivo;font-weight:600;font-size:clamp(18px,1.75vw,25px);
  letter-spacing:-.015em;color:var(--ink900);transition:color .3s}
.srow .desc{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .34s var(--ease),opacity .3s,margin .34s var(--ease)}
.srow .desc>span{overflow:hidden;display:block;font-size:14px;color:var(--dim);line-height:1.55}
.srow:hover .desc{grid-template-rows:1fr;opacity:1;margin-top:8px}

/* trailing arrow */
.srow .arw{width:18px;height:18px;margin-left:auto;color:var(--ink300);
  transition:transform .3s var(--ease),color .3s}
.srow:hover .ix{color:var(--b300)}
.srow:hover .nm{color:#fff}
.srow:hover .arw{transform:translateX(9px);color:#fff}

@media(max-width:1100px){
  .svc{grid-template-columns:1fr;gap:48px}
  .svc-head{position:static}
}
@media(max-width:900px){
  .svc{padding:76px 0}
  .srow{padding:22px 16px;gap:16px}
  .srow:hover{padding-left:18px;padding-right:18px}
}

/* touch devices: reveal the description without :hover */
@media(hover:none){
  .srow .desc{grid-template-rows:1fr;opacity:1;margin-top:8px}
  .srow .desc>span{color:var(--ink500)}
  .srow:active::before{transform:scaleX(1)}
}