/* =====================================================================================
   Optronix v4 design system ("Signal")
   Dark first. Purple acts, the mark gradient lights. Engineering-drawing details.
   Tokens live in tokens.css. Behaviour lives in /js/ox/ox.js. Manual: COMPONENTS.md.

   Contents
   01 Lenis            08 Tags, chips, badges     15 Forms
   02 Base             09 Cards                   16 Header, mega menu, mobile menu
   03 Type             10 Section head            17 Footer
   04 Layout           11 Page hero               18 Motion states
   05 Themes           12 Detail sections         19 Cursor glow
   06 Motifs           13 Data + media            20 Page transitions
   07 Buttons, links   14 Article system          21 Workplace hand-over, cookie banner, misc
   ===================================================================================== */

/* ---------------------------------------------------------------- 01 Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------------------------------------------------------------- 02 Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink-1);
  color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body.ox {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-1);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
body.ox main { display: block; overflow-x: clip; }
[hidden] { display: none !important; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
/* <picture class="pic"> only offers an AVIF copy of its <img>; it takes no box, so the img lays out
   and is styled exactly as if it were the direct child (height: 100%, object-fit, grid/flex items). */
picture.pic { display: contents; }
svg { overflow: visible; }
iframe { border: 0; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
/* resets and theme defaults are :where()-wrapped (zero specificity) so any single class wins */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
b, strong { font-weight: 600; color: var(--fg); }
small { font-size: var(--fs-small); }
button { font: inherit; color: inherit; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--s-7) 0; }
::selection { background: rgba(123, 126, 242, 0.42); color: #fff; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: calc(var(--z-cursor) + 10);
  padding: 12px 18px; border-radius: var(--r-2);
  background: var(--fg); color: var(--ink-1); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); opacity: 0; pointer-events: none;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.skip-link:focus { transform: none; opacity: 1; pointer-events: auto; }
.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- 03 Type */
.display, .h1, .h2, .h3, .h4 { color: var(--fg); font-weight: 500; text-wrap: balance; margin: 0; }
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--track-display); }
.h2 { font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.14; letter-spacing: -0.02em; }
.h4 { font-size: var(--fs-h4); line-height: 1.28; letter-spacing: -0.012em; }
.lead {
  font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2);
  max-width: 40em; text-wrap: balance;
}
.body-l { font-size: 1.1875rem; line-height: 1.6; }
.small { font-size: var(--fs-small); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  line-height: 1.2; letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: ""; flex: none; width: 11px; height: 11px;
  background: var(--grad-mark);
  clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%);
}
.eyebrow--plain::before { display: none; }
.eyebrow__num { color: var(--fg-3); }
.eyebrow__num::after { content: "/"; margin-left: 0.75em; color: var(--fg-4); }
.mono, .label {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.4;
}
.tnum { font-variant-numeric: tabular-nums; }
.font-mono { font-family: var(--font-mono); }
.muted { color: var(--fg-3); }
.faint { color: var(--fg-4); }
.fg { color: var(--fg); }
.accent { color: var(--accent-text); }
.text-grad {
  background: var(--grad-text, var(--grad-mark-h));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  /* the gradient only paints inside the box: give the last letter's overhang (r, y, f) room */
  padding-inline-end: 0.06em; margin-inline-end: -0.06em;
}
.balance { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.max-text { max-width: var(--max-text); }
.center { text-align: center; }
.center .lead, .lead.center { margin-inline: auto; }

/* ---------------------------------------------------------------- 04 Layout */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(980px + 2 * var(--gutter)); }
.container--text { max-width: calc(760px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush { padding-block: 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--ink0 { background: var(--ink-0); }
.section--ink2 { background: var(--ink-2); }
.section--line { border-top: 1px solid var(--line); }
.section + .section--line, .section--line { border-top: 1px solid var(--line); }
/* anchor offset: one mechanism only (scroll-margin on the target; html has no scroll-padding).
   Zero specificity, so a page's own scroll-margin-top replaces it rather than adding to it. */
:where([id]) { scroll-margin-top: calc(var(--header-h) + 16px); }

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-5)); }
.stack > * { margin: 0; }
.stack--s { --gap: var(--s-3); }
.stack--l { --gap: var(--s-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-3)); }
.cluster--l { --gap: var(--s-5); }
.cluster--between { justify-content: space-between; }

.grid {
  display: grid; gap: var(--gap, var(--s-4));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 300px), 100%), 1fr));
}
.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
@media (max-width: 1099px) { .grid--4 { --cols: 2; } .grid--3 { --cols: 2; } }
@media (max-width: 699px) { .grid--2, .grid--3, .grid--4 { --cols: 1; } }
.grid--gap-l { --gap: var(--s-6); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap, clamp(16px, 2vw, 32px));
  row-gap: var(--row-gap, var(--s-7));
}
.grid-12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) {
  /* span-N sets "auto / span N"; start-N (declared after) then moves only the start line,
     so "span-6 start-7" gives 7 / span 6 in either class order */
  .span-2 { grid-column: auto / span 2; } .span-3 { grid-column: auto / span 3; } .span-4 { grid-column: auto / span 4; }
  .span-5 { grid-column: auto / span 5; } .span-6 { grid-column: auto / span 6; } .span-7 { grid-column: auto / span 7; }
  .span-8 { grid-column: auto / span 8; } .span-9 { grid-column: auto / span 9; } .span-10 { grid-column: auto / span 10; }
  .span-11 { grid-column: auto / span 11; } .span-12 { grid-column: 1 / -1; }
  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
}
@media (max-width: 899px) { .grid-12 > .sm-span-6 { grid-column: auto / span 6; } }

.split {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap, clamp(32px, 5vw, 96px));
}
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split--rev > :first-child { order: 2; }
@media (max-width: 899px) {
  .split, .split--even, .split--wide { grid-template-columns: minmax(0, 1fr); }
  .split--rev > :first-child { order: 0; }
}
.sticky { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) { .sticky { position: static; } }

.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: var(--s-4); } .mt-m { margin-top: var(--s-6); }
.mt-l { margin-top: var(--s-8); } .mt-xl { margin-top: var(--s-9); }
.mb-0 { margin-bottom: 0 !important; } .mb-s { margin-bottom: var(--s-4); } .mb-m { margin-bottom: var(--s-6); }
.mb-l { margin-bottom: var(--s-8); }
@media (max-width: 699px) { .hide-sm { display: none !important; } }
@media (min-width: 700px) { .show-sm { display: none !important; } }

/* ---------------------------------------------------------------- 05 Themes */
/* Paper: remaps the tokens, so every component inside re-themes itself.
   Use .section--paper on a section, or .theme-paper on any element.
   .theme-dark restores the dark tokens inside a paper area. */
.section--paper, .theme-paper {
  --ink-0: var(--paper-2);
  --ink-1: var(--paper);
  --ink-2: #ffffff;
  --ink-3: #fbfbf8;
  --ink-4: #ffffff;
  --line: var(--paper-line);
  --line-2: rgba(11, 11, 18, 0.16);
  --line-3: rgba(11, 11, 18, 0.28);
  --fg: var(--paper-fg);
  --fg-2: var(--paper-fg-2);
  --fg-3: var(--paper-fg-3);
  --fg-4: #8d8fa5;
  --accent-text: var(--ox-600);
  --focus: var(--ox-600);
  --surface-glass: rgba(255, 255, 255, 0.8);
  --shadow-1: 0 1px 2px rgba(11, 11, 18, 0.05), 0 18px 40px -26px rgba(11, 11, 18, 0.35);
  --shadow-2: 0 40px 80px -40px rgba(11, 11, 18, 0.35), 0 0 0 1px var(--paper-line);
  --grad-text: linear-gradient(90deg, var(--ox-600) 0%, var(--violet) 48%, #2a9fb0 100%);
  --chip-bg: #fff;
  --scope-hover: #fff;
  --card-shadow: var(--shadow-1);
  --card-glow: rgba(123, 126, 242, 0.08);
  background: var(--paper);
  color: var(--fg-2);
  color-scheme: light;
}
.section--paper ::selection, .theme-paper ::selection { background: rgba(123, 126, 242, 0.28); color: var(--paper-fg); }
.theme-dark {
  --ink-0: #050508; --ink-1: #08080d; --ink-2: #0e0e15; --ink-3: #15151f; --ink-4: #1d1d2a;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); --line-3: rgba(255, 255, 255, 0.24);
  --fg: #f4f4f8; --fg-2: #b9bacb; --fg-3: #8486a0; --fg-4: #5d5f78;
  --accent-text: var(--ox-300); --focus: var(--ox-300);
  --surface-glass: rgba(10, 10, 16, 0.72);
  --grad-text: var(--grad-mark-h);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line);
  --chip-bg: rgba(255, 255, 255, 0.02);
  --scope-hover: rgba(255, 255, 255, 0.025);
  --card-shadow: none;
  --card-glow: rgba(123, 126, 242, 0.12);
  color: var(--fg-2); color-scheme: dark;
}

/* ---------------------------------------------------------------- 06 Motifs */
/* Blueprint grid: 12 hairline columns aligned to .container. Place as the first child
   of a position:relative section: <div class="bg-grid" aria-hidden="true"></div> */
.bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.bg-grid::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: max(var(--gutter), calc((100% - var(--max)) / 2));
  right: max(var(--gutter), calc((100% - var(--max)) / 2));
  border-right: 1px solid var(--line);
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  opacity: 0.6;
}
.bg-grid--dense::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 96px; opacity: 0.45;
}
.bg-grid--radial {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
}
.section > .container { position: relative; z-index: 1; }

/* Crosshair "+" marks at the four corners of a box (registration marks). */
.corners { position: relative; }
.corners::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 2;
  --c: var(--line-3);
  background:
    linear-gradient(var(--c), var(--c)) left 0 top 6px / 13px 1px,
    linear-gradient(var(--c), var(--c)) left 6px top 0 / 1px 13px,
    linear-gradient(var(--c), var(--c)) right 0 top 6px / 13px 1px,
    linear-gradient(var(--c), var(--c)) right 6px top 0 / 1px 13px,
    linear-gradient(var(--c), var(--c)) left 0 bottom 6px / 13px 1px,
    linear-gradient(var(--c), var(--c)) left 6px bottom 0 / 1px 13px,
    linear-gradient(var(--c), var(--c)) right 0 bottom 6px / 13px 1px,
    linear-gradient(var(--c), var(--c)) right 6px bottom 0 / 1px 13px;
  background-repeat: no-repeat;
}
.corners--accent::before { --c: var(--accent-text); }

/* Angled section edges, echoing the parallelogram cuts of the X mark. The section
   overlaps the one before (or after) by --cut, so the angle shows the neighbour. */
