/* service openings (4 Oct 2026): shared diagram tokens. Bronze paths, warm-white type and the shell's surfaces; every
   colour comes from the shell tokens, so the dark, black and light appearances follow without page rules */
.sx{--sx-path:var(--accent);--sx-path-soft:color-mix(in srgb,var(--accent) 42%,transparent);--sx-wire:var(--line-3);--sx-node:var(--surface);--sx-node-2:var(--surface-2)}
:root[data-appearance="light"] .sx{--sx-path:var(--accent-deep);--sx-path-soft:color-mix(in srgb,var(--accent-deep) 45%,transparent)}
.sx-k{margin:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.5;color:var(--accent-text)}
.sx-cap{margin-top:14px;font-size:var(--fs-small);line-height:1.6;color:var(--muted);max-width:68ch}
.sx-replay{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--body);font-size:.82rem;font-weight:700;transition:border-color var(--t-state) var(--ease),color var(--t-state) var(--ease)}
.sx-replay:hover{border-color:var(--sx-path);color:var(--ink)}
.sx-replay:focus-visible,.sx a:focus-visible,.sx button:focus-visible{outline:2px solid var(--sx-path);outline-offset:3px}
.sx-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 20px}
.sx-foot .sx-cap{flex:1 1 320px;margin-top:14px}
.sx-foot .sx-replay{margin-top:10px}
/* /services/: split opening, the copy at left and the service map at right from 1000 px; the map stacks under the copy
   below that and becomes a vertical list of readable nodes under 700 px */
.sx-intro .sx-map{margin:clamp(28px,4vw,40px) 0 0}
@media (min-width:1000px){
.sx-intro{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);column-gap:clamp(40px,4.4vw,64px);align-items:center}
.sx-intro .sx-map{margin:0}
}
.sx-map-stage{position:relative;display:grid;grid-template-columns:21% 6% 21% 6% 46%;grid-template-rows:repeat(4,minmax(86px,auto))}
.sx-map-wires{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sx-map-wires path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sx-map-base path{stroke:var(--sx-wire);stroke-width:1}
.sx-map-run path{stroke:var(--sx-path);stroke-width:1.6;transition:stroke-width var(--t-state) var(--ease)}
.sx-map-node{position:relative;z-index:1;grid-row:1 / -1;align-self:center;display:grid;gap:6px;padding:14px 14px 15px;border-radius:var(--r);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--sx-node-2),var(--sx-node));box-shadow:inset 0 1px 0 var(--edge)}
.sx-map-node p:not(.sx-k){margin:0;color:var(--ink);font-size:.88rem;line-height:1.45}
.sx-map-task{grid-column:1}
.sx-map-hub{grid-column:3;border-color:var(--sx-path-soft)}
.sx-map-ends{grid-column:5;grid-row:1 / -1;display:grid;grid-template-rows:repeat(4,1fr);margin:0;padding:0;list-style:none}
.sx-map-ends li{display:flex;align-items:center;padding:5px 0}
.sx-map-ends a{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;width:100%;min-height:44px;padding:11px 14px 12px;border-radius:var(--r);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--sx-node-2),var(--sx-node));box-shadow:inset 0 1px 0 var(--edge);color:var(--ink);transition:border-color var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.sx-map-ends a::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--sx-path)}
.sx-map-n{grid-row:1 / span 2;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--accent-text);line-height:1.9}
.sx-map-ends strong{font-size:.95rem;line-height:1.3;letter-spacing:-.005em}
.sx-map-d{grid-column:2;font-size:.8rem;line-height:1.4;color:var(--muted)}
.sx-map-ends a:hover{border-color:var(--sx-path)}
.sx-map-ends a:hover strong{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.sx-map:has(li:nth-child(1) a:is(:hover,:focus-visible)) .sx-map-run path:nth-child(2),
.sx-map:has(li:nth-child(2) a:is(:hover,:focus-visible)) .sx-map-run path:nth-child(3),
.sx-map:has(li:nth-child(3) a:is(:hover,:focus-visible)) .sx-map-run path:nth-child(4),
.sx-map:has(li:nth-child(4) a:is(:hover,:focus-visible)) .sx-map-run path:nth-child(5){stroke-width:3}
/* motion: the bronze paths are revealed from the task through the brief to each service once (2.6 s), then stay */
.sx-map.is-armed .sx-map-run{clip-path:inset(0 80% 0 0)}
.sx-map.is-armed.is-run .sx-map-run{animation:sx-wipe 1.7s cubic-bezier(.45,0,.3,1) .15s forwards}
@keyframes sx-wipe{to{clip-path:inset(0 0 0 0)}}
.sx-map.is-armed.is-run .sx-map-hub{animation:sx-arrive .7s ease .55s both}
.sx-map.is-armed.is-run .sx-map-ends li:nth-child(1) a{animation:sx-arrive .7s ease 1.45s both}
.sx-map.is-armed.is-run .sx-map-ends li:nth-child(2) a{animation:sx-arrive .7s ease 1.6s both}
.sx-map.is-armed.is-run .sx-map-ends li:nth-child(3) a{animation:sx-arrive .7s ease 1.75s both}
.sx-map.is-armed.is-run .sx-map-ends li:nth-child(4) a{animation:sx-arrive .7s ease 1.9s both}
.sx-map.is-off *{animation-play-state:paused!important}
@keyframes sx-arrive{40%{border-color:var(--sx-path);box-shadow:inset 0 1px 0 var(--edge),0 0 0 3px var(--glow)}}
@media (max-width:699px){
.sx-map-stage{display:block}
.sx-map-wires{display:none}
.sx-map-node{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:22px}
.sx-map-node::after{content:"";position:absolute;left:22px;top:100%;width:1.6px;height:22px;background:var(--sx-path)}
.sx-map-ends{display:grid;gap:8px;padding-left:22px;border-left:1.6px solid var(--sx-path);margin-left:21px;grid-template-rows:none}
.sx-map-ends li{padding:0}
.sx-map-ends a::before{left:-27px}
.sx-map-ends a{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){.sx-map *{animation:none!important}}