/* ==========================================================================
   RIG RESCUE — ROADSIDE PAGE  (v2: vertical journey + fault selector)
   Inherits every token from style.css. Nothing here redefines the palette,
   type scale, easings or glow language.
   ========================================================================== */

/* ==========================================================================
   HEADER CONTRACT — one variable owns the header band. The hero begins
   below it; nothing in the hero may occupy that band.
   ========================================================================== */
.rs{--header-h:78px}
@media (max-width:900px){.rs{--header-h:68px}}

.rs .hdr{height:var(--header-h);align-items:center;padding-block:0}
.rs .hdr-brand{align-items:center}
.rs .hdr-nav{align-items:center}

/* every anchor target clears the fixed header */
.rs :where(section[id], article[id]){scroll-margin-top:calc(var(--header-h) + 18px)}

/* ---- breadcrumb: its own band under the header --------------------------- */
.crumbs{
  position:relative;z-index:2;
  padding:calc(var(--header-h) + 26px) var(--gutter) 0;
}
.crumbs ol{list-style:none;display:flex;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--amber)}

/* ---- 01 · hero ---------------------------------------------------------- */
.rhero{
  position:relative;min-height:94svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 clamp(56px,9vh,110px);
  overflow:hidden;background:var(--n0);
}
.rhero-stage{position:absolute;inset:0;
  background:
    radial-gradient(42% 26% at 76% 62%, rgba(255,160,20,.05), transparent 72%),
    linear-gradient(180deg,#05060A 0%, #08090E 60%, #0C0E13 100%);
}
.rhero-far{position:absolute;right:8%;top:50%;width:min(19vw,264px);height:auto}
.rhero-hzdot{filter:drop-shadow(0 0 4px rgba(255,176,0,.8)) drop-shadow(0 0 12px rgba(255,150,0,.4))}
@media (prefers-reduced-motion:no-preference){
  .rhero-hzdot{animation:hzblink 1.4s steps(1) 6}
  .rhero-hzdot.h2{animation-delay:.7s}
}
@keyframes hzblink{0%,45%{opacity:1}50%,95%{opacity:.18}100%{opacity:1}}

.rhero-copy{position:relative;z-index:1;padding:0 var(--gutter)}
.rhero-eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-top:22px;margin-bottom:20px;
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.rhero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(3.6rem,12.5vw,14.5rem);
  line-height:.86;letter-spacing:.004em;margin-left:-.04em;
  white-space:nowrap;
}
.rhero-sub{
  margin-top:24px;color:var(--dim);max-width:52ch;
  font-family:var(--body);font-size:16px;text-transform:none;letter-spacing:0;
  font-weight:400;line-height:1.65;white-space:normal;
}
.rhero-cta{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}
.rhero-ghost{
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);padding-bottom:4px;
  transition:color .12s var(--ease-switch), border-color .12s var(--ease-switch);
}
.rhero-ghost:hover{color:var(--paper);border-color:var(--amber)}

@media (prefers-reduced-motion:no-preference){
  .rhero-stage{opacity:0;animation:fadein 1.3s ease-out .1s forwards}
  .rhero-eyebrow{opacity:0;animation:fadein .6s ease-out .7s forwards}
  .rhero .hl-in{transform:translateY(108%);animation:landline .8s var(--ease-land) forwards}
  .rhero .hl:nth-child(2) .hl-in{animation-delay:.85s}
  .rhero .hl:nth-child(3) .hl-in{animation-delay:1s}
  .rhero-sub,.rhero-cta{opacity:0;animation:fadein .8s ease-out 1.55s forwards}
}

/* ==========================================================================
   02 · THE RUN — vertical night journey
   The road recedes to a vanishing point at (500,340) in the SVG viewBox.
   Everything on the road plane scales about that point: uniform scale about
   the VP *is* correct perspective for an object moving toward the camera.
   ========================================================================== */
.run{position:relative;border-top:1px solid var(--hair);background:var(--n1)}
.run-intro{padding:clamp(72px,10vh,130px) var(--gutter) clamp(30px,4vh,50px)}
.run-track{height:420vh;position:relative}
.run-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  --sky-a:#070910; --sky-b:#0C111A;
}
.vroad{position:absolute;inset:0;width:100%;height:100%}
.run-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:
    linear-gradient(180deg, var(--n1), transparent 11%, transparent 90%, var(--n1)),
    radial-gradient(140% 105% at 50% 58%, transparent 52%, rgba(4,5,9,.82) 100%);
}