.cut-top {
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--section-y) + var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.cut-bottom {
  margin-bottom: calc(var(--cut) * -1);
  padding-bottom: calc(var(--section-y) + var(--cut));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  z-index: 1;
}
.cut-top.cut-bottom { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.cut-top + .section, .cut-bottom + .section { position: relative; }

/* Light path: a hairline with light pulses travelling along it (fibre).
   Copy the snippet in COMPONENTS.md; pathLength="100" on every pulse. */
.lightpath { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.lightpath path, .lightpath line, .lightpath polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lightpath__base { fill: none; stroke: var(--line-2); stroke-width: 1; }
.lightpath__pulse {
  fill: none; stroke-linecap: round;
  stroke: var(--lp-color, var(--cyan)); stroke-width: 2.25;
  stroke-dasharray: var(--lp-len, 9) 100;
  stroke-dashoffset: 109;
  filter: drop-shadow(0 0 4px var(--lp-color, var(--cyan))) drop-shadow(0 0 10px rgba(140, 82, 255, 0.7));
  animation: ox-lightpath var(--lp-dur, 4.2s) linear infinite;
  animation-delay: var(--lp-delay, 0s);
}
.lightpath__pulse--violet { --lp-color: #b9a2ff; }
.lightpath__pulse--slow { --lp-dur: 7s; }
@keyframes ox-lightpath { to { stroke-dashoffset: 0; } }
.lightpath__node { fill: var(--ink-1); stroke: var(--line-3); stroke-width: 1; }
.lightpath__node.is-lit, .is-lit > .lightpath__node { stroke: var(--cyan); }

/* Glow orbs: soft brand light behind content. Parent needs position:relative + isolation. */
.glow-orb {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--x, 50%); top: var(--y, 50%);
  width: var(--size, 560px); aspect-ratio: 1;
  /* centred with margins rather than translate: -50% -50%. Same box, but Chrome's layout-shift
     tracking reads a translate plus the looping transform as a jump across the whole hero
     whenever the hero changes height by a few pixels (CLS 0.4-2 on some pages). */
  margin: calc(var(--size, 560px) / -2) 0 0 calc(var(--size, 560px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb, rgba(123, 126, 242, 0.32)) 0%, transparent 66%);
  filter: blur(10px);
  animation: ox-orb var(--orb-dur, 16s) ease-in-out infinite alternate;
}
.glow-orb--violet { --orb: rgba(140, 82, 255, 0.34); }
.glow-orb--cyan { --orb: rgba(92, 225, 230, 0.2); }
.glow-orb--blue { --orb: rgba(111, 168, 240, 0.24); }
.glow-orb--ox { --orb: rgba(123, 126, 242, 0.32); }
.glow-orb--green { --orb: rgba(126, 217, 87, 0.2); }
.glow-orb--static { animation: none; }
@keyframes ox-orb {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, -6%, 0) scale(1.08); }
  100% { transform: translate3d(-5%, 4%, 0) scale(0.96); }
}
.isolate { position: relative; isolation: isolate; }

/* Film grain overlay: <div class="grain" aria-hidden="true"></div> inside a positioned parent. */
.grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: var(--grain, 0.07); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.section--paper .grain, .theme-paper .grain { mix-blend-mode: multiply; --grain: 0.05; }

/* Duotone photography: wrap an <img>. Mono purple-ink by default; .duotone--live shows
   colour on hover/focus of the closest card or link. */
.duotone {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ox-900);
}
.duotone img, .duotone video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  mix-blend-mode: luminosity; opacity: 0.88;
  transition: filter var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-xslow) var(--ease-out);
}
.duotone::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, rgba(140, 82, 255, 0.42) 0%, rgba(8, 8, 13, 0.1) 46%, rgba(92, 225, 230, 0.22) 100%);
  mix-blend-mode: color; transition: opacity var(--t-slow) var(--ease-out);
}
.duotone::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 8, 0) 40%, rgba(5, 5, 8, 0.55) 100%);
}
.duotone--flat::after { display: none; }
a:hover .duotone--live img, a:focus-visible .duotone--live img, .duotone--live:hover img,
.card:hover .duotone--live img { filter: none; mix-blend-mode: normal; opacity: 1; }
a:hover .duotone--live::before, a:focus-visible .duotone--live::before, .duotone--live:hover::before,
.card:hover .duotone--live::before { opacity: 0; }

/* Dimension line, for drawings: <div class="dim"><span>3000 mm</span></div> */
.dim {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 18px; color: var(--fg-3);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 9px; translate: 0 -50%;
  border-inline: 1px solid var(--line-3);
  background: linear-gradient(var(--line-3), var(--line-3)) center / 100% 1px no-repeat;
}
.dim > span { position: relative; padding: 0 8px; background: var(--dim-bg, var(--ink-1)); }

/* Status pill with a live dot */
.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
  background: rgba(255, 255, 255, 0.02);
}
.status-pill > i, .dot-live {
  position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none;
}
.status-pill > i::after, .dot-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--cyan);
  animation: ox-ping 2.4s var(--ease-out) infinite;
}
@keyframes ox-ping { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------------------------------------------------------------- 07 Buttons, links */
.btn {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-2);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-icon-bg: rgba(255, 255, 255, 0.16);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 24px;
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 0.9688rem/1 var(--font-sans); letter-spacing: -0.003em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px -14px rgba(123, 126, 242, 0.7);
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out),
    color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:has(> svg:last-child) { padding-right: 8px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.3), transparent 70%);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.btn > svg {
  width: 34px; height: 34px; padding: 9px; flex: none;
  border-radius: 50%; background: var(--btn-icon-bg);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  overflow: hidden;
  transition: background-color var(--t-med) var(--ease-out);
}
.btn > svg path { transform-box: fill-box; }
.btn:hover { background: var(--btn-bg-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 40px -14px rgba(123, 126, 242, 0.9); }
.btn:hover::before { opacity: 1; }
.btn:hover > svg path, .btn:focus-visible > svg path { animation: ox-arrow 0.62s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.99); }
@keyframes ox-arrow {
  0% { transform: translateX(0); opacity: 1; }
  44% { transform: translateX(140%); opacity: 0; }
  45% { transform: translateX(-140%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.btn--ghost {
  --btn-bg: transparent; --btn-bg-hover: rgba(123, 126, 242, 0.1); --btn-fg: var(--fg);
  --btn-bd: var(--line-3); --btn-icon-bg: var(--line);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bd: var(--accent-text); box-shadow: none; border-color: var(--accent-text); }
.btn--ghost::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(161, 163, 255, 0.18), transparent 70%); }
.btn--light {
  --btn-bg: var(--paper-fg); --btn-bg-hover: #1d1d2c; --btn-fg: #fff; --btn-icon-bg: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px -16px rgba(11, 11, 18, 0.6);
}
.btn--light:hover { box-shadow: 0 14px 34px -14px rgba(11, 11, 18, 0.55); }
.btn--white {
  --btn-bg: #fff; --btn-bg-hover: var(--ox-50); --btn-fg: var(--paper-fg); --btn-icon-bg: rgba(11, 11, 18, 0.07);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
.btn--white::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 126, 242, 0.25), transparent 70%); }
.btn--green { --btn-bg: var(--green); --btn-bg-hover: var(--green-2); --btn-fg: var(--green-ink); --btn-icon-bg: rgba(8, 35, 15, 0.12); box-shadow: 0 10px 30px -14px rgba(126, 217, 87, 0.6); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.9063rem; gap: 10px; }
.btn--sm:has(> svg:last-child) { padding-right: 6px; }
.btn--sm > svg { width: 28px; height: 28px; padding: 7px; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.0625rem; }
.btn--lg:has(> svg:last-child) { padding-right: 10px; }
.btn--lg > svg { width: 40px; height: 40px; padding: 11px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading > svg { animation: ox-spin 0.9s linear infinite; }
.btn.is-loading > svg path { opacity: 0; }
.btn.is-loading > svg { background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 255, 255, 0.85)); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
@keyframes ox-spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t-med) var(--ease-out), color var(--t-fast);
}
.link-arrow > svg {
  width: 16px; height: 16px; flex: none; color: var(--accent-text);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-med) var(--ease-out);
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1px; }
.link-arrow:hover > svg, .link-arrow:focus-visible > svg { transform: translateX(4px); }
.link-arrow--muted { color: var(--fg-2); }
.link-arrow--mono { font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.link {
  color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em; transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.link:hover { text-decoration-color: currentColor; color: var(--fg); }

/* Hover roll (ox.js wraps button/nav labels for pointer: fine). */
.ox-roll { position: relative; display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1.25; padding-block: 0.06em; margin-block: -0.06em; }
:is(a, button) > span:has(> .ox-roll) { display: inline-flex; line-height: 1.25; }
.ox-roll__row { display: inline-flex; white-space: pre; }
.ox-roll__row + .ox-roll__row { position: absolute; left: 0; top: 100%; }
.ox-roll__c { display: inline-block; transition: transform 0.5s var(--ease-out); transition-delay: calc(var(--ci) * 12ms); }
:is(a, button):hover > .ox-roll .ox-roll__c, :is(a, button):hover > span > .ox-roll .ox-roll__c,
:is(a, button):focus-visible > .ox-roll .ox-roll__c { transform: translateY(-100%); }

/* ---------------------------------------------------------------- 08 Tags, chips, badges */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border: 1px solid var(--line-2); border-radius: var(--r-1);
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap; text-decoration: none;
}
.tag--accent { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--chip-bg, rgba(255, 255, 255, 0.02));
  font-size: 0.875rem; line-height: 1.2; color: var(--fg-2); text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
a.chip:hover, button.chip:hover, .chip--active, .chip[aria-pressed="true"] {
  border-color: var(--accent-text); color: var(--fg); background: rgba(123, 126, 242, 0.1);
}
:where(button).chip { cursor: pointer; font: inherit; font-size: 0.875rem; }
.chip > .dot, .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.chip--mono { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: var(--r-1);
  background: var(--accent); color: #fff;
  font: 600 10px/1.1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.badge--new {
  background: var(--grad-mark); background-size: 200% 100%; color: #0b0b12;
  animation: ox-shimmer 4s linear infinite;
}
@keyframes ox-shimmer { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.badge--outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px currentColor; }
.badge--green { background: var(--green); color: var(--green-ink); }
.badge--muted { background: var(--line-2); color: var(--fg-2); }
/* Announcement pill: <a class="announce"><span class="badge badge--new">New</span>Text<svg/></a> */
.announce {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 5px 14px 5px 5px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem; color: var(--fg-2); text-decoration: none;
  transition: border-color var(--t-med), background-color var(--t-med), color var(--t-med);
}
.announce .badge { border-radius: var(--r-pill); padding: 5px 10px; }
.announce > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-med) var(--ease-out); }
.announce:hover { border-color: var(--accent-text); color: var(--fg); background: rgba(123, 126, 242, 0.08); }
.announce:hover > svg { transform: translateX(3px); }
.announce__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- 09 Cards */
.card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--card-pad, clamp(22px, 2vw, 32px));
  background: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-3);
  color: var(--fg-2); text-decoration: none;
  transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -20%), var(--card-glow, rgba(123, 126, 242, 0.12)), transparent 42%);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -20%), rgba(185, 170, 255, 0.95), rgba(92, 225, 230, 0.45) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
.card:hover::before, .card:hover::after, .card:focus-within::after { opacity: 1; }
/* paper cards lift with --card-shadow (set by the theme); zero specificity so a page's own box-shadow wins */
:where(.card) { box-shadow: var(--card-shadow, none); }
.card__num { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--fg-3); }
.card__eyebrow { font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  color: var(--accent-text);
}
.card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); font-weight: 500; }
.card__text { font-size: var(--fs-small); line-height: 1.6; color: var(--fg-2); }
.card__list { display: grid; gap: 8px; font-size: var(--fs-small); }
.card__list li { position: relative; padding-left: 18px; }
.card__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--accent-text); }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card__foot { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__arrow {
  width: 40px; height: 40px; flex: none; margin-left: auto;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--fg);
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.card__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); transition: transform var(--t-med) var(--ease-out); }
.card--link { cursor: pointer; }
.card--link:hover { transform: translateY(-4px); border-color: var(--line-2); }
.card--link:hover .card__arrow { background: var(--accent); border-color: var(--accent); color: #fff; }
.card--link:hover .card__arrow svg { transform: rotate(0deg); }
.card--link:focus-visible { outline-offset: 4px; }
.card--link:active { transform: translateY(-2px); }
.card--media { padding: 0; overflow: visible; }
.card__media {
  position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 10);
  border-radius: calc(var(--r-3) - 1px) calc(var(--r-3) - 1px) 0 0;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-xslow) var(--ease-out), filter var(--t-slow), opacity var(--t-slow); }
