/* ════════════════════════════════════════════════════════════════════════════
   services.html — built on the home page's composition: a one-screen hero with the voxel cluster,
   then one full-screen section per discipline (copy on one side, the cluster on the other).
   Sizes follow the home page's design scale (--px) with readable floors.
   ════════════════════════════════════════════════════════════════════════════ */

/* the cube layer (assets/services-3d.js + cube-sphere.js): fixed behind the content, as on the home page */
#cubes { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
#cubes.ready { opacity: 1; }
#cubes.ready.gone { opacity: 0; }
#cubes canvas { display: block; }
/* Data & AI scene: axes + callout labels, positioned every frame from projected 3D anchors (from particle-sphere) */
#cubes .latent-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#cubes .latent-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#cubes .lbl { position: absolute; top: 0; left: 0; will-change: transform, opacity; font-family: var(--font-display); }
#cubes .lbl .t, #cubes .lbl .s { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; }
#cubes .lbl .t { bottom: calc(7px * var(--s)); font-weight: 500; font-size: calc(33px * var(--s)); line-height: 1; color: var(--c-dark); }
:root[data-theme="light"] #cubes .lbl .t { color: var(--c-light); }
#cubes .lbl .s[hidden] { display: none; }
#cubes .lbl .s { top: calc(12px * var(--s)); font-style: italic; font-weight: 500; font-size: calc(27px * var(--s)); line-height: 1; color: #eceef2; }
#cubes .axis-lbl { position: absolute; top: 0; left: 0; font-size: calc(40px * var(--s)); line-height: 1; color: #f4f5f8; font-family: var(--font-display); }
#cubes .axis-lbl sub { font-size: .7em; vertical-align: baseline; margin-left: .04em; }
:root[data-theme="light"] #cubes .lbl .s, :root[data-theme="light"] #cubes .axis-lbl { color: #2a2f3a; }
.stage-anchor { pointer-events: none; }
.industry-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-subtle); }
.industry-lines li { display: grid; grid-template-columns: minmax(180px, .8fr) 1.2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--hair-subtle); }
.industry-lines a { color: var(--text); font-weight: 500; }
.industry-lines span { color: var(--dim); }
@media (max-width: 700px) {
  .industry-lines li { grid-template-columns: 1fr; gap: 6px; }
}
.page-top { position: relative; z-index: 5; background: transparent; }
main.svc-page { position: relative; z-index: 2; }

/* ── hero: exactly the home hero's grid ── */
.svc-hero { position: relative; min-height: calc(100svh - max(48px, calc(78 * var(--px))) - max(20px, calc(60 * var(--px))));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: calc(80 * var(--px));
  padding: 0 var(--gutter) max(40px, calc(80 * var(--px))); }
.svc-hero .copy { position: relative; z-index: 3; grid-row: 1; grid-column: 2; }   /* text + buttons on the right */
.svc-hero h1 { margin-top: max(14px, calc(30 * var(--px))); font: 500 max(40px, calc(96 * var(--px))) / 1.08 var(--font-display); letter-spacing: -0.025em; }
.svc-hero h1 .hl { color: var(--accent); }
.svc-hero .lede { margin-top: max(18px, calc(40 * var(--px))); max-width: 44ch; font-size: max(15px, calc(25 * var(--px))); line-height: 1.45; color: var(--dim); }
.svc-hero .hero-ctas { margin-top: max(26px, calc(56 * var(--px))); }
.svc-hero .stage-anchor { grid-row: 1; grid-column: 1; height: min(72svh, calc(900 * var(--px))); }   /* the cluster on the left */
.svc-rating { position: absolute; z-index: 3; left: var(--gutter); top: max(20px, calc(40 * var(--px))); text-align: center; }   /* [23] top-left */
.svc-rating .num { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--px)); font: 300 max(36px, calc(76 * var(--px))) / 1 var(--font-display); letter-spacing: -0.02em; }
.svc-rating .br { color: var(--accent); display: inline-block; transform: scaleY(1.3) translateY(-.04em); }

/* ── a discipline: one screen, copy + the cluster's anchor (alternating sides) ── */
.disc { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; column-gap: calc(80 * var(--px)); padding: max(72px, calc(140 * var(--px))) var(--gutter); }
.disc .copy { position: relative; z-index: 3; grid-row: 1; grid-column: 1; }
.disc .stage-anchor { grid-row: 1; grid-column: 2; height: min(80svh, calc(1000 * var(--px))); }
.disc.flip .copy { grid-column: 2; }
.disc.flip .stage-anchor { grid-column: 1; }
.disc h2 { margin-top: max(14px, calc(30 * var(--px))); font: 500 max(32px, calc(76 * var(--px))) / 1.1 var(--font-display); letter-spacing: -0.02em; }
.disc .body { margin-top: max(16px, calc(34 * var(--px))); max-width: 46ch; font-size: max(15px, calc(25 * var(--px))); line-height: 1.45; color: var(--dim); }
.svc-list { margin-top: max(26px, calc(50 * var(--px))); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(40 * var(--px)); counter-reset: s; }
.svc-list li { display: block; position: relative;
  padding: max(13px, calc(20 * var(--px))) 0; border-top: 1px solid var(--hair); }
.svc-list li a { display: block; padding-left: max(32px, calc(48 * var(--px))); color: inherit; text-decoration: none; }
.svc-list li::before { position: absolute; left: 0; top: max(16px, calc(23 * var(--px))); grid-row: auto; }
.svc-list li a:hover b, .svc-list li a:focus-visible b { color: var(--accent); }
.svc-list li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
:root[data-theme="light"] .svc-list li { border-top-color: var(--border); }
.svc-list li::before { counter-increment: s; content: counter(s, decimal-leading-zero); grid-row: 1 / 3; font: 400 max(11px, calc(16 * var(--px))) var(--font-mono); color: var(--accent); }
.svc-list b { font: 500 max(15px, calc(23 * var(--px))) / 1.3 var(--font-body); }
.svc-list span { font-size: max(13px, calc(19 * var(--px))); color: var(--dim); }
.disc .btn-terminal { margin-top: max(28px, calc(52 * var(--px))); }

