/* Services page — classes prefixed sv-. The intro, buttons and closing band reuse about-page.css. */

.sv-jump { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); padding: 18px 20px; }
.sv-jump h2 { color: #fff; font-size: 1.15rem; margin: 0 0 6px; }
.sv-jump ul { list-style: none; margin: 0; padding: 0; }
.sv-jump a { display: flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.18); text-decoration: none; }
.sv-jump li:last-child a { border-bottom: 0; }
.sv-jump a:hover { text-decoration: underline; text-underline-offset: 4px; }

.sv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; scroll-margin-top: 8px; }
.sv-card h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.sv-card p { margin: 0; color: var(--ink-2); text-align: left; text-align-last: left; }
.sv-card .sv-seen { margin-top: 12px; font-weight: 700; color: var(--ink); }
.sv-seen a { margin-right: .6em; color: var(--ink); text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sv-seen a:hover { text-decoration-color: var(--ink); }

.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.sv-steps li { counter-increment: s; position: relative; padding: 20px 20px 20px 72px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.sv-steps li::before { content: counter(s); position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: #0B1636; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.sv-steps h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.sv-steps p { margin: 0; color: var(--ink-2); text-align: left; text-align-last: left; }

@media (min-width: 700px) { .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .sv-grid { grid-template-columns: repeat(3, 1fr); }
  .sv-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) { .ab-hero-grid:has(.sv-jump) { grid-template-columns: 1.3fr .8fr; } }