.card--media:hover .card__media img { transform: scale(1.045); }
.card__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--card-pad, clamp(22px, 2vw, 30px)); flex: 1; }
.card--stat { gap: var(--s-2); }
.card__value {
  font-family: var(--font-mono); font-weight: 500; color: var(--fg);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.card__value .unit { font-size: 0.45em; letter-spacing: 0; color: var(--accent-text); margin-left: 0.15em; }
.card--glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card--outline { background: transparent; }
.card--accent { background: linear-gradient(160deg, rgba(123, 126, 242, 0.24), rgba(14, 14, 21, 0.6) 60%), var(--ink-2); border-color: rgba(161, 163, 255, 0.3); }
.card--chamfer {
  border-radius: var(--r-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.card--chamfer::after { display: none; }
.card--chamfer::before { inset: 0; }
.card--chamfer > .card__corner {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; pointer-events: none;
  background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line-2) calc(50% - 0.5px), var(--line-2) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.card--flat:hover { transform: none; }

/* ---------------------------------------------------------------- 10 Section head */
.section-head {
  display: grid; align-items: end;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-5) clamp(32px, 6vw, 112px);
  margin-bottom: clamp(40px, 5vw, 80px);
}
.section-head .eyebrow { margin-bottom: var(--s-5); }
.section-head__aside { color: var(--fg-2); font-size: 1.125rem; line-height: 1.6; max-width: 34em; }
.section-head__aside > * + * { margin-top: var(--s-4); }
.section-head--stack { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.section-head--center { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; max-width: 920px; margin-inline: auto; }
.section-head--center .section-head__aside { margin-inline: auto; }
@media (max-width: 899px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 11 Page hero */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 104px));
  padding-bottom: clamp(64px, 7vw, 120px);
  background: var(--ink-0);
  border-bottom: 1px solid var(--line);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, transparent, var(--ink-0));
}
.page-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px); align-items: center;
}
.page-hero--center .page-hero__inner, .page-hero--text .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.page-hero--center .page-hero__copy { text-align: center; margin-inline: auto; max-width: 1000px; }
.page-hero--center .lead, .page-hero--center .page-hero__actions { margin-inline: auto; justify-content: center; }
.page-hero--center .breadcrumbs ol { justify-content: center; }
.page-hero__copy { min-width: 0; }
.page-hero__title {
  font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--track-display);
  color: var(--fg); font-weight: 500; margin: 0;
}
.page-hero__title .text-grad { padding-bottom: 0.06em; }
.page-hero .lead { margin-top: var(--s-6); max-width: 36em; }
.page-hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__visual { position: relative; min-width: 0; aspect-ratio: var(--ratio, 1 / 1); max-height: 560px; width: 100%; }
.page-hero__visual > svg, .page-hero__visual > canvas, .page-hero__visual > img { width: 100%; height: 100%; }
.page-hero__meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  margin-top: clamp(48px, 6vw, 96px);
}
.page-hero__scroll {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
.page-hero__scroll i { position: relative; width: 1px; height: 36px; background: var(--line-2); overflow: hidden; }
.page-hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--cyan); animation: ox-scrollcue 2.2s var(--ease-in-out) infinite; }
/* Same travel as animating top from -40% to 100% of the track (1.4 track heights = 3.5x the cue's
   own 40% height), but as a transform, so it runs on the compositor with no layout per frame. */
@keyframes ox-scrollcue { to { transform: translateY(350%); } }
@media (max-width: 899px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero__visual { max-width: 520px; max-height: 420px; }
}