/* --- sky reacts to weather (§10: cloud is a lighting state) --- */
.sky1{stop-color:var(--sky-a);transition:stop-color 1.8s ease}
.sky2{stop-color:var(--sky-b);transition:stop-color 1.8s ease}
.run-stage[data-phase="c"]{--sky-a:#04050A;--sky-b:#080B12}
.run-stage[data-phase="d"]{--sky-a:#060910;--sky-b:#0A0F18}
.run-stage[data-phase="e"]{--sky-a:#050710;--sky-b:#090D16}

.v-stars{opacity:.55;transition:opacity 2s ease}
.run-stage[data-phase="c"] .v-stars,
.run-stage[data-phase="d"] .v-stars,
.run-stage[data-phase="e"] .v-stars{opacity:.06}

/* clouds: clusters of overlapping soft ellipses, so no single edge shows,
   lit faintly from below by the horizon the way real night cloud is */
.cl ellipse{fill:#161C27;opacity:.34}
.cl-low ellipse{fill:#1A212D;opacity:.3}
.v-cloud-1 .cl ellipse{opacity:.26}
.v-cloud-3 .cl ellipse{opacity:.4}
.v-cloud{opacity:.3;transition:opacity 2.4s ease}
.run-stage[data-phase="b"] .v-cloud{opacity:.66}
.run-stage[data-phase="c"] .v-cloud,
.run-stage[data-phase="d"] .v-cloud,
.run-stage[data-phase="e"] .v-cloud{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .v-cloud-l{animation-name:clouddrift;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}
  .v-cloud-1{animation-duration:52s}
  .v-cloud-2{animation-duration:78s}
  .v-cloud-3{animation-duration:112s}
  .run.is-active .v-cloud-l{animation-play-state:running}
}
@keyframes clouddrift{to{transform:translateX(-1000px)}}

/* drifting mist veil — weather that reads even with no drops visible */
.v-mist{opacity:0;transition:opacity 2.2s ease}
.run-stage[data-phase="c"] .v-mist{opacity:1}
.run-stage[data-phase="d"] .v-mist,
.run-stage[data-phase="e"] .v-mist{opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .v-mist-l{animation:mistdrift 30s linear infinite;animation-play-state:paused}
  .v-mist-2{animation-duration:44s;animation-direction:reverse}
  .run.is-active .v-mist-l{animation-play-state:running}
}
@keyframes mistdrift{to{transform:translateX(-220px)}}

/* --- the recede system --- */
/* pivot is the vanishing point itself — everything on the road plane
   converges there, which is what makes the perspective read */
.rc{
  transform-box:view-box;transform-origin:500px 300px;
  animation-name:recede;animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.5,.04,.86,.4);
  animation-play-state:paused;opacity:0;
}
.run.is-active .moving.is-scrolling .rc{animation-play-state:running}
@keyframes recede{
  0%{transform:scale(1);opacity:0}
  9%{opacity:.9}
  88%{opacity:.9}
  100%{transform:scale(12);opacity:0}
}
.rc-dash{animation-duration:3.1s}
.rc-dash.d1{animation-delay:-.31s}.rc-dash.d2{animation-delay:-.62s}
.rc-dash.d3{animation-delay:-.93s}.rc-dash.d4{animation-delay:-1.24s}
.rc-dash.d5{animation-delay:-1.55s}.rc-dash.d6{animation-delay:-1.86s}
.rc-dash.d7{animation-delay:-2.17s}.rc-dash.d8{animation-delay:-2.48s}
.rc-dash.d9{animation-delay:-2.79s}
.rc-post{animation-duration:4.4s}
.rc-post.d3{animation-delay:-1.47s}.rc-post.d5{animation-delay:-2.93s}
.rc-tree{animation-duration:5.2s}
.rc-tree.d2{animation-delay:-1.3s}.rc-tree.d3{animation-delay:-2.6s}.rc-tree.d4{animation-delay:-3.9s}
.rc-sign{animation-duration:11s}
.v-sign-t{font-family:var(--mono);font-weight:600;font-size:6px;fill:var(--paper);opacity:.9}

/* lighted destination boards — the corridor, named on the road.
   Their own shorter travel: they pass out of frame before they can ever
   become a billboard, and never crowd the customer truck or the state rail. */
.rc-board{animation-name:recede-board;animation-duration:11s}
.rc-board.d2{animation-delay:-3.7s}
.rc-board.d3{animation-delay:-7.4s}
@keyframes recede-board{
  0%{transform:scale(1);opacity:0}
  16%{opacity:.5}
  44%{opacity:.95}
  66%{opacity:.35}
  100%{transform:scale(3.4);opacity:0}
}
/* the stepper column is a keep-out zone: boards fade before they reach it */
.run-rail{
  padding:10px 14px 10px 0;
  background:linear-gradient(90deg, rgba(7,8,11,.86), rgba(7,8,11,.55) 70%, transparent);
}
.bd-post{fill:#2A313A}
.bd-glow{fill:#FFD9A0;opacity:.16}
.bd-panel{fill:#0C1611;stroke:#E8EEF4;stroke-width:.7;stroke-opacity:.8}
.bd-shield{fill:#0B0D11;stroke:#E8EEF4;stroke-width:.8;stroke-opacity:.85}
.bd-t{font-family:var(--disp);font-weight:700;font-size:8px;letter-spacing:.04em;fill:#F2F6FA}
.bd-km{font-family:var(--mono);font-weight:600;font-size:3.6px;letter-spacing:.14em;fill:#B9C6D2}
.bd-s1{font-family:var(--mono);font-weight:600;font-size:4.4px;letter-spacing:.1em;fill:#E8EEF4}
.bd-s2{font-family:var(--disp);font-weight:800;font-size:11px;fill:#F2F6FA}

/* --- road surface states --- */
.v-wet,.v-snowedge{transition:opacity 1.8s ease}
.run-stage[data-phase="c"] .v-wet{opacity:.9}
.run-stage[data-phase="d"] .v-wet{opacity:.45}
.run-stage[data-phase="e"] .v-wet{opacity:.55}
.run-stage[data-phase="d"] .v-snowedge,
.run-stage[data-phase="e"] .v-snowedge{opacity:.16}

/* --- headlights: blurred falloff so the light reads as light, not geometry --- */
.v-head{opacity:0;transition:opacity 1.5s ease;filter:blur(13px)}
.v-head-pool{opacity:0;transition:opacity 1.5s ease;filter:blur(9px)}
.run.lit .v-head,.run.lit .v-head-pool{opacity:1}
.run.arr-2 .v-head{opacity:.4}           /* work lights take over */
.run.arr-2 .v-head-pool{opacity:.55}
.hd-core{opacity:.85}
.v-markers{opacity:.28;transition:opacity 1.2s ease}
.run.lit .v-markers{opacity:1}
.v-truck .beacon,.v-truck .beacon-halo{opacity:.14}
.run.lit .v-truck .beacon,.run.lit .v-truck .beacon-halo{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .run.lit .v-truck .beacon,.run.lit .v-truck .beacon-halo{animation:beacon 1.7s ease-in-out infinite;animation-play-state:paused}
  .run.is-active.lit .v-truck .beacon,.run.is-active.lit .v-truck .beacon-halo{animation-play-state:running}
}
.v-tail rect{transition:fill 1s ease}
.run.arr-1 .v-tail rect{fill:#C0341F}

/* rear livery: identity dominant, contact as small secondary decal */
.v-mono{color:#EDE8DF;opacity:.34;transition:opacity 1.2s ease}
.v-decal{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.1em;
  fill:#EDE8DF;opacity:.32;transition:opacity 1.2s ease}
.v-decal-s{font-family:var(--mono);font-weight:600;font-size:8px;letter-spacing:.2em;
  fill:#EDE8DF;opacity:.2;transition:opacity 1.2s ease}
.v-decal-p{font-family:var(--mono);font-weight:600;font-size:9px;letter-spacing:.16em;
  fill:#FFB141;opacity:.28;transition:opacity 1.2s ease}
.run.lit .v-mono{opacity:.6}
.run.lit .v-decal{opacity:.58}
.run.lit .v-decal-s{opacity:.34}
.run.lit .v-decal-p{opacity:.55}
.v-plate rect{fill:#0A0D12}
.v-plate-face{fill:#12161C;stroke:#6E7A86;stroke-width:1.1;stroke-opacity:.65}
.v-plate-t{font-family:var(--mono);font-weight:600;font-size:9px;letter-spacing:.2em;
  fill:#C6CFD8;opacity:.5;transition:opacity 1.2s ease}
.v-plate-lamp{fill:#FFD9A0;opacity:0;transition:opacity 1s ease}
.run.lit .v-plate-t{opacity:.85}
.run.lit .v-plate-lamp{opacity:.45}

/* --- rain: exists where the light catches it (§8), in three depths --- */
.v-rain{opacity:0;transition:opacity 1.8s ease}
.run-stage[data-phase="c"] .v-rain{opacity:1}
.v-rain path{fill:none;stroke-linecap:round}
.v-rain-a path{stroke:#DCEBFA;stroke-width:1.5;opacity:.9}
.v-rain-b path{stroke:#BCD2E6;stroke-width:1.2;opacity:.58}
.v-rain-c path{stroke:#A4BACE;stroke-width:1;opacity:.38}
.v-rain-amb path{stroke:#8FA6BC;stroke-width:1.1;opacity:.42}
@media (prefers-reduced-motion:no-preference){
  .v-rain-track{animation:rainfall 1.05s linear infinite;animation-play-state:paused}
  .v-rain-a{animation-duration:.82s}
  .v-rain-b{animation-duration:1.24s}
  .v-rain-c{animation-duration:1.72s}
  .v-rain-amb{animation-duration:1.45s}
  .run.is-active .run-stage[data-phase="c"] .v-rain-track{animation-play-state:running}
}
@keyframes rainfall{to{transform:translateY(460px)}}

/* drops landing on the lit asphalt */
.v-splash ellipse{fill:#CFE0F0;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .run.is-active .run-stage[data-phase="c"] .v-splash ellipse{
    animation:splash 1.5s ease-out infinite;
  }
  .v-splash ellipse:nth-child(2){animation-delay:.19s}
  .v-splash ellipse:nth-child(3){animation-delay:.62s}
  .v-splash ellipse:nth-child(4){animation-delay:.34s}
  .v-splash ellipse:nth-child(5){animation-delay:.87s}
  .v-splash ellipse:nth-child(6){animation-delay:1.13s}
  .v-splash ellipse:nth-child(7){animation-delay:.48s}
  .v-splash ellipse:nth-child(8){animation-delay:1.31s}
}
@keyframes splash{
  0%{opacity:0;transform:scaleX(.4)}
  12%{opacity:.5}
  55%{opacity:0;transform:scaleX(1.5)}
  100%{opacity:0;transform:scaleX(1.5)}
}
.v-splash ellipse{transform-box:fill-box;transform-origin:center}

/* --- snow: three depth planes, sideways drift (§12) --- */
.v-snow{opacity:0;transition:opacity 2s ease}
.run-stage[data-phase="d"] .v-snow,
.run-stage[data-phase="e"] .v-snow{opacity:1}
.v-snow-far circle{fill:#DEE8F4;fill-opacity:.6}
.v-snow-mid circle{fill:#EAF2FA;fill-opacity:.82}
.v-snow-near circle{fill:#F2F7FC;fill-opacity:.6}
/* winter reads colder than rain: cool wash + brighter shoulder accumulation */
.run-stage[data-phase="d"] .v-mist,
.run-stage[data-phase="e"] .v-mist{opacity:.7}
.run-stage[data-phase="d"] .v-snowedge,
.run-stage[data-phase="e"] .v-snowedge{opacity:.3}
@media (prefers-reduced-motion:no-preference){
  .v-snow-l{animation-name:snowdrift;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:paused}
  .v-snow-far{animation-duration:11s}
  .v-snow-mid{animation-duration:7.5s}
  .v-snow-near{animation-duration:4.4s}
  .run.is-active .run-stage[data-phase="d"] .v-snow-l,
  .run.is-active .run-stage[data-phase="e"] .v-snow-l{animation-play-state:running}
}
@keyframes snowdrift{
  0%{transform:translate(0,-180px);opacity:0}
  14%{opacity:1}84%{opacity:1}
  100%{transform:translate(-80px,440px);opacity:0}
}

/* --- the disabled unit approaches (scroll-driven, not looping) --- */
/* Drawn at full arrival size; scaled DOWN when distant, so approaching the
   scene resolves a real truck rather than magnifying a sketch. */
.v-semi{
  transform-box:view-box;transform-origin:805px 500px;
  transform:translate(calc((1 - var(--arr,0)) * -245px), calc((1 - var(--arr,0)) * -170px))
            scale(calc(0.11 + var(--arr,0) * 0.89));
  opacity:0;transition:opacity 1.4s ease;
}
.v-tape{opacity:.5;transition:opacity 1.2s ease}
.run.arr-2 .v-tape{opacity:1}
.run.arr-1 .v-semi{opacity:1}
.v-hz circle{opacity:0}
.run.arr-1 .v-hz circle{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .run.arr-1 .v-hz circle{animation:hzblink 1.3s steps(1) infinite;animation-play-state:paused}
  .run.is-active.arr-1 .v-hz circle{animation-play-state:running}
  .run.arr-1 .v-hz circle:nth-child(3),
  .run.arr-1 .v-hz circle:nth-child(4){animation-delay:.65s}
}
.v-tri{opacity:0;transition:opacity 1.2s ease}
.run.arr-1 .v-tri{opacity:.85}

/* --- arrival: work lights, then reality becomes linework (§19) --- */
.v-mast-lamp,.v-mast-halo,.v-workcone,.v-bay,.v-wire{transition:opacity 1.3s ease}
/* work cone reads as light, not an overlaid polygon */
.v-workcone{filter:blur(11px)}
.run.arr-2 .v-mast-lamp,.run.arr-2 .v-mast-halo{opacity:1}
.run.arr-2 .v-workcone{opacity:1}
.run.arr-2 .v-bay{opacity:.9}
/* the edges pick up a technical highlight — the truck stays the truck */
.run.arr-3 .v-wire{opacity:.34}
.run.arr-3 .v-world,
.run.arr-3 .v-stars{opacity:.3;transition:opacity 1.3s ease}

/* --- roadside progression rail (§15: not a HUD) --- */
.run-rail{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);
  z-index:5;list-style:none;display:grid;gap:16px;
}
.run-rail li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dimmer);
  opacity:.38;transition:opacity .6s ease, color .6s ease;
}
.run-rail li span{width:1px;height:20px;background:currentColor;transition:background .6s ease, height .4s ease}
.run-stage[data-phase="a"] .run-rail [data-ph="a"],
.run-stage[data-phase="b"] .run-rail [data-ph="b"],
.run-stage[data-phase="c"] .run-rail [data-ph="c"],
.run-stage[data-phase="d"] .run-rail [data-ph="d"],
.run-stage[data-phase="e"] .run-rail [data-ph="e"]{opacity:1;color:var(--dim)}
.run-stage[data-phase="a"] .run-rail [data-ph="a"] span,
.run-stage[data-phase="b"] .run-rail [data-ph="b"] span,
.run-stage[data-phase="c"] .run-rail [data-ph="c"] span,
.run-stage[data-phase="d"] .run-rail [data-ph="d"] span,
.run-stage[data-phase="e"] .run-rail [data-ph="e"] span{background:var(--amber);height:28px;box-shadow:var(--glow-box)}

/* --- dispatch notes: captions while it plays, list when it doesn't --- */
.run-log{position:absolute;left:var(--gutter);right:var(--gutter);bottom:38px;z-index:5;list-style:none}
.run-log li{
  position:absolute;left:0;bottom:0;width:max-content;max-width:min(560px,74vw);
  opacity:0;transform:translateY(10px);
  transition:opacity .7s ease, transform .7s var(--ease-land);
  /* opaque: the road wedge must not read through the dispatch card */
  background:#080A0E;border:1px solid var(--hair);border-left:2px solid var(--amber-deep);
  padding:12px 16px;
}
.run-log li{padding:14px 20px 15px}
.run-log .cm-tag{display:block;margin-bottom:9px}
.log-say{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.25rem,2vw,1.85rem);line-height:1.02;color:var(--paper);
  max-width:15ch;
}
.log-sub{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;line-height:1.8;
  color:var(--dimmer);margin-top:9px;max-width:42ch;
}
.run-stage[data-phase="a"] .run-log [data-cap="a"],
.run-stage[data-phase="b"] .run-log [data-cap="b"],
.run-stage[data-phase="c"] .run-log [data-cap="c"],
.run-stage[data-phase="d"] .run-log [data-cap="d"],
.run-stage[data-phase="e"] .run-log [data-cap="e"]{opacity:1;transform:none}

/* --- static fallback: reduced motion, or JS never runs (§53, §54) --- */
.run-track{--static-guard:0}
.run:not(.run-live) .run-track,
.run-static .run-track{height:auto}
.run:not(.run-live) .run-stage,
.run-static .run-stage{position:static;height:auto;padding-bottom:34px}
.run:not(.run-live) .vroad,
.run-static .vroad{position:relative;height:min(64svh,560px)}
.run:not(.run-live) .run-rail,
.run-static .run-rail{display:none}
.run:not(.run-live) .run-log,
.run-static .run-log{
  position:static;display:grid;gap:12px;
  padding:26px var(--gutter) 0;max-width:900px;
}
.run:not(.run-live) .run-log li,
.run-static .run-log li{position:static;opacity:1;transform:none;max-width:none;width:auto}
.run-static .v-head,.run-static .v-semi,.run-static .v-hz circle,
.run-static .v-mast-lamp,.run-static .v-mast-halo,.run-static .v-workcone,
.run-static .v-bay,.run-static .v-tri,.run-static .rc{opacity:1}
.run-static .v-semi{--arr:1}
.run-static .v-wet{opacity:.5}
.run:not(.run-live) .run-stage::before,
.run-static .run-stage::before{display:none}

/* ==========================================================================
   03 · FAULT SELECTOR — the page's service navigation
   ========================================================================== */
.faults{background:var(--n1)}
.fault-stage{margin-top:48px}
.dxsvg{
  width:100%;max-width:980px;height:auto;display:block;margin-inline:auto;
  color:rgba(237,232,223,.6);
}
.spot{fill:var(--amber);opacity:.5;transition:opacity .18s var(--ease-switch)}
.spot.on{opacity:1;filter:drop-shadow(0 0 5px rgba(255,176,0,.9)) drop-shadow(0 0 14px rgba(255,150,0,.45))}
.dx-reticle{opacity:0;transition:transform .3s var(--ease-shutter), opacity .2s ease}
.dx-reticle.on{opacity:1}

.fault-index{list-style:none;margin-top:44px;border-top:1px solid var(--hair)}
.fault{
  display:grid;
  grid-template-columns:52px 16px minmax(0,8.4em) minmax(0,1fr) 34px;
  align-items:center;gap:0 22px;
  padding:19px 0;border-bottom:1px solid var(--hair);
  transition:background .16s var(--ease-switch);
}
.fault-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dimmer);
  transition:color .16s var(--ease-switch)}
.fault-name{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,2.5vw,2.3rem);line-height:1;color:var(--paper);
  transition:color .16s var(--ease-switch), text-shadow .3s ease-out;
}
.fault-sym{color:var(--dimmer);font-size:15px;transition:color .3s ease-out}
.fault-go{
  justify-self:end;font-family:var(--mono);font-size:17px;color:var(--dimmer);
  transition:transform .18s var(--ease-land), color .16s var(--ease-switch);
}
.fault:hover,.fault:focus-visible{background:rgba(237,232,223,.028)}
.fault:hover .lamp,.fault:focus-visible .lamp{background:var(--amber);box-shadow:var(--glow-box)}
.fault:hover .fault-name,.fault:focus-visible .fault-name{color:var(--amber);text-shadow:var(--glow-text)}
.fault:hover .fault-sym,.fault:focus-visible .fault-sym{color:var(--dim)}
.fault:hover .fault-n,.fault:focus-visible .fault-n{color:var(--amber-deep)}
.fault:hover .fault-go,.fault:focus-visible .fault-go{color:var(--amber);transform:translateX(6px)}
.fault:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

@media (max-width:820px){
  .fault{
    grid-template-columns:44px minmax(0,1fr) 28px;
    grid-template-areas:"n name go" "n sym go";
    gap:4px 14px;padding:16px 0;min-height:72px;align-content:center;
  }
  .fault-n{grid-area:n;align-self:center}
  .fault .lamp{display:none}
  .fault-name{grid-area:name;font-size:1.5rem}
  .fault-sym{grid-area:sym;font-size:13.5px}
  .fault-go{grid-area:go;align-self:center}
}

/* The desktop schematic is intentionally replaced on phones. These controls
   are inserted by roadside.js and operate the same readout without hover,
   focus timing or tiny SVG targets. */
.fs-mobile-controls{display:none}
@media (max-width:820px){
  .faults.has-mobile-fault-controls .fault-stage{margin-top:28px;overflow:hidden}
  .faults.has-mobile-fault-controls .fault-stage .fs-wrap{display:grid;gap:14px}
  .faults.has-mobile-fault-controls .dxsvg{
    display:block;width:220%;max-width:none;margin:0;
    transform:translateX(var(--fault-pan,0%));
    transition:transform .38s var(--ease-land);will-change:transform;
  }
  .faults.has-mobile-fault-controls .fs-mobile-controls{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  }
  .fs-mobile-btn{
    appearance:none;-webkit-appearance:none;box-sizing:border-box;cursor:pointer;
    min-width:0;min-height:66px;display:grid;grid-template-columns:30px minmax(0,1fr);
    align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--hair);
    border-radius:0;background:transparent;color:var(--dim);text-align:left;
    font:inherit;
  }
  .fs-mobile-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .fs-mobile-num{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--dimmer);
  }
  .fs-mobile-name{
    font-family:var(--disp);font-weight:700;font-size:1.12rem;line-height:1;
    text-transform:uppercase;color:inherit;
  }
  .fs-mobile-btn.is-active{
    color:var(--paper);border-color:var(--amber);
    background:rgba(255,176,0,.09);box-shadow:inset 3px 0 0 var(--amber);
  }
  .fs-mobile-btn.is-active .fs-mobile-num{color:var(--amber)}
  .faults.has-mobile-fault-controls .fs-card{
    order:2;margin-top:0;padding:18px;border-color:rgba(255,176,0,.35);
  }
  .faults.has-mobile-fault-controls .fs-card.is-mobile-flow{
    animation:faultMobileFlow .28s var(--ease-land);
  }
  .faults.has-mobile-fault-controls .fault-index{display:none}
}
@keyframes faultMobileFlow{
  from{opacity:.45;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@media (max-width:360px){
  .faults.has-mobile-fault-controls .fs-mobile-controls{grid-template-columns:1fr}
}

/* ==========================================================================
   04 · FIELD REPORTS
   ========================================================================== */
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(36px,5vw,90px);margin-top:48px}
.fd{border-top:1px solid var(--hair);padding:22px 0 26px;scroll-margin-top:96px}
.fd-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber);margin-bottom:8px}
.fd h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1}
.fd-sym{color:var(--dim);font-style:italic;font-size:15px;margin-top:10px}
.fd-check{color:var(--dimmer);font-size:14.5px;margin-top:10px}
.fd-check b,.fd-verdict b{color:var(--dim);font-weight:600}
.fd-verdict{display:flex;gap:12px;align-items:baseline;margin-top:12px;color:var(--paper);font-size:14.5px}
.fd-verdict .lamp{align-self:center;flex:0 0 9px}
@media (max-width:820px){.fd-grid{grid-template-columns:1fr}}

/* ==========================================================================
   05 · REALITY
   ========================================================================== */
.reality-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);
  gap:clamp(36px,5vw,90px);margin-top:52px;align-items:start;
}
.reality-head{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.18em;
  color:var(--paper);display:flex;gap:12px;align-items:center;
  border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:18px;
}
.reality-head-b{color:var(--dimmer)}
.reality-list{list-style:none}
.reality-list li{
  color:var(--dim);padding:11px 0;border-bottom:1px solid var(--hair);
  display:flex;gap:14px;align-items:center;
}
.reality-list li::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 7px}
@media (max-width:820px){.reality-grid{grid-template-columns:1fr}}

/* ==========================================================================
   WINTER FIELD CONDITIONS — approved responsive WebP, no animated layer
   ========================================================================== */
.winter-proof{
  position:relative;min-height:clamp(560px,78svh,860px);display:grid;align-items:end;
  overflow:hidden;isolation:isolate;background:var(--n0);
}
.winter-proof-media{position:absolute;inset:0;z-index:-1}
.winter-proof-img{width:100%;height:100%;display:block;object-fit:cover;object-position:52% 50%}
.winter-proof-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,11,.96) 0%,rgba(5,7,11,.8) 30%,rgba(5,7,11,.2) 62%,transparent 84%),
    linear-gradient(0deg,rgba(5,7,11,.96) 0%,rgba(5,7,11,.62) 24%,transparent 58%),
    linear-gradient(180deg,rgba(5,7,11,.56) 0%,transparent 32%);
}
.winter-proof-copy{width:min(100%,1500px);padding:clamp(64px,10vh,124px) var(--gutter);position:relative;z-index:1}
.winter-proof-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.8rem,6.4vw,6.5rem);line-height:.9;letter-spacing:.005em;
  max-width:12ch;margin-top:18px;
}
.winter-proof-lede{color:var(--dim);max-width:38em;margin-top:22px}
@media (max-width:820px){
  .winter-proof{min-height:680px}
  .winter-proof-img{object-position:68% 50%}
  .winter-proof-media::after{
    background:
      linear-gradient(0deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.86) 34%,rgba(5,7,11,.3) 68%,transparent 88%),
      linear-gradient(180deg,rgba(5,7,11,.62) 0%,transparent 30%);
  }
  .winter-proof-copy{padding-block:64px}
  .winter-proof-h{font-size:clamp(2.45rem,11.2vw,4.5rem)}
}

/* ==========================================================================
   06 · LOAD-OUT — the inside of the service truck
   One state machine: .bay[data-active="<tool>"] drives the light position,
   the lit object and the readout. Positions live here, declaratively.
   ========================================================================== */
.loadout{background:var(--n1)}
/* desktop: compartment ~74% + spec plate. The object is the control. */
.bay{
  margin-top:44px;
  margin-inline:calc(-1 * var(--gutter) + clamp(10px,2vw,40px));
  --lx:15.1%; --ly:27%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,25%);
  align-items:stretch;position:relative;
}
.bay-art{
  position:relative;aspect-ratio:1600/760;overflow:hidden;
  background:#07090D;border:1px solid var(--hair);
  grid-column:1;grid-row:1;
}

/* --- transparent object hit areas, sized generously (§54) --- */
.bay-hits{grid-column:1;grid-row:1;position:relative;z-index:3}
.bay-hit{
  all:unset;position:absolute;cursor:pointer;box-sizing:border-box;
  border:1px solid transparent;
}
.bay-hit:focus-visible{outline:2px solid var(--amber);outline-offset:0}
.bay-hit[data-tool="scan"]   {left:7.5%; top:15%; width:15%; height:24%}
.bay-hit[data-tool="meter"]  {left:22.5%;top:16%; width:10%; height:23%}
.bay-hit[data-tool="boost"]  {left:33%;  top:18%; width:16%; height:20%}
.bay-hit[data-tool="air"]    {left:51%;  top:10%; width:18%; height:28%}
.bay-hit[data-tool="mast"]   {left:81%;  top:6%;  width:13%; height:80%}
.bay-hit[data-tool="hand"]   {left:8.5%; top:40%; width:18%; height:19%}
.bay-hit[data-tool="impact"] {left:27.5%;top:43%; width:13%; height:17%}
.bay-hit[data-tool="battery"]{left:40.5%;top:42%; width:13%; height:17%}
.bay-hit[data-tool="fluids"] {left:54.5%;top:41%; width:11%; height:19%}
.bay-hit[data-tool="trailer"]{left:65.5%;top:42%; width:11%; height:18%}
.bay-hit[data-tool="tire"]   {left:8%;   top:70%; width:20%; height:15%}
.bay-hit[data-tool="scene"]  {left:30.5%;top:67%; width:19%; height:18%}
.bay-art > svg{position:absolute;inset:0;width:100%;height:100%}

/* in-compartment technical markings */
.bay-mark text{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.2em;fill:#333B45}
.bay-hinge rect{fill:#232932;stroke:#2E3641;stroke-width:1.5}
.bay-door-t{font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:.04em;fill:#1C222A}
.bay-door-n{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.24em;fill:#1C222A}

/* --- equipment: dim by default, one object lit at a time (§7) --- */
.bay-kit{stroke:rgba(237,232,223,.34);stroke-width:2.6}
.bay-tool{
  transition:stroke .35s ease-out, filter .35s ease-out, transform .35s var(--ease-land);
  transform-box:fill-box;transform-origin:center;
}
.bay[data-active="scan"]    .bay-tool[data-tool="scan"],
.bay[data-active="meter"]   .bay-tool[data-tool="meter"],
.bay[data-active="boost"]   .bay-tool[data-tool="boost"],
.bay[data-active="air"]     .bay-tool[data-tool="air"],
.bay[data-active="mast"]    .bay-tool[data-tool="mast"],
.bay[data-active="hand"]    .bay-tool[data-tool="hand"],
.bay[data-active="impact"]  .bay-tool[data-tool="impact"],
.bay[data-active="battery"] .bay-tool[data-tool="battery"],
.bay[data-active="fluids"]  .bay-tool[data-tool="fluids"],
.bay[data-active="trailer"] .bay-tool[data-tool="trailer"],
.bay[data-active="tire"]    .bay-tool[data-tool="tire"],
.bay[data-active="scene"]   .bay-tool[data-tool="scene"]{
  stroke:#FFE0AC;
  /* lit edge + halo, then a real cast shadow onto the back panel and shelf */
  filter:drop-shadow(0 0 3px rgba(255,196,103,.7)) drop-shadow(0 0 12px rgba(255,160,30,.45))
         drop-shadow(7px 11px 7px rgba(3,4,7,.92)) drop-shadow(2px 3px 2px rgba(3,4,7,.8));
  transform:scale(1.012);
}
/* unlit equipment gets a quiet contact shadow so nothing floats */
.bay-tool{filter:drop-shadow(2px 3px 2px rgba(3,4,7,.55))}

/* where the lamp points for each object — derived from the composition */
.bay[data-active="scan"]   {--lx:15.1%;--ly:27.0%}
.bay[data-active="meter"]  {--lx:26.8%;--ly:28.3%}
.bay[data-active="boost"]  {--lx:40.6%;--ly:28.3%}
.bay[data-active="air"]    {--lx:60.0%;--ly:23.7%}
.bay[data-active="mast"]   {--lx:87.5%;--ly:16.0%}
.bay[data-active="hand"]   {--lx:17.3%;--ly:50.0%}
.bay[data-active="impact"] {--lx:32.8%;--ly:52.0%}
.bay[data-active="battery"]{--lx:47.3%;--ly:51.3%}
.bay[data-active="fluids"] {--lx:60.4%;--ly:51.3%}
.bay[data-active="trailer"]{--lx:71.0%;--ly:51.6%}
.bay[data-active="tire"]   {--lx:17.5%;--ly:78.9%}
.bay[data-active="scene"]  {--lx:40.0%;--ly:77.6%}

/* --- the inspection light: layered, not a gradient sticker (§33) --- */
.bay-light{
  position:absolute;left:var(--lx);top:var(--ly);
  width:46%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:
    radial-gradient(closest-side, rgba(255,238,200,.5), transparent 20%),
    radial-gradient(closest-side, rgba(255,197,96,.26), transparent 44%),
    radial-gradient(closest-side, rgba(255,158,24,.12), transparent 68%),
    radial-gradient(closest-side, rgba(255,140,10,.05), transparent 86%);
  transition:left .6s var(--ease-land), top .6s var(--ease-land), opacity .4s ease;
}
.bay[data-active] .bay-light{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .bay-light.strike{animation:lampstrike .5s ease-out}
}
@keyframes lampstrike{0%{opacity:0}18%{opacity:1.3}38%{opacity:.55}100%{opacity:1}}

/* --- door: open by default so no-JS shows the equipment (§27) --- */
.bay-doorface{
  transform-box:view-box;transform-origin:800px 18px;
  transform:scaleY(0);opacity:0;
  transition:transform .82s var(--ease-shutter), opacity .3s ease .5s;
}
.bay.shut .bay-doorface{transform:scaleY(1);opacity:1;transition:none}

/* --- readout: the spec plate, riveted to the compartment (§51) --- */
/* a spec plate bolted to the compartment, not a text column */
.bay-readout{
  grid-column:2;grid-row:1;
  border:1px solid var(--hair);border-left:0;
  background:
    linear-gradient(180deg, rgba(237,232,223,.035), transparent 22%),
    var(--n3);
  padding:56px 28px 28px;position:relative;
  display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:inset 0 0 0 1px rgba(4,5,9,.7);
}
.bay-readout::before{
  content:"COMPARTMENT MANIFEST";position:absolute;left:28px;top:22px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim);
}
/* stamped edge + four fasteners */
.bay-readout::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(237,232,223,.07);
}
.bay-screw{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #454E59, #171C23 70%);
  box-shadow:0 1px 0 rgba(237,232,223,.05)}
.bay-screw.s1{left:16px;top:16px}.bay-screw.s2{right:16px;top:16px}
.bay-screw.s3{left:16px;bottom:16px}.bay-screw.s4{right:16px;bottom:16px}
.bay-readout::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;
  border-right:2px solid var(--amber-deep);border-bottom:2px solid var(--amber-deep);
}
.bay-ro-n{
  font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.2em;
  color:var(--amber);display:flex;align-items:center;gap:12px;
}
.bay-ro-name{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,3vw,2.7rem);line-height:1;margin-top:12px;
}
.bay-ro-purpose{color:var(--dim);margin-top:12px;max-width:42ch;font-size:15.5px}
.bay-ro-link{margin-top:16px;min-height:1.4em}
.bay-ro-link a{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);border-bottom:1px solid rgba(255,176,0,.4);padding-bottom:4px;
  transition:color .12s var(--ease-switch), border-color .12s var(--ease-switch);
}
.bay-ro-link a:hover{color:var(--amber-hi);border-color:var(--amber)}

/* --- the controls --- */
/* the row index is the MOBILE control; desktop discovers the objects themselves */
.bay-list{
  display:none;list-style:none;grid-column:1/-1;
  grid-template-columns:1fr;border:1px solid var(--hair);border-top:0;
}
.bay-list li{position:relative;border-top:1px solid var(--hair);border-right:1px solid var(--hair)}
.bay-list li:nth-child(3n){border-right:0}
.bay-row{
  all:unset;box-sizing:border-box;cursor:pointer;display:grid;width:100%;
  grid-template-columns:34px 12px 1fr;grid-template-areas:"n l name" ". . purpose";
  gap:2px 12px;padding:15px 18px 15px 16px;min-height:72px;align-content:center;
  transition:background .16s var(--ease-switch);
}
.bay-n{grid-area:n;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--dimmer);align-self:center}
.bay-row .lamp{grid-area:l;align-self:center}
.bay-name{
  grid-area:name;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.22rem;line-height:1;color:var(--dim);
  transition:color .16s var(--ease-switch), text-shadow .3s ease-out;
}
.bay-purpose{grid-area:purpose;font-size:13px;color:#8E897F;transition:color .3s ease-out}
.bay-row:hover,.bay-row:focus-visible{background:rgba(237,232,223,.03)}
.bay-row:hover .bay-name,.bay-row:focus-visible .bay-name{color:var(--paper)}
.bay-row:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.bay-row.is-active{background:rgba(255,176,0,.05)}
.bay-row.is-active .lamp{background:var(--amber);box-shadow:var(--glow-box)}
.bay-row.is-active .bay-name{color:var(--amber);text-shadow:var(--glow-text)}
.bay-row.is-active .bay-n{color:var(--amber-deep)}
.bay-row.is-active .bay-purpose{color:var(--dim)}
.bay-go{
  position:absolute;right:14px;bottom:11px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8E897F;transition:color .12s var(--ease-switch);
}
.bay-go:hover{color:var(--amber)}
.bay-go:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---- MOBILE: the inversion. Compartment stays visual; large Rig Rescue
   tool rows become the control and light the object above (§55–§58). ---- */
@media (max-width:1000px), (hover:none) and (pointer:coarse){
  .bay{
    grid-template-columns:1fr;margin-inline:0;--lx:50%;--ly:46%;
    --bay-pan-x:0%;--bay-pan-y:0%;--bay-focus-x:50%;--bay-focus-y:46%;
  }
  .bay-hits{display:none}            /* never ask a thumb to hit a 2px line */
  .bay-list{display:grid}
  .bay-readout{grid-column:1;border-left:1px solid var(--hair);border-top:0;padding-top:48px}
  /* the compartment stays on screen while the rows scroll, so tapping a row
     visibly lights the object it controls */
  .bay-art{aspect-ratio:16/10;position:sticky;top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,68px) + 6px);z-index:2}
  .bay-art > svg{
    z-index:0;transform-origin:50% 50%;
    transform:translate3d(var(--bay-pan-x),var(--bay-pan-y),0) scale(1.42);
    transition:transform .38s var(--ease-land);
  }
  .bay-light{
    left:var(--bay-focus-x,var(--lx));top:var(--bay-focus-y,var(--ly));
    width:78%;z-index:3;
  }
  .bay-list li{border-right:0;display:grid}
  .bay-row{min-height:76px;padding:16px;grid-template-columns:38px 12px 1fr}
  .bay-name{font-size:1.34rem}
  .bay-purpose{font-size:13.5px}
  /* the related-service link gets its own tappable line, aligned to the name */
  .bay-go{
    position:static;transform:none;justify-self:start;
    padding:0 16px 15px 66px;font-size:11px;
  }
}

/* On phones the compartment and its selected readout form one sticky service
   bay. The controls continue beneath it, so a tap always has a visible result
   without asking the driver to scroll back up to find the selected card. */
@media (max-width:820px){
  .bay{
    --bay-art-h:clamp(240px,38svh,320px);
    --bay-readout-h:204px;
    align-items:start;
  }
  .bay-art{
    display:block;grid-row:1;position:sticky;
    top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + 6px);bottom:auto;z-index:4;
    width:100%;height:var(--bay-art-h);aspect-ratio:auto;
    contain:paint;
    box-shadow:0 18px 32px rgba(3,4,7,.78);
  }
  .bay-art::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(circle at var(--bay-focus-x) var(--bay-focus-y),
        rgba(255,205,119,.2) 0,rgba(255,166,42,.1) 10%,transparent 28%),
      radial-gradient(circle at var(--bay-focus-x) var(--bay-focus-y),
        transparent 0,transparent 14%,rgba(3,5,8,.22) 42%,rgba(3,5,8,.64) 100%);
    transition:background-position .38s var(--ease-land);
  }
  .bay-art::after{
    content:"FIELD UNIT / SELECT A LOAD-OUT CARD";
    position:absolute;left:12px;right:12px;bottom:10px;z-index:5;
    padding:7px 9px;border-left:2px solid var(--amber-deep);
    background:rgba(6,8,12,.82);color:var(--dim);
    font-family:var(--mono);font-size:9px;letter-spacing:.15em;
    text-transform:uppercase;pointer-events:none;
  }
  .bay-art > svg{
    transform-origin:50% 50%;
    transform:translate3d(var(--bay-pan-x),var(--bay-pan-y),0) scale(1.42);
  }
  .bay.shut .bay-doorface{transform:scaleY(0);opacity:0}
  .bay-kit{stroke:rgba(237,232,223,.46)}
  .bay-light{width:64%;z-index:3}
  .bay-list{border-top:1px solid var(--hair)}
  .bay-readout{
    grid-row:2;position:sticky;align-self:start;
    top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + var(--bay-art-h) + 6px);z-index:4;
    width:100%;height:var(--bay-readout-h);min-height:var(--bay-readout-h);
    padding:38px 18px 15px;overflow:auto;
    border-top:0;background:#0B0E13;
    box-shadow:0 18px 30px rgba(3,4,7,.82);
  }
  .bay-readout::before{left:18px;top:13px;font-size:8.5px}
  .bay-ro-n{font-size:10.5px}
  .bay-ro-name{font-size:clamp(1.55rem,7vw,2rem);margin-top:8px}
  .bay-ro-purpose{font-size:13.5px;line-height:1.45;margin-top:7px}
  .bay-ro-link{margin-top:8px;min-height:1.2em}
  .bay-ro-link a{font-size:10.5px}
  .bay-list{grid-row:3}
  .bay-list li{
    scroll-margin-top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + var(--bay-art-h) + var(--bay-readout-h) + 16px);
  }
  .bay-readout.is-mobile-flow{animation:bayMobileFlow .28s var(--ease-land)}
}
@keyframes bayMobileFlow{
  from{opacity:.45;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@media (max-width:820px) and (max-height:720px) and (orientation:portrait){
  .bay{--bay-art-h:clamp(220px,34svh,245px);--bay-readout-h:180px}
  .bay-readout{padding:32px 16px 11px}
  .bay-readout::before{top:10px;left:16px}
  .bay-ro-name{font-size:1.55rem;margin-top:6px}
  .bay-ro-purpose{font-size:12.5px;line-height:1.35;margin-top:5px}
  .bay-ro-link{margin-top:6px}
}

/* ==========================================================================
   07 · ON SITE
   ========================================================================== */
.fieldsteps{
  list-style:none;margin-top:48px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,110px);
}
.fieldsteps li{
  border-top:1px solid var(--hair);padding:22px 0 28px;
  display:grid;grid-template-columns:64px 1fr;gap:6px 22px;
}
.fieldsteps .cm-tag{grid-row:span 2;padding-top:5px}
.fieldsteps h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,2vw,1.9rem);line-height:1}
.fieldsteps p:not(.cm-tag){color:var(--dim);font-size:15px;max-width:26em}
@media (max-width:820px){.fieldsteps{grid-template-columns:1fr}.fieldsteps li{grid-template-columns:50px 1fr}}

