/* ============================================================================
 * Regilyze — SERVICE LANDING PAGES  (shared stylesheet)
 * ----------------------------------------------------------------------------
 * One stylesheet for every individual add-on / service page rendered by
 * includes/service-page.php (Registered Office, Director's Service Address,
 * VAT Registration, and so on).
 *
 * It deliberately reuses the site design tokens defined in :root by
 * css/rgz-shell.css (loaded globally in includes/header.php) — the same warm
 * cream palette, orange accent, Sora/DM Sans type and card language used on
 * /services — so these pages read as part of the existing site rather than a
 * bolt-on. Nothing here re-declares a token; it only consumes them, with hard
 * fallbacks so a page still renders if the shell stylesheet ever fails to load.
 *
 * All class names are prefixed `svc-` so they cannot collide with the `srv-`
 * classes on the Services page or anything else on the site.
 *
 * @version 1.0
 * @added   2026-09-07
 * ==========================================================================*/

/* Belt-and-braces: the shell already sets these, but a service page must never
   scroll sideways on a phone if its stylesheet loads first. */
html { overflow-x: clip; }
body { overflow-x: clip; }

.svc-page {
    --svc-accent:        var(--accent-orange, #FF6B35);
    --svc-accent-hover:  var(--accent-orange-hover, #E85A28);
    --svc-accent-light:  var(--accent-orange-light, #FFF0EB);
    --svc-green:         var(--accent-green, #22C55E);
    --svc-green-light:   var(--accent-green-light, #DCFCE7);
    --svc-ink:           var(--text-primary, #1A1A1A);
    --svc-muted:         var(--text-secondary, #6B6B6B);
    --svc-faint:         var(--text-tertiary, #9A9A9A);
    --svc-line:          var(--border-light, #EAEAEA);
    --svc-cream:         var(--bg-cream, #FAF9F7);
    --svc-warm:          var(--bg-warm, #F5F3EF);
    --svc-white:         var(--bg-white, #FFFFFF);
    --svc-shadow:        var(--shadow-card, 0 4px 24px rgba(0,0,0,0.06));
    --svc-shadow-lg:     var(--shadow-float, 0 12px 40px rgba(0,0,0,0.08));
    --svc-r-md:          var(--radius-md, 12px);
    --svc-r-lg:          var(--radius-lg, 16px);
    --svc-r-xl:          var(--radius-xl, 20px);
    --svc-r-pill:        var(--radius-pill, 50px);
    --svc-font-display:  var(--font-display, 'Sora', sans-serif);
    --svc-font-body:     var(--font-body, 'DM Sans', sans-serif);
    --svc-ease:          var(--ease, cubic-bezier(0.22, 1, 0.36, 1));

    font-family: var(--svc-font-body);
    color: var(--svc-ink);
    background: var(--svc-cream);
}

.svc-page .svc-container {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ===========================================================================
 * 1. HERO
 * =========================================================================*/

.svc-hero {
    position: relative;
    background:
        radial-gradient(1100px 460px at 82% -12%, var(--svc-accent-light) 0%, rgba(255,240,235,0) 62%),
        linear-gradient(180deg, var(--svc-white) 0%, var(--svc-cream) 100%);
    border-bottom: 1px solid var(--svc-line);
    padding: 2rem 0 3.25rem;
    overflow: hidden;
}

.svc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.83rem;
    color: var(--svc-faint);
    margin-bottom: 1.5rem;
    text-align: center;
}
.svc-breadcrumb a {
    color: var(--svc-muted);
    text-decoration: none;
    transition: color 0.2s var(--svc-ease);
    /* Tap target: the 21px text line measured on phones is under the 24px
       WCAG 2.5.8 floor. Padding grows the hit area to ~34px; the matching
       negative margin keeps the trail exactly where it was visually. */
    display: inline-block;
    padding: 0.4rem 0.2rem;
    margin: -0.4rem -0.2rem;
    border-radius: 6px;
}
.svc-breadcrumb a:hover { color: var(--svc-accent); }
.svc-breadcrumb span[aria-hidden] { color: var(--svc-faint); }
.svc-breadcrumb .svc-crumb-current { color: var(--svc-ink); font-weight: 500; }

.svc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: center;
}

.svc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-pill);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svc-accent);
    box-shadow: var(--svc-shadow);
    margin-bottom: 1.1rem;
}
.svc-hero-eyebrow svg { width: 15px; height: 15px; }

.svc-hero h1 {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--svc-ink);
    margin: 0 0 1rem;
}

.svc-hero-lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: var(--svc-muted);
    max-width: 40ch;
    margin: 0 0 1.75rem;
}

.svc-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-top: 1.6rem;
}
.svc-hero-trust li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--svc-muted);
    list-style: none;
}
.svc-hero-trust svg {
    width: 17px; height: 17px;
    color: var(--svc-green);
    flex-shrink: 0;
}

/* Price / buy card in the hero ------------------------------------------- */
.svc-buy-card {
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-xl);
    box-shadow: var(--svc-shadow-lg);
    padding: 1.75rem;
}
.svc-buy-card .svc-buy-icon {
    width: 56px; height: 56px;
    border-radius: var(--svc-r-md);
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--svc-accent) 0%, #FF8E53 100%);
    color: #fff;
    margin-bottom: 1.1rem;
    box-shadow: 0 8px 22px rgba(255,107,53,0.28);
}
.svc-buy-card .svc-buy-icon svg { width: 28px; height: 28px; }

.svc-buy-card .svc-buy-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--svc-faint);
    margin-bottom: 0.35rem;
}
.svc-buy-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}
.svc-buy-price .svc-amount {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--svc-ink);
}
.svc-buy-price .svc-period {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--svc-muted);
}
.svc-buy-sub {
    font-size: 0.82rem;
    color: var(--svc-muted);
    margin-bottom: 1.25rem;
}