.breadcrumbs { margin-bottom: var(--s-6); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.breadcrumbs li + li::before { content: "/"; margin: 0 0.8em; color: var(--fg-4); }
.breadcrumbs a { color: var(--fg-3); text-decoration: none; transition: color var(--t-fast); }
.breadcrumbs a:hover { color: var(--fg); }
.breadcrumbs [aria-current] { color: var(--fg-2); }

/* Drawing title block: <dl class="title-block"><div><dt>Dwg</dt><dd>OX-SVC-07</dd></div>…</dl> */
.title-block {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto;
  margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ink-1) 70%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.title-block > div { padding: 7px 12px 8px; min-width: 0; }
.title-block > div + div { border-left: 1px solid var(--line-2); }
.title-block dt { color: var(--fg-4); margin-bottom: 3px; }
.title-block dd { margin: 0; color: var(--fg-2); white-space: nowrap; }
.title-block--stack { grid-auto-flow: row; }
.title-block--stack > div + div { border-left: 0; border-top: 1px solid var(--line-2); }
@media (max-width: 599px) {
  .title-block { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block > div + div { border-left: 0; }
  .title-block > div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .title-block > div:nth-child(even) { border-left: 1px solid var(--line-2); }
  .title-block dd { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- 12 Detail sections */
/* What's included */
.scope-grid {
  --cols: 3;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.scope-grid--2 { --cols: 2; }
.scope-grid--4 { --cols: 4; }
@media (max-width: 1099px) { .scope-grid, .scope-grid--4 { --cols: 2; } }
@media (max-width: 639px) { .scope-grid, .scope-grid--2, .scope-grid--4 { --cols: 1; } }
.scope {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(24px, 2.4vw, 36px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color var(--t-med) var(--ease-out);
}
.scope::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: calc(100% + 1px); height: 2px;
  background: var(--grad-mark-h); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.scope:hover { background: var(--scope-hover, rgba(255, 255, 255, 0.025)); }
.scope:hover::before { transform: scaleX(1); }
.scope__num { font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--accent-text); }
.scope__icon { color: var(--accent-text); width: 40px; height: 40px; }
.scope__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.scope__title { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.012em; color: var(--fg); font-weight: 500; margin-top: var(--s-2); }
.scope p, .scope__text { font-size: var(--fs-small); color: var(--fg-2); }
.scope ul { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--fg-2); list-style: none; padding: 0; }
.scope ul li { position: relative; padding-left: 16px; }
.scope ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1px; background: var(--accent-text); }

/* Ticked list (key benefits) */
.ticks { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
@media (max-width: 699px) { .ticks--2 { grid-template-columns: minmax(0, 1fr); } }
.ticks li { position: relative; padding-left: 34px; color: var(--fg-2); line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.08em; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(123, 126, 242, 0.14); box-shadow: inset 0 0 0 1px rgba(161, 163, 255, 0.4);
}
.ticks li::after {
  content: ""; position: absolute; left: 6px; top: calc(0.08em + 6px); width: 8px; height: 5px;
  border-left: 1.6px solid var(--accent-text); border-bottom: 1.6px solid var(--accent-text); transform: rotate(-45deg);
}

/* Process: numbered steps on a light path that draws with scroll */
.process {
  --n: 4;
  position: relative; list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--s-6) clamp(16px, 2vw, 32px);
}
.process__rail {
  position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line-2); pointer-events: none;
}
.process__fill {
  position: absolute; inset: 0; background: var(--grad-mark-h);
  transform-origin: left center; transform: scaleX(var(--p, 0));
}
.process__head {
  position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #e9fbff; box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.18), 0 0 18px 4px rgba(92, 225, 230, 0.55);
  opacity: calc(var(--p, 0) * 40);
}
.process__step { position: relative; padding-top: 44px; min-width: 0; }
.process__step::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-3);
  transition: box-shadow var(--t-med) var(--ease-out), background-color var(--t-med);
}
.process__step.is-lit::before { background: var(--ink-1); box-shadow: inset 0 0 0 4px var(--ink-1), inset 0 0 0 8px var(--cyan), 0 0 16px rgba(92, 225, 230, 0.5); }
.process__num { display: block; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--fg-3); margin-bottom: var(--s-3); transition: color var(--t-med); }
.process__step.is-lit .process__num { color: var(--accent-text); }
.process__title { font-size: var(--fs-h4); line-height: 1.25; color: var(--fg); font-weight: 500; letter-spacing: -0.012em; }
.process__text { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--fg-2); }
@media (max-width: 899px) {
  .process { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .process__rail { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .process__fill { transform-origin: center top; transform: scaleY(var(--p, 0)); }
  .process__head { left: 50%; top: calc(var(--p, 0) * 100%); margin: -4.5px 0 0 -4.5px; }
  .process__step { padding: 0 0 0 44px; }
  .process__step::before { top: 2px; }
}
.process--vertical { grid-template-columns: minmax(0, 1fr); }
.process--vertical .process__rail { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
.process--vertical .process__fill { transform-origin: center top; transform: scaleY(var(--p, 0)); }
.process--vertical .process__head { left: 50%; top: calc(var(--p, 0) * 100%); }
.process--vertical .process__step { padding: 0 0 0 44px; }
.process--vertical .process__step::before { top: 2px; }
/* The head rides the rail as a transform rather than left/top, so moving it on every scroll frame
   costs no layout and causes no layout shift. The rail's size never depends on its content, so it
   can be the size container the head measures against (100cqw / 100cqh = the rail's length). */
@supports (width: 1cqw) {
  .process__rail { container-type: size; }
  .process__head { left: 0; translate: calc(var(--p, 0) * 100cqw) 0; }
  .process--vertical .process__head { left: 50%; top: 0; translate: 0 calc(var(--p, 0) * 100cqh); }
}
@supports (width: 1cqw) { @media (max-width: 899px) {
  .process__head { left: 50%; top: 0; translate: 0 calc(var(--p, 0) * 100cqh); }
} }

/* Spec table: key/value */
.spec { margin: 0; border-top: 1px solid var(--line-2); }
.spec__row, .spec > div {
  display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--s-5);
  padding: 16px 4px; border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast);
}
.spec > div:hover { background: rgba(255, 255, 255, 0.02); }
.spec dt { font: 500 var(--fs-mono)/1.6 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.spec dd { margin: 0; color: var(--fg); }
@media (max-width: 599px) { .spec > div, .spec__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Accordion: <details class="acc"> (ox.js animates open and close) */
.faq { border-top: 1px solid var(--line-2); }
.acc { border-bottom: 1px solid var(--line-2); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: 24px 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-h4); line-height: 1.3; color: var(--fg); font-weight: 500; letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::marker { content: ""; }
.acc > summary:hover { color: var(--accent-text); }
.acc__icon {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px;
  background: currentColor; border-radius: 2px; transition: transform var(--t-med) var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc[open]:not(.is-closing) > summary .acc__icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.acc[open]:not(.is-closing) > summary .acc__icon::after { transform: rotate(0deg); }
.acc__body { overflow: hidden; }
.acc__body > div, .acc__inner { padding: 0 4px 26px; max-width: 64em; color: var(--fg-2); }
.acc__body > p { padding: 0 4px 26px; max-width: 64em; color: var(--fg-2); }
.acc__body p + p { margin-top: var(--s-3); }

/* Related links */
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 999px) { .related__grid { grid-template-columns: minmax(0, 1fr); } }

/* CTA band */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-4); border: 1px solid rgba(161, 163, 255, 0.24);
  padding: clamp(36px, 5vw, 80px);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(140, 82, 255, 0.32), transparent 60%),
    radial-gradient(60% 120% at 0% 100%, rgba(92, 225, 230, 0.12), transparent 60%),
    linear-gradient(160deg, #15152a, var(--ink-2) 70%);
}
.cta-band__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6) var(--s-8); align-items: end; }
.cta-band h2, .cta-band .h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; }
.cta-band p { margin-top: var(--s-4); max-width: 36em; color: var(--fg-2); }
.cta-band .lightpath { position: absolute; left: 0; right: 0; top: 0; z-index: 0; opacity: 0.85; }
.cta-band .bg-grid { opacity: 0.6; }
@media (max-width: 799px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------------------------------------------------------------- 13 Data + media */
.stats {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 0; margin: 0;
  border-top: 1px solid var(--line-2);
}
.stats--3 { --cols: 3; }
.stats--2 { --cols: 2; }
@media (max-width: 899px) { .stats, .stats--3 { --cols: 2; } }
@media (max-width: 459px) { .stats, .stats--3, .stats--2 { --cols: 1; } }
.stat {
  position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5) 0;
}
.stat::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 2px; background: var(--grad-mark-h); }
.stat + .stat { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.stat + .stat::before { left: var(--s-5); }
@media (min-width: 900px) {
  .stats--2 .stat:nth-child(2n + 1), .stats--3 .stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .stats--2 .stat:nth-child(2n + 1)::before, .stats--3 .stat:nth-child(3n + 1)::before { left: 0; }
  .stats--2 .stat:nth-child(n + 3), .stats--3 .stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 899px) {
  .stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats .stat:nth-child(odd)::before { left: 0; }
  .stats .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 459px) { .stats .stat { border-left: 0 !important; padding-left: 0 !important; } .stats .stat::before { left: 0 !important; } .stats .stat + .stat { border-top: 1px solid var(--line); } }
.stat__value {
  margin: 0; font-family: var(--font-mono); font-weight: 500; color: var(--fg);
  font-size: clamp(2.75rem, 1.9rem + 3vw, 5rem); line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat__value .unit, .stat__value small { font-size: 0.42em; letter-spacing: -0.01em; color: var(--accent-text); margin-left: 0.12em; }
.stat__label { margin: 0; font-size: var(--fs-small); color: var(--fg-2); max-width: 22em; }
[data-count] { font-variant-numeric: tabular-nums; display: inline-block; }

/* Logo marquee */
.logos {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos__track { display: flex; align-items: center; gap: var(--logo-gap, clamp(32px, 4vw, 64px)); list-style: none; padding: 0 var(--logo-gap, clamp(32px, 4vw, 64px)) 0 0; margin: 0; flex: none; }
.logos__item { flex: none; height: var(--logo-h, 44px); display: flex; align-items: center; }
.logos__item img {
  height: 100%; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(0.85); opacity: 0.55;
  transition: filter var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.logos__item:hover img, .logos__item:focus-within img { filter: none; opacity: 1; }
.logos--tiles { --logo-gap: 12px; }
.logos--tiles .logos__item {
  height: auto; width: var(--tile-w, 176px); aspect-ratio: 16 / 9; justify-content: center;
  padding: 18px 22px; border-radius: var(--r-2); background: #f3f3f6; border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.logos--tiles .logos__item img { max-width: 100%; max-height: 100%; height: auto; filter: grayscale(1) contrast(1.05); opacity: 0.62; }
.logos--tiles .logos__item:hover { background: #fff; transform: translateY(-2px); }
.logos--tiles .logos__item:hover img { filter: none; opacity: 1; }
.logos--tiles .logos__item--dark { background: var(--ink-3); border-color: var(--line-2); }
.logos--tiles .logos__item--dark img { filter: grayscale(1) brightness(1.4); opacity: 0.7; }
.logos--tiles .logos__item--dark:hover { background: var(--ink-4); }
.logos--cells { -webkit-mask-image: none; mask-image: none; }
/* marquee runtime (ox.js wraps the track) */
.ox-marquee__rail { display: flex; width: max-content; animation: ox-marquee var(--marquee-dur, 40s) linear infinite; animation-play-state: var(--marquee-state, running); }
[data-marquee]:hover .ox-marquee__rail, [data-marquee].is-paused .ox-marquee__rail { animation-play-state: paused; }
[data-marquee][data-direction="right"] .ox-marquee__rail { animation-direction: reverse; }
@keyframes ox-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Figure with mono caption */
.media { margin: 0; }
.media__frame { position: relative; overflow: hidden; border-radius: var(--r-3); aspect-ratio: var(--ratio, auto); }
.media__frame img, .media__frame video { width: 100%; height: 100%; object-fit: cover; }
.media__cap {
  display: flex; gap: 14px; align-items: baseline; margin-top: var(--s-3);
  font-size: 0.875rem; color: var(--fg-3); line-height: 1.5;
}
.media__cap > .mono:first-child, .media__cap b { flex: none; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: var(--track-mono); color: var(--accent-text); text-transform: uppercase; }

/* Timeline */
.timeline { position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before { content: ""; position: absolute; left: calc(180px + 20px); top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--line-3), var(--line) 80%, transparent); }
.timeline__item { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 41px; padding-bottom: var(--s-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(180px + 20px - 5px); top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-3);
  transition: box-shadow var(--t-med), background-color var(--t-med);
}
.timeline.is-in > .timeline__item::before, .timeline__item.is-in::before, .timeline__item:hover::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.15), 0 0 16px rgba(92, 225, 230, 0.6); }
.timeline.is-in > .timeline__item::before { transition-delay: calc(var(--d, 0s) + 0.3s); }
html:not(.js) .timeline__item::before { background: var(--cyan); }
.timeline__date { display: block; padding-top: 2px; text-align: right; font: 500 var(--fs-mono)/1.5 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text); }
.timeline__body h3, .timeline__title { font-size: var(--fs-h4); line-height: 1.3; color: var(--fg); font-weight: 500; }
.timeline__body p { margin-top: var(--s-2); color: var(--fg-2); }
@media (max-width: 699px) {
  .timeline::before { left: 5px; }
  .timeline__item { grid-template-columns: minmax(0, 1fr); padding-left: 32px; gap: 6px; }
  .timeline__item::before { left: 0; }
  .timeline__date { text-align: left; }
}

/* Tabs */
.tabs__list {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.02);
  max-width: 100%;
}
.tabs__tab {
  position: relative; z-index: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500; color: var(--fg-3); white-space: nowrap;
  transition: color var(--t-med);
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: #fff; }
.tabs__ink {
  position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px);
  width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 6px 20px -8px rgba(123, 126, 242, 0.8);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}
.tabs__list.is-wrapped .tabs__ink { display: none; }
.tabs__list.is-wrapped .tabs__tab[aria-selected="true"] { background: var(--accent); }
html:not(.js) .tabs__tab[aria-selected="true"] { background: var(--accent); }
.tabs__panel { padding-top: var(--s-6); }
.tabs__panel.is-active { animation: ox-tabin 0.5s var(--ease-out); }
@keyframes ox-tabin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabs--line .tabs__list { display: flex; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; padding: 0; gap: var(--s-5); }
.tabs--line .tabs__tab { padding: 0 0 14px; border-radius: 0; min-height: 0; }
.tabs--line .tabs__tab[aria-selected="true"] { color: var(--fg); }
.tabs--line .tabs__ink { top: auto; bottom: -1px; height: 2px; border-radius: 0; background: var(--grad-mark-h); box-shadow: none; }

/* Play / pause toggle for looping visuals: aria-pressed="true" means paused.
   <button class="play-toggle" type="button" aria-pressed="false" aria-label="Pause animation">
     <svg class="i-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6v12M15 6v12"/></svg><svg class="i-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z"/></svg></button> */
.play-toggle {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.play-toggle:hover { border-color: var(--accent-text); color: var(--fg); background: rgba(123, 126, 242, 0.1); }
.play-toggle svg { width: 14px; height: 14px; }
.play-toggle .i-pause path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.play-toggle .i-play path { fill: currentColor; }
.play-toggle .i-play, .play-toggle[aria-pressed="true"] .i-pause { display: none; }
.play-toggle[aria-pressed="true"] .i-play { display: block; }
html.no-js .play-toggle { display: none; }

/* Segmented control: <div class="segmented" role="group"><button type="button" aria-pressed="true">A</button>…</div>
   (or role="tablist" with aria-selected buttons) */
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--chip-bg, rgba(255, 255, 255, 0.02));
}
.segmented > button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  font: 500 0.8125rem/1 var(--font-sans); color: var(--fg-3); white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-med), box-shadow var(--t-med);
}
.segmented > button:hover { color: var(--fg); }
.segmented > button[aria-pressed="true"], .segmented > button[aria-selected="true"] {
  background: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px rgba(123, 126, 242, 0.85);
}

/* Tooltip: <span class="tip" tabindex="0">term<span class="tip__bubble" role="tooltip">text</span></span>
   or the short form <abbr data-tip="text">term</abbr> */
.tip { position: relative; display: inline-block; border-bottom: 1px dashed var(--line-3); cursor: help; }
.tip__bubble, [data-tip]::after {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: 260px;
  padding: 10px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2);
  background: var(--ink-4); color: var(--fg); box-shadow: var(--shadow-2);
  font-size: 0.8125rem; line-height: 1.45; font-weight: 400; text-align: left; text-transform: none; letter-spacing: 0;
  pointer-events: none; opacity: 0; transform: translate(-50%, 6px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.tip:hover .tip__bubble, .tip:focus-visible .tip__bubble, .tip:focus-within .tip__bubble,
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tip] { position: relative; cursor: help; text-decoration: none; border-bottom: 1px dashed var(--line-3); }
[data-tip]::after { content: attr(data-tip); }

/* ---------------------------------------------------------------- 14 Article system (paper) */
.article-hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 96px));
  padding-bottom: clamp(48px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
}
.article-hero__title { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem); line-height: 1.02; letter-spacing: var(--track-display); max-width: 18em; }
.article-hero .lead { margin-top: var(--s-5); max-width: 40em; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: var(--s-6);
  font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
/* separators live in the column gap; one that would start a wrapped line falls outside the left clip edge */
.article-meta { clip-path: inset(-40px -40px -40px -3px); }
.article-meta > * { position: relative; }
.article-meta > * + *::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 1px; background: var(--line-3); }
.article-hero + .section, .article-hero + .read-progress + .section { padding-top: clamp(48px, 5vw, 88px); }
.article-meta__author { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); }
.article-meta__author img { width: 28px; height: 28px; border-radius: 50%; }
.article-hero__figure { margin-top: clamp(32px, 4vw, 56px); }

