/* ===== Services page (append to the end of assets/css/style.css) =====
   Note: the closing .ab-cta block is defined in about-page.css, so add that file's CSS too. */
.sv-hero { background: var(--navy); color: #e2e8f0; padding: 70px 0; text-align: center;}
.sv-hero h1 { color: #fff; font-size: 2.3rem; line-height: 1.2; max-width: 100%; margin-bottom: 16px; }
.sv-hero p { max-width: 100%; margin-bottom: 24px; font-size: 1.1rem; }
.sv-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; padding-top: 22px; border-top: 1px solid #334155; }
.sv-jump a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; }
.sv-jump a:hover { color: var(--gold); }
.sv-jump i { color: var(--gold); margin-right: 4px; }

.sv-main { padding: 70px 0; }
.sv-main.sv-alt { background: #fff; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.sv-main-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 34px; }
.sv-icon { font-size: 2.2rem; color: var(--gold); margin-top: 6px; }
.sv-main-head h2 { font-size: 1.9rem; color: var(--navy); margin-bottom: 8px; }
.sv-main-head p { max-width: 62ch; color: var(--text-dark); }
.sv-main-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding-top: 28px; border-top: 2px solid var(--navy); }
.sv-main-body h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 12px; }
.sv-list { list-style: none; margin-bottom: 26px; }
.sv-list li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--border-color); max-width: 58ch; }
.sv-list li::before { content: "\2713"; position: absolute; left: 0; top: 8px; color: var(--blue); font-weight: 700; }


.sv-process { background: #fff; padding: 70px 0; border-top: 1px solid var(--border-color); }
.sv-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
.sv-steps li { counter-increment: step; border-top: 3px solid var(--gold); padding-top: 14px; }
.sv-steps li::before { content: counter(step); display: block; font-size: 1.6rem; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.sv-steps h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 6px; }
.sv-steps p { color: var(--text-muted); max-width: 32ch; }

.sv-hero a:focus-visible, .sv-main a:focus-visible, .sv-jump a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 820px) {
    .sv-main-body { grid-template-columns: 1fr; gap: 20px; }
    .sv-main-head { flex-direction: column; gap: 10px; }
    .sv-hero h1 { font-size: 1.8rem; }
}