/* ==========================================================================
   08 · VERSUS
   ========================================================================== */
.vs-grid{
  display:grid;grid-template-columns:1fr 1fr minmax(220px,320px);
  gap:clamp(34px,5vw,80px);margin-top:48px;align-items:center;
}
.vs-col ul{list-style:none}
.vs-col li{padding:12px 0;border-bottom:1px solid var(--hair);display:flex;gap:14px;align-items:center}
.vs-a li{color:var(--paper)}
.vs-a li::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 7px;box-shadow:var(--glow-box)}
.vs-b li{color:var(--dimmer)}
.vs-b li::before{content:"";width:7px;height:7px;border:1.5px solid var(--dimmer);flex:0 0 7px}
.vs-fig svg{width:100%;height:auto;display:block}
@media (max-width:900px){.vs-grid{grid-template-columns:1fr 1fr}.vs-fig{display:none}}
@media (max-width:720px){.vs-grid{grid-template-columns:1fr}}

/* ==========================================================================
   09 · SERVICE AREA
   ========================================================================== */
.area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(30px,4vw,70px);margin-top:48px}
.area-card{border-top:1px solid var(--hair);padding:22px 0 28px}
.area-card-wide{grid-column:1/-1;border-top:1px solid var(--hair)}
.area-tag{
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--dimmer);display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.area-card h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1}
.area-card p{color:var(--dim);font-size:15px;margin-top:12px;max-width:34em}
@media (max-width:820px){.area-grid{grid-template-columns:1fr}}