/* scroll reveal, as on the home page */
.disc .copy > * { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.disc .copy.in > * { opacity: 1; transform: none; }
.disc .copy.in > :nth-child(2) { transition-delay: .08s } .disc .copy.in > :nth-child(3) { transition-delay: .16s }
.disc .copy.in > :nth-child(4) { transition-delay: .24s } .disc .copy.in > :nth-child(5) { transition-delay: .32s }

/* closing call to action */
.svc-close { text-align: left; }
.svc-close h2 { font: 500 max(36px, calc(96 * var(--px))) / 1.05 var(--font-display); letter-spacing: -0.025em; margin-top: max(14px, calc(30 * var(--px))); }
.svc-close h2 .hl { color: var(--accent); }
.svc-close p { margin-top: 18px; max-width: 52ch; font-size: max(15px, calc(25 * var(--px))); line-height: 1.45; color: var(--dim); }
.svc-close .hero-ctas { margin-top: max(26px, calc(48 * var(--px))); }

@media (prefers-reduced-motion: reduce) {
  .disc .copy > * { opacity: 1; transform: none; transition: none; }
}

/* ── stacked composition (phones, portrait tablets, narrow windows — assets/device.js) ── */
:root[data-layout="mobile"] .svc-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px var(--m-gutter) 28px; row-gap: 8px; }
:root[data-layout="mobile"] .svc-hero .stage-anchor { grid-row: 2; grid-column: 1; height: 40svh; }
:root[data-layout="mobile"] .svc-hero .copy { grid-row: 1; grid-column: 1; }
:root[data-layout="mobile"] .svc-hero h1 { font-size: clamp(34px, 9vw, 64px); }
:root[data-layout="mobile"] .svc-hero .lede { font-size: clamp(15px, 2.4vw, 20px); }
:root[data-layout="mobile"] .svc-rating { position: relative; left: auto; top: auto; grid-row: 3; justify-self: end; }
:root[data-layout="mobile"] .disc { grid-template-columns: 1fr; min-height: 0; align-items: start; padding: 48px var(--m-gutter) 64px; }
:root[data-layout="mobile"] .disc .stage-anchor, :root[data-layout="mobile"] .disc.flip .stage-anchor { grid-row: 1; grid-column: 1; height: 38svh; }
:root[data-layout="mobile"] .disc .copy, :root[data-layout="mobile"] .disc.flip .copy { grid-row: 2; grid-column: 1; }
:root[data-layout="mobile"] .disc h2 { font-size: clamp(30px, 7.6vw, 52px); }
/* section heads on the service, solution, industry and case-study pages: heading and subtext stacked, sized as one set */
.svc-page .sec { padding-top: clamp(56px, 5.5vw, 88px); padding-bottom: clamp(56px, 5.5vw, 88px); }
.svc-page .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
.svc-page .sec-head h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; margin-top: 12px; }
.svc-page .sec-head .sub { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; max-width: 62ch; }
:root[data-scale="phone"] .svc-list { grid-template-columns: 1fr; }
/* light theme: the Data & AI axes + leader lines were drawn for a dark ground — darken them */
:root[data-theme="light"] #cubes .latent-overlay line[stroke="#c9ced8"] { stroke: #4a5266; }
:root[data-theme="light"] #cubes .latent-overlay polygon { fill: #4a5266; }
:root[data-theme="light"] #cubes .latent-overlay stop { stop-color: #4a5266; }

/* ── service page layout (web-apps-demo.html): hero, 5/7 sections, item grid, arrow lists, definitions, FAQ.
   Scoped to .sp-page so the navbar, footer and other pages are untouched. Colours and fonts come from the site tokens. ── */
.sp-page {
  --sp-y: clamp(4rem, 8vw, 7rem);
  --sp-gutter: clamp(1.25rem, 4vw, 3rem);
  --sp-gap: clamp(2rem, 5vw, 5rem);
}
.sp-page .sp-c { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-page .sp-eyebrow { display: flex; align-items: baseline; gap: .6rem; font: 400 .8125rem / 1.6 var(--font-mono); color: var(--dim); margin: 0 0 .9rem; }
.sp-page .sp-idx { color: var(--accent); font-size: 1rem; font-weight: 500; }
.sp-page .sp-n { display: block; font: 400 .8125rem / 1.6 var(--font-mono); color: var(--dim); margin-bottom: .75rem; }

/* hero */
.sp-page .sp-hero { padding-block: clamp(2rem, 5vw, 4rem); }
.sp-page .sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-gap); align-items: center; min-height: min(70vh, 620px); }
.sp-page .sp-hero__grid--solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sp-page .sp-hero__copy { max-width: 34rem; }
.sp-page .sp-hero h1 { font: 500 clamp(2.5rem, 1.6rem + 2.6vw, 4rem) / 1.1 var(--font-display); letter-spacing: -.02em; margin: .75rem 0 1.25rem; color: var(--text); }
.sp-page .sp-hero__lead { font-size: 1.125rem; line-height: 1.6; color: var(--dim); max-width: 30rem; margin: 0 0 2rem; }
.sp-page .sp-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* the 3D slot: empty until a visual is passed in; renders in the left column */
.sp-page .sp-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; }

/* sections */
.sp-page .sp-section { padding-block: var(--sp-y); border-top: 1px solid var(--line); }
.sp-page .sp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-gap); align-items: start; }
.sp-page .sp-split__head { position: sticky; top: 7rem; }
.sp-page h2 { font: 500 clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem) / 1.12 var(--font-display); letter-spacing: -.015em; margin: 0; text-wrap: balance; color: var(--text); }
.sp-page .sp-sub { font-size: 1.125rem; line-height: 1.6; color: var(--dim); max-width: 34rem; margin: 1rem 0 0; }
.sp-page .sp-cta h2 { max-width: 40rem; }
.sp-page .sp-cta .sp-row { margin-top: 2rem; }

/* item grid: 2 columns, an odd last item spans the row */
.sp-page .sp-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.sp-page .sp-items > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.sp-page .sp-item { padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); }
.sp-page .sp-item h3 { font: 500 1.125rem / 1.3 var(--font-display); margin: 0 0 .5rem; color: var(--text); }
.sp-page .sp-item p { font-size: 1rem; line-height: 1.6; color: var(--dim); margin: 0; }
.sp-page .sp-item a { display: inline-block; margin-top: 1rem; color: var(--accent); }

/* arrow lists */
.sp-page .sp-list { list-style: none; margin: 0; padding: 0; }
.sp-page .sp-list li { display: grid; grid-template-columns: 1.5rem 1fr; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.6; }
.sp-page .sp-list li:last-child { border-bottom: 1px solid var(--line); }
.sp-page .sp-list li::before { content: "→"; color: var(--dim); }

/* definition rows (industry) */
.sp-page .sp-defs li { grid-template-columns: 1.5rem 11rem 1fr; }
.sp-page .sp-t { font-weight: 500; color: var(--text); }
.sp-page .sp-t a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sp-page .sp-d { color: var(--dim); }

