/* =====================================================================
   04 · УСЛУГИ — строки, которые заливаются светлым при наведении
   ===================================================================== */
.services { display: grid; border-top: 1px solid var(--line); }
.service {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.3fr) auto 48px; align-items: center;
  gap: clamp(14px, 2.4vw, 40px); padding: clamp(22px, 2.6vw, 36px) 12px;
  border-bottom: 1px solid var(--line);
  transition: color .4s var(--ease-out);
}
.service::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease-out); }
.service__num { font-family: var(--f-mono); font-size: 12px; color: var(--muted); transition: color .4s; }
.service__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.01em; }
.service__desc { max-width: 44ch; font-size: 15px; color: var(--muted); transition: color .4s; }
.service__price { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: 14px; white-space: nowrap; transition: border-color .4s; }
.service__arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: transform .5s var(--ease-out), background .4s, border-color .4s; }
.services__note { margin-top: 28px; max-width: 60ch; font-size: 14px; color: var(--muted); }

.js .service:nth-child(2) { --d: .06s; }
.js .service:nth-child(3) { --d: .12s; }
.js .service:nth-child(4) { --d: .18s; }
.js .service:nth-child(5) { --d: .24s; }

@media (hover: hover) and (pointer: fine) {
  .service:hover { color: var(--on-accent); }
  .service:hover::before { transform: scaleY(1); }
  .service:hover .service__num,
  .service:hover .service__desc { color: #3a3744; }
  .service:hover .service__price { border-color: #0b0a1033; }
  .service:hover .service__arrow { transform: rotate(45deg); background: var(--coral); border-color: var(--coral); }
}
@media (width <= 1000px) {
  .service { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "n name arrow" "n desc arrow" "n price arrow"; }
  .service__num { grid-area: n; align-self: start; padding-top: 8px; }
  .service__name { grid-area: name; }
  .service__desc { grid-area: desc; }
  .service__price { grid-area: price; justify-self: start; }
  .service__arrow { grid-area: arrow; }
}