/* Precise vector scenes: local parts move, never the surrounding content.
   Dark and light illustrations use opaque surfaces for correct occlusion. */
.service-illustration-frame,
.service-category-illustration,
.service-process-illustration {
    --sd-surface: var(--white, #fff);
    --sd-ink: var(--ink, #07110f);
    --sd-rule: #b3bdb9;
    --sd-muted: #788b83;
    --sd-accent: var(--accent, #22e6bd);
    --sd-ease: cubic-bezier(.22,.7,.23,1);
    color: var(--sd-ink);
}
.service-deliverable-art.service-illustration-frame {
    position: relative;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 170px;
    max-height: 285px;
    border-color: #d1dad6;
    background: var(--white, #fff);
    perspective: none;
}
.service-deliverable-art--1.service-illustration-frame,
.service-category-illustration,
.service-process-illustration {
    --sd-surface: var(--ink, #07110f);
    --sd-ink: #edf4f0;
    --sd-rule: #415c50;
    --sd-muted: #8da399;
}
.service-deliverable-art--1.service-illustration-frame { background: var(--ink, #07110f); border-color: var(--ink, #07110f); }
.service-illustration-frame .service-illustration,
.service-related__art .service-illustration,
.service-goals__icon .service-illustration {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-height: 100%;
    overflow: hidden;
    color: var(--sd-ink);
    transform: none;
    transition: none;
}
.service-deliverables__list article:hover .service-illustration,
.service-related__list a:hover .service-illustration { transform: none; }
.service-illustration :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.service-illustration .sd-surface { fill: var(--sd-surface); }
.service-illustration .sd-muted-surface { fill: var(--sd-surface); stroke: var(--sd-muted); }
.service-illustration .sd-accent { fill: var(--sd-accent); stroke: var(--ink, #07110f); }
.service-illustration .sd-solid { fill: currentColor; stroke: none; }
.service-illustration .sd-dot { fill: var(--sd-muted); stroke: none; }
.service-illustration .sd-line { fill: none; stroke: currentColor; }
.service-illustration .sd-check { fill: none; stroke: var(--ink, #07110f); stroke-width: 1.8; }
.service-illustration .sd-rule { fill: none; stroke: var(--sd-rule); stroke-width: 1; }
.service-illustration .sd-muted { fill: none; stroke: var(--sd-muted); }
.service-illustration .sd-heavy { fill: none; stroke: currentColor; stroke-width: 2.5; }
.service-illustration .sd-emphasis { fill: none; stroke: var(--sd-accent); stroke-width: 2.5; }
.service-illustration .sd-connector { fill: none; stroke: var(--sd-rule); }
.service-illustration .sd-trace { fill: none; stroke: var(--sd-accent); stroke-width: 2; }
.service-illustration .sd-ring { fill: none; stroke: var(--sd-muted); }
.service-category-illustration { display: block; width: 100%; height: 100%; }
.service-related__art { height: 155px; }
.service-related__art .service-illustration { max-width: 300px; margin-inline: auto; }
.service-goals__icon .service-illustration { max-width: 160px; }
.service-process-illustration .service-illustration { display: block; width: 100%; overflow: hidden; color: var(--sd-ink); }
.service-process-illustration .service-illustration text { fill: var(--sd-ink); font: 15px var(--font); text-anchor: middle; stroke: none; }
.service-process-illustration .sd-detail:first-of-type text { fill: var(--ink, #07110f); }

@media (prefers-reduced-motion: no-preference) {
    .service-illustration .sd-detail { transform-box: fill-box; transform-origin: center; transition: transform 280ms var(--sd-ease); }
    .service-illustration .sd-trace { stroke-dasharray: 1; transition: stroke-dashoffset 380ms var(--sd-ease); }
    @media (hover: hover) and (pointer: fine) {
        :is(.service-deliverables__list article:hover, .service-related__list a:hover, .service-goals a:hover) .sd-shift-up { transform: translateY(-5px); }
        :is(.service-deliverables__list article:hover, .service-related__list a:hover, .service-goals a:hover) .sd-shift-left { transform: translate(-5px, -2px); }
        :is(.service-deliverables__list article:hover, .service-related__list a:hover, .service-goals a:hover) .sd-shift-right { transform: translate(5px, -2px); }
        :is(.service-deliverables__list article:hover, .service-related__list a:hover, .service-goals a:hover) .sd-lens { transform: translate(-7px, -4px); }
        :is(.service-deliverables__list article:hover, .service-related__list a:hover, .service-goals a:hover) .sd-target { transform: scale(1.045); }
    }
    :is(.service-related__list a:focus-visible, .service-goals a:focus-visible) .sd-shift-right { transform: translate(5px, -2px); }
    :is(.service-related__list a:focus-visible, .service-goals a:focus-visible) .sd-target { transform: scale(1.045); }
    :is(.service-related__list a:focus-visible, .service-goals a:focus-visible) .sd-shift-up { transform: translateY(-5px); }
    .diagram-is-entering .sd-detail { animation: sd-assemble 480ms var(--sd-ease) both; }
    .diagram-is-entering .sd-trace { animation: sd-connect 600ms var(--sd-ease) both; }
    .service-process-illustration.diagram-is-entering .sd-detail { animation: sd-confirm 480ms var(--sd-ease) both; }
    @keyframes sd-assemble { from { transform: translateY(10px); opacity: .15; } to { transform: none; opacity: 1; } }
    @keyframes sd-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes sd-confirm { from { opacity: .2; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
    .service-illustration, .service-illustration * { animation: none !important; transition: none !important; }
    .service-illustration, .service-illustration .sd-detail { transform: none !important; }
}