/* FAQ */
.sp-page .sp-faq { border-top: 1px solid var(--line); }
.sp-page .sp-faq details { border-bottom: 1px solid var(--line); }
.sp-page .sp-faq summary { display: flex; gap: 1rem; align-items: baseline; padding: 1.25rem 0; cursor: pointer; list-style: none; font: 500 1.125rem / 1.6 var(--font-display); color: var(--text); }
.sp-page .sp-faq summary::-webkit-details-marker { display: none; }
.sp-page .sp-faq summary::after { content: "+"; margin-left: auto; color: var(--dim); }
.sp-page .sp-faq details[open] summary::after { content: "–"; }
.sp-page .sp-q { font: 400 .8125rem / 1.6 var(--font-mono); color: var(--dim); }
.sp-page .sp-a { padding: 0 0 1.5rem 2.75rem; max-width: 44rem; color: var(--dim); font-size: 1rem; line-height: 1.6; margin: 0; }
.sp-page .sp-related { margin: 1.5rem 0 0; font: 400 .8125rem / 1.6 var(--font-mono); color: var(--dim); }

/* case studies: running text, insight line and numbered lists (same type scale as the rest of the layout) */
.sp-page .sp-prose { font-size: 1rem; line-height: 1.6; color: var(--dim); max-width: 42rem; margin: 0 0 1rem; }
.sp-page .sp-prose:last-child { margin-bottom: 0; }
.sp-page .sp-prose strong, .sp-page .sp-item strong, .sp-page .sp-list strong { color: var(--text); font-weight: 500; }
.sp-page .sp-prose em, .sp-page .sp-item em, .sp-page .sp-d em { font-style: italic; }
.sp-page .sp-quote { font: 500 1.125rem / 1.5 var(--font-display); color: var(--text); max-width: 40rem; margin: 0 0 1.25rem; }
.sp-page .sp-list--num { counter-reset: sp-n; }
.sp-page .sp-list--num li { counter-increment: sp-n; grid-template-columns: 2.25rem 1fr; }
.sp-page .sp-list--num li::before { content: counter(sp-n, decimal-leading-zero); font: 400 .8125rem / 1.6 var(--font-mono); color: var(--dim); }
.sp-page .sp-cta .sp-sub { margin-top: 1rem; }

/* breakpoints (same as the demo) */
@media (max-width: 1024px) {
  .sp-page .sp-split { grid-template-columns: 1fr; gap: 2rem; }
  .sp-page .sp-split__head { position: static; }
}
@media (max-width: 900px) {
  .sp-page .sp-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .sp-page .sp-visual { order: 2; max-height: 360px; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .sp-page .sp-items { grid-template-columns: 1fr; }
  .sp-page .sp-defs li { grid-template-columns: 1.5rem 1fr; }
  .sp-page .sp-defs .sp-d { grid-column: 2; }
  .sp-page .sp-a { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-page * { transition: none !important; animation: none !important; }
}

/* ── solutions/run-operations-smoothly hero: the order flow (assets/run-operations-flow.js) sits in the left column ── */
.flow-stage { position: relative; width: 100%; height: 100%; pointer-events: none; }
.flow-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flow-lbl { position: absolute; top: calc(var(--y, 0%) - 12px); transform: translateY(-100%); padding-left: 16px;
  font-family: var(--font-display); font-size: max(11px, calc(14 * var(--px))); line-height: 1.2; color: var(--text); white-space: nowrap; }
.flow-lbl::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c, var(--dim)); }
.flow-lbl.dim { color: var(--dim); padding-left: 0; }
.flow-lbl.dim::before { display: none; }
.flow-lbl.flow-in { top: 0; transform: none; }
@media (max-width: 700px) { .flow-lbl.flow-in { display: none; } }
/* ── solution-page flows (assets/flow-kit.js): palette per theme, and the text labels laid over the canvas ── */
.flow-stage { container-type: size; --fx-ink: #d6deec; --fx-cyan: #22c7f0; --fx-mag: #f0379a; --fx-yel: #f5c542; --fx-azure: var(--accent); --fx-bg: var(--bg); }
:root[data-theme="light"] .flow-stage { --fx-ink: #1d232c; --fx-cyan: #0a7fb2; --fx-mag: #c51b6b; --fx-yel: #9a6400; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; }
.fx-lbl { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform, opacity;
  font: 500 clamp(11px, 2.05cqw, 14px) / 1.15 var(--font-display); letter-spacing: -0.005em; color: var(--text);
  text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg); }
.fx-lbl.mono { font: 500 clamp(9px, 1.62cqw, 11.5px) / 1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.fx-lbl.dim { color: var(--dim); }
.fx-lbl.big { font: 500 clamp(22px, 5.2cqw, 34px) / 1 var(--font-display); letter-spacing: -0.02em; }
.fx-lbl.small { font-size: clamp(10px, 1.8cqw, 12.5px); }
.fx-lbl.cyan { color: var(--fx-cyan); }
.fx-lbl.mag { color: var(--fx-mag); }
.fx-lbl.yel { color: var(--fx-yel); }
.fx-lbl.azure { color: var(--fx-azure); }
.fx-lbl.chip { padding: .38em .75em .32em; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 84%, transparent); text-shadow: none; }

/* ── industry heroes: the stage sits in the left column (under the copy on phones) ── */
.svc-hero .robot-stage { position: relative; grid-row: 1; grid-column: 1; height: min(80svh, 760px); min-height: 360px; pointer-events: none; }
.svc-hero .robot-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .svc-hero .robot-stage { grid-row: 2; grid-column: 1; height: 40svh; min-height: 280px; }
  .svc-hero .copy { grid-row: 1; grid-column: 1; }
}
:root[data-layout="mobile"] .svc-hero .robot-stage { grid-row: 2; grid-column: 1; height: 40svh; min-height: 280px; }
:root[data-layout="mobile"] .svc-hero .copy { grid-row: 1; grid-column: 1; }

/* ── "Systems View" heroes (assets/hero-kit.js): glass interface panels in 3D depth over a WebGL signal field.
   Restrained colour: azure = information, teal = verified, amber = needs attention. Sizes follow the stage (cqi). ── */
.robot-stage.hx {
  --hx-ink: #E9EEF6; --hx-dim: #8D96A9; --hx-faint: #5E667A;
  --hx-line: rgba(255,255,255,.07); --hx-line2: rgba(255,255,255,.13);
  --hx-core: #121624; --hx-core2: #0B0E17;
  --hx-azure: #4AA3FF; --hx-teal: #2DD4BF; --hx-amber: #F5B544;
  --hx-ease: cubic-bezier(.16,1,.3,1); --hx-capH: 100px;
  perspective: 1700px; perspective-origin: 50% 42%; container-type: size; }
