/* ═══════════════════════════════════════════════════════════════════════
   Cadmium — company site and live demos. Sits on top of styles.css.
   Demo panels are dark in both themes, like a CAD viewport.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --d-bg:#0b1020; --d-panel:#12182c; --d-panel-2:#182038; --d-line:rgba(148,163,184,.18); --d-line-2:rgba(148,163,184,.36);
  --d-ink:#f1f5f9; --d-ink-2:#cbd5e1; --d-ink-3:#94a3b8; --d-hot:#FFCF5C; --d-ok:#5CE0A2; --d-bad:#FF8B76;
}
.nav-out{opacity:.75}

.btn--on-dark{background:var(--d-ink);color:var(--d-bg);border-color:var(--d-ink)}
.btn--on-dark:hover{background:#fff;border-color:#fff}
.btn--line-dark{background:transparent;color:var(--d-ink);border-color:var(--d-line-2)}
.btn--line-dark:hover{background:rgba(148,163,184,.12)}

/* ── hero ──────────────────────────────────────────────────────────── */
.hq{
  position:relative;overflow:hidden;background:var(--d-bg);color:var(--d-ink);
  min-height:min(calc(100vh - 66px),800px);display:flex;align-items:center;
  border-bottom:1px solid var(--d-line);
}
.hq::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:52px 52px;
}
.hq-view{position:absolute;inset:0}
.hq-copy{position:relative;z-index:2;pointer-events:none;padding-block:clamp(40px,7vw,90px)}
.hq-copy > div{max-width:530px;pointer-events:auto}
.hq .eyebrow{color:var(--d-ink-3)}
.hq .eyebrow::after{background:var(--d-line)}
.hq h1{color:#fff}
.hq h1 em{font-style:normal;color:#9fbcff}
.hq .lead{color:var(--d-ink-2);margin-top:20px}
.hq-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hq-steps{position:absolute;right:clamp(14px,3vw,34px);bottom:18px;z-index:3;width:min(620px,calc(100% - 28px))}
.hq-note{color:var(--d-ink-3);font-size:13px;margin:8px 2px 0;max-width:none;min-height:2.6em;text-shadow:0 1px 8px var(--d-bg)}
.hq-sub{position:relative;background:var(--d-bg)}
@media (max-width:980px){
  .hq{display:block;min-height:0;padding-bottom:414px}
  .hq-view{top:auto;height:330px;bottom:78px}
  .hq-copy{padding-block:38px 8px}
  .hq-steps{right:14px;left:14px;width:auto;bottom:-70px}
  .hq-note{display:none}
}

/* ── proof strip ───────────────────────────────────────────────────── */
.proof{background:var(--d-bg);color:var(--d-ink);border-bottom:1px solid var(--d-line)}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pf{padding:26px 24px 28px;border-left:1px solid var(--d-line)}
.pf:first-child{border-left:0;padding-left:0}
.pf b{display:block;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.pf span{display:block;color:var(--d-ink-3);font-size:14px;margin-top:6px;line-height:1.45}
@media (max-width:820px){
  .proof-row{grid-template-columns:1fr 1fr}
  .pf:nth-child(odd){border-left:0;padding-left:0}
  .pf:nth-child(n+3){border-top:1px solid var(--d-line)}
}

/* ── products ──────────────────────────────────────────────────────── */
.prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(30px,4vw,54px);border-top:1px solid var(--rule)}
.prod:first-of-type{border-top:0}
.prod:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.prod:nth-of-type(even) .prod-shot{order:-1}
.prod h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:10px 0 12px}
.prod p{color:var(--ink-2)}
.prod-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.prod-shot{display:block;border-radius:8px;overflow:hidden;background:var(--d-bg);border:1px solid var(--rule-2);box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s}
.prod-shot:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.prod-shot img{width:100%;height:auto}
@media (max-width:820px){
  .prod,.prod:nth-of-type(even){grid-template-columns:1fr}
  .prod:nth-of-type(even) .prod-shot{order:0}
}

/* ── capability table ──────────────────────────────────────────────── */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,40px);margin-top:26px}
.cap-col h3{padding-bottom:10px;border-bottom:2px solid var(--rule-2);margin-bottom:2px}
.cap{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
@media (max-width:820px){.caps{grid-template-columns:1fr;gap:30px}}

.tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:24px}
.tenet h3{margin-bottom:8px}
.tenet p{color:var(--ink-2);font-size:15.5px}
@media (max-width:820px){.tenets{grid-template-columns:1fr}}

/* ── dark section and demo chrome ──────────────────────────────────── */
.band--dark{background:var(--d-bg);color:var(--d-ink)}
.band--dark .eyebrow{color:var(--d-ink-3)}
.band--dark .eyebrow::after{background:var(--d-line)}
.band--dark h1,.band--dark h2{color:#fff}
.band--dark .lead{color:var(--d-ink-2)}
.demo-page{padding-block:clamp(30px,4vw,54px) clamp(36px,5vw,64px)}
.demo-page h1{font-size:clamp(32px,4.4vw,52px)}
.demo-page .lead{margin-top:14px;margin-bottom:6px}
.fineprint{font-size:13px;color:var(--d-ink-3);margin-top:12px;max-width:80ch}

.lab{margin-top:24px;background:var(--d-panel);border:1px solid var(--d-line);border-radius:10px;overflow:hidden;color:var(--d-ink)}
.lab-view{position:relative;background:var(--d-bg);overflow:hidden}
.lab-foot{padding:12px 14px 14px;border-top:1px solid var(--d-line)}
.lab-note{color:var(--d-ink-2);font-size:14.5px;margin:10px 2px;max-width:none;min-height:1.5em}
.lab-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lab-hint{font-family:var(--mono);font-size:11px;color:var(--d-ink-3);margin-left:auto}
.lab label,.lab-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-ink-3)}
.lab button{font-family:var(--display)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  appearance:none;background:transparent;color:var(--d-ink-2);border:1px solid var(--d-line-2);
  border-radius:6px;padding:6px 11px;font-size:13px;font-weight:500;cursor:pointer;line-height:1.3;
  transition:background .14s,color .14s,border-color .14s;
}
.chip:hover{background:rgba(148,163,184,.12);color:var(--d-ink)}
.chip.on{background:var(--d-ink);color:var(--d-bg);border-color:var(--d-ink)}
.chip[style*="--c"].on{background:transparent;color:var(--c);border-color:var(--c)}
.chip[style*="--c"]:not(.on){opacity:.5;text-decoration:line-through}
.chip:focus-visible,.seg button:focus-visible,.iso-steps button:focus-visible,.stage-tabs button:focus-visible{outline:2px solid var(--d-hot);outline-offset:2px}

