.services-head { position: sticky; top: 112px; }
.services-list { border-top: var(--rule); }
.services-item { border-bottom: var(--rule); }
.services-row { display: grid; grid-template-columns: clamp(48px, 6vw, 72px) 1fr 28px; align-items: center; gap: 16px; padding: 22px 0; transition: padding-left 0.5s var(--ease-out); }
.services-num { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.services-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.services-name { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; }
.services-desc { display: block; max-width: 36em; text-wrap: balance; font-size: var(--fs-small); color: var(--muted); line-height: 1.8; }
.services-arrow { position: relative; width: 22px; height: 1px; background: var(--gold); justify-self: end; transition: transform 0.5s var(--ease-out); }
.services-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); transform: rotate(45deg); }
.services-row:hover { padding-left: 8px; }
.services-row:hover .services-arrow { transform: translateX(4px); }
.services-foot { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.services-foot-text { font-family: var(--font-serif); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); }
@media (max-width: 860px) {
  .services-head { position: static; margin-bottom: 8px; }
  .services-row { grid-template-columns: 40px 1fr 20px; gap: 12px; }
}