/* ==========================================================================
   10 · THE HUMAN
   ========================================================================== */
.whoshows{background:var(--n1);overflow:hidden}
.who-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);
  gap:clamp(40px,6vw,100px);align-items:center;
}
.who-photo{position:relative;margin-right:calc(-1 * var(--gutter));margin-block:-40px}
.who-photo img{
  width:100%;height:auto;display:block;aspect-ratio:700/926;object-fit:cover;
  filter:contrast(1.05) saturate(.92) brightness(.94);
}
.who-fade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, var(--n1) 0%, rgba(11,13,17,.72) 14%, rgba(11,13,17,.14) 34%, transparent 52%),
    linear-gradient(0deg, var(--n1) 0%, rgba(11,13,17,.28) 14%, transparent 32%),
    linear-gradient(180deg, var(--n1) 0%, rgba(11,13,17,.3) 14%, transparent 32%);
}
@media (max-width:900px){
  .who-grid{grid-template-columns:1fr}
  .who-photo{margin-block:0;margin-left:calc(-1 * var(--gutter))}
}

/* ==========================================================================
   11 · FAQ — native details/summary: works with no JS at all
   ========================================================================== */
/* full-bleed technical rows: the manual chapter at the end of the page */
.faq-list{
  margin-top:44px;
  margin-inline:calc(-1 * var(--gutter));
  border-top:1px solid var(--hair);
  counter-reset:faq;
}
.faq{border-bottom:1px solid var(--hair);counter-increment:faq}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:var(--gutter) 58px 1fr 64px;
  align-items:center;gap:0 18px;
  padding:26px 0;transition:background .16s var(--ease-switch);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::before{
  content:counter(faq,decimal-leading-zero);grid-column:2;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dimmer);
  transition:color .16s var(--ease-switch);
}
.faq summary h3{
  grid-column:3;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,2.5rem);line-height:1.02;color:var(--paper);
  transition:color .16s var(--ease-switch);max-width:none;
}
.faq summary .lamp{display:none}
.faq summary::after{
  content:"+";grid-column:4;justify-self:center;
  font-family:var(--mono);font-size:28px;line-height:1;color:var(--dim);
  transition:transform .3s var(--ease-shutter), color .16s var(--ease-switch);
}
.faq[open] summary::after{transform:rotate(45deg);color:var(--amber)}
.faq[open] summary::before{color:var(--amber)}
.faq[open] summary h3{color:var(--amber)}
.faq summary:hover{background:rgba(237,232,223,.028)}
.faq summary:hover h3{color:var(--amber)}
.faq summary:hover::after{color:var(--amber)}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
/* answer aligns to the question column and uses the row it sits in */
.faq p{
  display:block;grid-column:3;
  color:var(--dim);font-size:16px;line-height:1.74;max-width:70ch;
  margin:0 0 0 calc(var(--gutter) + 76px);
  padding:0 var(--gutter) 30px 22px;
  border-left:2px solid var(--amber-deep);
}
@media (max-width:820px){
  .faq summary{grid-template-columns:var(--gutter) 40px 1fr 46px;padding:20px 0;gap:0 12px}
  .faq summary h3{font-size:1.24rem;max-width:none}
  .faq summary::after{font-size:22px}
  .faq p{padding-left:calc(var(--gutter) + 16px);font-size:15px;margin-left:var(--gutter)}
}