/* isometric run */
.iso-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.iso-view{height:clamp(340px,56vw,620px);cursor:grab}
.iso-view:active{cursor:grabbing}
.iso-sheet{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.iso-sheet svg{display:block;overflow:visible;font-family:var(--mono)}
.iso-sheet [data-layer]{opacity:0;transition:opacity .45s}
.iso-sheet.on [data-layer]{opacity:1}
.iso-sheet.on [data-layer="glyph"]{transition-delay:.15s}
.iso-sheet.on [data-layer="dim"]{transition-delay:.35s}
.iso-sheet.on [data-layer="elev"]{transition-delay:.55s}
.iso-sheet.on [data-layer="bom"]{transition-delay:.7s}
.iso-sheet.hide-pipe [data-layer="pipe"],.iso-sheet.hide-glyph [data-layer="glyph"],.iso-sheet.hide-dim [data-layer="dim"],
.iso-sheet.hide-elev [data-layer="elev"],.iso-sheet.hide-bom [data-layer="bom"]{opacity:0;transition:none}
[data-iso-layers]{transition:opacity .2s}
.iso-lab:not([data-stage="sheet"]) [data-iso-layers]{opacity:.35;pointer-events:none}
.iso-tip{position:absolute;z-index:3;max-width:250px;padding:7px 10px;background:rgba(11,16,32,.94);border:1px solid var(--d-line-2);border-radius:6px;font-size:12.5px;line-height:1.4;pointer-events:none;color:var(--d-ink-2)}
.iso-tip[hidden]{display:none}
.iso-tip b{display:block;color:var(--d-hot);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.iso-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.iso-steps button{
  appearance:none;background:rgba(10,37,69,.72);border:1px solid var(--d-line);border-radius:6px;color:var(--d-ink-3);
  padding:7px 8px;text-align:left;font-size:12.5px;font-weight:500;cursor:pointer;display:flex;gap:6px;align-items:baseline;min-width:0;
  font-family:var(--display);transition:background .14s,color .14s,border-color .14s;
}
.iso-steps button i{font-family:var(--mono);font-style:normal;font-size:10px;opacity:.7}
.iso-steps button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iso-steps button:hover{color:var(--d-ink);background:rgba(14,47,87,.9)}
.iso-steps button.done{color:var(--d-ink-2);border-color:var(--d-line-2)}
.iso-steps button.on{background:var(--d-ink);color:var(--d-bg);border-color:var(--d-ink)}
@media (max-width:640px){
  .iso-steps{grid-template-columns:repeat(3,1fr)}
  .lab-hint{display:none}
}

/* segmented controls */
.seg{display:inline-flex;border:1px solid var(--d-line-2);border-radius:6px;overflow:hidden;flex:none}
.seg button{appearance:none;background:transparent;color:var(--d-ink-2);border:0;border-left:1px solid var(--d-line);padding:6px 11px;font-size:13px;font-weight:500;cursor:pointer}
.seg button:first-child{border-left:0}
.seg button:hover{background:rgba(148,163,184,.12)}
.seg button.on{background:var(--d-ink);color:var(--d-bg)}

/* 3D from 2D */
.carve-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0}
.carve-sheet{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:var(--d-bg);border-right:1px solid var(--d-line);align-content:start}
.carve-view{position:relative;aspect-ratio:1;background:var(--d-panel);border:1px solid var(--d-line);border-radius:5px;overflow:hidden}
.carve-view.over{border-color:var(--d-hot)}
.carve-view canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.carve-view .carve-conflict{pointer-events:none;image-rendering:pixelated}
.carve-view span{position:absolute;left:7px;top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-ink-3);pointer-events:none;z-index:1}
.carve-hint{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:10px;color:var(--d-ink-2);font-size:13.5px;line-height:1.45}
.carve-tools{display:flex;flex-wrap:wrap;gap:8px}
.carve-3d{position:relative;min-height:380px;cursor:grab;background:radial-gradient(ellipse at 50% 40%,#182038,#0b1020 72%)}
.carve-3d:active{cursor:grabbing}
.carve-3d .carve-axes{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--d-ink-3);pointer-events:none}
.stats{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--d-ink-3)}
.stats b{color:var(--d-ink);font-weight:600}
.verdict{font-size:14px;color:var(--d-ok);margin:8px 2px 0;max-width:none}
.verdict.bad{color:var(--d-bad)}
@media (max-width:860px){
  .carve-grid{grid-template-columns:1fr}
  .carve-sheet{border-right:0;border-bottom:1px solid var(--d-line)}
  .carve-3d{min-height:340px}
}

/* P&ID */
.pid-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px}
.pid-main{min-width:0;border-right:1px solid var(--d-line)}
.pid-main canvas{display:block;width:100%;height:auto;background:var(--d-bg);touch-action:none;cursor:pointer}
.stage-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--d-line)}
.stage-tabs button{
  appearance:none;flex:1 1 auto;background:transparent;border:0;border-left:1px solid var(--d-line);color:var(--d-ink-3);
  padding:9px 10px;font-size:13px;font-weight:500;cursor:pointer;
}
.stage-tabs button:first-child{border-left:0}
.stage-tabs button:hover{color:var(--d-ink);background:rgba(148,163,184,.08)}
.stage-tabs button.on{background:var(--d-ink);color:var(--d-bg)}
.pid-note{padding:9px 14px;color:var(--d-ink-2);font-size:14px;margin:0;max-width:none;border-top:1px solid var(--d-line);min-height:2.9em}
.pid-side{display:flex;flex-direction:column;gap:16px;padding:14px}
.pid-side h4{margin:0 0 7px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--d-ink-3)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tile{background:var(--d-bg);border:1px solid var(--d-line);border-radius:6px;padding:8px 9px;min-width:0}
.tile b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.tile span{display:block;font-size:11.5px;line-height:1.3;color:var(--d-ink-3);margin-top:2px}
.tile.ok b{color:var(--d-ok)}
.tile.warn b{color:var(--d-hot)}
.slider{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;font-size:13px;color:var(--d-ink-2);margin-bottom:8px}
.slider output{font-family:var(--mono);font-size:12px;color:var(--d-ink)}
.slider input{grid-column:1/-1;width:100%;accent-color:#9fbcff}
.pid-answer{padding:12px 14px;background:rgba(255,207,92,.08);border-top:1px solid var(--d-line);font-size:15px;color:var(--d-ink-2);margin:0;max-width:none;min-height:3.4em}
.pid-answer b{color:var(--d-hot);font-weight:600}
.pid-tables{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-top:1px solid var(--d-line)}
.pid-tables > div{min-width:0;padding:12px 14px;max-height:430px;overflow:auto}
.pid-tables > div + div{border-left:1px solid var(--d-line)}
.pid-tables h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--d-ink)}
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink-3);padding:4px 8px 6px 0;border-bottom:1px solid var(--d-line-2)}
.dtable td{padding:6px 8px 6px 0;border-bottom:1px solid var(--d-line);color:var(--d-ink-2);vertical-align:top}
.dtable td:first-child{font-family:var(--mono);color:var(--d-ink);white-space:nowrap}
[data-pid-register] tr{cursor:pointer}
[data-pid-register] tr:hover td{background:rgba(148,163,184,.07)}
[data-pid-register] tr.on td{background:rgba(255,207,92,.12)}
.pid-open{padding:0 14px 12px;font-size:13.5px;color:var(--d-ok);margin:0;max-width:none}
.pid-open.bad{color:var(--d-bad)}
@media (max-width:980px){
  .pid-grid{grid-template-columns:1fr}
  .pid-main{border-right:0;border-bottom:1px solid var(--d-line)}
  .pid-tables{grid-template-columns:1fr}
  .pid-tables > div + div{border-left:0;border-top:1px solid var(--d-line)}
}

/* product page explainers */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);margin-top:24px;counter-reset:s}
.step{border-top:2px solid var(--rule-2);padding-top:12px;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.step h3{margin:5px 0 7px}
.step p{font-size:15px;color:var(--ink-2)}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:20px}
.split2 h3{margin-bottom:10px}
.split2 ul{margin:0;padding:0;list-style:none}
.split2 li{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15.5px}
@media (max-width:760px){.split2{grid-template-columns:1fr}}

/* ═══ EPC site: quieter type, navigation, lifecycle, connected documents ═══ */
h1{font-weight:700;letter-spacing:-.024em;line-height:1.08}
h2{font-weight:700;letter-spacing:-.018em}
.hq h1{font-size:clamp(34px,4.2vw,54px)}
.field select{width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:6px;background:var(--sheet);color:var(--ink);font:inherit;font-size:15px}