.svc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    background: var(--svc-accent);
    color: #fff;
    font-family: var(--svc-font-body);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: var(--svc-r-pill);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s var(--svc-ease), background 0.2s var(--svc-ease), box-shadow 0.2s var(--svc-ease);
    box-shadow: 0 8px 24px rgba(255,107,53,0.25);
}
.svc-cta:hover {
    background: var(--svc-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,107,53,0.32);
}
.svc-cta svg { width: 18px; height: 18px; }

.svc-buy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--svc-muted);
    line-height: 1.45;
}
.svc-buy-note svg { width: 15px; height: 15px; color: var(--svc-green); flex-shrink: 0; margin-top: 2px; }

/* ===========================================================================
 * 2. SECTION SCAFFOLD
 * =========================================================================*/

.svc-section { padding: 3.5rem 0; }
.svc-section--warm { background: var(--svc-warm); }
.svc-section--white { background: var(--svc-white); }

.svc-section-head {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.svc-section-head.svc-left { margin-inline: 0; text-align: left; }

.svc-section-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--svc-accent);
    margin-bottom: 0.6rem;
}
.svc-section-head h2 {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--svc-ink);
    margin: 0 0 0.7rem;
}
.svc-section-head p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--svc-muted);
    margin: 0;
}

/* ===========================================================================
 * 3. BENEFITS / "WHAT YOU GET" GRID
 * =========================================================================*/

.svc-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.svc-benefit {
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-lg);
    padding: 1.6rem 1.5rem;
    box-shadow: var(--svc-shadow);
    transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}
.svc-section--warm .svc-benefit,
.svc-section--white .svc-benefit { background: var(--svc-white); }
.svc-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--svc-shadow-lg);
}
.svc-benefit-ic {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--svc-accent-light);
    color: var(--svc-accent);
    margin-bottom: 1rem;
}
.svc-benefit-ic svg { width: 22px; height: 22px; }
.svc-benefit h3 {
    font-family: var(--svc-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--svc-ink);
    margin: 0 0 0.4rem;
}
.svc-benefit p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--svc-muted);
    margin: 0;
}

/* ===========================================================================
 * 4. FEATURE CHECKLIST (two-column list of what's included)
 * =========================================================================*/

.svc-include {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    align-items: center;
}
.svc-include-visual {
    background: linear-gradient(150deg, var(--svc-accent-light) 0%, #FFD9CB 100%);
    border-radius: var(--svc-r-xl);
    padding: 2.25rem;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.svc-include-visual .svc-iv-icon {
    width: 68px; height: 68px;
    border-radius: var(--svc-r-lg);
    display: grid; place-items: center;
    background: var(--svc-white);
    color: var(--svc-accent);
    box-shadow: var(--svc-shadow);
}
.svc-include-visual .svc-iv-icon svg { width: 34px; height: 34px; }
.svc-include-visual h3 {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--svc-ink);
    margin: 0;
    line-height: 1.2;
}
.svc-include-visual p {
    font-size: 0.95rem;
    color: #7a4a38;
    margin: 0;
    line-height: 1.55;
}

.svc-checklist { display: grid; gap: 0.9rem; }
.svc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    list-style: none;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--svc-ink);
}
.svc-checklist li .svc-tick {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--svc-green-light);
    color: #16a34a;
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.svc-checklist li .svc-tick svg { width: 14px; height: 14px; }
.svc-checklist li strong { font-weight: 600; }
.svc-checklist li span.svc-ck-sub {
    display: block;
    font-size: 0.86rem;
    color: var(--svc-muted);
    font-weight: 400;
    margin-top: 2px;
}

