/* ============================================================
   SERVICES — a list, not cards
   ============================================================ */

.svc-list{border-top:1px solid var(--line-d)}
.svc-row{
  display:grid;grid-template-columns:1fr;gap:.35rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line-d);
  position:relative;transition:padding-left .3s cubic-bezier(.2,.7,.2,1);
}
@media(min-width:820px){
  .svc-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
    align-items:baseline;gap:2rem;padding:1.7rem 0}
}
.svc-row:hover,.svc-row:focus-within{padding-left:.9rem}
.svc-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--earth);
  transform:scaleY(0);transform-origin:bottom;transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.svc-row:hover::before,.svc-row:focus-within::before{transform:scaleY(1)}
.svc-row p{margin:0;font-size:.94rem;opacity:.72;line-height:1.5}

/* CONTRAST CORRECTION (revision pass, folded in). The "Read more" tag was
   --earth (4.44:1, fails AA for text); it is now --earth-t (5.12:1).
   The 3px rule above stays --earth: it is a border, where 3:1 applies. */
.svc-row .go{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--earth-t);opacity:0;
  transition:opacity .25s ease;white-space:nowrap}
.svc-row:hover .go,.svc-row:focus-within .go{opacity:1}