.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{appearance:none;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:6px 2px;display:flex;align-items:center;gap:6px}
.nav-drop-btn::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav-drop-btn:hover,.nav-drop-btn.is-current{color:var(--ink)}
.nav-panel{position:absolute;top:100%;left:-14px;width:340px;padding:8px;margin-top:0;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-2);display:none;z-index:60}
.nav-drop:hover .nav-panel,.nav-drop.is-open .nav-panel,.nav-drop:focus-within .nav-panel{display:block}
.nav-links .nav-panel a{display:block;padding:9px 11px;border:0;border-radius:6px}
.nav-links .nav-panel a:hover,.nav-links .nav-panel a.is-current{background:var(--accent-soft);border:0}
.nav-panel b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.nav-panel span{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:1px}
@media (max-width:860px){
  .nav-links{max-height:calc(100vh - 60px);overflow-y:auto}
  .nav-drop{display:block}
  .nav-drop-btn{width:100%;padding:11px 0;font-size:15.5px;justify-content:space-between}
  .nav-panel{position:static;width:auto;box-shadow:none;border:0;background:transparent;padding:0 0 6px;display:none}
  .nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{display:none}
  .nav-drop.is-open .nav-panel{display:block}
  .nav-links .nav-panel a{padding:7px 0 7px 12px}
  .nav-panel span{display:none}
}
.subnav{border-bottom:1px solid var(--rule);background:var(--ground-2)}
.subnav .wrap{display:flex;gap:6px 22px;align-items:center;flex-wrap:wrap;padding-block:9px;font-size:14px}
.subnav b{font-weight:600;margin-right:6px}
.subnav a{color:var(--ink-2);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.subnav a:hover,.subnav a.is-current{color:var(--ink);border-bottom-color:var(--accent)}
/* A jump should land on the heading, not on the band's top padding. */
.subnav-target{scroll-margin-top:calc(-1 * var(--band-pad))}

/* lifecycle */
.lc{--progress:25%;margin-top:26px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-1);overflow:hidden}
.lc-line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:18px;padding:18px 16px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--rule);background:var(--sheet-2)}
.lc-node{position:relative;appearance:none;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font-family:var(--display);padding:0 4px;z-index:1}
.lc-node::before,.lc-node::after{content:"";position:absolute;top:32px;height:3px;background:var(--rule-2);z-index:-1}
.lc-node::before{left:0;width:calc(50% - 32px)}
.lc-node::after{right:0;width:calc(50% - 32px)}
.lc-node:first-child::before,.lc-node:last-child::after{display:none}
.lc-node svg{width:64px;height:64px;padding:8px;background:var(--sheet);border:2px solid var(--rule-2);border-radius:50%;fill:none;stroke:currentColor;stroke-width:3;transition:background .15s,color .15s,border-color .15s}
.lc-node i{font-family:var(--mono);font-style:normal;font-size:10px;margin-top:6px}
.lc-node b{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink-2);text-align:center}
.lc-node:hover svg{border-color:var(--accent);color:var(--accent)}
.lc-node.on svg{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lc-node.on b{color:var(--ink)}
.lc-node:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.lc-panels{padding:clamp(18px,2.4vw,28px)}
.lc-panel{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.lc-panel[hidden]{display:none}
.lc-col h3{font-size:21px;margin-bottom:8px}
.lc-col > p{color:var(--ink-2);font-size:15px;margin-bottom:16px}
.lc-col h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 10px}
.lc-col ul{list-style:none;margin:0;padding:0}
.lc-col li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink-2)}
.lc-out{padding:7px 0;border-bottom:1px solid var(--rule)}
.lc-out b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.lc-out span{display:block;font-size:13px;color:var(--ink-3);line-height:1.35}
.lc-shot{display:block;text-decoration:none;font-size:14px;font-weight:600}
.lc-shot img{width:100%;height:100px;object-fit:cover;object-position:left top;border-radius:6px;border:1px solid var(--rule-2);margin-bottom:6px;background:var(--d-bg)}
.lc-more{display:block;margin-top:8px;font-size:14px;font-weight:600;text-decoration:none}
@media (max-width:960px){.lc-panel{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lc-panel{grid-template-columns:1fr}}

/* cost */
.cost-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,56px);align-items:center}
.cost-calc{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:clamp(16px,2vw,24px);box-shadow:var(--shadow-1)}
.cost-calc .field label{font-weight:500;color:var(--ink-2)}
.cost-out{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--rule);padding-top:14px}
.cost-out span{display:block;font-size:13px;color:var(--ink-3)}
.cost-out b{display:block;font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.02em;color:var(--pipe)}
.cost-out p{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);max-width:none}
@media (max-width:820px){.cost-grid{grid-template-columns:1fr}}
@media (max-width:440px){.cost-calc,.cost-out{grid-template-columns:1fr}}

/* connected documents */

