/* ==========================================================================
   Service pages: site deep-green theme
   Loaded only on service detail pages (see layouts/toa.blade.php).
   Replaces the per-page purple / blue / navy / amber looks with the brand
   green. Prefix `html:root body` out-ranks the per-slug !important rules in
   outsourcing-accountant-firms.css. Remove the <link> in the layout to undo.
   ========================================================================== */

/* ---------- Shared accent variables (enrich sections: who / res / cmp) ---------- */
html:root body .svc-enrich.svc-theme-fuel,
html:root body .svc-enrich.svc-theme-store,
html:root body .svc-enrich.svc-theme-tax,
html:root body .svc-enrich.svc-theme-capital { --svc-accent: #008060; --svc-accent-2: #00946f; }

/* ---------- Dark section backgrounds (all four template families) ---------- */
html:root body section.ocf-hero.sd-hero,
html:root body section.ocf-hero.sv2-hero,
html:root body section.ocf-hero.sv3-hero,
html:root body section.ocf-hero.sv4-hero,
html:root body section.sd-process,
html:root body section.sv2-process,
html:root body section.sv3-process,
html:root body section.sv4-process,
html:root body section.sv3-banner {
    background:
        radial-gradient(70% 120% at 85% 0%, rgba(0, 128, 96, 0.55), transparent 60%),
        linear-gradient(180deg, var(--ocf-green-700) 0%, var(--ocf-green-900) 100%) !important;
}
html:root body section.ocf-hero.sd-hero::before,
html:root body section.ocf-hero.sv2-hero::before,
html:root body section.ocf-hero.sv3-hero::before,
html:root body section.ocf-hero.sv4-hero::before {
    background: radial-gradient(50% 60% at 15% 90%, rgba(0, 128, 96, 0.25), transparent 65%) !important;
}
html:root body section.ocf-hero.sd-hero::after,
html:root body section.ocf-hero.sv2-hero::after,
html:root body section.ocf-hero.sv3-hero::after,
html:root body section.ocf-hero.sv4-hero::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}
html:root body section.sv3-banner::before,
html:root body section.sv3-banner::after { display: none !important; }