.article {
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 112px); align-items: start;
}
.article--full { grid-template-columns: minmax(0, 1fr); }
.article__aside { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 56px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.article__aside::-webkit-scrollbar { display: none; }
@media (max-width: 999px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article__aside { position: static; max-height: none; }
}
.toc__title { margin: 0 0 var(--s-4); font: 500 var(--fs-mono)/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.toc ol, .toc ul { list-style: none; padding: 0; margin: 0; position: relative; border-left: 1px solid var(--line-2); }
.toc a {
  position: relative; display: block; padding: 7px 0 7px 18px;
  font-size: 0.875rem; line-height: 1.4; color: var(--fg-3); text-decoration: none;
  transition: color var(--t-fast);
}
.toc a::before {
  content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px;
  background: var(--grad-mark); transform: scaleY(0); transition: transform var(--t-med) var(--ease-out);
}
.toc a:hover { color: var(--fg); }
.toc a[aria-current="true"] { color: var(--fg); font-weight: 500; }
.toc a[aria-current="true"]::before { transform: scaleY(1); }
.toc__share { margin-top: var(--s-6); display: grid; gap: 10px; }
@media (max-width: 999px) {
  .toc { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink-2); }
}
.read-progress {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-header) + 1); width: 100%; height: 3px;
  pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0));
  background: var(--grad-mark-h);
  transition: opacity var(--t-med);
}
.read-progress.is-off { opacity: 0; }
body:has(.read-progress) .ox-header__progress { display: none; }

.prose { min-width: 0; color: var(--fg-2); font-size: 1.0938rem; line-height: 1.75; }
.prose > * { max-width: var(--max-text); }
.prose > .wide, .prose > figure, .prose > .table-wrap, .prose > .keyfigs, .prose > .callout, .prose > .embed { max-width: none; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.6em; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2 .prose__num, .prose .h-num { display: block; margin-bottom: 12px; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--accent-text); }
.prose h3 { margin-top: 2em; font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h4 { margin-top: 1.6em; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.7em; }
.prose > :first-child { margin-top: 0; }
.prose a:not([class]) { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.2em; }
.prose a:not([class]):hover { text-decoration-color: currentColor; }
.prose strong { color: var(--fg); }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 0; list-style: none; }
.prose ul:not([class]) > li, .prose ol:not([class]) > li { position: relative; padding-left: 30px; }
.prose ul:not([class]) > li + li, .prose ol:not([class]) > li + li { margin-top: 0.5em; }
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: 6px; top: 0.72em; width: 8px; height: 8px; background: var(--grad-mark); clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%); }
.prose ol:not([class]) { counter-reset: ox-ol; }
.prose ol:not([class]) > li { counter-increment: ox-ol; }
.prose ol:not([class]) > li::before { content: counter(ox-ol, decimal-leading-zero); position: absolute; left: 0; top: 0.3em; font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent-text); }
.prose blockquote {
  position: relative; padding: 4px 0 4px 28px; border-left: 2px solid transparent;
  border-image: var(--grad-mark) 1;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.4; letter-spacing: -0.012em; color: var(--fg);
}
.prose blockquote cite, .prose blockquote footer { display: block; margin-top: 14px; font: 500 var(--fs-mono)/1.4 var(--font-mono); font-style: normal; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); }
.prose figure { margin-top: 2em; margin-bottom: 2em; }
.prose figure img { border-radius: var(--r-3); }
.prose figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--fg-3); }
.prose code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.15em 0.4em; border-radius: var(--r-1); background: var(--ink-0); border: 1px solid var(--line); color: var(--fg); }
.prose pre { overflow-x: auto; padding: 20px 22px; border-radius: var(--r-3); background: #0e0e15; color: #e7e7f2; font: 0.875rem/1.6 var(--font-mono); }
.prose pre code { padding: 0; background: none; border: 0; color: inherit; }
.prose hr { margin: 3em 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--ink-2); -webkit-overflow-scrolling: touch; }
.table-wrap table, table.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.table-wrap th, .table-wrap td, table.table th, table.table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap thead th, table.table thead th { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); background: var(--ink-0); white-space: nowrap; }
.table-wrap tbody tr:last-child > :is(td, th) { border-bottom: 0; }
.table-wrap tbody tr:hover > :is(td, th) { background: rgba(123, 126, 242, 0.04); }
.table-wrap td.num, .table-wrap th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.callout {
  position: relative; padding: 22px 24px 22px 60px; border-radius: var(--r-3);
  border: 1px solid var(--line-2); background: var(--ink-2); color: var(--fg-2);
}
.callout::before {
  content: "i"; position: absolute; left: 20px; top: 22px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 600 12px/1 var(--font-mono); color: #fff; background: var(--accent);
}
.callout > * + * { margin-top: 0.6em; }
.callout__title { display: block; margin-bottom: 4px; font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text); }
.callout--key { border-color: transparent; background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--grad-mark) border-box; border: 1px solid transparent; }
.callout--key::before { content: ""; background: var(--grad-mark); clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%); border-radius: 0; width: 18px; height: 18px; top: 25px; left: 23px; }
.callout--warn { border-color: rgba(245, 184, 74, 0.45); background: rgba(245, 184, 74, 0.07); }
.callout--warn::before { content: "!"; background: var(--warn); color: #2a1b00; }
.callout--warn .callout__title { color: #b07510; }
@media (max-width: 599px) {
  .callout { padding: 18px 18px 20px; }
  .callout::before { left: 18px; top: 17px; }
  .callout--key::before { left: 20px; top: 20px; }
  .callout__title { display: flex; align-items: center; min-height: 24px; padding-left: 36px; margin-bottom: 8px; }
  .callout:not(:has(> .callout__title)) { padding-left: 52px; }
}
.theme-dark .callout--warn .callout__title, body.ox > main > .section:not(.section--paper) .callout--warn .callout__title { color: var(--warn); }
.keyfigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-3); }
.keyfig { padding: 22px 22px 20px; border-radius: var(--r-3); border: 1px solid var(--line-2); background: var(--ink-2); }
.keyfig__value { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.keyfig__value .unit { font-size: 0.5em; color: var(--accent-text); margin-left: 0.1em; }
.keyfig__label { display: block; margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--fg-2); }
.keyfig__src { display: block; margin-top: 8px; font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); }
.embed { position: relative; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-0); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pager__link {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 140px;
  padding: 24px 28px; border-radius: var(--r-3); border: 1px solid var(--line-2); background: var(--ink-2);
  text-decoration: none; transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.pager__link:hover { border-color: var(--accent-text); transform: translateY(-3px); }
.pager__dir { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text); }
.pager__dir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-med) var(--ease-out); }
.pager__title { font-size: 1.25rem; line-height: 1.3; color: var(--fg); font-weight: 500; letter-spacing: -0.012em; }
.pager__link--next { text-align: right; align-items: flex-end; }
.pager__link--prev:hover .pager__dir svg { transform: translateX(-4px); }
.pager__link--next:hover .pager__dir svg { transform: translateX(4px); }
@media (max-width: 699px) { .pager { grid-template-columns: minmax(0, 1fr); } }
.share { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- 15 Forms */
.form { position: relative; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.form__grid > .field--full, .form__grid > fieldset, .form__grid > .check, .form__grid > .file { grid-column: 1 / -1; }
@media (max-width: 639px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field { min-inline-size: 0; }
.field__label, .field > legend {
  padding: 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
.field > legend { margin-bottom: 10px; }
.field__label .req, .req { color: var(--accent-text); }
.field__hint { font-size: 0.8125rem; color: var(--fg-3); }
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--ink-2); color: var(--fg);
  font: 400 1rem/1.4 var(--font-sans);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-med);
  -webkit-appearance: none; appearance: none;
}
.field textarea, textarea.input { min-height: 150px; resize: vertical; line-height: 1.55; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-text); background: var(--ink-3);
  box-shadow: 0 0 0 4px rgba(123, 126, 242, 0.18);
}
.field select, select.input {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a1a3ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field select option { background: #15151f; color: #f4f4f8; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .input.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(242, 100, 123, 0.14); }
.field.is-valid input, .field.is-valid textarea { border-color: color-mix(in srgb, var(--accent-text) 50%, var(--line-2)); }
.field__error { min-height: 0; font-size: 0.8125rem; color: var(--bad); }
.field__error:empty { display: none; }
.section--paper .field__error, .theme-paper .field__error { color: #c8324d; }
.section--paper .field.is-invalid input, .theme-paper .field.is-invalid input, .section--paper .field.is-invalid textarea, .theme-paper .field.is-invalid textarea { border-color: #d43b57; }

.check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check__box {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 0.05em; border-radius: 6px;
  border: 1px solid var(--line-3); background: var(--ink-2);
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med);
}
.check__box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform var(--t-med) var(--ease-spring);
}
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(123, 126, 242, 0.3); }
.check input[type="radio"] + .check__box { border-radius: 50%; }
.check input[type="radio"] + .check__box::after { left: 6px; top: 6px; width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: scale(0); }
.check input[type="radio"]:checked + .check__box::after { transform: scale(1); }
.check a { color: var(--accent-text); }
.field.is-invalid .check__box, .check.is-invalid .check__box { border-color: var(--bad); }

.check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; display: inline-flex; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.check-chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--ink-2);
  font-size: 0.875rem; line-height: 1.2; color: var(--fg-2);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.check-chip span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.check-chip:hover span { border-color: var(--line-3); color: var(--fg); }