/* ---- shared mobile ------------------------------------------------------ */
@media (max-width:820px){
  .rhero{min-height:96svh}
  .rhero-h{font-size:13.4vw;line-height:.9}
  /* the locality list wraps instead of running off the right edge */
  .rhero-eyebrow{
    display:grid;grid-template-columns:9px 1fr;gap:0 10px;align-items:start;
    white-space:normal;line-height:1.7;font-size:11px;letter-spacing:.14em;
  }
  .rhero-eyebrow .lamp{margin-top:5px}
  .rhero-sub{font-size:15px}
  .rhero-cta .btn-call{width:100%;text-align:center}
  /* the portrait hero is carried by type + CTA; the decorative distant unit
     only competes with the running copy, so it is dropped at this breakpoint */
  .rhero-far{display:none}
  .run-intro{padding-top:clamp(56px,8vh,90px)}
  .run-track{height:280svh}
  /* portrait framing: truck anchors the frame, then the camera pans to the
     casualty on arrival so the payoff is actually in shot */
  /* portrait framing: centred on the service truck while travelling, then a
     wider window at arrival so BOTH units sit inside the frame (viewBox
     ~355–1020 covers the rescue truck at 364 and the casualty out to 990) */
  .vroad{
    width:150%;left:-25%;
    transform:translateX(calc(var(--arr,0) * -19%));
    will-change:auto;
  }
  .run.is-active .run-stage.moving.is-scrolling .vroad{will-change:transform}
  /* the rail is secondary — the caption already names the phase */
  .run-rail{display:none}
  .run-log{bottom:auto;top:92px}
  .run-log li{bottom:auto;top:0}   /* grow downward, not off the top edge */
  .log-say{font-size:1.32rem;max-width:none}
  .log-sub{font-size:11px}
  .run-log li{max-width:none;width:auto;font-size:12px}
  .run:not(.run-live) .vroad,.run-static .vroad{width:100%;left:0;height:min(52svh,420px)}
}