:root[data-theme="light"] .robot-stage.hx {
  --hx-ink: #0E1320; --hx-dim: #566074; --hx-faint: #8C93A2;
  --hx-line: rgba(14,19,32,.08); --hx-line2: rgba(14,19,32,.14);
  --hx-core: #FFFFFF; --hx-core2: #F6F8FB;
  --hx-azure: #1D4ED8; --hx-teal: #0F8A7C; --hx-amber: #B45309; }
.svc-hero .robot-stage.hx { height: min(80svh, 780px); min-height: 520px; }
:root[data-layout="mobile"] .svc-hero .robot-stage.hx { height: clamp(600px, 172vw, 800px); min-height: 0; margin-top: 12px; }
@media (max-width: 900px) { .svc-hero .robot-stage.hx { height: clamp(600px, 172vw, 800px); min-height: 0; } }
.robot-stage.hx.hx-narrow { --hx-capH: 92px; }

/* the field: masked to a soft oval so it never shows the canvas edge; a CSS dot grid where WebGL is off */
.robot-stage.hx canvas { opacity: 0; transition: opacity 1.8s ease;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 56%, #000 38%, transparent 80%); mask-image: radial-gradient(ellipse 72% 62% at 50% 56%, #000 38%, transparent 80%); }
.robot-stage.hx.is-live canvas { opacity: 1; }
.robot-stage.hx::before { content: ""; position: absolute; inset: 8% 6% 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-azure) 14%, transparent), transparent); filter: blur(18px); }
.robot-stage.hx.hx-flat::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--hx-azure) 45%, transparent) 1px, transparent 1.5px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 58%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 58% at 50% 58%, #000 25%, transparent 75%); }

/* the panel group, the beams under it, the caption under both */
.hx-world { position: absolute; left: 0; right: 0; top: 0; bottom: var(--hx-capH); z-index: 2; transform-style: preserve-3d; will-change: transform; }
.hx-beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.hx-b { fill: none; stroke: color-mix(in srgb, var(--hx-azure) 34%, transparent); stroke-width: 1.4; transition: opacity .5s, stroke .4s; }
.hx-b.teal { stroke: color-mix(in srgb, var(--hx-teal) 34%, transparent); } .hx-b.amber { stroke: color-mix(in srgb, var(--hx-amber) 34%, transparent); }
.hx-b.on { stroke: color-mix(in srgb, var(--hx-azure) 70%, transparent); } .hx-b.teal.on { stroke: color-mix(in srgb, var(--hx-teal) 70%, transparent); } .hx-b.amber.on { stroke: color-mix(in srgb, var(--hx-amber) 70%, transparent); }
.hx-arrow { fill: color-mix(in srgb, var(--hx-azure) 70%, transparent); } .hx-arrow.teal { fill: color-mix(in srgb, var(--hx-teal) 70%, transparent); } .hx-arrow.amber { fill: color-mix(in srgb, var(--hx-amber) 70%, transparent); }
.hx-p { fill: none; stroke-width: 2.6; stroke-linecap: round; }
/* what moves along a connector, on its midpoint */
.hx-btag { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap; opacity: 0; will-change: transform; --c: var(--hx-azure);
  padding: .5em .75em; border-radius: 999px; font: 500 clamp(9px, 1.5cqi, 10.5px) / 1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--hx-dim); background: var(--hx-core); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 8px 20px -10px rgba(0,0,0,.6);
  transition: color .35s, box-shadow .35s, opacity .4s; }
.hx-btag.teal { --c: var(--hx-teal); } .hx-btag.amber { --c: var(--hx-amber); }
.hx-btag.on { color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 22px -6px var(--c); }
.hx-h { fill: var(--hx-azure); filter: drop-shadow(0 0 6px var(--hx-azure)); }
.hx-h.teal { fill: var(--hx-teal); filter: drop-shadow(0 0 6px var(--hx-teal)); }
.hx-h.amber { fill: var(--hx-amber); filter: drop-shadow(0 0 6px var(--hx-amber)); }
.hx-beams stop.s0 { stop-opacity: 0; } .hx-beams stop.s1 { stop-opacity: 1; }
.hx-beams stop.azure { stop-color: var(--hx-azure); } .hx-beams stop.teal { stop-color: var(--hx-teal); } .hx-beams stop.amber { stop-color: var(--hx-amber); }

/* a panel: an outer glass bezel round an inner core (two radii, one centre), placed in depth */
.hx-panel { position: absolute; padding: 5px; border-radius: 18px; transform-style: preserve-3d; backface-visibility: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px var(--hx-line2), 0 44px 80px -40px rgba(0,0,0,.8), 0 18px 36px -24px rgba(0,0,0,.6);
  transform: var(--base) translate3d(0, 36px, -160px); opacity: 0; transition: transform 1.4s var(--hx-ease), opacity 1s ease; }
.hx-panel.in { transform: var(--base); opacity: 1; }
.hx-panel.in.hx-idle { opacity: .58; }
.hx-panel.in.hx-active { transform: var(--base) translate3d(0, -8px, 14px); }
.hx-panel.hx-active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hx-azure) 60%, transparent), 0 0 46px -14px var(--hx-azure), 0 44px 80px -40px rgba(0,0,0,.8); }
:root[data-theme="light"] .hx-panel.hx-active { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hx-azure) 55%, transparent), 0 26px 60px -26px color-mix(in srgb, var(--hx-azure) 45%, transparent); }
:root[data-theme="light"] .hx-panel { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(240,243,248,.7));
  box-shadow: 0 0 0 1px var(--hx-line2), 0 34px 64px -34px rgba(20,32,70,.32), 0 12px 26px -18px rgba(20,32,70,.22); }
