/* Technical vector system: shared strokes, draw-in animations, component layouts. All motion gated on .is-live (viewport) and disabled by prefers-reduced-motion. */
.vec{--ink:var(--navy);--ink-2:#8FA0B8;--accent:var(--rose);--fill:#E9EDF3;--fill-2:#D5DCE6;position:relative;font-family:var(--font-mono)}
.on-dark .vec,.section--navy .vec,.section--deep .vec{--ink:#fff;--ink-2:rgba(255,255,255,.55);--fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.16);--accent:var(--rose-200)}
.vec__svg{width:100%;height:auto;overflow:visible}
.vec__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin-bottom:.75rem}
.vec__title{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vec__tabs{display:flex;gap:.25rem;background:var(--neutral-100);padding:.2rem;border-radius:999px}
.on-dark .vec__tabs{background:rgba(255,255,255,.08)}
.vec__tabs button{border:0;background:none;padding:.45rem 1rem;border-radius:999px;font:700 .8rem var(--font-display);letter-spacing:.03em;color:var(--text-2);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.vec__tabs button:hover{color:var(--navy);background:rgba(33,55,87,.08)}
.on-dark .vec__tabs button{color:var(--on-navy-2)}
.vec__tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.on-dark .vec__tabs button[aria-selected=true]{background:#fff;color:var(--navy)}
.vec__note{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--text-3);margin:.6rem 0 0}
.on-dark .vec__note{color:var(--on-navy-2)}
.vec text{font-family:var(--font-mono);font-size:13px;fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.on-dark .vec text,.section--navy .vec text,.section--deep .vec text{stroke:var(--navy)}
.vec .vec-label{fill:var(--ink-2);font-size:10.5px;letter-spacing:.14em;font-weight:700}
.vec .vec-text{font-size:11px;fill:var(--ink-2);font-weight:500}
.vec .vec-key{fill:var(--accent);letter-spacing:.06em}
.vec [hidden]{display:none}
.vec-ground{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 4;opacity:.6}
.vec-outline{fill:var(--fill);stroke:var(--ink);stroke-width:2}
.vec-inner{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}
.vec-corr{stroke:var(--ink-2);stroke-width:1;opacity:.75}
.vec-corr-w{stroke:rgba(255,255,255,.55);stroke-width:1}
.vec-post{fill:var(--ink)}
.vec-bar{stroke:var(--ink);stroke-width:2}
.vec-fill{fill:var(--ink)}
.vec-fill-light{fill:var(--fill-2)}
.vec-glass{fill:#fff;opacity:.85}
.vec-container{fill:var(--navy);stroke:var(--navy-900);stroke-width:1}
.section--navy .vec-container,.section--deep .vec-container,.on-dark .vec-container{fill:var(--rose);stroke:var(--rose-600)}
.vec-wheel{fill:#1F2937;stroke:#9CA3AF;stroke-width:3}
.vec-dim{color:var(--accent)}
.vec-dim line{stroke:currentColor;stroke-width:1.2}
.vec-dim .vec-ext{stroke:var(--ink-2);stroke-width:1}
.vec-dline-path,.vec-arc{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3}
.vec-cap{font-size:13px}
.vec-cap__k{fill:var(--accent);font-size:10.5px;letter-spacing:.12em}
.vec-cap__box{fill:var(--fill);stroke:var(--fill-2);stroke-width:1}
.on-dark .vec-cap__box{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18)}
.vec-hinge{stroke:var(--accent);stroke-width:3}
.vec-door-leaf{fill:var(--fill-2);stroke:var(--ink);stroke-width:1.2;transform-box:fill-box;transform-origin:left center}
/* ---- draw-in choreography ---- */
.js .vec .vec-outline{stroke-dasharray:2000;stroke-dashoffset:2000}
.js .vec .vec-dline{opacity:0;transform:translateY(4px)}
.js .vec.is-live .vec-outline{animation:vec-draw var(--dur-4) var(--ease-out) forwards}
.js .vec.is-live .vec-dline{animation:vec-in var(--dur-3) var(--ease-out) forwards;animation-delay:calc(500ms + var(--d,0) * 260ms)}
.js .vec.is-live .vec-door-leaf{animation:vec-leaf 1.6s var(--ease-out) forwards;animation-delay:calc(900ms + var(--i,0)*120ms)}
@keyframes vec-draw{to{stroke-dashoffset:0}}
@keyframes vec-in{to{opacity:1;transform:none}}
@keyframes vec-leaf{to{transform:rotateY(60deg)}}
/* ---- high cube ---- */
.js .vec-hc .vec-hc__roof{opacity:0;transform:translateY(12px)}
.js .vec-hc.is-live .vec-hc__roof{animation:vec-in var(--dur-3) var(--ease-out) 900ms forwards}
.vec-hc__extra{fill:var(--rose-100);stroke:var(--rose)}
.section--navy .vec-hc__extra{fill:rgba(142,99,98,.35);stroke:var(--rose-200)}
.vec-hc__tag{fill:var(--accent)}
/* ---- vehicles ---- */
.vec-vehicles__stage{background:var(--neutral-50);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.75rem 1rem;overflow:hidden}
.on-dark .vec-vehicles__stage{background:rgba(255,255,255,.04);border-color:var(--line-on-navy)}
.vec-vehicles--compact .vec-vehicles__stage{padding:.4rem .6rem}
.vec-vehicles__copy{margin-top:.75rem;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-2)}
.on-dark .vec-vehicles__copy{color:var(--on-navy-2)}
.vec-vehicles__copy strong{color:var(--navy)}
.on-dark .vec-vehicles__copy strong{color:#fff}
.veh[hidden]{display:none}
.veh > g,.veh g{transform-box:fill-box}
/* tilt tray: tray pivots at its rear end; the box slides down along the tray */
.veh-tray-pivot{transform-origin:100% 100%}
.veh-load{transform-origin:0 100%}
.js .veh-tilt.is-live .veh-tray-pivot{animation:veh-tilt 6s var(--ease) infinite}
.js .veh-tilt.is-live .veh-load{animation:veh-slide 6s var(--ease) infinite}
@keyframes veh-tilt{0%,18%{transform:rotate(0)}36%,72%{transform:rotate(9deg)}92%,100%{transform:rotate(0)}}
@keyframes veh-slide{0%,38%{transform:translate(0,0)}68%,80%{transform:translate(150px,0)}100%{transform:translate(0,0)}}
/* side loader (end view): leg slides out then down, box lifts, arm carries it sideways, box lowers */
.veh-leg-out{transform-origin:0 50%}
.veh-leg-down{transform-origin:50% 0}
.veh-crane-arm{transform-origin:0 0}
.veh-hoist{transform-origin:50% 0}
.veh-sbox{transform-origin:50% 0}
.js .veh-side.is-live .veh-leg-out{animation:veh-legout 7s var(--ease) infinite}
.js .veh-side.is-live .veh-leg-down{animation:veh-legdown 7s var(--ease) infinite}
.js .veh-side.is-live .veh-hoist{animation:veh-hoist 7s var(--ease) infinite}
@keyframes veh-legout{0%,8%{transform:scaleX(.15)}20%,88%{transform:scaleX(1)}100%{transform:scaleX(.15)}}
@keyframes veh-legdown{0%,18%{transform:scaleY(.2)}28%,86%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
@keyframes veh-hoist{0%,28%{transform:translate(-60px,20px)}42%{transform:translate(-60px,-26px)}58%{transform:translate(50px,-26px)}72%,84%{transform:translate(50px,54px)}100%{transform:translate(-60px,20px)}}
/* hiab: boom sections rotate/extend from their own hinges; box hangs from the tip */
.veh-boom1,.veh-boom2,.veh-boom3,.veh-hload{transform-box:view-box}
.veh-boom1{transform-origin:146px 154px}
.veh-boom2{transform-origin:146px 71px}
.veh-boom3{transform-origin:330px 71px}
.veh-hload{transform-origin:474px 74px}
.js .veh-hiab.is-live .veh-boom1{animation:veh-b1 8s var(--ease) infinite}
.js .veh-hiab.is-live .veh-boom2{animation:veh-b2 8s var(--ease) infinite}
.js .veh-hiab.is-live .veh-boom3{animation:veh-b3 8s var(--ease) infinite}
.js .veh-hiab.is-live .veh-hload{animation:veh-hl 8s var(--ease) infinite}
.js .veh-hiab.is-live .veh-outrig{animation:veh-outrig 8s var(--ease) infinite}
@keyframes veh-outrig{0%,6%{transform:scaleY(.2)}16%,90%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
@keyframes veh-b1{0%,16%{transform:rotate(18deg)}32%,80%{transform:rotate(0)}100%{transform:rotate(18deg)}}
@keyframes veh-b2{0%,16%{transform:rotate(38deg)}34%,80%{transform:rotate(-4deg)}100%{transform:rotate(38deg)}}
@keyframes veh-b3{0%,34%{transform:translateX(-120px)}48%,80%{transform:translateX(0)}100%{transform:translateX(-120px)}}
@keyframes veh-hl{0%,46%{transform:translateY(0)}60%,78%{transform:translateY(40px)}100%{transform:translateY(0)}}
.veh-outrig{transform-origin:50% 0}
.js .veh-note{opacity:0}
.js .veh.is-live .veh-note{animation:vec-in var(--dur-3) var(--ease-out) 1.2s forwards}
/* ---- site access ---- */
.vec-access{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:760px){.vec-access{grid-template-columns:1fr}}
.vec-access__panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;background:#fff}
.on-dark .vec-access__panel{background:rgba(255,255,255,.04);border-color:var(--line-on-navy)}
.vec-access__title{font-family:var(--font-display);font-size:1rem;margin:0 0 .5rem;padding-left:1rem;border-left:3px solid var(--success)}
.vec-access__title--bad{border-color:var(--danger)}
.vec-access__list{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-2);margin:.75rem 0 0;padding-left:1.1em}
.on-dark .vec-access__list{color:var(--on-navy-2)}
.acc-ok circle{fill:var(--success)}.acc-ok path{stroke:#fff;stroke-width:2;fill:none}
.acc-warn circle{fill:var(--danger)}.acc-warn path{stroke:#fff;stroke-width:2;fill:none}
.acc-wire line{stroke:#B42318;stroke-width:1.5}
.acc-canopy{fill:#9BB58F}
.acc-soft{fill:#E6D9C3}
.js .acc-ok,.js .acc-warn{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center}
.js .vec-access.is-live .acc-ok{animation:vec-pop .5s var(--ease-out) 900ms forwards}
.js .vec-access.is-live .acc-warn--1{animation:vec-pop .5s var(--ease-out) 800ms forwards}
.js .vec-access.is-live .acc-warn--2{animation:vec-pop .5s var(--ease-out) 1100ms forwards}
.js .vec-access.is-live .acc-warn--3{animation:vec-pop .5s var(--ease-out) 1400ms forwards}
@keyframes vec-pop{to{opacity:1;transform:none}}
.js .acc-truck{transform:translateX(-40px);opacity:0}
.js .vec-access.is-live .acc-truck{animation:acc-drive 1.4s var(--ease-out) forwards}
@keyframes acc-drive{to{transform:none;opacity:1}}
/* ---- exploded (isometric) ---- */
.exp-part{transform-box:fill-box;transform-origin:center;transition:transform 1.8s var(--ease-out)}
.exp-label,.exp-lead,.exp-dot{opacity:0;transition:opacity var(--dur-3) var(--ease-out) 1.3s}
.js .vec-exploded.is-live .exp-part{transform:translate(calc(var(--dx,0)*1px),calc(var(--dy,0)*1px))}
.js .vec-exploded.is-live .exp-label,.js .vec-exploded.is-live .exp-lead,.js .vec-exploded.is-live .exp-dot{opacity:1}
.no-js .exp-label,.no-js .exp-lead,.no-js .exp-dot{opacity:1}
.vec-exploded .exp-label{font-family:var(--font-display);font-size:12.5px;font-weight:700;fill:var(--navy);letter-spacing:.01em;stroke-width:5px}
.exp-lead{stroke:var(--rose);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.exp-dot{fill:var(--rose)}
.exp-bar{stroke:#C9D0DA;stroke-width:3;stroke-linecap:round}
.exp-handle{stroke:#E3CECD;stroke-width:3;stroke-linecap:round}
.exp-hinge{fill:#C9D0DA;stroke:#0F1D31;stroke-width:.8}
.exp-part{transition-delay:calc(var(--i,0)*80ms)}
.exp-roof{--i:1}.exp-side{--i:2}.exp-end{--i:3}.exp-floor{--i:4}.exp-rear{--i:2}.exp-far{--i:3}.exp-lock{--i:5}
@media (max-width:640px){.vec-exploded .exp-label{font-size:15px}}
/* ---- flow ---- */
.vec-flow{display:grid;gap:1.5rem}
.flow__title{font-family:var(--font-display);font-size:1rem;margin:0 0 .75rem}
.flow__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.4rem;position:relative}
.flow__steps::before{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;background:var(--border)}
.flow__steps::after{content:"";position:absolute;left:0;top:.55rem;height:2px;width:0;background:var(--accent);transition:width 2.4s var(--ease-out)}
.js .vec-flow.is-live .flow__steps::after{width:100%}
.flow__steps li{position:relative;padding-top:1.4rem;font-family:var(--font-body);font-size:.78rem;color:var(--text-2);line-height:1.25}
.flow__dot{position:absolute;top:0;left:0;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;border:2px solid var(--border-strong);transition:border-color .3s,background .3s;transition-delay:calc(var(--i)*300ms)}
.js .vec-flow.is-live .flow__dot{border-color:var(--accent);background:var(--accent)}
.on-dark .flow__steps li{color:var(--on-navy-2)}
.on-dark .flow__dot{background:var(--navy)}
@media (max-width:760px){.flow__steps{grid-template-columns:1fr;gap:.5rem}.flow__steps::before,.flow__steps::after{width:2px!important;height:100%;top:0;left:.5rem}.js .vec-flow.is-live .flow__steps::after{height:100%}.flow__steps li{padding:0 0 0 2rem;min-height:1.4rem}}
@media (prefers-reduced-motion:reduce){.vec *{animation:none!important;transition:none!important}.js .vec .vec-outline{stroke-dashoffset:0}.js .vec .vec-dline,.js .vec-hc .vec-hc__roof,.js .veh-note,.js .acc-ok,.js .acc-warn,.js .acc-truck,.exp-label,.exp-lead,.exp-dot{opacity:1;transform:none}.js .vec-exploded .exp-part{transform:translate(calc(var(--dx,0)*1px),calc(var(--dy,0)*1px))}.flow__steps::after{width:100%}.flow__dot{border-color:var(--accent);background:var(--accent)}}

/* ---- all sizes ---- */
.vec-sizes .sz-ref{stroke:var(--rose);opacity:.55}
.vec-sizes .sz-name{font-family:var(--font-display);font-size:12px;font-weight:700;fill:var(--ink)}
.vec-sizes .sz-h{font-size:10.5px;fill:var(--accent);font-weight:700}
.vec-sizes .sz-hc{fill:var(--rose);opacity:.85}
.vec-sizes .sz-reflabel{fill:var(--accent)}
.vec-sizes .sz-name{font-size:13px}
.vec-sizes a{cursor:pointer}
.vec-sizes a:hover .vec-container{opacity:.85}
.js .vec-sizes .sz-bar{transform:scaleY(0)}
.js .vec-sizes .sz-label{opacity:0}
.js .vec-sizes.is-live .sz-bar{animation:sz-rise .9s var(--ease-out) forwards;animation-delay:calc(var(--d)*140ms)}
.js .vec-sizes.is-live .sz-label{animation:vec-in .6s var(--ease-out) forwards;animation-delay:calc(500ms + var(--d)*140ms)}
@keyframes sz-rise{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.js .vec-sizes .sz-bar{transform:none;animation:none}.js .vec-sizes .sz-label{opacity:1;animation:none}}