/* The useful hero content paints on the first mobile frame. Desktop keeps its
   cinematic entrance; a phone never waits behind a black stage for the CTA. */
@media (max-width:820px) and (prefers-reduced-motion:no-preference),
       (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
  .rhero-stage,.rhero-eyebrow,.rhero-sub,.rhero-cta{opacity:1;animation:none}
  .rhero .hl-in{transform:none;animation:none}
}

/* iPhone paint budget: retain truck, weather identity, lights and arrival,
   while culling duplicate depth layers and expensive SVG raster filters. */
@media (max-width:820px), (pointer:coarse){
  .v-cloud-2,.v-cloud-3,.v-mist-2,.v-rain-c,.v-rain-amb,.v-snow-far{display:none}
  .rc-dash.d2,.rc-dash.d4,.rc-dash.d6,.rc-dash.d8,
  .rc-tree.d3,.rc-post.d5{display:none}
  .v-splash ellipse:nth-child(n+4){display:none}
  .v-cloud-l,.v-mist-l{animation:none!important}
  /* Mobile zero-idle-work lock: keep the selected weather/arrival frame,
     but do not leave compositor animations running after touch scroll ends. */
  .run.is-active .run-stage:not(.is-scrolling)[data-phase="c"] .v-rain-track,
  .run.is-active .run-stage:not(.is-scrolling)[data-phase="c"] .v-splash ellipse,
  .run.is-active .run-stage:not(.is-scrolling)[data-phase="d"] .v-snow-l,
  .run.is-active .run-stage:not(.is-scrolling)[data-phase="e"] .v-snow-l,
  .run.is-active .run-stage:not(.is-scrolling) .v-truck .beacon,
  .run.is-active .run-stage:not(.is-scrolling) .v-truck .beacon-halo,
  .run.is-active .run-stage:not(.is-scrolling) .v-hz circle{
    animation-play-state:paused!important;
  }
  .v-head,.v-head-pool,.v-workcone{filter:none}
  .bay-tool{filter:none}
  .bay[data-active="scan"]    .bay-tool[data-tool="scan"],
  .bay[data-active="meter"]   .bay-tool[data-tool="meter"],
  .bay[data-active="boost"]   .bay-tool[data-tool="boost"],
  .bay[data-active="air"]     .bay-tool[data-tool="air"],
  .bay[data-active="mast"]    .bay-tool[data-tool="mast"],
  .bay[data-active="hand"]    .bay-tool[data-tool="hand"],
  .bay[data-active="impact"]  .bay-tool[data-tool="impact"],
  .bay[data-active="battery"] .bay-tool[data-tool="battery"],
  .bay[data-active="fluids"]  .bay-tool[data-tool="fluids"],
  .bay[data-active="trailer"] .bay-tool[data-tool="trailer"],
  .bay[data-active="tire"]    .bay-tool[data-tool="tire"],
  .bay[data-active="scene"]   .bay-tool[data-tool="scene"]{
    filter:drop-shadow(0 0 4px rgba(255,176,0,.48));transform:none
  }
  .bay-light{mix-blend-mode:normal}
  .bay-art > svg{transition:transform .32s var(--ease-land)}
  .spot.on{filter:none}
  .who-photo img{filter:none}
}

