/* ============================ SERVICES ============================ */

/* Service index in the hero */
.sv-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sv-index a { display: grid; gap: 6px; padding: 16px 16px 4px 0; font-size: var(--fs-small); color: rgba(246,243,236,.85); transition: color .3s; }
[dir="rtl"] .sv-index a { padding: 16px 0 4px 16px; }
.sv-index a + a { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.sv-index a span { font-size: .72rem; letter-spacing: .12em; color: var(--oxide-light); font-weight: 600; }
.sv-index a:hover { color: var(--limewash); }

/* Service rows */
.sv-row { scroll-margin-top: calc(var(--header-h) + 8px); }
.sv-row .split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.sv-row--flip .split > figure { order: 2; }
.sv-row__body { display: grid; gap: 16px; align-content: start; }
.sv-row__num { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: var(--tt-label); font-weight: var(--fw-label); color: var(--accent); }
.sv-row__label { margin-top: 8px; color: var(--fg); }
.sv-row .btn { justify-self: start; margin-top: 8px; }

/* Trades list: ruled grid */
.sv-trades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.sv-trades li { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 22px 20px; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.sv-trades .icon { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--oxide-light); }
.sv-trades span { font-size: .72rem; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.sv-trades h3 { font-size: var(--fs-small); font-weight: 600; line-height: 1.55; }

/* Contracting models */
.sv-model { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 32px); background: var(--surface); border-top: 2px solid var(--basalt); }
.sv-model__rows { display: grid; margin-top: 6px; border-top: 1px solid var(--line); }
.sv-model__rows > div { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.sv-model__rows dt { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: var(--tt-label); font-weight: var(--fw-label); color: var(--accent); }
.sv-model__rows dd { font-size: var(--fs-small); line-height: 1.7; color: var(--muted); }

@media (max-width: 1100px) {
  .sv-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-index a:nth-child(4) { padding-inline-start: 0; border-inline-start: 0; }
  .sv-trades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sv-row .split { grid-template-columns: 1fr; }
  .sv-row--flip .split > figure { order: 0; }
}
@media (max-width: 720px) {
  .sv-index { grid-template-columns: 1fr; }
  .sv-index a, [dir="rtl"] .sv-index a { display: flex; gap: 12px; padding: 12px 0; border-inline-start: 0 !important; border-bottom: 1px solid var(--line); }
  .sv-index a + a { padding-inline-start: 0; }
  .sv-trades { grid-template-columns: 1fr 1fr; }
  .sv-trades li { grid-template-columns: 1fr; padding: 16px 14px; }
  .sv-trades .icon { grid-row: auto; }
}