.hx-core { position: relative; border-radius: 13px; padding: clamp(10px, 2.3cqi, 16px); overflow: hidden; color: var(--hx-ink);
  background: linear-gradient(180deg, var(--hx-core), var(--hx-core2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  font: 400 clamp(10.5px, 1.9cqi, 13px) / 1.35 var(--font-body); }
:root[data-theme="light"] .hx-core { box-shadow: inset 0 1px 0 #fff; }
.hx-port { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; z-index: 3;
  background: var(--hx-core); box-shadow: 0 0 0 1.5px var(--hx-line2), 0 0 0 4px color-mix(in srgb, var(--hx-azure) 10%, transparent); }

/* inside a panel */
.hx-head { display: flex; align-items: center; gap: .65em; padding-bottom: .85em; margin-bottom: .55em; border-bottom: 1px solid var(--hx-line);
  font: 500 clamp(9px, 1.6cqi, 11.5px) / 1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hx-dim); white-space: nowrap; }
.hx-n { flex: none; padding: .32em .45em; border-radius: 5px; font-weight: 600; letter-spacing: .02em; color: var(--hx-azure);
  background: color-mix(in srgb, var(--hx-azure) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx-azure) 30%, transparent); }
.hx-active .hx-n { color: #fff; background: var(--hx-azure); box-shadow: none; }
.hx-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); --c: var(--hx-azure); }
.hx-dot.teal { --c: var(--hx-teal); } .hx-dot.amber { --c: var(--hx-amber); }
.hx-meta { margin-left: auto; color: var(--hx-faint); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.hx-label { display: block; font: 500 clamp(8.5px, 1.45cqi, 10.5px) / 1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hx-faint); }
.hx-kpi { display: flex; align-items: baseline; gap: .55em; margin: .2em 0 .6em; }
.hx-kpi b { font: 500 clamp(20px, 4.8cqi, 34px) / 1 var(--font-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-kpi small { color: var(--hx-dim); font-size: .95em; }
.hx-kpi .hx-chip { margin-left: auto; align-self: center; }
.hx-rows { display: grid; }
.hx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75em; padding: .58em .3em; margin: 0 -.3em;
  border-top: 1px solid var(--hx-line); border-radius: 6px; transition: opacity .55s ease, transform .7s var(--hx-ease), background-color .45s ease; }
.hx-row:first-child { border-top-color: transparent; }
.hx-row[data-s="hide"] { opacity: 0; transform: translateY(10px); }
.hx-row[data-s="dim"] { opacity: .42; }
.hx-row[data-s="hot"] { background-color: color-mix(in srgb, var(--hx-amber) 11%, transparent); }
.hx-row[data-s="good"] { background-color: color-mix(in srgb, var(--hx-teal) 9%, transparent); }
.hx-row[data-s="focus"] { background-color: color-mix(in srgb, var(--hx-azure) 10%, transparent); }
.hx-ico { display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: .65em; --c: var(--hx-azure);
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); font: 600 .74em / 1 var(--font-mono); letter-spacing: .02em; }
.hx-row.noico { grid-template-columns: minmax(0, 1fr) auto; }
.hx-m { min-width: 0; }
.hx-m .t { display: block; font-weight: 500; color: var(--hx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-m .s { display: block; margin-top: .15em; font-size: .86em; color: var(--hx-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-r { display: flex; align-items: center; gap: .6em; }
.hx-r .v { font: 500 1em / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--hx-ink); white-space: nowrap; }
.hx-chip { display: inline-flex; align-items: center; gap: .45em; padding: .5em .7em; border-radius: 999px; white-space: nowrap; --c: var(--hx-dim);
  font: 500 clamp(8.5px, 1.45cqi, 10.5px) / 1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
  transition: color .4s, background-color .4s, box-shadow .4s; }
.hx-chip[data-s="ok"] { --c: var(--hx-teal); } .hx-chip[data-s="warn"] { --c: var(--hx-amber); } .hx-chip[data-s="info"] { --c: var(--hx-azure); }
.hx-chip[data-s="hide"] { opacity: 0; }
.hx-chip[data-s="warn"]::before, .hx-chip[data-s="info"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: hx-blink 1.2s ease-in-out infinite; }
@keyframes hx-blink { 50% { opacity: .25; } }
.hx-bar { display: block; height: 4px; border-radius: 4px; background: var(--hx-line2); overflow: hidden; }
.hx-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--hx-azure)); transform: scaleX(var(--k, 0)); transform-origin: left; }
.hx-foot { display: flex; align-items: center; gap: .6em; margin-top: .7em; padding-top: .75em; border-top: 1px solid var(--hx-line); color: var(--hx-dim); font-size: .9em; }
.hx-proof { display: block; margin-top: .75em; padding-top: .75em; border-top: 1px solid var(--hx-line); font-size: .86em; line-height: 1.45; color: var(--hx-dim); }
.hx-proof b { font-weight: 600; color: var(--hx-ink); }
.hx-proof .hx-label { margin-bottom: .35em; color: var(--hx-teal); }
.typing::after { content: ""; display: inline-block; width: .45em; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--hx-azure); animation: hx-blink .9s steps(2) infinite; }
.hx-bubble { padding: .65em .8em; border-radius: 10px; line-height: 1.45; min-height: 2.9em; }
.hx-bubble.q { margin-left: 18%; background: color-mix(in srgb, var(--hx-azure) 14%, transparent); color: var(--hx-ink); border-bottom-right-radius: 3px; }
.hx-bubble.a { margin-top: .55em; margin-right: 6%; background: color-mix(in srgb, var(--hx-ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--hx-line); border-bottom-left-radius: 3px; }
.hx-cites { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .55em; min-height: 2em; }
.hx-cites .hx-chip { transition: opacity .4s ease, transform .5s var(--hx-ease); }
.hx-cites .hx-chip[data-s="hide"] { transform: translateY(4px); }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1em; border-radius: 9px; font: 500 .92em / 1 var(--font-body);
  color: #fff; background: var(--hx-azure); box-shadow: 0 8px 20px -10px var(--hx-azure); transition: transform .25s var(--hx-ease), background-color .35s, opacity .4s; }
.hx-btn[data-s="press"] { transform: scale(.96); }
.hx-btn[data-s="done"] { background: var(--hx-teal); box-shadow: 0 8px 20px -10px var(--hx-teal); }
.hx-btn[data-s="hide"] { opacity: 0; }
.hx-empty { padding: .9em .2em; color: var(--hx-faint); font: 500 clamp(9px, 1.55cqi, 11px) / 1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; transition: opacity .4s; }
.hx-empty[data-s="hide"] { display: none; }
.hx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hx-svg .grid { stroke: var(--hx-line); stroke-width: 1; }
.hx-svg .ln { fill: none; stroke: var(--hx-azure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-svg .ln.teal { stroke: var(--hx-teal); } .hx-svg .ln.dash { stroke-dasharray: 4 4; opacity: .8; }
.hx-svg .area { fill: color-mix(in srgb, var(--hx-azure) 16%, transparent); }
.hx-svg text { font: 500 9px var(--font-mono); fill: var(--hx-faint); letter-spacing: .06em; }
.hx-narrow .hx-wide-only { display: none; }
.robot-stage.hx:not(.hx-narrow) .hx-narrow-only { display: none; }

/* form fields, time slots, a schedule grid, a record timeline (healthcare); a score ring (real estate); a route map (manufacturing) */
.hx-field { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .6em .75em; margin-bottom: .55em; border-radius: 9px;
  background: color-mix(in srgb, var(--hx-ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-field .hx-label { margin: 0; }
.hx-field b { font-weight: 500; color: var(--hx-ink); }
.hx-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: .55em 0 .75em; }
.hx-slots span { padding: .6em 0; border-radius: 8px; text-align: center; font: 500 .9em / 1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--hx-ink);
  box-shadow: inset 0 0 0 1px var(--hx-line2); transition: background-color .35s, color .35s, box-shadow .35s, transform .4s var(--hx-ease); }
.hx-slots span[data-s="taken"] { color: var(--hx-faint); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-slots span[data-s="pick"] { color: #fff; background: var(--hx-azure); box-shadow: none; transform: scale(1.04); }
.hx-btn.wide { display: flex; width: 100%; }
.hx-cal { position: relative; display: grid; grid-template-columns: 3.6em repeat(3, 1fr); grid-auto-rows: 2.15em; column-gap: .35em; row-gap: .3em; }
.hx-cal .h { align-self: end; padding-bottom: .3em; font: 500 .78em / 1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hx-faint); }
.hx-cal .tm { align-self: center; font: 500 .8em / 1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--hx-faint); }
.hx-cal .cell { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-appt { position: relative; z-index: 1; display: flex; align-items: center; gap: .4em; padding: 0 .55em; border-radius: 6px; overflow: hidden; white-space: nowrap;
  font: 500 .82em / 1 var(--font-body); color: var(--hx-ink); background: color-mix(in srgb, var(--hx-azure) 16%, transparent); box-shadow: inset 2px 0 0 var(--hx-azure);
  transition: opacity .5s ease, transform .7s var(--hx-ease), background-color .4s, box-shadow .4s; }
.hx-appt[data-s="hide"] { opacity: 0; transform: translateY(-10px) scale(.96); }
.hx-appt[data-s="new"] { background: color-mix(in srgb, var(--hx-azure) 34%, transparent); box-shadow: inset 2px 0 0 var(--hx-azure), 0 0 0 1px var(--hx-azure), 0 0 18px -4px var(--hx-azure); }
.hx-appt[data-s="risk"] { background: color-mix(in srgb, var(--hx-amber) 16%, transparent); box-shadow: inset 2px 0 0 var(--hx-amber); }
.hx-appt[data-s="ok"] { background: color-mix(in srgb, var(--hx-teal) 16%, transparent); box-shadow: inset 2px 0 0 var(--hx-teal); }
.hx-appt em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.hx-appt[data-s="risk"] em { color: var(--hx-amber); } .hx-appt[data-s="ok"] em { color: var(--hx-teal); }
.hx-tl { display: grid; }
.hx-tl .hx-row { grid-template-columns: 1.1em minmax(0, 1fr) auto; }
.hx-tick { position: relative; width: .7em; height: .7em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hx-line2); transition: background-color .4s, box-shadow .4s; }
.hx-tick[data-s="ok"] { background: var(--hx-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-teal) 22%, transparent); }
.hx-tick[data-s="info"] { background: var(--hx-azure); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-azure) 22%, transparent); }
.hx-ring { position: relative; width: 6.4em; height: 6.4em; flex: none; }
.hx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring circle { fill: none; stroke-width: 7; }
.hx-ring .bg { stroke: var(--hx-line2); }
.hx-ring .fg { stroke: var(--hx-teal); stroke-linecap: round; transition: stroke .4s; }
.hx-ring[data-s="low"] .fg { stroke: var(--hx-faint); }
.hx-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 1.9em / 1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--hx-ink); }
.hx-score { display: flex; align-items: center; gap: 1em; margin-bottom: .6em; }
.hx-score .hx-label { margin-bottom: .45em; }
.hx-score .who { font: 500 1.06em / 1.3 var(--font-display); color: var(--hx-ink); }
.hx-score .sub { color: var(--hx-dim); font-size: .9em; margin-top: .2em; }
.hx-check { display: flex; align-items: center; gap: .6em; padding: .42em 0; color: var(--hx-ink); transition: opacity .45s ease, transform .6s var(--hx-ease); }
.hx-check::before { content: ""; flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--hx-teal) no-repeat center / 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23071016' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hx-check[data-s="hide"] { opacity: 0; transform: translateX(-6px); }
.hx-check[data-s="no"]::before { background: var(--hx-line2); background-image: none; }
.hx-check[data-s="no"] { color: var(--hx-dim); }
.hx-map { position: relative; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--hx-ink) 3%, transparent); box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-map svg { display: block; width: 100%; height: auto; }
.hx-map .road { fill: none; stroke: var(--hx-line2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hx-map .route { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-map .route.a { stroke: var(--hx-azure); } .hx-map .route.b { stroke: var(--hx-teal); }
.hx-map .stop { fill: var(--hx-core); stroke: var(--hx-dim); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.hx-map .stop[data-s="ok"] { fill: var(--hx-teal); stroke: var(--hx-teal); }
.hx-map .depot { fill: var(--hx-azure); }
.hx-map .van { fill: var(--hx-ink); stroke: var(--hx-core); stroke-width: 2; }
.hx-map text { font: 500 9px var(--font-mono); fill: var(--hx-faint); letter-spacing: .06em; }
.hx-product { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: .8em; align-items: center; margin-bottom: .7em; }
.hx-product .img { aspect-ratio: 1; border-radius: 9px; background: radial-gradient(circle at 30% 25%, #E8D9C4, #B89E80 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hx-product .t { font: 500 1.05em / 1.25 var(--font-display); color: var(--hx-ink); }
.hx-product .s { margin-top: .2em; color: var(--hx-dim); font-size: .9em; }
.hx-product .p { margin-top: .35em; font: 500 1.05em / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-funnel { display: grid; gap: .4em; margin-top: .75em; }
.hx-funnel div { display: grid; grid-template-columns: 4.8em minmax(0, 1fr) 3.6em; align-items: center; gap: .6em; font-size: .88em; color: var(--hx-dim); }
.hx-funnel b { font: 500 1em / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--hx-ink); text-align: right; }
.hx-cols { display: flex; align-items: flex-end; gap: .35em; height: 4.6em; margin-top: .6em; }
.hx-cols i { flex: 1; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--hx-azure) 55%, transparent); transform: scaleY(var(--k, 0)); transform-origin: bottom; height: 100%; }
.hx-cols i.hi { background: var(--hx-teal); }

/* phones: the workflow rail above one panel at a time (assets/hero-kit.js handoff / drawRail) */
.hx-rail { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; padding-bottom: 16px; pointer-events: none; }
.robot-stage.hx:not(.hx-handoff) .hx-rail { display: none; }
.hx-node { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; white-space: nowrap;
  font: 500 9.5px / 1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--hx-faint);
  background: var(--hx-core); box-shadow: inset 0 0 0 1px var(--hx-line2); transition: color .4s, background-color .4s, box-shadow .4s; }
.hx-node i { font-style: normal; font-weight: 600; color: var(--hx-dim); }
.hx-node[data-s="on"] { color: var(--hx-ink); box-shadow: inset 0 0 0 1px var(--hx-azure), 0 0 18px -6px var(--hx-azure); }
.hx-node[data-s="on"] i { color: var(--hx-azure); }
.hx-node[data-s="done"] { color: var(--hx-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx-teal) 45%, transparent); }
.hx-node[data-s="done"] i { color: var(--hx-teal); }
.hx-link { position: relative; flex: 1; height: 2px; margin: 0 4px; border-radius: 2px; background: var(--hx-line2); transition: background-color .4s; }
.hx-link::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left: 5px solid var(--hx-line2); border-right: 0; transition: border-color .4s; }
.hx-link[data-s="done"] { background: color-mix(in srgb, var(--hx-teal) 55%, transparent); }
.hx-link[data-s="done"]::after { border-left-color: color-mix(in srgb, var(--hx-teal) 55%, transparent); }
.hx-link[data-s="on"] { background: color-mix(in srgb, var(--hx-azure) 60%, transparent); }
.hx-link[data-s="on"]::after { border-left-color: var(--hx-azure); }
.hx-link .pkt { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--hx-azure); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--hx-azure) 70%, transparent); opacity: 0; }
.hx-link em { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); white-space: nowrap; font: 500 8.5px / 1 var(--font-mono); font-style: normal;
  letter-spacing: .05em; text-transform: uppercase; color: var(--hx-faint); transition: color .4s; }