/* ---------- Template: base (sd-*) ---------- */
html:root body .sd-section-tag { color: var(--ocf-green-500) !important; }
html:root body .sd-section-tag::before { background: var(--ocf-green-500) !important; }
html:root body .sd-section-tag--light { color: var(--ocf-mint) !important; }
html:root body .sd-section-tag--light::before { background: var(--ocf-mint) !important; }
html:root body .sd-badge { background: rgba(163, 255, 228, 0.1) !important; border: 1px solid rgba(163, 255, 228, 0.3) !important; color: var(--ocf-mint) !important; }
html:root body .sd-badge-dot { background: var(--ocf-mint) !important; box-shadow: 0 0 0 4px rgba(163, 255, 228, 0.2) !important; }
html:root body .sd-crumbs a { color: rgba(163, 255, 228, 0.7) !important; }
html:root body .sd-crumbs a:hover { color: var(--ocf-mint) !important; }
html:root body .sd-include-check { background: rgba(0, 128, 96, 0.12) !important; color: var(--ocf-green-500) !important; }
html:root body .sd-timeline-num { background: linear-gradient(135deg, #12b886, #008060) !important; }
html:root body .sd-timeline-line { background: linear-gradient(180deg, #2fbf8f, rgba(47, 191, 143, 0.2)) !important; }
html:root body .sd-takeaway-quote { color: var(--ocf-mint-2) !important; }
html:root body .sd-hero-icon-wrap,
html:root body .sd-hero-stat { border-color: rgba(163, 255, 228, 0.2) !important; }

/* ---------- Template: v2 (sv2-*) ---------- */
html:root body .sv2-label { color: var(--ocf-green-500) !important; }
html:root body section.sv2-hero .sv2-label,
html:root body section.sv2-process .sv2-label { color: var(--ocf-mint) !important; }
html:root body .sv2-eyebrow { color: var(--ocf-mint) !important; }
html:root body .sv2-hero-icon-ring { border-color: rgba(163, 255, 228, 0.25) !important; box-shadow: 0 0 60px rgba(0, 128, 96, 0.2) !important; }
html:root body .sv2-shape--1 { background: rgba(0, 128, 96, 0.5) !important; }
html:root body .sv2-shape--2 { background: rgba(47, 191, 143, 0.35) !important; }
html:root body .sv2-shape--3 { background: rgba(163, 255, 228, 0.25) !important; }
html:root body .sv2-process-step-num { background: linear-gradient(135deg, #12b886, #008060) !important; }
html:root body .sv2-process-track::before { background: linear-gradient(90deg, transparent, #2fbf8f, transparent) !important; }
html:root body .sv2-quote-open,
html:root body .sv2-quote-close { color: var(--ocf-green-500) !important; }
html:root body .sv2-quote-line { background: var(--ocf-green-500) !important; }

/* ---------- Template: v3 (sv3-*) ---------- */
html:root body .sv3-hero-tag { background: rgba(163, 255, 228, 0.1) !important; border-color: rgba(163, 255, 228, 0.3) !important; color: var(--ocf-mint) !important; font-family: inherit !important; letter-spacing: .12em !important; }
html:root body .sv3-tag-line span { color: var(--ocf-green-500) !important; font-size: 13px; }
html:root body .sv3-tag-line--light span { color: var(--ocf-mint) !important; }
html:root body .sv3-hero-sub { color: rgba(255, 255, 255, 0.72) !important; }
html:root body .sv3-hero-h1 { text-shadow: none !important; }
html:root body .sv3-hero-metric { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; }
html:root body .sv3-metric-icon { background: rgba(163, 255, 228, 0.1) !important; filter: none !important; }
html:root body .sv3-crumbs a { color: rgba(163, 255, 228, 0.7) !important; }
html:root body .sv3-crumbs a:hover { color: var(--ocf-mint) !important; }
html:root body .sv3-problem-big-num { color: var(--ocf-green-500) !important; opacity: .35 !important; }
html:root body .sv3-check-marker { background: rgba(0, 128, 96, 0.12) !important; color: var(--ocf-green-500) !important; }
html:root body .sv3-includes-count-num { color: var(--ocf-green-500) !important; }
html:root body .sv3-zigzag-num { background: linear-gradient(135deg, #12b886, #008060) !important; }
html:root body .sv3-banner-accent { background: linear-gradient(180deg, #2fbf8f, #008060) !important; box-shadow: none !important; }
html:root body .sv3-banner .sv3-banner-inner { border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.04) !important; }
html:root body .sv3-banner .sv3-banner-inner blockquote p { color: #fff !important; text-shadow: none !important; font-family: "Outfit", sans-serif !important; }
html:root body .sv3-banner .sv3-banner-inner cite { color: rgba(163, 255, 228, 0.75) !important; font-family: inherit !important; }
/* Related: deep green */
html:root body section.sv3-related {
    background:
        radial-gradient(70% 120% at 85% 0%, rgba(0, 128, 96, 0.55), transparent 60%),
        linear-gradient(180deg, var(--ocf-green-700) 0%, var(--ocf-green-900) 100%) !important;
}
html:root body section.sv3-related .sv3-h2 { color: #fff !important; }
html:root body section.sv3-related .sv3-tag-line span { color: var(--ocf-mint) !important; }
html:root body section.sv3-related .sv3-tag-line::after { background: rgba(255, 255, 255, 0.2) !important; }
html:root body section.sv3-related .sv3-back .ocf-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: transparent; }

/* ---------- Template: v4 (sv4-*) ---------- */
html:root body .sv4-label { color: var(--ocf-green-500) !important; }
html:root body section.sv4-hero .sv4-label,
html:root body section.sv4-process .sv4-label { color: var(--ocf-mint) !important; }
html:root body .sv4-hero-pill { background: rgba(163, 255, 228, 0.1) !important; border: 1px solid rgba(163, 255, 228, 0.3) !important; color: var(--ocf-mint) !important; }
html:root body .sv4-chip { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(163, 255, 228, 0.2) !important; color: rgba(255, 255, 255, 0.75) !important; }
html:root body .sv4-crumbs a { color: rgba(163, 255, 228, 0.7) !important; }
html:root body .sv4-crumbs a:hover { color: var(--ocf-mint) !important; }
html:root body .sv4-hero-divider { background: rgba(163, 255, 228, 0.25) !important; }
html:root body .sv4-stripe-idx,
html:root body .sv4-feat-num { color: var(--ocf-green-500) !important; }
html:root body .sv4-stripe--even { background: rgba(0, 128, 96, 0.03) !important; }
html:root body .sv4-feat-card { border-color: rgba(0, 128, 96, 0.18) !important; }
html:root body .sv4-rest-dot { background: var(--ocf-green-500) !important; }
html:root body .sv4-panel-num { background: linear-gradient(135deg, #12b886, #008060) !important; color: #fff !important; }
html:root body .sv4-takeaway-rule { background: linear-gradient(90deg, transparent, var(--ocf-green-500), transparent) !important; }

/* ---------- Enrich partials: free tools stand out, clearer comparison table ---------- */
html:root body .svc-res .svc-enrich-kicker {
    background: var(--ocf-green-500); border-color: var(--ocf-green-500); color: #fff;
    font-size: 14.5px; padding: 9px 22px; box-shadow: 0 6px 18px rgba(0, 128, 96, 0.35);
}
html:root body .svc-res .svc-res-tag { background: rgba(0, 128, 96, 0.12); padding: 4px 9px; border-radius: 999px; font-weight: 800; }
html:root body .svc-res .svc-res-card:nth-child(-n+2) .svc-res-tag { background: var(--ocf-green-500); color: #fff; }
html:root body .svc-cmp .svc-cmp-table { border-color: rgba(0, 41, 37, 0.18); box-shadow: 0 8px 28px rgba(0, 41, 37, 0.1); }
html:root body .svc-cmp .svc-cmp-row { border-top-color: rgba(0, 41, 37, 0.12); }
html:root body .svc-cmp .svc-cmp-label { font-size: 15.5px; font-weight: 800; color: var(--ocf-green-900); background: #eef3f0; border-right-color: rgba(0, 41, 37, 0.12); }
html:root body .svc-cmp .svc-cmp-cell { font-size: 16px; padding: 20px 24px; }
html:root body .svc-cmp .svc-cmp-cell--them { color: #4b5a57; border-right-color: rgba(0, 41, 37, 0.12); }
html:root body .svc-cmp .svc-cmp-cell--us { background: rgba(0, 128, 96, 0.09); color: var(--ocf-green-900); font-weight: 700; }
html:root body .svc-cmp .svc-cmp-row--head { background: #fff; }
html:root body .svc-cmp .svc-cmp-row--head .svc-cmp-cell { font-size: 13.5px; color: var(--ocf-green-900); }
html:root body .svc-cmp .svc-cmp-row--head .svc-cmp-cell--us { background: var(--ocf-green-700); color: #fff; }
html:root body .svc-cmp .svc-cmp-ic { width: 24px; height: 24px; font-size: 13px; }
html:root body .svc-cmp .svc-cmp-ic--x { background: #dc2626; color: #fff; }
html:root body .svc-cmp .svc-cmp-ic--ok { background: var(--ocf-green-500); color: #fff; }

/* ---------- Closing quote / takeaway banners (all slugs use a dark bespoke look) ---------- */
html:root body section.sv4-takeaway,
html:root body section.sv2-quote,
html:root body section.sd-takeaway {
    background:
        radial-gradient(70% 120% at 85% 0%, rgba(0, 128, 96, 0.55), transparent 60%),
        linear-gradient(180deg, var(--ocf-green-700) 0%, var(--ocf-green-900) 100%) !important;
}
/* hide the per-page decorative grids, glows and scan lines */
html:root body section.sv4-takeaway::before,
html:root body section.sv4-takeaway::after,
html:root body section.sv2-quote::before,
html:root body section.sv2-quote::after,
html:root body section.sd-takeaway::before,
html:root body section.sd-takeaway::after,
html:root body section.sv4-takeaway .sv4-takeaway-inner::before,
html:root body section.sv4-takeaway .sv4-takeaway-inner::after { display: none !important; }
html:root body section.sv4-takeaway .sv4-takeaway-inner {
    background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none !important;
}
html:root body section.sv4-takeaway blockquote p,
html:root body section.sv2-quote blockquote p,
html:root body section.sd-takeaway blockquote p { color: #fff !important; }
html:root body section.sv4-takeaway cite,
html:root body section.sv2-quote cite,
html:root body section.sd-takeaway cite { color: rgba(163, 255, 228, 0.75) !important; }
html:root body section.sv2-quote .sv2-quote-open,
html:root body section.sv2-quote .sv2-quote-close { color: var(--ocf-mint) !important; opacity: .25; }
html:root body section.sv2-quote .sv2-quote-line { background: var(--ocf-mint-2) !important; }
html:root body section.sv4-takeaway .sv4-takeaway-rule { background: linear-gradient(90deg, transparent, var(--ocf-mint-2), transparent) !important; }

/* ---------- v4 "What's Included": stronger cards + checked list items ---------- */
html:root body .sv4-feat-card {
    border: 1px solid rgba(0, 128, 96, 0.18) !important; border-top: 4px solid var(--ocf-green-500) !important;
    border-radius: 16px; padding: 24px 24px 24px; box-shadow: 0 6px 22px rgba(0, 41, 37, 0.08);
}
html:root body .sv4-feat-card:hover { box-shadow: 0 14px 34px rgba(0, 41, 37, 0.14); }
html:root body .sv4-feat-num {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--ocf-green-500); color: #fff !important; font-size: 13px; opacity: 1; margin-bottom: 14px;
}
html:root body .sv4-feat-card p { font-size: 16px; font-weight: 700; color: var(--ocf-green-900); }
html:root body .sv4-rest-grid { gap: 12px; margin-top: 4px; }
html:root body .sv4-rest-item {
    background: #f1f7f4; border: 1px solid rgba(0, 128, 96, 0.16); border-radius: 12px;
    padding: 16px 18px; font-size: 15px; font-weight: 500; color: var(--ocf-green-900); align-items: center;
}
html:root body .sv4-rest-item:hover { background: #e6f2ed; }
html:root body .sv4-rest-dot {
    width: 22px; height: 22px; margin-top: 0; position: relative; background: var(--ocf-green-500) !important;
}
html:root body .sv4-rest-dot::after {
    content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 760px) {
    html:root body .sv4-feat-row { grid-template-columns: 1fr; }
    html:root body .sv4-rest-grid { grid-template-columns: 1fr; }
}

/* ---------- v4 "The Problem" striped list: clearer numbers and text ---------- */
html:root body .sv4-stripe-list { border: 1px solid rgba(0, 41, 37, 0.18); box-shadow: 0 6px 22px rgba(0, 41, 37, 0.08); }
html:root body .sv4-stripe { grid-template-columns: 56px 1fr; padding: 26px 30px; border-bottom: 1px solid rgba(0, 41, 37, 0.08); }
html:root body .sv4-stripe:last-child { border-bottom: 0; }
html:root body .sv4-stripe--even { background: #fff !important; }
html:root body .sv4-stripe--odd { background: #eef5f1 !important; }
html:root body .sv4-stripe:hover { background: #e3f0ea !important; }
html:root body .sv4-stripe-idx {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--ocf-green-500); color: #fff !important; font-size: 14px; opacity: 1; justify-self: center;
}
html:root body .sv4-stripe p { font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--ocf-green-900); }
@media (max-width: 640px) {
    html:root body .sv4-stripe { grid-template-columns: 44px 1fr; padding: 20px 16px; gap: 12px; }
    html:root body .sv4-stripe-idx { width: 32px; height: 32px; }
    html:root body .sv4-stripe p { font-size: 15.5px; }
}

/* ---------- Related Services (v2 + v4): deep green like v3 ---------- */
html:root body section.sv2-related,
html:root body section.sv4-related {
    background:
        radial-gradient(70% 120% at 85% 0%, rgba(0, 128, 96, 0.55), transparent 60%),
        linear-gradient(180deg, var(--ocf-green-700) 0%, var(--ocf-green-900) 100%) !important;
}
html:root body section.sv2-related .sv2-heading,
html:root body section.sv4-related .sv4-h2 { color: #fff !important; }
html:root body section.sv2-related .sv2-eyebrow,
html:root body section.sv4-related .sv4-label { color: var(--ocf-mint) !important; }
html:root body section.sv2-related .ocf-btn--ghost,
html:root body section.sv4-related .ocf-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: transparent; }

/* ---------- v3 "The Problem": boxed rows with green number badges ---------- */
html:root body .sv3-problem .sv3-problem-list { gap: 14px; }
html:root body .sv3-problem .sv3-problem-row,
html:root body .sv3-problem .sv3-problem-row--alt {
    background: #fff; border: 1px solid rgba(0, 41, 37, 0.12); border-radius: 16px;
    padding: 22px 24px; box-shadow: 0 2px 10px rgba(0, 41, 37, 0.05);
    grid-template-columns: 76px 1fr; gap: 8px;
    border-left: 5px solid var(--ocf-green-500);
}
html:root body .sv3-problem .sv3-problem-row:first-child { border-top: 1px solid rgba(0, 41, 37, 0.12); }
html:root body .sv3-problem .sv3-problem-row:hover { background: #fff; box-shadow: 0 10px 26px rgba(0, 41, 37, 0.12); transform: translateY(-2px); }
html:root body .sv3-problem .sv3-problem-big-num { font-size: 52px; opacity: .55 !important; }
html:root body .sv3-problem .sv3-problem-content p { font-size: 17.5px; line-height: 1.6; font-weight: 500; color: var(--ocf-green-900); padding-right: 0; }
@media (max-width: 640px) {
    html:root body .sv3-problem .sv3-problem-row { grid-template-columns: 52px 1fr; padding: 18px 16px; }
    html:root body .sv3-problem .sv3-problem-big-num { font-size: 38px; }
    html:root body .sv3-problem .sv3-problem-content p { font-size: 16px; }
}

/* ---------- v3 hero stat boxes (deliverables / steps / FAQs) removed ---------- */
html:root body .sv3-hero .sv3-hero-aside { display: none !important; }
html:root body .sv3-hero .sv3-hero-layout { grid-template-columns: 1fr !important; }

/* ---------- v3 "What's Included": one card, green checks, roomier rows ---------- */
html:root body .sv3-includes .sv3-includes-layout {
    background: #fff; border: 1px solid rgba(0, 41, 37, 0.12); border-radius: 22px;
    border-top: 5px solid var(--ocf-green-500);
    padding: clamp(24px, 4vw, 44px); box-shadow: 0 10px 34px rgba(0, 41, 37, 0.09);
    gap: clamp(28px, 4vw, 56px);
}
html:root body .sv3-includes .sv3-includes-left { background: #eef5f1; border-radius: 16px; padding: 26px 24px; }
html:root body .sv3-includes .sv3-includes-count-num { font-size: 56px; }
html:root body .sv3-includes .sv3-check-row {
    background: #f6faf8; border: 1px solid rgba(0, 128, 96, 0.14); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px; font-size: 16px; font-weight: 500; color: var(--ocf-green-900); align-items: center;
}
html:root body .sv3-includes .sv3-check-row:first-child { border-top: 1px solid rgba(0, 128, 96, 0.14); }
html:root body .sv3-includes .sv3-check-row:hover { background: #e8f3ee; padding-left: 16px; transform: translateX(4px); }
html:root body .sv3-includes .sv3-check-marker { background: var(--ocf-green-500) !important; color: #fff !important; width: 26px; height: 26px; border-radius: 50%; margin-top: 0; }
html:root body .sv3-includes .sv3-check-marker svg { stroke: #fff; }
@media (max-width: 900px) {
    html:root body .sv3-includes .sv3-includes-left { position: static; }
}

/* ---------- Base "What's Included" cards: green bar, solid check badges, bolder text ---------- */
html:root body .sd-include-card {
    align-items: center; padding: 22px 22px; gap: 16px; border: 1px solid rgba(0, 128, 96, 0.16);
    border-left: 5px solid var(--ocf-green-500); border-radius: 14px; background: #fff;
    box-shadow: 0 4px 16px rgba(0, 41, 37, 0.06);
}
html:root body .sd-include-card--featured {
    background: linear-gradient(135deg, #e8f4ee, #fff 70%); border-color: rgba(0, 128, 96, 0.3);
    border-left-color: var(--ocf-green-700); box-shadow: 0 8px 24px rgba(0, 41, 37, 0.1);
}
html:root body .sd-include-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 41, 37, 0.14); }
html:root body .sd-include-check { background: var(--ocf-green-500) !important; color: #fff !important; width: 30px; height: 30px; border-radius: 50%; margin-top: 0; }
html:root body .sd-include-card--featured .sd-include-check { background: var(--ocf-green-700) !important; }
html:root body .sd-include-text { font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--ocf-green-900); }

/* ---------- Base hero "deliverables included" stat removed ---------- */
html:root body .sd-hero .sd-hero-stat { display: none !important; }