.check-chip input:checked + span { border-color: var(--accent-text); background: rgba(123, 126, 242, 0.14); color: var(--fg); }
.check-chip input:checked + span::before { background: var(--accent-text); box-shadow: 0 0 0 3px rgba(123, 126, 242, 0.25); }
.check-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.file { position: relative; }
.file input[type="file"], .file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file__label {
  display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 20px; cursor: pointer;
  border: 1px dashed var(--line-3); border-radius: var(--r-3); background: rgba(255, 255, 255, 0.015);
  color: var(--fg-2); font-size: 0.9375rem;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.file__label svg { width: 40px; height: 40px; padding: 10px; flex: none; border-radius: 50%; background: rgba(123, 126, 242, 0.14); color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file__name { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file:hover .file__label, .file.is-dragover .file__label, .file__input:focus-visible + .file__label, .file input:focus-visible + .file__label { border-color: var(--accent-text); background: rgba(123, 126, 242, 0.06); }
.file.has-file .file__label { border-style: solid; border-color: color-mix(in srgb, var(--accent-text) 60%, transparent); }
.file.has-file .file__name { color: var(--accent-text); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.form__note { font-size: 0.8125rem; color: var(--fg-3); max-width: 34em; }
.form-status {
  display: flex; align-items: flex-start; gap: 14px; margin-top: var(--s-5); padding: 18px 20px;
  border-radius: var(--r-3); border: 1px solid var(--line-2); background: var(--ink-2); color: var(--fg);
  animation: ox-tabin 0.5s var(--ease-out);
}
.form-status::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.form-status--ok { border-color: rgba(92, 225, 230, 0.4); background: linear-gradient(90deg, rgba(92, 225, 230, 0.08), transparent); }
.form-status--ok::before { background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308080d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.form-status--err { border-color: rgba(242, 100, 123, 0.45); background: linear-gradient(90deg, rgba(242, 100, 123, 0.08), transparent); }
.form-status--err::before { background: var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 14px no-repeat; }
.form-status a { color: var(--accent-text); }
.hp, .visually-hidden-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.range { width: 100%; accent-color: var(--accent); }

/* ---------------------------------------------------------------- 16 Header */
.ox-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  view-transition-name: ox-header;
  transition: transform 0.55s var(--ease-out);
}
.ox-header::before {
  content: ""; position: absolute; inset: 0 0 -48px; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 8, 0.62), rgba(5, 5, 8, 0));
  transition: opacity var(--t-med);
}
.ox-header.is-hidden { transform: translate3d(0, -115%, 0); }
.ox-header__bg {
  --fx: calc(max(var(--gutter), (100% - var(--max)) / 2) - 16px);
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent; border-radius: 0;
  transition: inset 0.55s var(--ease-out), border-radius 0.55s var(--ease-out), background-color var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.ox-header.is-scrolled::before, .ox-header.is-solid::before, .ox-header.has-open::before { opacity: 0; }
.ox-header.is-scrolled .ox-header__bg, .ox-header.is-solid .ox-header__bg, .ox-header.has-open .ox-header__bg {
  inset: calc((var(--header-h) - var(--header-h-float)) / 2) max(6px, var(--fx));
  border-radius: 16px;
  background: rgba(12, 12, 19, 0.84);
  border-color: var(--line-2);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ox-header.has-open .ox-header__bg { background: rgba(12, 12, 19, 0.92); }
.ox-header__progress {
  position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px;
  background: var(--grad-mark-h); transform-origin: left; transform: scaleX(var(--scroll, 0));
  opacity: 0; transition: opacity var(--t-med);
}
.ox-header.is-scrolled .ox-header__progress { opacity: 1; }
.ox-header__inner {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 36px);
}
.ox-header__brand { display: block; flex: none; margin-right: 4px; border-radius: var(--r-1); }
.ox-header__brand img { width: auto; height: 46px; aspect-ratio: 1000 / 300; }
.ox-nav { margin-right: auto; }
.ox-nav__list { display: flex; align-items: center; gap: 2px; }
.ox-nav__item { position: relative; }
.ox-nav__link, .ox-nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--fg-2); cursor: pointer;
  font: 500 0.9375rem/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.ox-nav__trigger > svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform var(--t-med) var(--ease-out); }
.ox-nav__link:hover, .ox-nav__trigger:hover, .ox-nav__item.is-open > .ox-nav__trigger { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.ox-nav__item.is-open > .ox-nav__trigger > svg { transform: rotate(180deg); }
.ox-nav__link::after, .ox-nav__trigger::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: 0; transform: scale(0); transition: opacity var(--t-med), transform var(--t-med) var(--ease-spring);
}
.ox-nav__trigger::after { margin-left: -10px; }
body[data-nav="services"] .ox-nav__item[data-nav-key="services"] > :first-child,
body[data-nav="solutions"] .ox-nav__item[data-nav-key="services"] > :first-child,
body[data-nav="industries"] .ox-nav__item[data-nav-key="industries"] > :first-child,
body[data-nav="projects"] .ox-nav__item[data-nav-key="projects"] > :first-child,
body[data-nav="insights"] .ox-nav__item[data-nav-key="insights"] > :first-child,
body[data-nav="company"] .ox-nav__item[data-nav-key="company"] > :first-child,
body[data-nav="sustainability"] .ox-nav__item[data-nav-key="company"] > :first-child { color: var(--fg); }
body[data-nav="services"] .ox-nav__item[data-nav-key="services"] > :first-child::after,
body[data-nav="solutions"] .ox-nav__item[data-nav-key="services"] > :first-child::after,
body[data-nav="industries"] .ox-nav__item[data-nav-key="industries"] > :first-child::after,
body[data-nav="projects"] .ox-nav__item[data-nav-key="projects"] > :first-child::after,
body[data-nav="insights"] .ox-nav__item[data-nav-key="insights"] > :first-child::after,
body[data-nav="company"] .ox-nav__item[data-nav-key="company"] > :first-child::after,
body[data-nav="sustainability"] .ox-nav__item[data-nav-key="company"] > :first-child::after { opacity: 1; transform: scale(1); }
.ox-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ox-header__portal {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 500; color: var(--fg-3); text-decoration: none; transition: color var(--t-fast), background-color var(--t-fast);
}
.ox-header__portal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ox-header__portal:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
body[data-nav="contact"] .ox-header__cta { --btn-bg: var(--accent-2); }

/* Workplace Technology pill: gradient outline, as on the current site */
.ox-wt-pill {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 500; line-height: 1.1; color: var(--fg); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-med);
}
.ox-wt-pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, #4fd1f2, #7b7ef2 45%, #a1a3ff 75%, #8a68e8);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background-position 0.8s var(--ease-out);
}
.ox-wt-pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, rgba(79, 209, 242, 0.16), rgba(123, 126, 242, 0.18) 50%, rgba(138, 104, 232, 0.18));
  opacity: 0; transition: opacity var(--t-med);
}
.ox-wt-pill:hover::before { background-position: 100% 0; }
.ox-wt-pill:hover::after { opacity: 1; }
.ox-wt-pill svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; transition: transform var(--t-med) var(--ease-out); }
.ox-wt-pill:hover svg { transform: translate(2px, -2px); }
.ox-wt-pill__l { display: inline-flex; gap: 0.3em; }

/* Burger */
.ox-burger {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer;
}
.ox-burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out), width 0.45s var(--ease-out);
}
.ox-burger span:nth-child(1) { top: 17px; }
.ox-burger span:nth-child(2) { top: 26px; right: 18px; }
.ox-burger:hover span:nth-child(2) { right: 12px; }
.ox-burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.ox-burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; right: 12px; transform: rotate(-45deg); }

/* Mega menu and dropdowns */
.ox-mega, .ox-drop {
  position: absolute; z-index: 2;
  visibility: hidden; opacity: 0; transform: translate3d(0, -8px, 0);
  transition: opacity 0.22s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.ox-nav__item.is-open > .ox-mega, .ox-nav__item.is-open > .ox-drop {
  visibility: visible; opacity: 1; transform: none; transition-delay: 0s;
}
html.no-js .ox-nav__item:hover > .ox-mega, html.no-js .ox-nav__item:focus-within > .ox-mega,
html.no-js .ox-nav__item:hover > .ox-drop, html.no-js .ox-nav__item:focus-within > .ox-drop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ox-mega::before, .ox-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.ox-panel {
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: rgba(12, 12, 19, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ox-mega__panel { position: relative; overflow: hidden; }
.ox-mega__panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--grad-line); opacity: 0.8;
}
/* the mega menu hangs from the header bar, aligned to the content edges */
.ox-nav__item--mega { position: static; }
.ox-mega { left: var(--gutter); right: var(--gutter); top: calc(100% + 4px); }
.ox-header.is-scrolled .ox-mega { top: calc(100% - (var(--header-h) - var(--header-h-float)) / 2 + 10px); }
.ox-mega__grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.98fr);
  gap: 0;
}
.ox-mega__col { padding: 26px 24px 26px; min-width: 0; }
.ox-mega__col + .ox-mega__col { border-left: 1px solid var(--line); }
.ox-mega__col--services { padding-right: 12px; }
.ox-mega__col--services + .ox-mega__col--services { border-left: 0; padding-left: 12px; padding-right: 24px; }
.ox-mega__col--feature { background: rgba(255, 255, 255, 0.015); display: flex; flex-direction: column; gap: 12px; }
.ox-mega__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0 10px;
  font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
}
.ox-mega__head a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; }
.ox-mega__head a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-med) var(--ease-out); }
.ox-mega__head a:hover { color: var(--fg); }
.ox-mega__head a:hover svg { transform: translateX(3px); }
.ox-mega__list { display: grid; gap: 1px; }
.ox-mega__link {
  position: relative; display: block; padding: 9px 30px 9px 10px; border-radius: var(--r-2); text-decoration: none;
  transition: background-color var(--t-fast);
}
.ox-mega__link strong, .ox-mega__t { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--fg); letter-spacing: -0.005em; }
.ox-mega__link span, .ox-mega__d { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-3); }
.ox-mega__link::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--accent-text); border-right: 1.5px solid var(--accent-text); transform: rotate(45deg) translate(-4px, 4px);
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out);
}
.ox-mega__link:hover, .ox-mega__link:focus-visible { background: rgba(255, 255, 255, 0.05); }
.ox-mega__link:hover::after, .ox-mega__link:focus-visible::after { opacity: 1; transform: rotate(45deg); }
.ox-mega__stage { margin-bottom: 14px; }
.ox-mega__stage:last-child { margin-bottom: 0; }
.ox-mega__stage-label {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; margin: 0 0 4px;
  font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
}
.ox-mega__stage-label::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--c, var(--accent)); box-shadow: 0 0 8px var(--c, var(--accent)); }
.ox-mega__s {
  position: relative; display: block; padding: 6px 28px 6px 10px; border-radius: var(--r-1);
  font-size: 0.9063rem; line-height: 1.35; color: var(--fg-2); text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.ox-mega__s::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-top: 1.5px solid var(--accent-text); border-right: 1.5px solid var(--accent-text); transform: rotate(45deg) translate(-4px, 4px);
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out);
}
.ox-mega__s:hover, .ox-mega__s:focus-visible { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.ox-mega__s:hover::after, .ox-mega__s:focus-visible::after { opacity: 1; transform: rotate(45deg); }
.ox-mega__s--green { color: var(--fg-2); }
.ox-mega__s--green::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.ox-mega__feature {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: var(--r-3); border: 1px solid var(--line-2); text-decoration: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(140, 82, 255, 0.22), transparent 60%), var(--ink-2);
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.ox-mega__feature:hover { border-color: rgba(161, 163, 255, 0.5); transform: translateY(-2px); }
.ox-mega__feature .ox-mega__t { font-size: 1rem; }
.ox-mega__feature .ox-mega__d { font-size: 0.8125rem; }
.ox-mega__feature .ox-mega__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-text); }
.ox-mega__feature .ox-mega__go svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-med) var(--ease-out); }
.ox-mega__feature:hover .ox-mega__go svg { transform: translateX(3px); }
.ox-ring { width: 88px; height: 88px; margin-bottom: 6px; }
.ox-ring__seg { fill: none; stroke-width: 5; stroke-linecap: butt; }
.ox-ring__track { fill: none; stroke: var(--line); stroke-width: 1; }
.ox-ring__spin { transform-origin: 50px 50px; animation: ox-spin 14s linear infinite; }
.ox-ring__dot { fill: #e9fbff; filter: drop-shadow(0 0 4px var(--cyan)); }
.ox-ring__orbit { transform-origin: 50px 50px; animation: ox-spin 3.6s linear infinite; }
.ox-mega__feature--wt { background: radial-gradient(120% 100% at 0% 100%, rgba(79, 209, 242, 0.14), transparent 60%), var(--ink-2); border-color: transparent; }
.ox-mega__feature--wt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, #4fd1f2, #7b7ef2 45%, #a1a3ff 75%, #8a68e8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.7; transition: opacity var(--t-med);
}
.ox-mega__feature--wt:hover::before { opacity: 1; }
.ox-mega__feature--wt .ox-mega__go { color: var(--cyan); }
/* item stagger when a panel opens */
.ox-mega .ox-si, .ox-drop .ox-si { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-out); }
.ox-nav__item.is-open .ox-si { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 16ms + 40ms); }
html.no-js .ox-si { opacity: 1; transform: none; }
/* small dropdowns */
.ox-drop { left: 50%; top: calc(100% + 14px); translate: -50% 0; width: 330px; }
.ox-drop__panel { padding: 8px; }
.ox-drop__link {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 34px 12px 12px; border-radius: var(--r-2); text-decoration: none;
  transition: background-color var(--t-fast);
}
.ox-drop__ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-2); border: 1px solid var(--line-2); color: var(--accent-text); background: rgba(255, 255, 255, 0.02); transition: border-color var(--t-fast), color var(--t-fast); }
.ox-drop__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ox-drop__link:hover, .ox-drop__link:focus-visible { background: rgba(255, 255, 255, 0.05); }
.ox-drop__link:hover .ox-drop__ico { border-color: rgba(161, 163, 255, 0.5); color: var(--fg); }
.ox-drop__link::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--accent-text); border-right: 1.5px solid var(--accent-text); transform: rotate(45deg) translate(-4px, 4px);
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out);
}
.ox-drop__link:hover::after, .ox-drop__link:focus-visible::after { opacity: 1; transform: rotate(45deg); }
.ox-drop__link .ox-mega__t { font-size: 0.9375rem; }