.hx-link[data-s="on"] em { color: var(--hx-azure); }
.hx-handoff .hx-panel { transform-origin: 50% 0; transition: none; }
.hx-handoff .hx-panel.hx-active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hx-azure) 50%, transparent), 0 24px 50px -28px rgba(0,0,0,.8); }
.hx-narrow .hx-btag, .hx-handoff .hx-steps { display: none; }
.hx-deck.hx-narrow .hx-beams { display: none; }
/* the next system previews under the active one and fades into the caption: there is more to come */
.hx-handoff .hx-world { -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
.robot-stage.hx.hx-handoff { --hx-capH: 50px; }
.hx-handoff .hx-cap { gap: 6px; }
.hx-handoff .hx-line { font-size: 15px; }

/* phones held upright: the whole hero (copy, buttons and the full animation) fits one screen without scrolling.
   The copy is set tighter, and the stage takes whatever height is left (the scenes fit themselves to it). */
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero {
  min-height: calc(100svh - var(--m-head) - env(safe-area-inset-top, 0px)); grid-template-rows: auto minmax(300px, 1fr);
  row-gap: 10px; align-items: stretch; padding: 10px var(--m-gutter) 8px; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .copy { align-self: start; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .eyebrow { font-size: 12.5px; gap: 10px; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .eyebrow .idx { font-size: 17px; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero h1 { margin-top: 8px; font-size: clamp(26px, 7.6vw, 36px); line-height: 1.07; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .lede { margin-top: 9px; font-size: clamp(13.5px, 3.6vw, 15px); line-height: 1.45; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .hero-ctas { margin-top: 13px; flex-wrap: nowrap; gap: 8px; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .hero-ctas .btn-terminal { padding: 11px 12px; font-size: 12px; white-space: nowrap; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .hero-ctas .btn-terminal::after { width: 6px; height: 11px; margin-left: 5px; }
:root[data-layout="mobile"][data-orient="portrait"] .ind-page .svc-hero .robot-stage.hx { height: auto; min-height: 0; margin-top: 0; }

/* the caption under the panels, and the "illustrative data" note */
.hx-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center; pointer-events: none; }
.hx-steps { display: flex; justify-content: center; gap: clamp(8px, 2.4cqi, 18px); font: 500 clamp(9.5px, 1.7cqi, 11.5px) / 1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.hx-steps span { position: relative; display: inline-flex; gap: .5em; padding-bottom: 8px; opacity: .45; transition: opacity .4s, color .4s; }
.hx-steps span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: color-mix(in oklab, var(--text) 14%, transparent); }
.hx-steps span.on { opacity: 1; color: var(--text); } .hx-steps span.done { opacity: .8; }
.hx-steps b { font-weight: 500; color: var(--accent); } .hx-steps em { font-style: normal; }
.hx-steps i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hx-narrow .hx-steps span:not(.on) em { display: none; }
.hx-line { min-height: 1.35em; max-width: 44ch; font: 500 clamp(14px, 2.6cqi, 17px) / 1.35 var(--font-display); letter-spacing: -.005em; color: var(--text); }
.hx-line.in { animation: hx-in .6s var(--hx-ease) both; }
@keyframes hx-in { from { opacity: 0; transform: translateY(7px); } }
.hx-note { margin-top: -4px; font: 500 9px / 1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hx-faint); }

/* the industries hub: a deck of five system cards; the reel under it holds the five industry links */
.hx-deck .hx-panel { transition: none; transform-origin: 50% 0; }
.hx-card .hx-title { margin: .25em 0 .7em; font: 500 clamp(15px, 3.2cqi, 21px) / 1.22 var(--font-display); letter-spacing: -.015em; color: var(--hx-ink); }
.hx-tags { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .8em; }
.hx-tags span { padding: .45em .65em; border-radius: 7px; font-size: .86em; color: var(--hx-dim); background: color-mix(in srgb, var(--hx-ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-viz { margin-top: .2em; padding: .7em .8em .55em; border-radius: 10px; background: color-mix(in srgb, var(--hx-ink) 3.5%, transparent); box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-viz .hx-label { margin-bottom: .55em; }
.robot-stage.hx.hub-stage { --hx-capH: 96px; }
:root[data-layout="mobile"] .svc-hero .robot-stage.hx.hub-stage { height: clamp(500px, 136vw, 620px); }
@media (max-width: 900px) { .svc-hero .robot-stage.hx.hub-stage { height: clamp(500px, 136vw, 620px); } }
.hx-hub-svg rect, .hx-hub-svg circle { transition: fill .35s ease; }
.hx-hub-svg .c-azure { fill: color-mix(in srgb, var(--hx-azure) 78%, transparent); }
.hx-hub-svg .c-teal { fill: var(--hx-teal); } .hx-hub-svg .c-amber { fill: var(--hx-amber); }
.hx-hub-svg .c-empty { fill: var(--hx-line2); } .hx-hub-svg .c-empty2 { fill: var(--hx-faint); }
.hx-hub-svg .c-track { fill: var(--hx-line); } .hx-hub-svg .c-dot { fill: var(--hx-azure); }
.svc-hero .robot-stage.hub-stage { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hub-reel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; justify-items: center; gap: 4px; cursor: default; }
.hub-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 12px; row-gap: 4px; text-align: center; }
.hub-n { font: 400 clamp(10px, 1.8cqi, 12px) / 1 var(--font-mono); letter-spacing: .06em; color: var(--accent); }
.hub-name { font: 500 clamp(17px, 3.2cqi, 22px) / 1.1 var(--font-display); letter-spacing: -.015em; color: var(--text); }
.hub-line { display: none; }
.hub-reel.swap .hub-cap > * { animation: hx-in .6s var(--hx-ease) both; }
.hub-reel.swap .hub-name { animation-delay: .06s; }
.hub-reel ol { display: flex; gap: 6px; width: min(100%, 420px); list-style: none; }
.hub-reel li { flex: 1; }
.hub-reel a { position: relative; display: block; height: 40px; }
.hub-reel a::before, .hub-reel a i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.hub-reel a::before { background: color-mix(in oklab, var(--text) 16%, transparent); transition: background .3s; }
.hub-reel a i { background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hub-reel a:hover::before, .hub-reel a.on::before { background: color-mix(in oklab, var(--text) 26%, transparent); }
.hub-reel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hx-panel { transition: none; }
  .robot-stage.hx canvas { transition: none; }
  .hx-line.in, .hub-reel.swap .hub-cap > * { animation: none; }
  .hx-chip::before, .typing::after { animation: none; }
}

/* ── industry pages (main.ind-page): the hero copy arrives word by word; sections, cards and FAQ rows rise in on scroll.
   The hidden starting states apply only once assets/pages.js has set html.ind-motion, so nothing stays hidden without JS. ── */
.ind-page .svc-hero h1 .w { display: inline-block; animation: ind-word .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.1s + var(--w) * 55ms); }
.ind-page .svc-hero .copy > :not(h1) { animation: ind-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.ind-page .svc-hero .eyebrow { animation-delay: 0s; }
.ind-page .svc-hero .lede { animation-delay: .42s; }
.ind-page .svc-hero .hero-ctas { animation-delay: .56s; }
@keyframes ind-word { from { opacity: 0; transform: translateY(.42em) rotate(1.5deg); } }
@keyframes ind-rise { from { opacity: 0; transform: translateY(16px); } }

.ind-motion .ind-page .sec-head .eyebrow { opacity: 0; transform: translateX(-16px); transition: opacity .55s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.ind-motion .ind-page .sec-head h2 { clip-path: inset(100% -.2em -.3em -.2em); transform: translateY(22px);
  transition: clip-path .9s cubic-bezier(.2,.8,.2,1) .06s, transform .9s cubic-bezier(.2,.8,.2,1) .06s; }
.ind-motion .ind-page .sec-head .sub { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .16s, transform .85s cubic-bezier(.2,.8,.2,1) .16s; }
.ind-motion .ind-page .sec-head.in .eyebrow, .ind-motion .ind-page .sec-head.in .sub { opacity: 1; transform: none; }
.ind-motion .ind-page .sec-head.in h2 { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; }

.ind-page .card-n { position: relative; }
.ind-page .card-n::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.ind-motion .ind-page .card-n, .ind-motion .ind-page .faq details, .ind-motion .ind-page .sec > p {
  opacity: 0; transform: translateY(22px); transition: opacity .55s ease var(--d, 0s), transform .85s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.ind-motion .ind-page .card-n.in, .ind-motion .ind-page .faq details.in, .ind-motion .ind-page .sec > p.in { opacity: 1; transform: none; }
.ind-motion .ind-page .card-n.in::before { animation: ind-sweep 1.5s cubic-bezier(.65,0,.35,1) calc(var(--d, 0s) + .15s) both; }
.ind-motion .ind-page .card-n .n { display: inline-block; opacity: 0; transform: translateY(.6em); transition: opacity .6s ease calc(var(--d, 0s) + .2s), transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0s) + .2s); }
.ind-motion .ind-page .card-n.in .n { opacity: 1; transform: none; }
@keyframes ind-sweep { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* FAQ answers open and close smoothly where the browser can animate to auto height */
.ind-page { interpolate-size: allow-keywords; }
.ind-page .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s cubic-bezier(.2,.8,.2,1), content-visibility .5s allow-discrete; }
.ind-page .faq details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .ind-page .svc-hero h1 .w, .ind-page .svc-hero .copy > * { animation: none; }
  .ind-page .faq details::details-content { transition: none; }
}

/* ── Device adaptation, every page (assets/device.js sets data-layout, data-orient, data-input, data-no3d …) ──
   Phones held upright: every hero with a visual (services, solutions, industries) fits the first screen. The copy
   takes its natural height, set compactly; the visual takes whatever is left of the screen and fits itself to it. */
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child .eyebrow { font-size: 12.5px; gap: 10px; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child .eyebrow .idx { font-size: 17px; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child h1 { margin-top: 8px; font-size: clamp(26px, 7.6vw, 36px); line-height: 1.07; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child .lede { margin-top: 9px; font-size: clamp(13.5px, 3.6vw, 15px); line-height: 1.45; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child .hero-ctas { margin-top: 13px; gap: 8px; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page > .svc-hero:first-child .hero-ctas .btn-terminal { padding: 11px 12px; font-size: 12px; white-space: nowrap; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page:not(.ind-page) > .svc-hero:first-child {
  height: calc(100svh - var(--m-head) - env(safe-area-inset-top, 0px)); min-height: 0;
  grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 10px; align-items: stretch; padding: 10px var(--m-gutter) 8px; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page:not(.ind-page) > .svc-hero:first-child > .copy { grid-row: 1; align-self: start; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page:not(.ind-page) > .svc-hero:first-child > .stage-anchor { grid-row: 2; grid-column: 1; height: auto; min-height: 0; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page:not(.ind-page) > .svc-hero:first-child > .svc-rating { grid-row: 3; }
:root[data-layout="mobile"][data-orient="portrait"] main.svc-page:not(.ind-page) > .svc-hero:first-child > .svc-rating .num { font-size: 30px; }

/* text-only heroes (service pages, case studies): phone-sized type, buttons on one line where they fit */
:root[data-layout="mobile"] .sp-page .sp-hero { padding-block: 18px 24px; }
:root[data-layout="mobile"] .sp-page .sp-hero h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; margin: 8px 0 12px; }
:root[data-layout="mobile"] .sp-page .sp-hero__lead { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
:root[data-layout="mobile"] .sp-page .sp-hero .sp-row { gap: 8px; }
:root[data-layout="mobile"] .sp-page .sp-hero .sp-row .btn-terminal { padding: 11px 12px; font-size: 12px; }

/* phones held sideways: the copy and the visual side by side would be too small, so the visual gets one short screen */
:root[data-device="phone"][data-orient="landscape"] .svc-hero .robot-stage.hx { height: calc(100svh - 24px); min-height: 300px; }
:root[data-device="phone"][data-orient="landscape"] main.svc-page > .svc-hero:first-child .stage-anchor { height: calc(100svh - 40px); }

/* no 3D on this device (data saver, or no WebGL): the services hero shows a still of the same cube sphere */
:root[data-no3d] .svc-hero[data-stage="0"] > .stage-anchor { background: url(brand/services-sphere-still.webp) center / contain no-repeat; }
:root[data-no3d] #cubes { display: none; }

/* lighter glass where the visitor asked for less transparency */
@media (prefers-reduced-transparency: reduce) {
  .hx-panel { background: var(--hx-core); }
  .hx-btag, .vx-tag { background: var(--hx-core, var(--bg)); }
}

/* a plain, quotable answer under the hero lead (service and location pages): what search snippets and AI answers lift */
.sp-page .sp-answer { max-width: 38rem; margin: -1rem 0 2rem; padding-left: 1rem; border-left: 2px solid var(--line, currentColor); font-size: .9375rem; line-height: 1.6; color: var(--dim); }
:root[data-layout="mobile"] .sp-page .sp-answer { font-size: 14px; margin: -8px 0 18px; }