/* 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/websites-products/: the headline keeps the full width; from 1000 px the lead, buttons and framing cards form
   the left column and the reel the wider right column. Below 1000 px the reel follows the headline. The recordings are
   never overlaid with page text: scene names, origin and the case link sit under the frame. */
@media (min-width:1000px){
.sx-web .service-opening-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:clamp(36px,3.6vw,52px)}
.sx-web .service-opening-chapter > *{grid-column:1 / -1}
.sx-web .service-opening-chapter > :is(.lead,.actions,.service-framing){grid-column:1}
.sx-web .service-opening-chapter > .lead{grid-row:4}
.sx-web .service-opening-chapter > .actions{grid-row:5;flex-wrap:wrap}
.sx-web .service-opening-chapter > .service-framing{grid-row:6;align-self:start;grid-template-columns:minmax(0,1fr);margin-top:32px!important}
.sx-web .service-opening-chapter > .sx-reel{grid-column:2;grid-row:4 / 7;margin-top:22px}
}
.sx-reel{margin-top:22px;min-width:0}
.sx-reel-frame{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r);border:1px solid var(--line-2);background:var(--film-bg);box-shadow:0 18px 50px -24px var(--shadow)}
.sx-reel-scene,.sx-reel-video{position:absolute;inset:0;width:100%;height:100%}
.sx-reel-scene{opacity:0;transition:opacity .45s var(--ease)}
.sx-reel-scene.is-on{opacity:1}
.sx-reel-scene img{width:100%;height:100%;object-fit:cover}
.sx-reel-video{object-fit:cover;opacity:0;transition:opacity .35s var(--ease);background:transparent}
.sx-reel.is-video .sx-reel-video{opacity:1}
.sx-reel-toggle{position:absolute;right:10px;top:10px;z-index:2;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--film-line-2);background:var(--film-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--film-ink);transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.sx-reel-toggle:hover{border-color:var(--film-line-3);background:var(--film-plate)}
.sx-reel-toggle svg{width:18px;height:18px;fill:currentColor}
.sx-reel-toggle .sx-i-pause,.sx-reel-toggle.is-running .sx-i-play{display:none}
.sx-reel-toggle.is-running .sx-i-pause{display:block}
.sx-reel .sx-reel-toggle:focus-visible{outline:2px solid var(--film-ink);outline-offset:2px;box-shadow:0 0 0 6px rgba(11,12,14,.72)}
.sx-reel-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.sx-reel-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-content:start;min-height:56px;padding:9px 11px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);text-align:left;overflow:hidden;transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.sx-reel-tab:hover{border-color:var(--line-3)}
.sx-reel-tab[aria-pressed="true"]{border-color:var(--sx-path);background:var(--surface-2)}
.sx-reel-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-reel-tab strong{color:var(--ink);font-size:.88rem;line-height:1.3}
.sx-reel-o{grid-column:2;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.sx-reel-p{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--sx-path);transform-origin:0 50%;transform:scaleX(var(--sx-p,0))}
.sx-reel-tab:not([aria-pressed="true"]) .sx-reel-p{transform:scaleX(0)}
.sx-reel-caps{margin-top:12px}
.sx-reel-cap{display:grid;gap:4px;max-width:68ch}
.sx-reel-cap > p:not(.sx-k){margin:0;color:var(--body);font-size:var(--fs-small);line-height:1.55}
.sx-reel-cap .text-link{justify-self:start}
html:not(.js) .sx-reel-tabs,html:not(.js) .sx-reel-toggle{display:none}
@media (max-width:699px){
.sx-web .service-opening-chapter > .eyebrow{display:none}
.sx-reel{margin-top:18px}
.sx-reel-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-reel-tab{min-height:52px}
}
@media (prefers-reduced-motion:reduce){.sx-reel-scene,.sx-reel-video{transition:none}}
/* 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}}