/* integrations, trust */
.integ{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:22px}
.integ h3{padding-bottom:10px;border-bottom:2px solid var(--rule-2);margin-bottom:2px}
.integ p{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15px;max-width:none}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:20px}
.trust-grid > div{padding:6px 22px;border-left:1px solid var(--d-line)}
.trust-grid > div:first-child{border-left:0;padding-left:0}
.trust-grid b{display:block;font-size:18px;font-weight:600;color:#fff;line-height:1.25}
.trust-grid span{display:block;margin-top:4px;font-size:14px;color:var(--d-ink-3)}
@media (max-width:820px){
  .integ{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr;gap:18px 0}
  .trust-grid > div:nth-child(odd){border-left:0;padding-left:0}
}

/* sub pages */
.sub-hero{padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--rule)}
.sub-hero h1{font-size:clamp(32px,4.2vw,52px)}
.sub-hero .lead{margin-top:16px}
.sub-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:26px}
.sub-grid img{aspect-ratio:16/10;object-fit:cover;object-position:left top}
@media (max-width:860px){.sub-grid{grid-template-columns:1fr}}
.phase-rail{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.phase-rail a{flex:none;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;font-size:13px;color:var(--ink-2);text-decoration:none;background:var(--sheet)}
.phase-rail a:hover{border-color:var(--accent)}
.phase-rail a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.proof--light{background:var(--ground-2);color:var(--ink);border-bottom:1px solid var(--rule)}
.proof--light .pf{border-color:var(--rule)}
.proof--light .pf b{color:var(--ink);font-size:clamp(22px,2.4vw,30px)}
.proof--light .pf span{color:var(--ink-2)}
.proof-row--2{grid-template-columns:repeat(2,1fr)}
.proof-row--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){
  .proof-row--2,.proof-row--3{grid-template-columns:1fr}
  .proof-row--2 .pf,.proof-row--3 .pf{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .proof-row--2 .pf:first-child,.proof-row--3 .pf:first-child{border-top:0}
}
.table-wrap{overflow-x:auto;margin-top:20px}
.ltable{width:100%;border-collapse:collapse;min-width:560px}
.ltable th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 16px 10px 0;border-bottom:2px solid var(--rule-2)}
.ltable td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15px;vertical-align:top}
.ltable td:first-child{font-weight:600;color:var(--ink)}
.ltable td:last-child{color:var(--pipe);font-weight:500}
.also{margin-top:16px;font-size:15px;color:var(--ink-2)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.role{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:clamp(18px,2.4vw,28px)}
.role h3{font-size:21px;margin-bottom:10px}
.role ul{list-style:none;margin:0 0 14px;padding:0}
.role li{padding:8px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15px}
.role > a{font-weight:600;font-size:14.5px;text-decoration:none}
@media (max-width:720px){.roles{grid-template-columns:1fr}}
.faqs{margin-top:18px;max-width:800px}
.faq{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin-top:8px;color:var(--ink-2)}
.pilot-steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:p;width:100%}
.pilot-steps li{counter-increment:p;display:grid;grid-template-columns:28px 1fr;padding:9px 0;border-top:1px solid var(--rule)}
.pilot-steps li::before{content:counter(p);font-family:var(--mono);font-size:12px;color:var(--ink-3);grid-row:span 2}
.pilot-steps b{font-size:15px}
.pilot-steps span{font-size:14.5px;color:var(--ink-2)}
.footer--full{padding-block:44px 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:28px}
.foot-grid h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.foot-grid > div > a:not(.footer-brand){display:block;padding:3px 0;font-size:14px;color:var(--ink-2);text-decoration:none}
.foot-grid > div > a:not(.footer-brand):hover{color:var(--ink)}
.foot-brand p{font-size:14px;color:var(--ink-2);margin-top:12px}
.footer--full .footer-legal{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.chip{font-family:var(--display)}
.footer--full .footer-legal{max-width:none}
.sub-grid img{object-fit:contain;object-position:center}

/* ═══ motion ═══ */
.motion .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.motion .rv.seen{opacity:1;transform:none}
.nav{position:sticky}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.has-flow{position:relative;overflow:hidden}
.has-flow > .wrap{position:relative;z-index:1}
.flow-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* dark sub-page heroes */
.sub-hero{background:var(--d-bg);color:var(--d-ink);border-bottom:1px solid var(--d-line)}
.sub-hero h1{color:#fff}
.sub-hero .lead{color:var(--d-ink-2)}
.sub-hero .eyebrow{color:var(--d-ink-3)}
.sub-hero .eyebrow::after{background:var(--d-line)}
.phase-rail a{background:rgba(10,37,69,.8);color:var(--d-ink-2);border-color:var(--d-line-2)}
.phase-rail a:hover{border-color:var(--d-ink);color:#fff}
.phase-rail a.on{background:var(--d-ink);color:var(--d-bg);border-color:var(--d-ink)}

/* proof charts */
.pf-viz{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:11px;color:var(--d-ink-3)}
.pf-viz em{font-style:normal;font-family:var(--mono);font-size:10px}
.pf-viz i{display:block;height:6px;background:rgba(148,163,184,.12);border-radius:3px;overflow:hidden}
.pf-viz u{display:block;height:100%;width:0;background:#34d399;border-radius:3px;transition:width 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.pf-viz u.slow{background:#FF7B6B}
.pf.live .pf-viz u{width:var(--w)}
.pf-dots{display:grid;grid-template-columns:repeat(25,1fr);gap:2px}
.pf-dots s{display:block;aspect-ratio:1;background:#34d399;border-radius:1px;opacity:.15;transition:opacity .3s}
.pf.live .pf-dots s{opacity:1}
.pf-dots s.miss{background:#FFCF5C}
.pf-dots s:nth-child(n){transition-delay:calc(var(--i,0) * 1ms)}
.pf-file{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.pf-file code{background:rgba(148,163,184,.1);color:var(--d-ink-2);font-size:11px;padding:2px 7px;border-radius:3px}

/* lifecycle cards */
.lc-node{background:var(--sheet);border:1px solid var(--rule);border-radius:9px;padding:0 0 11px;overflow:visible;align-items:stretch;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s}
.lc-node::before{display:none}
.lc-node::after{top:44px;right:-19px;width:18px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px);display:block}
.lc-node:last-child::after{display:none}
.lc.in .lc-node::after{animation:lc-flow .7s linear infinite}
@keyframes lc-flow{to{background-position:8px 0}}
.lc-node:hover{transform:translateY(-2px);border-color:var(--rule-2)}
.lc-node.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-1)}
.lc-node i{margin:9px 11px 0;color:var(--ink-3)}
.lc-node b{margin:0 11px;text-align:left}
.lc-vig{display:block;aspect-ratio:180/96;background:#12182c;border-radius:8px 8px 0 0;overflow:hidden}
.lc-vig svg{display:block;width:100%;height:100%;padding:0;background:none;border:0;border-radius:0;stroke-width:initial}
.lc-node.on .lc-vig svg,.lc-node:hover .lc-vig svg{background:none;color:inherit}
/* each phase's work, as a small scene; the resting state is the finished picture */
.lc-vig svg *{vector-effect:none}
.lc-vig .d *{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.lc-vig .l *{stroke:#cbd5e1}
.lc-vig .s *{stroke:#34d399;stroke-width:2.2}
.lc-vig .r *{stroke:#ff7b6b;stroke-width:1.1}
.lc.in .lc-vig .d *{animation:vg-draw 6.5s var(--d,0s) infinite both}
@keyframes vg-draw{0%{stroke-dashoffset:1;opacity:1}12%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.lc-vig .solid *{fill:#1a2238;stroke:#cbd5e1;stroke-width:1.4}
.lc-vig .p circle{fill:#12182c;stroke:#a9b6ca;stroke-width:1.2}
.lc.in .lc-vig .p circle{animation:vg-pop 6.5s var(--d,0s) infinite both}
@keyframes vg-pop{0%{opacity:0}4%,76%{opacity:1}84%,100%{opacity:0}}
/* procurement */
.lc-vig .rows rect{fill:#7f96ff;transform-box:fill-box;transform-origin:0 50%}
.lc.in .lc-vig .rows rect{animation:vg-row 6.5s var(--d,0s) infinite both}
@keyframes vg-row{0%{transform:scaleX(0)}6%,88%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
.lc-vig .po{font:700 11px var(--mono);fill:#34d399}
.lc.in .lc-vig .po{animation:vg-po 6.5s infinite both}
@keyframes vg-po{0%,28%{opacity:0}31%,88%{opacity:1}94%,100%{opacity:0}}
.lc-vig .road{stroke:#5b6675;stroke-width:1.4;stroke-dasharray:9 7}
.lc.in .lc-vig .road{animation:vg-road .6s linear infinite}
@keyframes vg-road{to{stroke-dashoffset:16}}
.lc-vig .bed{fill:#5b6675}.lc-vig .pipe{fill:#b4bdcb}.lc-vig .cab{fill:#7f96ff}.lc-vig .glass{fill:#12182c}.lc-vig .wh{fill:#0b1020;stroke:#a9b6ca;stroke-width:2}
.lc.in .lc-vig .truck{animation:vg-truck 6.5s infinite both}
@keyframes vg-truck{0%,34%{transform:translateX(-96px);opacity:0}36%{opacity:1;transform:translateX(-96px)}56%,72%{transform:translateX(0);opacity:1}92%,100%{transform:translateX(70px);opacity:1}}
/* construction */
.lc-vig .crane *{fill:none;stroke:#ffcf5c;stroke-width:1.8;stroke-linejoin:round}
.lc-vig .crane rect{fill:#ffcf5c}
.lc-vig .rack *{fill:none;stroke:#8a97ad;stroke-width:1.8}
.lc-vig .trolley{fill:#ffcf5c}.lc-vig .cable{fill:#cbd5e1;transform-box:fill-box;transform-origin:50% 0}
.lc-vig .load path{fill:none;stroke:#34d399;stroke-width:3;stroke-linejoin:round}
.lc-vig .load .hook{stroke:#cbd5e1;stroke-width:.9}
.lc-vig .tr{transform:translateX(78px)}
.lc-vig .load{transform:translateY(18px)}.lc-vig .cable{transform:scaleY(1.9)}
.lc.in .lc-vig .tr{animation:vg-tr 6.5s ease-in-out infinite both}
.lc.in .lc-vig .load{animation:vg-load 6.5s ease-in-out infinite both}
.lc.in .lc-vig .cable{animation:vg-cable 6.5s ease-in-out infinite both}
@keyframes vg-tr{0%,10%{transform:translateX(0)}45%,100%{transform:translateX(78px)}}
@keyframes vg-load{0%,45%{transform:translateY(0)}68%,100%{transform:translateY(18px)}}
@keyframes vg-cable{0%,45%{transform:scaleY(1)}68%,100%{transform:scaleY(1.9)}}
/* handover */
.lc-vig .clip{fill:#8a97ad}
.lc-vig .chk rect{fill:#5b6675}
.lc-vig .stamp{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(-9deg)}
.lc-vig .stamp rect{fill:rgba(18,24,44,.92);stroke:#34d399;stroke-width:2}
.lc-vig .stamp text{font:700 11px var(--mono);fill:#34d399}
.lc.in .lc-vig .stamp{animation:vg-stamp 6.5s infinite both}
@keyframes vg-stamp{0%,40%{opacity:0;transform:rotate(-9deg) scale(1.9)}44%{opacity:1;transform:rotate(-9deg) scale(1)}86%{opacity:1;transform:rotate(-9deg) scale(1)}94%,100%{opacity:0;transform:rotate(-9deg) scale(1)}}
.lc-panel:not([hidden]){animation:lc-in .4s ease}
@keyframes lc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* walkthrough */
.walk{padding-top:var(--band-pad)}
.walk-bar{position:sticky;top:66px;z-index:40;background:var(--ground);border-block:1px solid var(--rule);margin-top:14px}
.walk-bar .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.walk-bar a{flex:none;padding:7px 13px;border-radius:6px;color:var(--ink-3);font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.walk-bar a i{font-family:var(--mono);font-style:normal;font-size:11px;margin-right:7px;opacity:.75}
.walk-bar a:hover{color:var(--ink)}
.walk-bar a.on{background:var(--sheet);color:var(--ink);box-shadow:0 0 0 1px var(--rule-2)}
.walk-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,52px);align-items:center;padding-block:clamp(38px,5.5vw,80px);border-bottom:1px solid var(--rule);scroll-margin-top:53px}
.walk-step:last-child{border-bottom:0}
.walk-step.flip .walk-copy{order:2}
.walk-k{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.walk-copy h3{font-size:clamp(23px,2.5vw,31px);font-weight:700;letter-spacing:-.018em;line-height:1.18;margin:9px 0 12px}
.walk-copy p{color:var(--ink-2)}
.walk-copy ul{list-style:none;margin:14px 0;padding:0}
.walk-copy li{padding:7px 0 7px 22px;position:relative;color:var(--ink-2);font-size:15px}
.walk-copy li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:2px;background:var(--pipe)}
.walk-copy a{font-weight:600;font-size:15px;text-decoration:none}
@media (max-width:900px){
  .walk-step{grid-template-columns:1fr}
  .walk-step.flip .walk-copy{order:0}
  .walk-bar{top:60px}
}

@keyframes t-flow{to{stroke-dashoffset:-18}}

/* cost */
.cost-bars{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.cost-bars em{font-style:normal}
.cost-bars i{display:block;height:9px;background:var(--accent-soft);border-radius:4px;overflow:hidden}
.cost-bars u{display:block;height:100%;background:var(--dim);border-radius:4px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cost-bars u.good{background:var(--pipe)}
.cost-bars b{font-size:13px;font-weight:600;color:var(--ink);text-align:right}
.cost-bars b:not(#x){font-size:13px}

/* integration flow */
.flowmap{display:grid;grid-template-columns:1fr 90px 210px 90px 1fr;align-items:stretch;margin-top:24px}
.integ-col h3{padding-bottom:9px;border-bottom:2px solid var(--rule-2)}
.integ-col p{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:14.5px;max-width:none}
.flow-pipes{width:100%;height:100%;display:block;overflow:visible}
.flow-pipes path{fill:none;stroke:var(--rule-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.flowmap.in .flow-pipes path{stroke:var(--pipe);stroke-dasharray:7 7;animation:t-flow-b 1.1s linear infinite}
@keyframes t-flow-b{to{stroke-dashoffset:-14}}
.flow-mid{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 14px;background:var(--sheet);border:1px solid var(--rule-2);border-radius:12px;box-shadow:var(--shadow-1)}
.flow-mid img{border-radius:12px}
.flow-mid b{font-size:17px}
.flow-mid span{font-size:13px;color:var(--ink-2)}
.connects{margin-top:18px;max-width:none;color:var(--ink-2);font-size:14.5px}
.connects b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:10px}
@media (max-width:900px){.flowmap{grid-template-columns:1fr;gap:18px}.flow-pipes{display:none}}

/* security boundary */
.boundary{margin:20px 0 6px;overflow-x:auto}
.boundary svg{display:block;width:100%;min-width:640px;height:auto}
.boundary text{font-family:var(--mono);font-size:13px;fill:var(--ink-2)}
.b-zone{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:7 5}
.boundary.in .b-zone{animation:t-flow 2.4s linear infinite}
.b-box rect{fill:var(--sheet);stroke:var(--rule-2);stroke-width:1.5}
.b-core rect{fill:var(--accent)}
.boundary .b-core text{fill:var(--accent-ink);font-weight:700}
.b-flow{fill:none;stroke:var(--pipe);stroke-width:2.5;stroke-dasharray:6 6}
.boundary.in .b-flow{animation:t-flow-b .9s linear infinite}
.b-block{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-dasharray:3 6}
.b-x{fill:none;stroke:var(--dim);stroke-width:3}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.pf b .count{display:inline;font-size:inherit;color:inherit;margin:0;line-height:inherit}
.walk-step{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.walk-step.flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
@media (max-width:900px){.walk-step,.walk-step.flip{grid-template-columns:1fr}}
.m-ken > img{object-position:50% 100%;transform:scale(1.5);transform-origin:50% 90%}
@keyframes m-ken{to{transform:scale(1.9) translate(-4%,2%)}}

/* ═══ photography ═══ */
.hq--photo{display:flex;min-height:min(calc(100vh - 66px),760px);padding:0}
.hq--photo::before{display:none}
.hq-photo{position:absolute;inset:0;background:url(assets/photos/welder-in-pipe.jpg) center/cover;transform:scaleX(-1);overflow:hidden}
.hq--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,32,.94) 0%,rgba(11,16,32,.78) 38%,rgba(11,16,32,.08) 72%),linear-gradient(0deg,rgba(11,16,32,.55),transparent 30%);pointer-events:none}
.motion .hq-photo{animation:hq-ken 26s ease-in-out infinite alternate}
@keyframes hq-ken{from{transform:scaleX(-1) scale(1)}to{transform:scaleX(-1) scale(1.07)}}
.hq--photo .hq-copy{z-index:2}
@media (max-width:980px){
  .hq--photo{display:flex;min-height:560px;padding:0;align-items:flex-end}
  .hq--photo::after{background:linear-gradient(0deg,rgba(11,16,32,.96) 0%,rgba(11,16,32,.82) 52%,rgba(11,16,32,.1) 100%)}
  .hq--photo .hq-copy{padding-block:150px 34px}
}
.sub-hero.has-photo{position:relative;background-size:cover;background-position:center;background-color:var(--d-bg)}
.sub-hero.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,32,.95),rgba(11,16,32,.78) 55%,rgba(11,16,32,.5));pointer-events:none}
.sub-hero.has-photo > .wrap{position:relative;z-index:1}
/* Carries the page, so it fills the screen under the nav and the subnav. */
.sub-hero--fill{min-height:calc(100svh - 113px);display:flex;align-items:center}
.sub-hero--fill > .wrap{width:100%}
.sub-hero--fill.has-photo::before{background:linear-gradient(90deg,rgba(11,16,32,.96),rgba(11,16,32,.9) 42%,rgba(11,16,32,.74))}
@media (max-width:900px){.sub-hero--fill{min-height:0;display:block}}
.sub-hero .stat span{color:var(--d-ink-3)}
.sub-hero .rulewide{background:var(--d-line)}
.lc-photo{width:100%;height:120px;object-fit:cover;border-radius:7px;margin-bottom:12px;display:block}
.field-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,17vw,230px);gap:10px;margin-top:24px}
.field-grid figure{margin:0;overflow:hidden;border-radius:8px;background:var(--d-bg)}
.field-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.field-grid figure:hover img{transform:scale(1.04)}
.fg-a{grid-column:span 7;grid-row:span 2}
.fg-b{grid-column:span 5}
.fg-c{grid-column:span 5}
.fg-d{grid-column:span 12;display:none}
@media (max-width:640px){.fg-a,.fg-b,.fg-c{grid-column:span 12;grid-row:span 1}}
.role > img{width:calc(100% + 2*clamp(18px,2.4vw,28px));max-width:none;height:180px;object-fit:cover;margin:calc(-1*clamp(18px,2.4vw,28px)) calc(-1*clamp(18px,2.4vw,28px)) 16px;border-radius:10px 10px 0 0;display:block}
.role{overflow:hidden}
.credits img{width:96px;height:60px;object-fit:cover;border-radius:4px;display:block}
.credits td:last-child{color:var(--ink-2);font-weight:400}
.credits a{word-break:break-word}


/* ═══ palette: indigo and slate, with a touch of cadmium steel ═══ */
:root{
  --steel:linear-gradient(135deg,#f8fafc 0%,#d5dbe5 34%,#f3f5f9 52%,#b9c2cf 100%);
  --steel-line:linear-gradient(90deg,#b9c2cf,#eef1f6 45%,#aab4c3);
}
.eyebrow{color:#3f5cf6}
.eyebrow::after{background:var(--steel-line);opacity:.8}
.band--dark .eyebrow,.hq .eyebrow,.sub-hero .eyebrow{color:#9fbcff}
.band--dark .eyebrow::after,.hq .eyebrow::after,.sub-hero .eyebrow::after{background:linear-gradient(90deg,rgba(203,213,225,.5),rgba(203,213,225,.08));opacity:1}
.nav{border-bottom:1px solid transparent;border-image:var(--steel-line) 1}
.nav-progress{background:linear-gradient(90deg,#3f5cf6,#9aa6b8)}
.lc,.role,.cost-calc,.flow-mid{background:linear-gradient(#fff,#fff) padding-box,var(--steel) border-box;border:1px solid transparent}
.lc-line{background:linear-gradient(180deg,#fbfcfe,#f1f4f8)}
.flow-mid img{box-shadow:0 2px 10px rgba(15,23,42,.2)}
.field-grid figure{box-shadow:0 0 0 1px rgba(148,163,184,.35)}
.lc-node.on{border-color:#3f5cf6;box-shadow:0 0 0 1px #3f5cf6,var(--shadow-1)}
.prod-shot{border-color:#cfd6e0}
.walk-bar a.on{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #cfd6e0;background:linear-gradient(180deg,#fff,#eef1f6)}
.hq--photo::after{background:linear-gradient(90deg,rgba(11,16,32,.95) 0%,rgba(11,16,32,.78) 38%,rgba(11,16,32,.06) 72%),linear-gradient(0deg,rgba(11,16,32,.5),transparent 30%)}

/* ═══ a section that fits one screen ═══ */
.fit-screen{height:calc(100svh - 67px);min-height:520px;padding-block:18px 16px;display:flex;scroll-margin-top:67px}
.fit-screen > .wrap{display:flex;flex-direction:column;min-height:0;width:100%}
.fit-screen .eyebrow{margin-bottom:6px}
.fit-screen h2{font-size:clamp(23px,2.5vw,32px);margin:0}
.fit-screen .lead{font-size:15px;margin:3px 0 0;max-width:none}
.fit-screen .lab{flex:1;min-height:0;margin-top:12px;display:flex;flex-direction:column}
.fit-screen .iso-view{flex:1;height:auto;min-height:0}
.fit-screen .lab-foot{padding:8px 12px 10px}
.fit-screen .lab-note{margin:6px 2px 0;font-size:13.5px;min-height:0}
.fit-screen .lab-row{margin-top:6px}
.fit-screen .fineprint{margin-top:7px;font-size:12px}
@media (max-width:860px){.fit-screen{height:calc(100svh - 61px);scroll-margin-top:61px}.fit-screen .lead{display:none}}
@media (max-height:640px){.fit-screen .fineprint,.fit-screen .eyebrow{display:none}}

/* ═══ text beside the recording, swapping sides on each step ═══ */
.walk .wrap{max-width:1560px}
.walk-step{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.walk-step.flip{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.walk-step.flip .walk-copy{order:2}
.walk-copy{display:block}
.walk-step .mock-wrap{max-width:min(100%,calc((100svh - 150px)*1.6));margin-inline:auto}
.walk-copy h3{font-size:clamp(22px,2vw,28px)}
.walk-copy p,.walk-copy li{font-size:15px}
.sub-hero .wrap:has(.sub-grid){max-width:1560px}
.sub-grid{grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.sub-grid > div:first-child{max-width:none}
.sub-grid h1{font-size:clamp(30px,2.9vw,42px)}
.sub-grid .lead{font-size:16px}
.sub-grid .mock-wrap{max-width:min(100%,calc((100svh - 120px)*1.6));margin-inline:auto;width:100%}
.prod:nth-of-type(even) > div:first-child{order:2}
.prod .mock-wrap{align-self:center}
.rec-split{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center;margin-top:34px}
.rec-split .demo-title{margin:0 0 8px}
.rec-split p{color:var(--ink-2);font-size:15px}
@media (max-width:1000px){
  .walk-step,.walk-step.flip,.sub-grid,.rec-split{grid-template-columns:minmax(0,1fr)}
  .walk-step.flip .walk-copy{order:0}
  .prod:nth-of-type(even) > div:first-child{order:0}
}

/* ═══ the recording frame ═══ */
.mock-wrap{position:relative;min-width:0;width:100%;aspect-ratio:1280/800}
.mock{--s:1;position:absolute;left:0;top:0;width:1280px;height:800px;transform:scale(var(--s));transform-origin:0 0;display:flex;flex-direction:column;overflow:hidden;
  user-select:none;-webkit-user-select:none;pointer-events:none;cursor:default;
  background:#1f232a;color:#c9ced6;font:12px/1.35 "Segoe UI",system-ui,-apple-system,Roboto,"Fira Sans",sans-serif;
  border:1px solid #0c0e11;border-radius:8px;box-shadow:0 2px 6px rgba(15,23,42,.25),0 30px 70px rgba(15,23,42,.38)}
.mock img{-webkit-user-drag:none}
.mock::after{content:"";position:absolute;inset:0;background:#1f232a;opacity:0;transition:opacity .35s;z-index:60;pointer-events:none}
.mock.out::after{opacity:1}
.mock *{box-sizing:border-box}
.mock .ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.w-title{height:30px;flex:none;display:flex;align-items:center;gap:8px;padding-left:10px;background:#16191e;color:#aab1bb;font-size:12px}
.w-title img{width:15px;height:15px;border-radius:2px}
.w-ctl{margin-left:auto;display:flex;height:100%}
.w-ctl i{width:44px;display:grid;place-items:center;font-style:normal;font-size:11px;color:#9aa2ad}
.w-menu{height:24px;flex:none;display:flex;align-items:center;gap:2px;padding:0 6px;background:#1b1f25;border-bottom:1px solid #111317}
.w-menu span{padding:3px 8px;border-radius:3px}
.w-menu span.on{background:#3f5cf6;color:#fff}
.w-menu em{margin-left:auto;font-style:normal;color:#7d8590;padding-right:6px}
.w-drop{position:absolute;left:252px;top:54px;width:236px;background:#252a32;border:1px solid #0e1013;box-shadow:0 8px 22px rgba(0,0,0,.55);padding:4px 0;z-index:40;display:none}
.w-drop.on{display:block}
.w-drop div{display:flex;justify-content:space-between;padding:4px 14px 4px 24px}
.w-drop em{font-style:normal;color:#7d8590}
.w-drop hr{border:0;border-top:1px solid #383e48;margin:4px 0}
.w-drop .hover{background:#3f5cf6;color:#fff}.w-drop .hover em{color:#dfe5ff}
.w-tools{height:36px;flex:none;display:flex;align-items:center;gap:2px;padding:0 8px;background:#262b33;border-bottom:1px solid #111317}
.w-tools u{width:1px;height:20px;background:#3c434e;margin:0 5px;text-decoration:none}
.t-btn{height:26px;min-width:26px;padding:0 6px;display:inline-flex;align-items:center;gap:6px;border-radius:3px;color:#b7bdc7;transition:background .12s}
.t-btn em{font-style:normal;color:#e2e6ec}
.t-btn.wide{background:#323843;border:1px solid #424954;margin-right:4px}
.t-btn.down{background:#3f5cf6;border-color:#3f5cf6;color:#fff}
.t-sel{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 7px;margin-left:6px;background:#1b1f25;border:1px solid #3a404a;border-radius:2px;color:#8b929c}
.t-sel b{font-weight:400;color:#d7dbe1}
.t-sel:first-of-type{margin-left:auto}
.w-body{flex:1;min-height:0;display:flex}
.dock{width:224px;flex:none;background:#21252c;display:flex;flex-direction:column;min-height:0}
.d-l{border-right:1px solid #111317}.d-r{width:256px;border-left:1px solid #111317}
.dh{height:24px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:#2a2f38;font-size:11px;font-weight:600;color:#c4c9d1}
.dh .pn{width:12px;height:12px;color:#7d8590}
.ds{margin:5px 6px;height:22px;display:flex;align-items:center;gap:6px;padding:0 6px;background:#181b20;border:1px solid #363c46;color:#6f7782;flex:none}
.ds .ic{width:12px;height:12px}
.dc{flex:1;min-height:0;overflow:hidden}
.tr{height:21px;display:flex;align-items:center;gap:4px;padding-right:6px;white-space:nowrap}
.tr .car{width:10px;height:10px;color:#79818c}.tr .sp{width:10px;flex:none}
.tr span{overflow:hidden;text-overflow:ellipsis}
.tr.on{background:#2e3f7f;color:#fff}
.k-folder{color:#c9a34e}.k-sheet{color:#8fa8d9}.k-cube{color:#6fc4b8}.k-list{color:#a7b0bd}.k-pipe{color:#6fd39c}.k-layers{color:#a7b0bd}
.tb{margin-left:auto;font-weight:400;font-size:10px;padding:0 5px;border-radius:7px;background:#39404b;color:#c2c7cf;line-height:14px}
.tb.ok{background:#1c4733;color:#6fe0a7}.tb.wip{background:#26357f;color:#c5d0ff}.tb.warn{background:#5c4413;color:#f3c869}
.pg{height:22px;display:flex;align-items:center;gap:4px;padding:0 6px;background:#272c34;font-weight:600;color:#c4c9d1;border-block:1px solid #1a1d22}
.pg .car{width:10px;height:10px}
.pr{display:grid;grid-template-columns:44% 56%;height:21px;align-items:center;border-bottom:1px solid #2a2f37}
.pr span{padding-left:18px;color:#98a0ab;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pr b{font-weight:400;padding:0 6px;color:#dde1e7;border-left:1px solid #2a2f37;line-height:21px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pr i{font-style:normal}
.w-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.w-doc{flex:1;min-height:0;display:flex;flex-direction:column}
.tabs{height:27px;flex:none;display:flex;align-items:flex-end;background:#1b1f25;padding-left:2px;gap:1px}
.tab{height:25px;display:flex;align-items:center;gap:6px;padding:0 9px;background:#262b33;color:#99a1ac;border-top:2px solid transparent;white-space:nowrap}
.tab.on{background:#101318;color:#eef0f3;border-top-color:#3f5cf6}
.tab .ic{width:12px;height:12px}.tab .tx{width:10px;height:10px;opacity:.6}
.tabs.b{height:25px}.tabs.b .tab{height:23px}.tabs.b .tab.on{background:#1b1e24}
.canvas{position:relative;flex:1;min-height:0;background:#101318;overflow:hidden}
.pane{position:absolute;inset:0;display:none}.pane.on{display:block}
.pane .fill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pane.ken .fill,.pane[data-pane=model] .fill{object-fit:cover}
.pane.sheet{background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);background-size:24px 24px}
.pane.sheet .fill{left:18px;top:18px;width:calc(100% - 18px);height:calc(100% - 18px);padding:8px}
.rul-h,.rul-v{position:absolute;z-index:3;background-color:#23272e}
.rul-h{left:0;right:0;top:0;height:18px;background-image:repeating-linear-gradient(90deg,#596270 0 1px,transparent 1px 12px);background-size:100% 5px;background-position:0 100%;background-repeat:no-repeat;border-bottom:1px solid #111317}
.rul-v{top:0;bottom:0;left:0;width:18px;background-image:repeating-linear-gradient(0deg,#596270 0 1px,transparent 1px 12px);background-size:5px 100%;background-position:100% 0;background-repeat:no-repeat;border-right:1px solid #111317}
.ken .fill{transform-origin:55% 55%}
.ken.run .fill{animation:i-ken 12s ease-in-out infinite alternate}
@keyframes i-ken{to{transform:scale(1.28) translate(-3%,2%)}}
.vcube{position:absolute;right:16px;top:14px;width:60px;height:60px;display:grid;place-items:center;background:linear-gradient(135deg,#e7ebf1,#b7c0cc);color:#1f2a3a;font-size:10px;border:1px solid #6b7583;transform:perspective(160px) rotateX(16deg) rotateY(-22deg);opacity:.92}
.vaxis{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;font-size:11px}
.vaxis i{font-style:normal}.vaxis i:nth-child(1){color:#ff7b6b}.vaxis i:nth-child(2){color:#34d399}.vaxis i:nth-child(3){color:#7f96ff}
.tablepane{background:#181b20;overflow:hidden}
.w-bot{height:176px;flex:none;display:flex;flex-direction:column;border-top:1px solid #0c0e11;background:#1b1e24}
.b-c{flex:1;min-height:0;overflow:hidden}
.log{margin:0;height:100%;padding:6px 10px;overflow:hidden;font:11.5px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;color:#b9c0ca;white-space:pre-wrap}
.log .g{color:#6fe0a7}
.dg{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto}
.dg th{position:sticky;top:0;text-align:left;font-weight:400;height:22px;padding:0 8px;background:#2a2f38;color:#b3b9c3;border-right:1px solid #1a1d22;border-bottom:1px solid #111317}
.dg td{height:21px;padding:0 8px;border-right:1px solid #272b32;border-bottom:1px solid #272b32;white-space:nowrap;color:#d4d8de}
.dg .row{opacity:0}
.dg .row.on{opacity:1}
.dg .row.sel td{background:#2e3f7f;color:#fff}
.dg .row.up td:last-child{color:#ff8b7c;font-weight:600}
.dg .row.dn td:last-child{color:#6fe0a7;font-weight:600}
.dg .row.up td,.dg .row.dn td{background:rgba(245,190,70,.07)}
.dg .row.g td:nth-child(3),.dg .row.g td:first-child{color:#6fe0a7}
.dg .row.old td{color:#ff8b7c;text-decoration:line-through}
.dg.wide td{height:24px}.dg.wide th{height:24px}
.clouds{position:absolute;left:18px;top:18px;width:calc(100% - 18px);height:calc(100% - 18px);opacity:0;transition:opacity .4s;z-index:2}
.clouds ellipse{fill:rgba(255,123,107,.07);stroke:#ff7b6b;stroke-width:.3;stroke-dasharray:1 .6;vector-effect:none}
.revs.run .clouds{opacity:1}
.pin{position:absolute;z-index:3;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ff7b6b;color:#111;font-size:11px;font-weight:600;opacity:0;transition:opacity .3s .4s}
.revs.run .pin{opacity:1}
.w-stat{height:22px;flex:none;display:flex;align-items:center;gap:14px;padding:0 10px;background:#2c3a7a;color:#e5e9ff;font-size:11.5px}
.w-stat .sp2{flex:1}
.w-stat .prog{display:block;width:150px;height:9px;background:rgba(255,255,255,.2);opacity:0}
.w-stat .prog.on{opacity:1}
.w-stat .prog u{display:block;height:100%;width:0;background:#fff;transition:width .18s ease-out}
.w-stat .on{background:rgba(255,255,255,.2);padding:0 6px}
.dlg{position:absolute;left:50%;top:44%;width:360px;margin-left:-180px;background:#2a2f38;border:1px solid #0c0e11;box-shadow:0 14px 40px rgba(0,0,0,.6);z-index:45;display:none}
.dlg.on{display:block}
.dlg-t{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#1b1f25;color:#d7dbe1}
.dlg-t i{font-style:normal;font-size:11px}
.dlg-b{display:flex;gap:12px;padding:16px 14px}
.dlg-b .ic{width:26px;height:26px;color:#6fe0a7}
.dlg-b p{margin:0;max-width:none;color:#dde1e7;line-height:1.5}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 12px}
.dbtn{min-width:76px;height:26px;display:grid;place-items:center;background:#3a404b;border:1px solid #4a515d;border-radius:3px;color:#e6e9ee}
.dbtn.pri{background:#3f5cf6;border-color:#3f5cf6;color:#fff}
.dbtn.down{filter:brightness(.82)}
.m-cursor svg{display:block;width:100%;height:100%}
.m-cursor.off{display:none}

/* ═══ metrics sit on the banner photo ═══ */
.hq--photo{flex-direction:column;align-items:stretch;min-height:min(calc(100svh - 67px),880px)}
.hq--photo .hq-copy{flex:1;display:flex;align-items:center;width:100%;padding-block:clamp(28px,5vh,64px)}
.proof--over{position:relative;z-index:2;background:transparent;border-bottom:0;border-top:1px solid rgba(226,232,240,.2)}
.proof--over .pf{padding-block:20px 22px;border-color:rgba(226,232,240,.2)}
.proof--over .pf > span{color:#dbe2ec}
.proof--over .pf-viz{color:#cbd5e1}
.proof--over .pf-viz i{background:rgba(255,255,255,.16)}
.proof--over .pf-file code{background:rgba(255,255,255,.12);color:#e2e8f0}
.hq--photo::after{background:linear-gradient(90deg,rgba(11,16,32,.95) 0%,rgba(11,16,32,.78) 38%,rgba(11,16,32,.06) 72%),linear-gradient(0deg,rgba(11,16,32,.88) 0%,rgba(11,16,32,.62) 20%,transparent 42%)}
@media (max-width:980px){
  .hq--photo{min-height:0;padding-top:120px}
  .hq--photo .hq-copy{padding-block:34px 26px}
  .hq--photo::after{background:linear-gradient(0deg,rgba(11,16,32,.96) 0%,rgba(11,16,32,.84) 62%,rgba(11,16,32,.12) 100%)}
}

/* ═══ buttons: plain and solid, no gloss ═══ */
.btn{border-radius:4px;font-size:14.5px;font-weight:500;letter-spacing:0;padding:10px 20px;box-shadow:none;transition:background .15s,border-color .15s,color .15s}
.btn--sm{font-size:13.5px;padding:7px 14px}
.btn--primary,.btn--primary:focus-visible{background:#3f5cf6;border-color:#3f5cf6;color:#fff}
.btn--primary:hover{background:#2f49d1;border-color:#2f49d1;color:#fff}
.btn--ghost{background:transparent;border-color:rgba(15,23,42,.28);color:#1e293b}
.btn--ghost:hover{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.45);color:#0f172a}
.btn--on-dark{background:#fff;border-color:#fff;color:#0f172a}
.btn--on-dark:hover{background:#e2e8f0;border-color:#e2e8f0;color:#0f172a}
.btn--line-dark{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn--line-dark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}

/* ═══ passes: entities appear as drawn; nothing fades or wipes ═══ */
.m-cursor{position:absolute;left:0;top:0;width:17px;height:19px;z-index:50;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));will-change:transform}
.m-cursor svg{display:block;width:100%;height:100%;transition:transform .07s}
.m-cursor.press svg{transform:scale(.88);transform-origin:0 0}
.m-cursor.off{display:none}
.m-cursor b{position:absolute;left:15px;top:14px;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;display:none;animation:m-spin .8s linear infinite}
.m-cursor.busy b{display:block}
@keyframes m-spin{to{transform:rotate(360deg)}}
.slot{position:absolute;left:18px;top:18px;right:0;bottom:0;padding:8px}
.slot svg{display:block;width:100%;height:100%}
.slot [data-l]{visibility:hidden}
.slot [data-l].v,.slot.show-base [data-l="base"],.slot [data-l="raw"],.slot [data-l="dupe"]{visibility:visible}
.slot [data-l="raw"].x,.slot [data-l="dupe"].x{visibility:hidden}
.dg.pend td:nth-child(5),.dg.pend td:nth-child(6){color:transparent}
.dg.pend.b td:nth-child(5){color:#d4d8de}
.dg.pend.c td:nth-child(6){color:#d4d8de}
.dg.pend:not(.c) .row.up td,.dg.pend:not(.c) .row.dn td{background:transparent}
.dg.pend.c .row.up td:last-child{color:#ff8b7c}.dg.pend.c .row.dn td:last-child{color:#6fe0a7}
.ken .stage-a,.ken .stage-b{visibility:hidden}
.ken .stage-a.on,.ken .stage-b.on{visibility:visible}
.v-load{position:absolute;left:50%;top:46%;width:240px;margin-left:-120px;z-index:2;text-align:center;color:#aab1bb}
.v-load i{display:block;height:4px;margin-top:8px;background:#2a2f38}
.v-load u{display:block;height:100%;width:6%;background:#7f96ff;transition:width .2s ease-out}
.v-load.small{top:auto;left:auto;right:14px;bottom:10px;width:190px;margin:0;text-align:left;font-size:11px}
.v-load.gone{display:none}
.dg.pend:not(.b) .row td:nth-child(5),.dg.pend:not(.c) .row td:nth-child(6){color:transparent!important}

/* "Start a pilot" carries a plain arrow, drawn in the button's own text colour */
.btn[href="#contact"]::after,.cta-form .btn[type="submit"]::after{
  content:"";flex:none;width:15px;height:15px;background:currentColor;transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn[href="#contact"]:hover::after,.cta-form .btn[type="submit"]:hover::after{transform:translateX(2px)}
@media (max-width:420px){.nav-actions .btn[href="#contact"]::after,.cta-form .btn[type="submit"]::after{display:none}}

.lc-note{margin-top:14px;font-size:15px;color:var(--ink-2);max-width:none}
.lc-note a{font-weight:600;text-decoration:none}
.nav-panel .nav-sub{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 11px 3px;margin-top:4px;border-top:1px solid var(--rule)}

/* equipment recording: vendor GA beside the model */
.pane.eq{display:none;grid-template-columns:1fr 1fr}
.pane.eq.on{display:grid}
.eq-a{position:relative;border-right:1px solid #0c0e11;overflow:hidden}
.eq-b{position:relative;overflow:hidden;background:#0d1016}
.eqi{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden}
.eqi.on{visibility:visible}
.eq .vcube{width:46px;height:46px;font-size:9px;right:10px;top:10px}

.footer--full .footer-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.footer--full .footer-brand img{width:30px;height:30px;border-radius:7px}
.footer--full .footer-brand b{font-weight:800;letter-spacing:-.025em;font-size:17.5px}

/* project phase icons */
.ni{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-links .nav-panel a.has-ic{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:center}
.nav-panel a.has-ic .ni{grid-row:1/span 2;width:24px;height:24px;color:var(--accent)}
.nav-panel a.has-ic b,.nav-panel a.has-ic span{grid-column:2}
.nav-panel a.has-ic:hover{--ic-bg:#f1f3fe}
.phase-rail a{display:inline-flex;align-items:center;gap:7px;--ic-bg:#12182c}
.phase-rail a .ni{width:16px;height:16px}
.phase-rail a.on{--ic-bg:#f1f5f9}
@media (max-width:860px){
  .nav-panel a.has-ic .ni{grid-row:1;width:20px;height:20px}
  .nav-links .nav-panel a.has-ic{grid-template-columns:20px minmax(0,1fr);column-gap:10px}
}
@media (min-width:861px){.nav-panel:has(.has-ic){width:390px}}