/* Mobile menu */
.ox-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding-top: var(--header-h);
  background: var(--ink-1);
  visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-in-out), opacity 0.3s var(--ease-out), visibility 0s linear 0.6s;
}
.ox-menu.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.ox-menu__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ox-menu__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ox-menu__inner { padding-block: 12px 40px; }
.ox-menu__list > li {
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 0.4s var(--ease-out), transform 0.7s var(--ease-out);
}
.ox-menu.is-open .ox-menu__list > li, .ox-menu.is-open .ox-menu__foot > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 160ms); }
.ox-menu .ox-menu__big, .ox-menu .acc > summary.ox-menu__big {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 18px 0; border: 0; background: none; cursor: pointer; list-style: none;
  font: 500 clamp(1.625rem, 6.4vw, 2.25rem)/1.1 var(--font-sans); letter-spacing: -0.025em; color: var(--fg); text-decoration: none; text-align: left;
}
.ox-menu__big::-webkit-details-marker { display: none; }
.ox-menu__big::marker { content: ""; }
.ox-menu .ox-menu__big .acc__icon { width: 38px; height: 38px; }
.ox-menu .acc > summary.ox-menu__big:hover { color: var(--fg); }
.ox-menu .acc[open] > summary.ox-menu__big { color: var(--accent-text); }
.ox-menu__big > small { font: 500 11px/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--fg-4); }
.ox-menu__sub { padding: 0 0 20px; display: grid; gap: 18px; }
.ox-menu__sub-head { margin: 0 0 6px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.ox-menu__sub-head::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--c, var(--accent)); }
.ox-menu__sub a { display: block; padding: 7px 0; font-size: 1.0625rem; color: var(--fg-2); text-decoration: none; }
.ox-menu__sub a:hover, .ox-menu__sub a:focus-visible { color: var(--fg); }
.ox-menu__sub .ox-menu__all { color: var(--accent-text); font-size: 0.9375rem; }
.ox-menu__foot { display: grid; gap: 20px; margin-top: 28px; }
.ox-menu__foot > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.4s var(--ease-out), transform 0.7s var(--ease-out); }
.ox-menu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ox-menu__actions .ox-wt-pill { height: 50px; padding: 0 20px; font-size: 0.9375rem; }
.ox-menu__contact { display: grid; gap: 6px; font-size: 0.9375rem; color: var(--fg-3); }
.ox-menu__contact a { color: var(--fg-2); text-decoration: none; }
.ox-menu__contact a:hover { color: var(--fg); }
html.ox-menu-open .ox-header { z-index: calc(var(--z-menu) + 1); transform: none; }
html.ox-menu-open .ox-header::before { opacity: 0; }
html.ox-lock, html.ox-lock body { overflow: hidden; }

/* 1100-1279: tighter nav, the pill stays on one line; under 1220 Portal becomes a round icon button */
@media (max-width: 1279px) {
  .ox-nav__link, .ox-nav__trigger { padding: 0 10px; font-size: 0.9063rem; }
  .ox-header__inner { gap: 14px; }
  .ox-header__actions { gap: 8px; }
  .ox-header .ox-wt-pill { height: 40px; padding: 0 14px; gap: 7px; font-size: 0.8125rem; }
  .ox-header__portal { padding: 0 10px; font-size: 0.8125rem; }
  .ox-mega__col { padding: 22px 16px; }
  .ox-mega__col--services + .ox-mega__col--services { padding-right: 16px; }
}
@media (max-width: 1219px) {
  .ox-header__brand img { height: 42px; }
  .ox-nav__link, .ox-nav__trigger { padding: 0 9px; }
  .ox-header__portal { width: 40px; padding: 0; justify-content: center; border: 1px solid var(--line-2); color: var(--fg-2); }
  .ox-header__portal:hover { border-color: var(--line-3); }
  .ox-header__portal span { display: none; }
}
@media (max-width: 1099px) {
  .ox-nav, .ox-header .ox-wt-pill, .ox-header__portal { display: none; }
  .ox-burger { display: block; }
  .ox-header__actions { margin-left: auto; }
}
@media (min-width: 1100px) { .ox-menu { display: none; } }
@media (max-width: 399px) {
  .ox-header__brand img { height: 40px; }
  .ox-header__cta { display: none; }
}

/* ---------------------------------------------------------------- 17 Footer */
.ox-footer { position: relative; isolation: isolate; overflow: clip; background: var(--ink-0); color: var(--fg-2); }
body.no-footer-cta .ox-footer__cta { display: none; }
.ox-footer__cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding-block: clamp(104px, 12vw, 208px) clamp(96px, 10vw, 168px);
  border-top: 1px solid var(--line);
}
.ox-footer__floor {
  position: absolute; left: -40%; right: -40%; bottom: -2px; height: 62%; z-index: -1; pointer-events: none;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(161, 163, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161, 163, 255, 0.32) 1px, transparent 1px);
  background-size: 64px 64px; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 85%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 85%);
  animation: ox-floor 6s linear infinite;
}
@keyframes ox-floor { to { background-position: 50% 64px; } }
.ox-footer__horizon {
  position: absolute; left: 50%; bottom: 30%; z-index: -1; width: min(1200px, 120%); height: 340px; translate: -50% 50%;
  background: radial-gradient(closest-side, rgba(92, 225, 230, 0.26), rgba(140, 82, 255, 0.18) 45%, transparent 100%);
  filter: blur(8px); pointer-events: none;
}
.ox-footer__cta::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--grad-line); opacity: 0.5; }
.ox-footer__title {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 6.5rem); line-height: 0.98; letter-spacing: var(--track-display);
  font-weight: 500; color: var(--fg); margin: 0 auto; max-width: 14em;
}
.ox-footer__lead { margin: var(--s-5) auto 0; max-width: 32em; font-size: var(--fs-lead); color: var(--fg-2); }
.ox-footer__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: var(--s-7); }
.ox-footer__mail {
  font: 500 1.0625rem/1 var(--font-sans); color: var(--fg); text-decoration: none; letter-spacing: -0.005em;
  background-image: var(--grad-mark-h); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
  padding-bottom: 6px;
  transition: background-size var(--t-med) var(--ease-out);
}
.ox-footer__mail:hover { background-size: 0 1px; background-position: 100% 100%; }
.ox-footer__main { padding-block: clamp(64px, 7vw, 112px) clamp(40px, 4vw, 64px); }
.ox-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.ox-footer__brand img { width: 168px; height: auto; aspect-ratio: 1000 / 300; }   /* the lockup's own ratio, as in the header: the 504 px file rounds it */
.ox-footer__tag { margin-top: var(--s-5); max-width: 22em; font-size: var(--fs-small); color: var(--fg-3); }
.ox-footer__brand .status-pill { margin-top: var(--s-5); }
.ox-footer__h { margin: 0 0 18px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-4); }
.ox-footer__links { display: grid; gap: 11px; list-style: none; padding: 0; margin: 0; }
.ox-footer__links a, .ox-footer__addr a {
  justify-self: start; color: var(--fg-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.4;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 1px;
  transition: color var(--t-fast), background-size var(--t-med) var(--ease-out);
}
.ox-footer__links a:hover, .ox-footer__addr a:hover { color: var(--fg); background-size: 100% 1px; }
.ox-footer__links .ext::after, .ox-footer__addr .ext::after { content: " \2197"; font-family: var(--font-mono); font-size: 0.8em; color: var(--fg-4); }
.ox-footer__addr { font-style: normal; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-3); display: grid; gap: 14px; }
@media (max-width: 1099px) { .ox-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ox-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 639px) { .ox-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ox-footer__col--contact { grid-column: 1 / -1; } }
/* Optronix sites: the same three buttons in the footer of every Optronix site (main, Workplace
   Technology, Energy Brokerage), with the one you are on marked. The sub-sites carry a standalone
   copy of this footer (workplacetech/ and energy/ css/ox-footer.css), so change both together. */
.ox-footer__sites {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); align-items: center;
  margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(28px, 2.6vw, 40px); border-top: 1px solid var(--line);
}
.ox-footer__sites .ox-footer__h { margin: 0; }
.ox-sites { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.ox-site {
  --h: 22px; --fill: rgba(255, 255, 255, 0.02); --glow: transparent; --glow-2: transparent; --edge: rgba(255, 255, 255, 0.4);
  --chip-bg: #fff; --chip-fg: #050508; --chip-edge: transparent; --dot: #fff; --dot-ring: var(--dot);
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 68px; padding: 0 20px 0 22px; border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--fill); color: var(--fg); text-decoration: none;
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.ox-site::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(150px 60px at 16% 50%, var(--glow), transparent 70%),
    radial-gradient(130px 52px at 100% 50%, var(--glow-2), transparent 70%);
  opacity: 0.55; transition: opacity var(--t-med);
}
/* each button in its own site's colour: the main site black, Workplace white, Energy green */
.ox-site--dc {
  --fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 58%), #000;
  --edge: rgba(255, 255, 255, 0.36); --chip-bg: #000; --chip-fg: #fff; --chip-edge: rgba(255, 255, 255, 0.4);
  --dot: #000; --dot-ring: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.17);
}
.ox-site--wt { --glow: rgba(255, 255, 255, 0.26); --glow-2: rgba(255, 255, 255, 0.09); --edge: rgba(255, 255, 255, 0.62); }
.ox-site--en {
  --glow: rgba(126, 217, 87, 0.42); --glow-2: rgba(34, 195, 207, 0.16); --edge: rgba(126, 217, 87, 0.62);
  --chip-bg: #7ed957; --chip-fg: #08230f; --dot: #9cf77a;
}
a.ox-site:hover { border-color: var(--edge); transform: translateY(-2px); }
a.ox-site:hover::before { opacity: 1; }
.ox-site__lockup { display: inline-flex; align-items: center; gap: calc(var(--h) * 0.45); min-width: 0; }
.ox-site__lockup img { flex: none; width: calc(var(--h) * 4.8276); height: var(--h); max-width: none; }
.ox-site__dv { flex: none; width: 1px; height: calc(var(--h) * 1.05); background: rgba(255, 255, 255, 0.3); }
.ox-site__tx { font: 500 calc(var(--h) * 0.5)/1.06 var(--font-sans); color: #fff; margin-top: calc(var(--h) * -0.14); white-space: nowrap; }
.ox-site__tx span { display: block; }
/* a one-word label (Energy) sits a little larger, centred on the divider */
.ox-site__tx:has(> span:only-child) { font-size: calc(var(--h) * 0.6); margin-top: 0; }
.ox-site__ar { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med); }
a.ox-site:hover .ox-site__ar { transform: translate(2px, -2px); opacity: 1; }
.ox-site.is-here { border-color: var(--edge); }
.ox-site.is-here::before { opacity: 0.9; }
.ox-site__tag {
  position: absolute; left: 14px; top: 0; translate: 0 -50%; padding: 2px 7px; border-radius: var(--r-1);
  background: var(--chip-bg); color: var(--chip-fg); box-shadow: 0 0 0 1px var(--chip-edge);
  font: 500 9.5px/1.4 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; white-space: nowrap;
}
.ox-site__dot { position: relative; flex: none; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px var(--chip-edge); }
.ox-site__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--dot-ring); animation: ox-ping 2.4s var(--ease-out) infinite; }
@media (max-width: 1279px) { .ox-footer__sites { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ox-sites { grid-column: auto; } }
@media (max-width: 879px) { .ox-sites { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.ox-footer__mark {
  position: relative; margin-inline: auto; max-width: calc(var(--max) + 2 * var(--gutter)); padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.15) 100%);
  user-select: none;
}
.ox-footer__mark-wrap { position: relative; }
.ox-footer__mark img { width: 100%; height: auto; pointer-events: none; }
.ox-footer__mark-base { opacity: 0.075; }
.ox-footer__mark-lit {
  position: absolute; inset: 0; opacity: 0;
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  transition: opacity 0.6s var(--ease-out);
}
.ox-footer__mark-wrap:hover .ox-footer__mark-lit { opacity: 0.85; }
.ox-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--line); margin-top: clamp(-40px, -2vw, -12px);
  position: relative;
}
.ox-footer__legal { flex: 1 1 420px; font-size: 0.8125rem; line-height: 1.6; color: var(--fg-4); max-width: 62em; }
.ox-footer__legal a { color: var(--fg-3); }
.ox-footer__legal a:hover { color: var(--fg); }
.ox-totop {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg-3);
  transition: color var(--t-fast);
}
.ox-totop__ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: border-color var(--t-med), background-color var(--t-med); }
.ox-totop__ring svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-med) var(--ease-out); }
.ox-totop:hover { color: var(--fg); }
.ox-totop:hover .ox-totop__ring { border-color: var(--accent-text); background: rgba(123, 126, 242, 0.12); }
.ox-totop:hover .ox-totop__ring svg { transform: translateY(-3px); }