/* ===========================================================================
 * 5. HOW IT WORKS — numbered steps (a genuine sequence)
 * =========================================================================*/

.svc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    counter-reset: svc-step;
}
.svc-steps.svc-steps-3 { grid-template-columns: repeat(3, 1fr); }
.svc-step {
    position: relative;
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-lg);
    padding: 1.6rem 1.4rem 1.4rem;
    box-shadow: var(--svc-shadow);
}
.svc-step-num {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--svc-ink);
    color: #fff;
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.9rem;
}
.svc-step h3 {
    font-family: var(--svc-font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--svc-ink);
    margin: 0 0 0.35rem;
}
.svc-step p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--svc-muted);
    margin: 0;
}

/* ===========================================================================
 * 6. DETAIL SECTIONS (alternating prose + point list)
 * =========================================================================*/

.svc-detail { display: grid; gap: 2.75rem; }
.svc-detail-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    align-items: center;
}
.svc-detail-row h2 {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--svc-ink);
    margin: 0 0 0.9rem;
}
.svc-detail-row p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--svc-muted);
    margin: 0 0 0.9rem;
}
.svc-detail-row p:last-child { margin-bottom: 0; }
.svc-detail-points { display: grid; gap: 0.7rem; margin-top: 1rem; }
.svc-detail-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    list-style: none;
    font-size: 0.96rem;
    color: var(--svc-ink);
    line-height: 1.5;
}
.svc-detail-points li svg {
    width: 18px; height: 18px;
    color: var(--svc-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.svc-detail-figure {
    background: var(--svc-warm);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-xl);
    padding: 2rem;
}
.svc-section--warm .svc-detail-figure { background: var(--svc-white); }
.svc-detail-figure .svc-fig-stat {
    font-family: var(--svc-font-display);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--svc-accent);
    margin-bottom: 0.4rem;
}
.svc-detail-figure .svc-fig-cap {
    font-size: 0.95rem;
    color: var(--svc-muted);
    line-height: 1.5;
    margin: 0;
}
.svc-detail-figure hr {
    border: none;
    border-top: 1px solid var(--svc-line);
    margin: 1.4rem 0;
}

/* ===========================================================================
 * 7. COMPANION / RELATED SERVICE CARDS
 * =========================================================================*/

.svc-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.svc-related-grid.svc-related-2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-inline: auto; }
.svc-rel-card {
    display: flex;
    flex-direction: column;
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-lg);
    padding: 1.6rem 1.5rem;
    box-shadow: var(--svc-shadow);
    transition: transform 0.25s var(--svc-ease), box-shadow 0.25s var(--svc-ease);
}
.svc-rel-card:hover { transform: translateY(-4px); box-shadow: var(--svc-shadow-lg); }
.svc-rel-ic {
    width: 46px; height: 46px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--svc-accent-light);
    color: var(--svc-accent);
    margin-bottom: 1rem;
}
.svc-rel-ic svg { width: 23px; height: 23px; }
.svc-rel-card h3 {
    font-family: var(--svc-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--svc-ink);
    margin: 0 0 0.4rem;
}
.svc-rel-card p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--svc-muted);
    margin: 0 0 1.1rem;
    flex: 1;
}
.svc-rel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--svc-line);
}
.svc-rel-price {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--svc-ink);
}
.svc-rel-price small { font-size: 0.8rem; font-weight: 500; color: var(--svc-muted); }
.svc-rel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--svc-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s var(--svc-ease);
    /* Tap target: measured 49x23px on phones — below the 24px floor. Same
       padding/negative-margin trick as the breadcrumb: ~40px hit area, no
       visual change to the card footer. */
    min-height: 40px;
    padding: 0.5rem 0.4rem;
    margin: -0.5rem -0.4rem;
    border-radius: 8px;
}
.svc-rel-link svg { width: 15px; height: 15px; }
.svc-rel-link:hover { gap: 0.55rem; }