/* Touch landscape uses the same deterministic card mechanism, but mounts the
   compartment and readout side by side so neither steals the short viewport. */
@media (max-width:1000px) and (orientation:landscape),
       (hover:none) and (pointer:coarse) and (orientation:landscape){
  .bay{
    --bay-art-h:clamp(210px,calc(100svh - var(--header-h,62px) - 96px),280px);
    grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr);
    align-items:start;
  }
  .bay-art{
    grid-column:1;grid-row:1;top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + 6px);
    width:100%;height:var(--bay-art-h);aspect-ratio:auto;contain:paint;
  }
  .bay-art > svg{
    transform-origin:50% 50%;
    transform:translate3d(var(--bay-pan-x),var(--bay-pan-y),0) scale(1.42);
  }
  .bay-readout{
    grid-column:2;grid-row:1;position:sticky;align-self:start;
    top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + 6px);z-index:4;
    height:var(--bay-art-h);min-height:0;padding:38px 17px 14px;
    overflow:auto;border-top:1px solid var(--hair);border-left:0;background:#0B0E13;
  }
  .bay-readout::before{left:17px;top:13px;font-size:8px}
  .bay-ro-name{font-size:clamp(1.35rem,3.8vw,1.8rem);margin-top:8px}
  .bay-ro-purpose{font-size:13px;line-height:1.4;margin-top:7px}
  .bay-ro-link{margin-top:8px}
  .bay-list{grid-column:1/-1;grid-row:2}
  .bay-list li{
    scroll-margin-top:calc(var(--rr-admin-bar-h,0px) + var(--header-h,62px) + var(--bay-art-h) + 16px);
  }
}

@media (prefers-reduced-motion:reduce){
  .bay-art > svg,.bay-light{transition:none}
  .bay-readout.is-mobile-flow{animation:none}
}