/* ---------------------------------------------------------------- 18 Motion states */
/* Hidden-before-reveal only applies under html.js. ox.js adds .is-in once, then .is-done
   when the entrance has finished (so an element's own transitions take over again). */
html.js [data-reveal]:not(.is-done) {
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), clip-path 1.2s var(--ease-out), filter 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }
html.js [data-reveal="fade"]:not(.is-in) { transform: none; }
html.js [data-reveal="left"]:not(.is-in) { transform: translate3d(-40px, 0, 0); }
html.js [data-reveal="right"]:not(.is-in) { transform: translate3d(40px, 0, 0); }
html.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.94); }
html.js [data-reveal="blur"]:not(.is-in) { transform: translate3d(0, 12px, 0); filter: blur(10px); }
html.js [data-reveal="mask"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
html.js [data-reveal="mask"]:not(.is-done) > img, html.js [data-reveal="mask"]:not(.is-done) > picture img, html.js [data-reveal="mask"]:not(.is-done) > video {
  transition: transform 1.6s var(--ease-out); transition-delay: var(--d, 0s);
}
html.js [data-reveal="mask"]:not(.is-in) > img, html.js [data-reveal="mask"]:not(.is-in) > picture img, html.js [data-reveal="mask"]:not(.is-in) > video { transform: scale(1.18); }
html.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

html.js [data-stagger]:not(.is-done) > * {
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js [data-stagger]:not(.is-in) > * { opacity: 0; transform: translate3d(0, 26px, 0); }

/* split text: ox.js splits with SplitText once fonts are ready; without it, a plain rise */
html.js [data-split]:not(.is-split):not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.js [data-split]:not(.is-split) { transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
/* SplitText suffixes every word of the class, so the masks are .ox-mask-line-mask etc. Room for
   descenders while the line rises; once it has landed (.is-split-done) the clip comes off. */
.ox-mask-line-mask, .ox-mask-word-mask, .ox-mask-char-mask { padding-bottom: 0.16em; margin-bottom: -0.16em; }
[data-split].is-split-done .ox-mask-line-mask, [data-split].is-split-done .ox-mask-word-mask, [data-split].is-split-done .ox-mask-char-mask { overflow: visible !important; }
.ox-line, .ox-word, .ox-char { will-change: transform; }
[data-split] .ox-word { white-space: nowrap; }

/* Once a split line has landed it no longer needs its own compositor layer. Long pages carry
   dozens of split headings, and every extra layer is work on each frame that scrolls or animates. */
[data-split].is-split-done .ox-line, [data-split].is-split-done .ox-word, [data-split].is-split-done .ox-char { will-change: auto; }

/* Off-screen pause: ox.js marks sections that are out of view with .ox-off and tags the
   elements inside them that run looping animations with [data-ox-loop]. Those pause, and pick up
   where they left off when the section comes back, so nothing looks different; the closed mobile
   menu and closed desktop menus pause the same way. Without this Chrome keeps repainting every
   looping animation on the page, every frame. */
.ox-off[data-ox-loop], .ox-off[data-ox-loop]::before, .ox-off[data-ox-loop]::after,
.ox-off [data-ox-loop], .ox-off [data-ox-loop]::before, .ox-off [data-ox-loop]::after,
.ox-menu:not(.is-open) *, .ox-menu:not(.is-open) *::before, .ox-menu:not(.is-open) *::after,
html.js .ox-nav__item:not(.is-open) > .ox-mega *, html.js .ox-nav__item:not(.is-open) > .ox-drop * { animation-play-state: paused !important; }

/* draw: strokes are hidden until ox.js has set them up */
html.js [data-draw]:not(.ox-draw-ready) { visibility: hidden; }

/* failsafe: if ox.js never initialises, show everything after 4s */
html.ox-failsafe:not(.ox-ready) [data-reveal], html.ox-failsafe:not(.ox-ready) [data-split],
html.ox-failsafe:not(.ox-ready) [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
html.ox-failsafe:not(.ox-ready) [data-reveal="mask"] > img, html.ox-failsafe:not(.ox-ready) [data-reveal="mask"] > picture img { transform: none !important; }
html.ox-failsafe:not(.ox-ready) [data-draw] { visibility: visible !important; }

/* ---------------------------------------------------------------- 19 Cursor glow */
.ox-cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none;
  width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 82, 255, 0.11) 0%, rgba(111, 168, 240, 0.045) 32%, transparent 62%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  will-change: transform;
}
.ox-cursor.is-on { opacity: 1; }
.ox-cursor.is-hot { opacity: 1; }
.ox-cursor.is-paper { opacity: 0.45; }
.ox-cursor.is-out { opacity: 0; }
.ox-cursor__dot {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: rgba(233, 251, 255, 0.0);
}

/* ---------------------------------------------------------------- 20 Page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ox-vt-out 280ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: ox-vt-in 420ms var(--ease-out) 30ms both; }
::view-transition-old(ox-header) { display: none; }
::view-transition-new(ox-header) { animation: none; }
::view-transition-group(ox-header) { animation: none; }
@keyframes ox-vt-out { to { opacity: 0; transform: scale(0.985) translateY(-10px); } }
@keyframes ox-vt-in {
  from { opacity: 0; transform: translateY(26px); clip-path: inset(8% 0 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- 21 Workplace hand-over */
/* Same geometry and lockup as the cover on workplacetech/index.html, so the two sites
   hand over on an identical frame (ox.js builds it on click). */
.wt-cover { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: all; }
.wt-cover > i { position: absolute; left: 50%; top: 50%; display: block; transform: translate(-50%, -50%) rotate(45deg); }
.wt-cover > i:nth-of-type(1) { background: #7b7ef2; }
.wt-cover > i:nth-of-type(2) { background: #5a5dc7; }
.wt-cover > i:nth-of-type(3) { background: #f2f3f9; }
.wt-cover .wt-mark { --h: clamp(34px, 4.6vw, 56px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: calc(var(--h) * .5); }
.wt-cover .wt-mark img { display: block; height: var(--h); width: calc(var(--h) * 4.8195); max-width: none; }
.wt-cover .wt-mark .dv { width: 1px; height: calc(var(--h) * 1.05); background: rgba(13, 15, 34, .24); }
.wt-cover .wt-mark .tx { font-family: 'Google Sans', -apple-system, sans-serif; font-size: calc(var(--h) * .43); line-height: 1.08; font-weight: 500; color: #0d0f22; letter-spacing: -.005em; margin-top: calc(var(--h) * -.14); text-align: left; }
.wt-cover .wt-mark .tx span { display: block; white-space: nowrap; }

/* Cookie banner (js/cookie-banner.js), restyled for v4 pages only */
body.ox #cookie-banner {
  right: 20px; bottom: 20px; width: 400px; max-width: calc(100vw - 40px);
  padding: 22px 22px 20px;
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: rgba(14, 14, 21, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--font-sans);
  animation: ox-cookie-in 0.7s var(--ease-out) both;
  overflow: hidden;
}
body.ox #cookie-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--grad-line); }
body.ox #cookie-banner .cookie-header {
  margin: 0 0 8px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--fg);
  display: flex; align-items: center; gap: 10px;
}
body.ox #cookie-banner .cookie-header::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--grad-mark); clip-path: polygon(32% 0, 100% 0, 68% 100%, 0 100%); }
body.ox #cookie-banner .cookie-text { margin: 0 0 18px; font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
body.ox #cookie-banner .cookie-buttons { gap: 8px; }
body.ox #cookie-banner .btn-cookie {
  min-height: 42px; padding: 0 16px; border-radius: var(--r-pill);
  font: 500 0.875rem/1 var(--font-sans); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med);
}
body.ox #cookie-banner .btn-essential { background: transparent; color: var(--fg); border: 1px solid var(--line-3); }
body.ox #cookie-banner .btn-essential:hover { border-color: var(--accent-text); background: rgba(123, 126, 242, 0.1); }
body.ox #cookie-banner .btn-accept { background: var(--accent); border: 1px solid var(--accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(123, 126, 242, 0.8); }
body.ox #cookie-banner .btn-accept:hover { background: var(--accent-2); border-color: var(--accent-2); }
@keyframes ox-cookie-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  body.ox #cookie-banner { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; border-radius: var(--r-3); padding: 20px 18px 16px; }
  body.ox #cookie-banner .cookie-buttons { flex-direction: row; }
  body.ox #cookie-banner .btn-cookie { padding: 0 12px; }
}

/* ---------------------------------------------------------------- Reduced motion, print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  html.js [data-reveal], html.js [data-stagger] > *, html.js [data-split] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; }
  html.js [data-reveal="mask"] > img, html.js [data-reveal="mask"] > picture img { transform: none !important; }
  html.js [data-draw] { visibility: visible !important; }
  .ox-marquee__rail { animation: none !important; transform: none !important; }
  [data-marquee] .ox-marquee__rail { flex-wrap: wrap; width: auto; }
  .glow-orb, .ox-footer__floor, .ox-ring__spin, .ox-ring__orbit, .badge--new, .lightpath__pulse, .ox-site__dot::after { animation: none !important; }
  .lightpath__pulse { stroke-dashoffset: 60; }
  .card--link:hover, .pager__link:hover, .ox-mega__feature:hover, a.ox-site:hover { transform: none; }
  .ox-cursor { display: none; }
  .ox-menu { transition: opacity 0.2s, visibility 0s linear 0.2s; clip-path: none; }
}
@media print {
  .ox-header, .ox-menu, .ox-cursor, .ox-footer__cta, .ox-footer__mark, .read-progress, #cookie-banner { display: none !important; }
  body.ox { background: #fff; color: #000; }
  html.js [data-reveal], html.js [data-stagger] > *, html.js [data-split] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}