/* ===========================================================================
 * 8. FAQ (native <details> accordion — no JS required)
 * =========================================================================*/

.svc-faq { max-width: 760px; margin-inline: auto; display: grid; gap: 0.75rem; }
.svc-faq-item {
    background: var(--svc-white);
    border: 1px solid var(--svc-line);
    border-radius: var(--svc-r-md);
    overflow: hidden;
    transition: box-shadow 0.2s var(--svc-ease);
}
.svc-faq-item[open] { box-shadow: var(--svc-shadow); }
.svc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--svc-font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--svc-ink);
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary .svc-faq-chev {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: var(--svc-accent);
    transition: transform 0.25s var(--svc-ease);
}
.svc-faq-item[open] summary .svc-faq-chev { transform: rotate(180deg); }
.svc-faq-answer {
    padding: 0 1.35rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--svc-muted);
}
.svc-faq-answer p { margin: 0 0 0.7rem; }
.svc-faq-answer p:last-child { margin-bottom: 0; }

/* ===========================================================================
 * 9. CLOSING CTA BAND
 * =========================================================================*/

.svc-cta-band { padding: 3.5rem 0; background: var(--svc-cream); }
.svc-cta-inner {
    background:
        radial-gradient(700px 300px at 88% 0%, rgba(255,107,53,0.14) 0%, rgba(255,107,53,0) 60%),
        linear-gradient(135deg, var(--bg-navy, #0F172A) 0%, #1e293b 100%);
    border-radius: var(--svc-r-xl);
    padding: 2.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.75rem;
    align-items: center;
    box-shadow: var(--svc-shadow-lg);
}
.svc-cta-inner h2 {
    font-family: var(--svc-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.18;
    color: #fff;
    margin: 0 0 0.6rem;
}
.svc-cta-inner p {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    margin: 0;
    max-width: 46ch;
}
.svc-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 220px;
}
.svc-cta-actions .svc-cta { width: 100%; }
.svc-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--svc-r-pill);
    text-decoration: none;
    transition: background 0.2s var(--svc-ease);
}
.svc-cta-secondary:hover { background: rgba(255,255,255,0.16); }
.svc-cta-price-tag {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
}
.svc-cta-price-tag strong { color: #fff; font-family: var(--svc-font-display); }

/* ===========================================================================
 * 10. RESPONSIVE
 * =========================================================================*/

@media (max-width: 1024px) {
    .svc-benefit-grid,
    .svc-related-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-steps { grid-template-columns: repeat(2, 1fr); }
    .svc-steps.svc-steps-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .svc-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .svc-buy-card { max-width: 460px; }
    .svc-include,
    .svc-detail-row { grid-template-columns: 1fr; gap: 1.75rem; }
    /* Keep the visual panel after the copy on the detail rows for reading order,
       but before the checklist on the include row so the pattern stays lively. */
    .svc-detail-row .svc-detail-figure { order: 2; }
    .svc-detail-row .svc-detail-copy { order: 1; }
}

@media (max-width: 640px) {
    .svc-page .svc-container { padding-inline: 1.15rem; }
    .svc-hero { padding: 1.5rem 0 2.5rem; }
    .svc-section { padding: 2.75rem 0; }
    .svc-benefit-grid,
    .svc-related-grid,
    .svc-related-grid.svc-related-2,
    .svc-steps,
    .svc-steps.svc-steps-3 { grid-template-columns: 1fr; }
    .svc-cta-inner { grid-template-columns: 1fr; padding: 2rem 1.6rem; }
    .svc-cta-actions { min-width: 0; }
    .svc-include-visual { min-height: 0; padding: 1.75rem; }
    .svc-buy-card { padding: 1.5rem; }
}

@media (max-width: 380px) {
    .svc-buy-price .svc-amount { font-size: 1.9rem; }
    .svc-hero-eyebrow { font-size: 0.74rem; }
}

/* Motion & accessibility floor ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .svc-page *,
    .svc-page *::before,
    .svc-page *::after {
        transition: none !important;
        animation: none !important;
    }
}
.svc-page a:focus-visible,
.svc-page summary:focus-visible,
.svc-page .svc-cta:focus-visible {
    outline: 3px solid var(--svc-accent);
    outline-offset: 2px;
    border-radius: 6px;
}