/* 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/research-engineering/: the headline at left, the lead and buttons at right from 1000 px, then the schematic
   across the full width: supplied records → calculation → checks → inspectable report. Under 700 px the stations stack
   with the drawing beside its label. */
@media (min-width:1000px){
.sx-re .service-opening-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,390px);column-gap:clamp(32px,3.4vw,48px)}
.sx-re .service-opening-chapter > *{grid-column:1 / -1}
.sx-re .service-opening-chapter > .eyebrow{grid-column:1;grid-row:2}
.sx-re .service-opening-chapter > h1{grid-column:1;grid-row:3}
.sx-re .service-opening-chapter > .sx-side{grid-column:2;grid-row:2 / 4;align-self:end}
.sx-re .service-opening-chapter > .sx-flow{grid-row:4}
.sx-re .service-opening-chapter > .service-framing{grid-row:5}
.sx-re .sx-side .lead{margin-top:0}
.sx-re .sx-side .actions{margin-top:22px}
}
.sx-flow{margin-top:clamp(28px,3.6vw,44px)}
.sx-flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(28px,3.4vw,44px);margin:0;padding:0;list-style:none}
.sx-st{position:relative;display:grid;align-content:start;gap:6px}
.sx-st > p{margin:0}
.sx-st .sx-k{margin-top:10px}
.sx-st-t{color:var(--ink);font-size:.92rem;line-height:1.5}
.sx-st-vis{position:relative;aspect-ratio:5 / 3;display:grid;place-items:center;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(--sx-wire)}
.sx-st-vis svg{width:100%;height:100%}
.sx-ln{fill:none;stroke:var(--line-3);stroke-width:1.5}
.sx-hd{fill:var(--sx-path-soft);stroke:none}
.sx-rows rect{fill:var(--line-3)}
.sx-rows .sx-u{fill:none;stroke:var(--sx-path);stroke-width:1.2}
.sx-in{stroke:var(--line-3)}
.sx-box{fill:var(--bg);stroke:var(--sx-path);stroke-width:1.5}
.sx-f{fill:var(--ink);font-family:var(--font-sans);font-style:italic;font-weight:700;font-size:28px;letter-spacing:-.02em}
.sx-out{stroke:var(--sx-path)}
.sx-head{fill:none;stroke:var(--sx-path);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sx-checks{display:grid;gap:9px;margin:0;padding:0 8%;list-style:none;width:100%}
.sx-checks li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:.86rem;line-height:1.2;font-weight:700}
.sx-checks svg{flex:none;width:20px;height:20px;padding:2px;border-radius:5px;border:1px solid var(--sx-path);fill:none;stroke:var(--sx-path);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-grid{fill:none;stroke:var(--line);stroke-width:1}
.sx-curve{fill:none;stroke:var(--sx-path);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.sx-pts circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.3}
.sx-sample{position:absolute;right:8px;top:7px;white-space:nowrap;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--bg);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
/* connectors: a bronze line and chevron between neighbouring drawings (on the drawing from 700 px, on the station below) */
.sx-flow{--sx-gap:clamp(28px,3.4vw,44px)}
.sx-st:not(:last-child) > .sx-st-vis::after,.sx-st:not(:last-child)::after{content:"";position:absolute;background:var(--sx-path)}
.sx-st:not(:last-child) > .sx-st-vis::before,.sx-st:not(:last-child)::before{content:"";position:absolute;z-index:1;width:7px;height:7px;border-top:1.6px solid var(--sx-path);border-right:1.6px solid var(--sx-path)}
.sx-st:not(:last-child) > .sx-st-vis::after{top:50%;left:100%;width:var(--sx-gap);height:1.6px;transform-origin:0 50%}
.sx-st:not(:last-child) > .sx-st-vis::before{left:calc(100% + var(--sx-gap) - 8px);top:calc(50% - 4px);transform:rotate(45deg)}
.sx-st:not(:last-child)::after,.sx-st:not(:last-child)::before{display:none}
/* motion: one pass, 3.6 s: each station lights in turn, the checks tick and the report curve draws */
.sx-flow.is-armed .sx-st:not(:last-child) > .sx-st-vis::after{transform:scaleX(0)}
.sx-flow.is-armed :is(.sx-st:not(:last-child),.sx-st:not(:last-child) > .sx-st-vis)::before{opacity:0}
.sx-flow.is-armed .sx-checks svg{opacity:.25}
.sx-flow.is-armed .sx-curve{stroke-dashoffset:1}
.sx-flow.is-armed .sx-pts circle{opacity:0}
.sx-flow.is-armed.is-run .sx-st-rec .sx-st-vis{animation:sx-lit 1s ease .05s both}
.sx-flow.is-armed.is-run .sx-rows g{animation:sx-row .5s ease both}
.sx-flow.is-armed.is-run .sx-rows g:nth-child(1){animation-delay:.1s}
.sx-flow.is-armed.is-run .sx-rows g:nth-child(2){animation-delay:.25s}
.sx-flow.is-armed.is-run .sx-rows g:nth-child(3){animation-delay:.4s}
.sx-flow.is-armed.is-run .sx-rows g:nth-child(4){animation-delay:.55s}
.sx-flow.is-armed.is-run .sx-st:nth-child(1) > .sx-st-vis::after,.sx-flow.is-armed.is-run .sx-st:nth-child(1)::after{animation:sx-grow .4s var(--ease) .7s forwards}
.sx-flow.is-armed.is-run .sx-st:nth-child(1) > .sx-st-vis::before,.sx-flow.is-armed.is-run .sx-st:nth-child(1)::before{animation:sx-show .2s ease 1s forwards}
.sx-flow.is-armed.is-run .sx-st-calc .sx-st-vis{animation:sx-lit 1s ease 1.05s both}
.sx-flow.is-armed.is-run .sx-st:nth-child(2) > .sx-st-vis::after,.sx-flow.is-armed.is-run .sx-st:nth-child(2)::after{animation:sx-grow .4s var(--ease) 1.65s forwards}
.sx-flow.is-armed.is-run .sx-st:nth-child(2) > .sx-st-vis::before,.sx-flow.is-armed.is-run .sx-st:nth-child(2)::before{animation:sx-show .2s ease 1.95s forwards}
.sx-flow.is-armed.is-run .sx-st-chk .sx-st-vis{animation:sx-lit 1s ease 2s both}
.sx-flow.is-armed.is-run .sx-checks li:nth-child(1) svg{animation:sx-show .25s ease 2.1s forwards}
.sx-flow.is-armed.is-run .sx-checks li:nth-child(2) svg{animation:sx-show .25s ease 2.3s forwards}
.sx-flow.is-armed.is-run .sx-checks li:nth-child(3) svg{animation:sx-show .25s ease 2.5s forwards}
.sx-flow.is-armed.is-run .sx-st:nth-child(3) > .sx-st-vis::after,.sx-flow.is-armed.is-run .sx-st:nth-child(3)::after{animation:sx-grow .4s var(--ease) 2.6s forwards}
.sx-flow.is-armed.is-run .sx-st:nth-child(3) > .sx-st-vis::before,.sx-flow.is-armed.is-run .sx-st:nth-child(3)::before{animation:sx-show .2s ease 2.9s forwards}
.sx-flow.is-armed.is-run .sx-st-rep .sx-st-vis{animation:sx-lit 1s ease 2.95s both}
.sx-flow.is-armed.is-run .sx-curve{animation:sx-draw .7s var(--ease) 3s forwards}
.sx-flow.is-armed.is-run .sx-pts circle{animation:sx-show .3s ease 3.3s forwards}
.sx-flow.is-off *,.sx-flow.is-off *::after,.sx-flow.is-off *::before{animation-play-state:paused!important}
@keyframes sx-draw{to{stroke-dashoffset:0}}
@keyframes sx-grow{to{transform:scaleX(1)}}
@keyframes sx-show{to{opacity:1}}
@keyframes sx-row{50%{opacity:.35}}
@keyframes sx-lit{35%{border-color:var(--sx-path);box-shadow:inset 0 1px 0 var(--edge),0 0 0 3px var(--glow)}}
@media (max-width:999px){.sx-flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.sx-st:nth-child(2) > .sx-st-vis::after,.sx-st:nth-child(2) > .sx-st-vis::before{display:none}}
@media (max-width:699px){
.sx-re .service-opening-chapter > .eyebrow{display:none}
.sx-flow-steps{grid-template-columns:minmax(0,1fr);row-gap:22px}
.sx-st{grid-template-columns:132px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start}
.sx-st-vis{grid-row:1 / span 2}
.sx-st .sx-k{margin-top:2px}
.sx-st-t{font-size:.88rem}
.sx-checks{gap:5px;padding:0 9px}
.sx-checks li{font-size:.72rem;gap:6px}
.sx-checks svg{width:15px;height:15px;padding:1px;border-radius:4px}
.sx-st-vis{aspect-ratio:auto;align-self:stretch;min-height:80px}
.sx-st:not(:last-child) > .sx-st-vis::after,.sx-st:not(:last-child) > .sx-st-vis::before{display:none}
.sx-st:not(:last-child)::after,.sx-st:not(:last-child)::before{display:block}
.sx-st:not(:last-child)::after{top:100%;left:65px;width:1.6px;height:22px;transform-origin:50% 0}
.sx-st:not(:last-child)::before{top:calc(100% + 13px);left:62px;transform:rotate(135deg)}
.sx-flow.is-armed .sx-st:not(:last-child)::after{transform:scaleY(0)}
.sx-flow.is-armed.is-run .sx-st:not(:last-child)::after{animation-name:sx-grow-y}
.sx-sample{right:5px;top:4px;font-size:.56rem;padding:1px 6px}
.sx-sample-x{display:none}
}
@keyframes sx-grow-y{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.sx-flow *,.sx-flow *::after,.sx-flow *::before{animation:none!important}}
/* websites-products and research-engineering: the example recording leaves the opening and opens the example panel
   below it, at a larger, inspectable size, beside the example links */
@media (min-width:1000px){
.sx-proof{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:clamp(24px,3vw,40px);align-items:start}
.sx-proof > .service-evidence{grid-template-columns:minmax(0,1fr)}
.sx-proof > .service-evidence > *{grid-column:1}
}
.sx-proof > .service-recording{margin:0 0 24px}
.sx-proof > .service-recording > .sx-k{margin-bottom:10px}
.sx-proof > .service-recording figcaption{margin-top:12px}
@media (min-width:1000px){.sx-proof > .service-recording{margin:0}}
@media (max-width:999px){.sx-proof > .service-evidence{grid-template-columns:minmax(0,1fr)}.sx-proof > .service-evidence > *{grid-column:1}}