/* Service illustrations travel with their rows. No sticky stage or extra scroll. */
#services .svc-row { --svc-accent: var(--gu-aqua-200); align-items: start; }
#services [data-service="brand"] { --svc-accent: var(--gu-lilac-200); }
#services [data-service="product"] { --svc-accent: var(--gu-lime-200); }
#services [data-service="traction"] { --svc-accent: var(--gu-pink-200); }
#services .svc-visual { min-width: 0; display: flex; align-items: flex-start; gap: 24px; }
#services .svc-num { padding-top: 5px; font-variant-numeric: tabular-nums; }
#services .svc-visual svg { display: block; width: 160px; max-width: 100%; height: auto; overflow: visible; }
#services .svc-fill { fill: var(--svc-accent); }
#services .svc-stroke { fill: none; stroke: var(--svc-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#services .svc-guide { fill: none; stroke: var(--svc-accent); stroke-width: 1; opacity: 0.18; }
#services .svc-panel { fill: var(--surface-eggplant); stroke: var(--svc-accent); stroke-width: 1.5; }
#services .svc-muted { fill: var(--svc-accent); opacity: 0.4; }
#services .svc-core { fill: var(--gu-paper); }
#services .svc-tagline { color: var(--svc-accent); }
#services .svc-copy, #services .svc-cats { min-width: 0; }
#services .svc-chips li { white-space: normal; line-height: 1.3; }

@media (min-width: 640px) and (max-width: 1023px) {
    #services .svc-row { grid-template-columns: 180px minmax(0, 1fr); }
    #services .svc-visual { grid-row: span 2; flex-direction: column; gap: 16px; }
    #services .svc-cats { grid-column: 2; }
}
@media (min-width: 1024px) {
    #services .svc-row { grid-template-columns: 220px minmax(0, 1fr) 280px; min-height: 280px; }
    #services .svc-visual { flex-direction: column; gap: 12px; }
    #services .svc-visual svg { width: 220px; }
}