/* ==========================================================================
   RIG RESCUE — V3 "ROADSIDE AFTER DARK"
   Two voices: Big Shoulders Display (signage) + Overpass/Overpass Mono (readout).
   One accent: sodium work-light amber, reserved for action + live state.
   ========================================================================== */

:root{
  /* night surfaces — never pure black */
  --n0:#07080B;          /* deep sky        */
  --n1:#0B0D11;          /* page base       */
  --n2:#101318;          /* elevation 1     */
  --n3:#161A21;          /* elevation 2     */
  --sil:#05070B;         /* silhouette ink  */

  --paper:#EDE8DF;       /* warm off-white  */
  --dim:#9C978C;         /* muted text      */
  --dimmer:#5F5C55;      /* faint text      */
  --hair:rgba(237,232,223,.09);

  --amber:#FFB000;
  --amber-hi:#FFC443;
  --amber-deep:#C97F00;

  /* tungsten, not neon: short warm throws */
  --glow-text: 0 0 1px rgba(255,205,110,.9), 0 0 6px rgba(255,176,0,.45),
               0 0 16px rgba(240,140,0,.22), 0 0 40px rgba(220,120,0,.1);
  --glow-box:  0 0 1px rgba(255,205,110,.8), 0 0 5px rgba(255,176,0,.4),
               0 0 14px rgba(240,140,0,.2), 0 0 34px rgba(220,120,0,.09);

  --disp:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:"Overpass", system-ui, sans-serif;
  --mono:"Overpass Mono", ui-monospace, monospace;

  --ease-land:cubic-bezier(.16,1,.3,1);     /* expo-out: heavy things land   */
  --ease-shutter:cubic-bezier(.7,0,.2,1);   /* shutter/slide                  */
  --ease-switch:cubic-bezier(.9,0,.1,1);    /* relay click                    */

  --gutter:clamp(20px, 5vw, 84px);

  /* a deliberate page rhythm: compact proof, standard content, authored pauses */
  --section-tight:clamp(48px, 7vh, 76px);
  --section-normal:clamp(72px, 10vh, 120px);
  --section-wide:clamp(96px, 14vh, 156px);
  --section-cinematic:clamp(120px, 18vh, 210px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--n1);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--amber);color:#0B0D11}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.skip{position:fixed;left:-200vw;top:0;z-index:200;background:var(--amber);color:#0B0D11;
  font-family:var(--mono);font-size:12px;padding:10px 16px}
.skip:focus{left:0}

/* ---- grain: the anti-template layer ------------------------------------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ---- shared voices ------------------------------------------------------ */
.kicker{
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:10px;
}
.amber{color:var(--amber)}
.h2{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(3rem, 7.2vw, 6.5rem);
  line-height:.9;letter-spacing:.005em;margin-top:18px;
}
.h2-s{font-size:clamp(2.4rem, 5vw, 4.4rem)}
.lede{margin-top:20px;color:var(--dim);max-width:34em}
.body{margin-top:20px;color:var(--dim);max-width:34em}

/* lamp — square diagnostic indicator */
.lamp{
  width:9px;height:9px;flex:0 0 9px;display:inline-block;
  background:var(--dimmer);
  transition:background .35s ease-out, box-shadow .35s ease-out;
}
.lamp.on{background:var(--amber);box-shadow:var(--glow-box)}

/* scroll reveal — gated on .rrx-js so that with JavaScript disabled every
   section is simply visible. Without this gate .rv content is unreachable to
   a no-JS reader, and to any page whose controller failed to load. */
.rrx-js .rv{opacity:0;transform:translateY(26px)}
.rv.in,.rrx-js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-land), transform .7s var(--ease-land)}
@media (prefers-reduced-motion:reduce){
  .rv,.rrx-js .rv{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:14px var(--gutter);
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{background:rgba(11,13,17,.82);backdrop-filter:blur(12px);border-color:var(--hair)}
.hdr-brand{display:flex;align-items:center;gap:16px}
/* the mark is vector and inherits colour, so it stays crisp at any size */
.rr-mark{display:block;width:100%;height:auto;color:inherit}
.hdr-brand .rr-mark{width:88px;flex:0 0 88px}
.hdr-brand img{width:56px;height:auto}
.hdr-lockup{display:grid;gap:3px}
.hdr-name-line{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.hdr-word{font-family:var(--disp);font-weight:800;font-size:34px;line-height:.86;letter-spacing:.03em}
.hdr-desc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hdr.scrolled .hdr-brand img{width:44px}
.hdr.scrolled .hdr-word{font-size:26px}
.hdr-brand img,.hdr-word{transition:width .35s var(--ease-land), font-size .35s var(--ease-land)}
.hdr-nav{display:flex;gap:26px;margin-left:auto}
.hdr-nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  transition:color .12s var(--ease-switch);
}
.hdr-nav a:hover{color:var(--amber)}
.hdr-call{
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;
  color:var(--amber);border:1px solid rgba(255,176,0,.4);
  padding:10px 16px;display:flex;align-items:center;gap:10px;
  transition:background .12s var(--ease-switch), box-shadow .12s var(--ease-switch), color .12s var(--ease-switch);
}
.hdr-call .lamp{background:var(--amber)}
.hdr-call:hover{background:var(--amber);color:#0B0D11;box-shadow:var(--glow-box)}
.hdr-call:hover .lamp{background:#0B0D11;box-shadow:none}
@media (max-width:900px){
  /* the nav itself collapses at 1100px, where the MENU button takes over */
  .hdr-desc{display:none}
}
@media (max-width:820px){
  /* header scrolls away on phones — the call bar owns conversion */
  .hdr{position:absolute;gap:16px;padding-top:16px}
  .hdr.scrolled{background:transparent;backdrop-filter:none;border-color:transparent}
  .hdr-brand{gap:11px}
  .hdr-brand img,.hdr.scrolled .hdr-brand img{width:40px}
  .hdr-word,.hdr.scrolled .hdr-word{font-size:25px;white-space:nowrap}
  .hdr-call{
    margin-left:auto;padding:9px 12px;font-size:12px;gap:8px;white-space:nowrap;
  }
}

/* ==========================================================================
   S01 · PHOTOGRAPHIC HERO — full bleed, campaign scale
   ========================================================================== */
.phero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(64px,11vh,132px);
  overflow:hidden;isolation:isolate;
  background:var(--n0);
}
.phero-media{position:absolute;inset:0;z-index:-1}
.phero-img{
  width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  display:block;
}
/* layered readability: heavy left field → transparent over the mechanic */
.phero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(5,6,10,.9) 0%, rgba(5,6,10,.78) 24%,
                            rgba(6,8,12,.52) 44%, rgba(7,9,13,.18) 63%, transparent 82%),
    linear-gradient(0deg, rgba(5,6,10,.92) 0%, rgba(6,8,12,.34) 26%, transparent 52%),
    linear-gradient(180deg, rgba(5,6,10,.72) 0%, transparent 22%);
}
/* controlled darkness over the generated livery lettering (url / 844 / 24-7 block) */
.phero-liveryscrim{
  position:absolute;inset:0;
  background:
    radial-gradient(15% 13% at 39.5% 39%, rgba(4,5,9,.97), rgba(4,5,9,.8) 52%, transparent 82%),
    radial-gradient(13% 12% at 31% 55%, rgba(4,5,9,.94), rgba(4,5,9,.68) 52%, transparent 84%),
    radial-gradient(11% 9% at 27.5% 65%, rgba(4,5,9,.94), rgba(4,5,9,.62) 52%, transparent 84%),
    radial-gradient(9% 9% at 14.5% 57%, rgba(4,5,9,.88), transparent 80%);
}

.phero-copy{position:relative;z-index:1;width:100%;max-width:min(1240px,100%)}
.phero-h,.phero-k{max-width:none}
.phero-sub{max-width:44em}
.phero-k{margin-bottom:20px}
.phero-k .lamp.on{animation:kblink 4s steps(1) 3}
@keyframes kblink{0%,92%,100%{opacity:1}94%,96%{opacity:.35}}

.phero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(3.6rem,11.4vw,15.5rem);
  line-height:.86;letter-spacing:.004em;
  margin-left:-.04em;
  text-shadow:0 6px 40px rgba(4,5,9,.6);
  white-space:nowrap;   /* two lines. never three. */
}
.hl{display:block;overflow:hidden;padding-bottom:.045em;margin-bottom:-.045em}
.hl-in{display:inline-block}

.phero-tagline{
  margin-top:clamp(14px,2.2vh,24px);
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.35rem,2.3vw,2.2rem);line-height:1;letter-spacing:.035em;
  color:var(--paper);text-shadow:0 4px 26px rgba(4,5,9,.7);
}
.phero-context{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;
  margin-top:clamp(14px,2vh,22px);
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.13em;line-height:1.7;text-transform:uppercase;color:var(--dim);
}
.phero-context .lamp{margin-right:1px}
.phero-cta{display:inline-block;margin-top:clamp(22px,3.2vh,34px)}
.phero-sub{
  margin-top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}

/* --- light match cut: the lamp that survives into the drawn world --------- */
.matchcut{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,176,0,.16) 12%,
             rgba(255,176,0,.3) 19%, rgba(255,176,0,.12) 30%, transparent 62%);
}
.matchcut-lamp{
  position:absolute;left:19%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;background:var(--amber);box-shadow:var(--glow-box);
}

/* --- phero entrance: black → lights → photo → type → CTA ----------------- */
@media (prefers-reduced-motion:no-preference){
  .phero-img{opacity:0;transform:scale(1.045);
    animation:pheroIn 1.9s var(--ease-land) .1s forwards}
  .phero-scrim,.phero-liveryscrim{opacity:0;animation:fadein 1.2s ease-out .45s forwards}
  .phero-k{opacity:0;animation:fadein .6s ease-out .95s forwards}
  .hl-in{transform:translateY(108%);animation:landline .8s var(--ease-land) forwards}
  .hl:nth-child(1) .hl-in{animation-delay:1.05s}
  .hl:nth-child(2) .hl-in{animation-delay:1.2s}
  .phero-cta,.phero-sub{opacity:0;animation:fadein .8s ease-out 1.8s forwards}
  .matchcut{opacity:0;animation:strike 1.3s ease-out 1.5s forwards}
}
@keyframes pheroIn{to{opacity:1;transform:scale(1)}}

/* ==========================================================================
   S02 · SVG BRIDGE — the drawn world, directly beneath the photograph
   ========================================================================== */
.bridge{
  position:relative;min-height:74svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  overflow:hidden;
}
.hero-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(52% 34% at 62% 66%, rgba(255,160,20,.075), transparent 70%),
    radial-gradient(20% 12% at 63% 42%, rgba(120,150,190,.05), transparent 70%),
    linear-gradient(180deg, #05060A 0%, #090B10 52%, #0E1117 100%);
}
.hero-scene{
  position:absolute;inset:auto 0 0 0;height:62%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%);
  mask-image:linear-gradient(180deg, transparent 0, #000 15%);
}
.hero-scene svg{width:100%;height:100%;display:block}
.hero-fade{
  position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(180deg, transparent, var(--n1) 92%);
}

.bridge-copy{
  position:relative;z-index:2;
  padding:clamp(56px,9vh,104px) var(--gutter) 0;
}
.bridge-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,6.4vw,6.4rem);
  line-height:.9;letter-spacing:.005em;margin-top:18px;
  max-width:14em;
}

.btn-call{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(15px,1.3vw,18px);letter-spacing:.08em;
  background:var(--amber);color:#0B0D11;
  padding:18px 30px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition:box-shadow .12s var(--ease-switch), background .12s var(--ease-switch);
}
.btn-call:hover{background:var(--amber-hi);box-shadow:var(--glow-box)}

/* restrained cross-page links */
.sec-link{margin-top:34px}
.sec-link a{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);padding-bottom:5px;
  transition:color .12s var(--ease-switch), border-color .12s var(--ease-switch);
}
.sec-link a:hover{color:var(--amber);border-color:var(--amber)}

/* --- bridge: the drawn scene lights up as it enters view --- */
@media (prefers-reduced-motion:no-preference){
  .bridge .lightfield{opacity:0}
  .bridge.lit .lightfield{animation:strike 1.4s ease-out .15s forwards}
}
@keyframes fadein{to{opacity:1}}
@keyframes sceneup{to{opacity:1;transform:none}}
@keyframes landline{to{transform:none}}
/* sodium-vapor strike: off — flash — dip — full */
@keyframes strike{0%{opacity:0}38%{opacity:0}46%{opacity:.85}58%{opacity:.3}78%{opacity:1}100%{opacity:1}}

/* ambient life (subtle, loops) */
@media (prefers-reduced-motion:no-preference){
  .beacon{animation:beacon 2.6s ease-in-out infinite;animation-play-state:paused}
  .beacon-halo{animation:beacon 2.6s ease-in-out infinite;animation-play-state:paused}
  .far-traffic{animation:traffic 9s ease-in-out infinite;animation-play-state:paused}
  .bridge.is-active .beacon,.bridge.is-active .beacon-halo,.bridge.is-active .far-traffic{animation-play-state:running}
}
@keyframes beacon{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes traffic{0%,100%{opacity:.35}50%{opacity:.8}}

/* --- seam marquee --- */
.seam{
  position:relative;z-index:3;margin-top:auto;
  border-top:1px solid var(--hair);
  background:rgba(7,8,11,.6);
  overflow:hidden;white-space:nowrap;
  padding:13px 0;
}
.seam-track{display:inline-block;white-space:nowrap}
.seam-track span{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--dimmer);
  display:inline-block;
}
@media (prefers-reduced-motion:no-preference){
  .seam-track{animation:marq 46s linear infinite;animation-play-state:paused}
  .bridge.is-active .seam-track{animation-play-state:running}
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   SECTIONS — shared frame
   ========================================================================== */
.sec{padding:var(--section-normal) var(--gutter);border-top:1px solid var(--hair);position:relative}
.sec-head{max-width:1200px}

/* ==========================================================================
   S02 · FAILURE BOARD
   ========================================================================== */
.board{background:var(--n1)}
.fail-list{list-style:none;margin-top:44px}
.fail{border-top:1px solid var(--hair)}
.fail:last-child{border-bottom:1px solid var(--hair)}
.fail-btn{
  all:unset;cursor:pointer;display:grid;width:100%;
  grid-template-columns:34px minmax(0,1fr) minmax(0,24em);
  align-items:center;column-gap:32px;
  padding:16px 0;
}
.fail-btn .lamp{align-self:center}
.fail-term{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(156,151,140,.62);
  transition:color .12s var(--ease-switch), -webkit-text-stroke-color .12s var(--ease-switch),
             text-shadow .35s ease-out;
  white-space:nowrap;
}
.fail-det{
  color:var(--dimmer);max-width:34em;
  opacity:.66;
  transition:opacity .35s ease-out, color .35s ease-out;
}
.fail-btn:hover .fail-term,.fail.lit .fail-term{
  color:var(--amber);-webkit-text-stroke-color:transparent;text-shadow:var(--glow-text);
}
.fail-btn:hover .lamp,.fail.lit .lamp{background:var(--amber);box-shadow:var(--glow-box)}
.fail-btn:hover .fail-det,.fail.lit .fail-det{opacity:1;color:var(--dim)}
@media (max-width:820px){
  .fail-btn{grid-template-columns:22px 1fr;row-gap:6px;padding:14px 0}
  .fail-term{
    white-space:normal;font-size:clamp(2.1rem,10vw,3.2rem);
    -webkit-text-stroke:0;color:var(--dim);
  }
  .fail-btn:hover .fail-term,.fail.lit .fail-term{color:var(--amber)}
  .fail-det{grid-column:2;font-size:14.5px;max-width:none}
}

/* ==========================================================================
   S03 · THE UNIT
   ========================================================================== */
.unit{background:var(--n1)}
.unit-stage{margin-top:56px}
.schematic{
  width:100%;max-width:1250px;height:auto;display:block;margin-inline:auto;
  color:rgba(237,232,223,.72);
}
.spot-nums text{
  font-family:var(--mono);font-size:15px;fill:var(--dimmer);
}
.spot-g{cursor:pointer}
.spot-hit{fill:transparent}
.spot{
  fill:var(--amber);opacity:.85;
  transition:opacity .12s var(--ease-switch);
}
.spot-g:hover .spot{opacity:1}
.spot-g.active .spot{filter:drop-shadow(0 0 5px rgba(255,176,0,.9)) drop-shadow(0 0 14px rgba(255,150,0,.45))}
@media (prefers-reduced-motion:no-preference){
  .spot{animation:spotpulse 3s ease-in-out infinite;animation-play-state:paused}
  .unit.is-active .spot{animation-play-state:running}
  .spot-g.active .spot{animation:none;opacity:1}
}
@keyframes spotpulse{0%,100%{opacity:.5}50%{opacity:.95}}

/* readout: the truck is the nav; this is the gauge below it */
.unit-readout{
  margin-top:34px;border-top:1px solid var(--hair);padding-top:26px;
}
.unit-index{
  display:flex;flex-wrap:wrap;column-gap:6px;row-gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  margin-bottom:30px;
}
.unit-ix{
  all:unset;cursor:pointer;color:var(--dimmer);padding:4px 6px;
  transition:color .12s var(--ease-switch);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.unit-ix em{font-style:normal;color:inherit;opacity:.55;margin-right:6px}
.unit-ix:hover{color:var(--paper)}
.unit-ix.active{color:var(--amber)}
.unit-ix.active em{opacity:1}
.unit-sep{color:var(--dimmer);opacity:.4;align-self:center}
.unit-detail{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);align-items:start;
}
.unit-tag{color:var(--amber)}
.unit-title{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,3.4vw,3.4rem);line-height:.95;margin-top:10px;
}
.unit-body{color:var(--dim);margin-top:12px;max-width:30em}
.unit-items{list-style:none;display:grid;gap:9px;padding-top:6px}
.unit-items li{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:12px;
}
.unit-items li::before{content:"";width:7px;height:7px;background:var(--amber);flex:0 0 7px}
.unit-step{display:flex;gap:10px}
.unit-arrow{
  all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--dim);font-size:18px;
  transition:color .12s var(--ease-switch), border-color .12s var(--ease-switch),
             background .12s var(--ease-switch);
}
.unit-arrow:hover{color:#0B0D11;background:var(--amber);border-color:var(--amber)}
@media (max-width:980px){
  .unit-detail{grid-template-columns:1fr;gap:20px}
  .unit-step{order:-1;justify-content:flex-end;margin-top:-6px}
  .spot-g{pointer-events:none}         /* index + arrows drive on touch */
  .spot-nums text{font-size:19px}
  .unit-index{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
  .unit-sep{display:none}
  .unit-ix{padding:5px 0}
}

/* Phones use a dedicated control deck. The diagram remains the richer desktop
   instrument; on touch, every system is a large real button with one stable
   selected state and an immediate readout. */
@media (max-width:820px){
  .unit-stage{
    display:block;margin-top:28px;overflow:hidden;border:1px solid var(--hair);
    background:linear-gradient(180deg,rgba(237,232,223,.025),transparent 70%);
  }
  .unit-stage .fs-wrap{overflow:hidden}
  .unit-stage .schematic{
    width:220%;max-width:none;margin:0;transform:translateX(var(--unit-pan,0%));
    transition:transform .38s var(--ease-land);will-change:transform;
  }
  /* The button deck already carries these numbers. Keeping the drawing labels
     on the enlarged mobile viewport lets them escape the body silhouette. */
  .unit-stage .spot-nums{display:none}
  .unit-stage .fs-card{display:none}
  .unit-readout{margin-top:28px;border-top:0;padding-top:0}
  .unit-index{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;margin-bottom:18px;
  }
  .unit-index::before{
    content:"CHOOSE A SYSTEM";grid-column:1/-1;
    font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    color:var(--amber);margin-bottom:2px;
  }
  .unit-index .unit-ix{
    all:unset;box-sizing:border-box;cursor:pointer;min-width:0;min-height:64px;
    display:flex;align-items:center;padding:12px 13px;border:1px solid var(--hair);
    color:var(--dim);font-family:var(--mono);font-size:11px;line-height:1.35;
    letter-spacing:.09em;text-transform:uppercase;
  }
  .unit-ix em{flex:0 0 auto;margin-right:8px;color:var(--dimmer)}
  .unit-ix.active{
    color:var(--paper);border-color:var(--amber);
    background:rgba(255,176,0,.09);box-shadow:inset 3px 0 0 var(--amber);
  }
  .unit-ix.active em{color:var(--amber)}
  .unit-detail{gap:18px;border:1px solid var(--hair);padding:20px}
  .unit-detail.is-mobile-flow{animation:unitMobileFlow .28s var(--ease-land)}
  .unit-title{font-size:2.35rem}
  .unit-step{order:initial;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
  .unit-arrow{
    box-sizing:border-box;width:100%;height:52px;display:flex;align-items:center;
    justify-content:center;gap:9px;font-family:var(--mono);font-size:16px;
  }
  .unit-arrow::after{
    content:attr(aria-label);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  }
}
@keyframes unitMobileFlow{
  from{opacity:.45;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@media (max-width:360px){
  .unit-index{grid-template-columns:1fr}
}

/* shop-scale band */
.scale{
  margin-top:clamp(60px,8vh,100px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);
  gap:clamp(30px,4vw,80px);align-items:end;
  border-top:1px solid var(--hair);padding-top:clamp(40px,5vh,70px);
}
.boundary{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;line-height:2.1;
  color:var(--dimmer);
  border-left:2px solid var(--amber-deep);padding-left:20px;
}
@media (max-width:820px){.scale{grid-template-columns:1fr}}

/* ==========================================================================
   S05 · THE CALL
   ========================================================================== */
.calls{background:var(--n1)}
.calls-scene{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-38%);
  width:min(40vw,620px);pointer-events:none;
}
.calls-scene svg{width:100%;height:auto;display:block}
.calls-scene-cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--dimmer);
  text-align:right;margin-top:6px;
}
@media (max-width:1100px){.calls-scene{display:none}}
.steps{position:relative;margin-top:56px;max-width:820px}
.steps-line{
  position:absolute;left:4px;top:6px;bottom:6px;width:2px;
  background:var(--hair);
}
.steps-fill{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(180deg,var(--amber),var(--amber-deep));
  transform-origin:top;transform:scaleY(var(--p,0));
  box-shadow:0 0 8px rgba(255,176,0,.5);
}
@media (prefers-reduced-motion:reduce){.steps-fill{transform:scaleY(1)}}
.steps-list{list-style:none;display:grid;gap:clamp(40px,6vh,64px)}
.step{position:relative;padding-left:52px}
.step .lamp{position:absolute;left:0;top:4px}
.step.in .lamp{background:var(--amber);box-shadow:var(--glow-box)}
.step-h{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:.95;margin-top:10px;
}
.step-b{color:var(--dim);margin-top:10px;max-width:34em}

/* ==========================================================================
   S06 · TERRITORY
   ========================================================================== */
.where{background:var(--n1)}
.where > .sec-head{position:relative;z-index:2}

/* --- vertical night drive ------------------------------------------------ */
.route{margin-top:40px;margin-inline:calc(-1 * var(--gutter))}
.route-track{height:190vh;position:relative}
/* checkpoint text lives only in the dark layer: states are binary, never half-lit */
.rw-lit .ck{display:none}
.route-fallback{display:none;padding:0 var(--gutter)}
.route-fallback svg{width:100%;height:auto;display:block}
.fb-name{font-family:var(--disp);font-weight:800;font-size:44px;fill:var(--paper);letter-spacing:.01em}
.fb-kick{font-family:var(--mono);font-weight:600;font-size:12px;fill:var(--dim);letter-spacing:.18em}
.fb-badge-t{font-family:var(--mono);font-weight:600;font-size:14px;fill:var(--paper);letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){
  .route-track{display:none}
  .route-fallback{display:block}
}
.route-static .route-track{display:none}
.route-static .route-fallback{display:block}
.route-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:linear-gradient(180deg,#05060A, #0A0C10 55%, #0C0E13);
}
.route-svg{width:100%;height:100%;display:block}
.route-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg, var(--n1), transparent 14%, transparent 86%, var(--n1)),
    radial-gradient(130% 95% at 50% 50%, transparent 52%, rgba(5,6,9,.85) 100%);
}
.route-cap{
  position:absolute;z-index:3;top:92px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--dimmer);
}
.route-cap-l{left:var(--gutter)}
.route-cap-r{right:var(--gutter)}

/* world movement: 3200-unit world, 1000-unit window */
.rw > .route-world{transform:translateY(calc((1 - var(--route-p, 0)) * -2200px))}

/* darkness state: everything exists, barely — until the light reaches it */
.rw-dark .route-world > *{opacity:.55;transition:opacity .5s ease-out}
.route-live .rw-dark .route-world > *{opacity:.14}
.route-compact .rw-lit{display:none}
.route-compact.route-live .rw-dark .route-world > *{opacity:.38}

/* world materials */
.ro-bed{fill:#111419}
.ro-edge{fill:#EDE8DF;opacity:.5}
.ro-dash rect{fill:#C9971F}
.ro-post rect{fill:#242A32}
.ro-post circle{fill:#FFB141}
.ro-tree{fill:#0B0D11}
.ck-bar{fill:#EDE8DF;opacity:.3}
.ck-node{fill:#0B0D11;stroke:#FFB000;stroke-width:2.5}
.ck-node.ck-home{fill:#FFB000}
.ck-name{
  font-family:var(--disp);font-weight:800;font-size:46px;
  fill:var(--paper);letter-spacing:.01em;
}
.ck-l{text-anchor:end}
.ck-r{text-anchor:start}
.ck-kick{
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.16em;fill:var(--dim);
}
.ck-kick2{fill:var(--dimmer)}
.ck-badge{fill:#0B0D11;stroke:#EDE8DF;stroke-width:1.6}
.ck-badge-t{
  font-family:var(--mono);font-weight:600;font-size:15px;
  letter-spacing:.08em;fill:var(--paper);text-anchor:middle;
}

/* checkpoint activation: reached checkpoints stay awake in the dark layer */
.route.cp-wpg .rw-dark .ck-wpg,
.route.cp-hwy .rw-dark .ck-hwy,
.route.cp-ken .rw-dark .ck-ken,
.route.cp-dry .rw-dark .ck-dry{opacity:1}
.route.cp-wpg .ck-wpg .ck-node,
.route.cp-ken .ck-ken .ck-node,
.route.cp-dry .ck-dry .ck-node{filter:drop-shadow(0 0 5px rgba(255,176,0,.85)) drop-shadow(0 0 14px rgba(255,150,0,.4))}
.route.cp-hwy .ck-hwy .ck-badge{filter:drop-shadow(0 0 4px rgba(237,232,223,.35))}

.route-beams,.rtruck{pointer-events:none}

.where-note{
  position:relative;z-index:2;
  margin-top:48px;color:var(--dim);max-width:38em;
  font-size:15px;
}
@media (max-width:820px){
  .route-track{height:150vh}
  .ck-name{font-size:30px}
  .ck-kick{font-size:11px;letter-spacing:.1em}
  .route-cap-r{display:none}
  .route-cap-l{
    max-width:44vw;line-height:1.9;white-space:normal;
    background:rgba(11,13,17,.72);padding:6px 10px;
  }
  .fb-name{font-size:32px}
  .where-note{margin-top:32px}
}

/* --- proof / review slot ------------------------------------------------- */
.proof{padding-block:var(--section-tight)}
.proof-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:clamp(30px,4vw,80px);align-items:end;
}
.proof-board{justify-self:end;width:min(100%,440px)}
.proof-board svg{width:100%;height:auto;display:block}
.pb-tag{
  font-family:var(--mono);font-weight:600;font-size:14px;
  letter-spacing:.2em;fill:var(--dim);
}
.pb-tag2{fill:var(--dimmer)}
@media (max-width:820px){
  .proof-grid{grid-template-columns:1fr}
  .proof-board{justify-self:start;width:min(100%,360px)}
}

/* scale vignette column */
.scale-side{display:grid;gap:18px}
.scale-fig{max-width:400px}
.scale-fig svg{width:100%;height:auto;display:block}

/* ==========================================================================
   S07 · CREW
   ========================================================================== */
.crew{overflow:hidden}
.ghost{
  position:absolute;right:-.06em;top:1.5%;z-index:0;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;text-align:right;
  font-size:clamp(4.4rem,11.4vw,11.4rem);line-height:.88;letter-spacing:.005em;
  color:transparent;-webkit-text-stroke:1px rgba(237,232,223,.14);
  user-select:none;pointer-events:none;
}
.crew-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);
  gap:clamp(40px,6vw,100px);align-items:end;
  margin-top:clamp(10px,2.4vh,44px);   /* photo rises to cross the ghost type */
}
.crew-spec{margin-top:36px;border-top:1px solid var(--hair)}
.crew-spec > div{
  display:grid;grid-template-columns:130px 1fr;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.crew-spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dimmer);align-self:center}
.crew-spec dd{font-size:15px;color:var(--paper)}
.crew-spec dd a{color:var(--amber)}

.plate{position:relative}
/* bold crop: the crew breaks the grid and bleeds to the page edge */
.plate-photo{
  position:relative;
  margin-right:calc(-1 * var(--gutter));
  margin-bottom:-14px;
}
.plate-photo img{
  width:100%;height:auto;display:block;
  aspect-ratio:900/967;object-fit:cover;object-position:50% 42%;
  filter:contrast(1.05) saturate(.92) brightness(.93);
}
/* edges dissolve into the night — no photo rectangle */
.plate-fade{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* knock back the generated lettering on the vehicle behind the crew */
    radial-gradient(15% 9% at 27.5% 57%, rgba(11,13,17,.97), rgba(11,13,17,.72) 55%, transparent 84%),
    linear-gradient(90deg, var(--n1) 0%, rgba(11,13,17,.8) 14%, rgba(11,13,17,.2) 32%, transparent 50%),
    linear-gradient(0deg, var(--n1) 0%, var(--n1) 6%, rgba(11,13,17,.72) 18%, rgba(11,13,17,.2) 32%, transparent 46%),
    linear-gradient(180deg, rgba(11,13,17,.6) 0%, transparent 26%);
}
.plate-cap{margin-top:18px;font-size:14px;color:var(--dimmer);max-width:30em}

/* --- review poster (dormant template; markup lives commented in index.html) --- */
.rev{position:relative;margin-top:44px}
.rev-media{position:relative;max-width:520px}
.rev-media img{width:100%;height:auto;display:block;filter:contrast(1.05) saturate(.9) brightness(.86)}
.rev-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 40%, rgba(11,13,17,.85) 82%, var(--n1) 100%),
             linear-gradient(0deg, var(--n1), transparent 40%);
}
.rev-quote{position:relative;z-index:1;margin-top:-90px;max-width:70%}
.rev-stars{color:var(--amber);letter-spacing:.24em;font-size:15px;margin-top:10px}
.rev-text{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,4.6rem);line-height:.96;margin-top:16px;
}
.rev-lit{color:var(--amber);text-shadow:var(--glow-text)}
.rev-src{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--dimmer);margin-top:22px;
}
@media (max-width:820px){
  .rev-quote{max-width:100%;margin-top:-40px}
}
@media (max-width:900px){.crew-grid{grid-template-columns:1fr}}

/* ==========================================================================
   S08 · FINAL CTA
   ========================================================================== */
.fin{
  text-align:center;
  background:
    radial-gradient(60% 46% at 50% 62%, rgba(255,160,20,.09), transparent 72%),
    var(--n0);
  padding-top:0;
}
.chevrons{
  height:14px;margin:0 calc(-1 * var(--gutter)) clamp(80px,12vh,140px);
  background:repeating-linear-gradient(-45deg,
    var(--amber-deep) 0 22px, transparent 22px 44px);
  opacity:.8;
}
.fin-inner{display:flex;flex-direction:column;align-items:center}
.fin .kicker{justify-content:center}
.fin-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(3.4rem,9vw,8.5rem);line-height:.9;margin-top:20px;
}
.fin-num{
  display:block;margin-top:clamp(36px,6vh,64px);
  font-family:var(--disp);font-weight:800;
  font-size:clamp(4rem,12vw,11.5rem);line-height:1;
  color:var(--amber);text-shadow:var(--glow-text);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  transition:text-shadow .12s var(--ease-switch), color .12s var(--ease-switch);
}
.fin-num:hover{color:var(--amber-hi)}
.fin-sep{color:var(--amber-deep);text-shadow:none}
.fin-sub{
  margin-top:clamp(30px,5vh,52px);
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;line-height:2.4;color:var(--dimmer);
}
.fin-mail{color:var(--dim);border-bottom:1px solid var(--hair)}
.fin-mail:hover{color:var(--amber)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{
  border-top:1px solid var(--hair);
  padding:clamp(64px,6vw,88px) var(--gutter) 110px;
  background:var(--n0);
}
.ftr-top{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-bottom:34px;border-bottom:1px solid var(--hair)}
.ftr-brand{display:flex;gap:18px;align-items:center;min-width:0}
.ftr-lockup{display:grid;gap:7px;min-width:0}
.ftr-name-line{display:flex;align-items:baseline;gap:10px;min-width:0}
.ftr-name{font-family:var(--disp);font-weight:800;font-size:32px;line-height:.9;letter-spacing:.03em;white-space:nowrap}
.ftr-desc{font-family:var(--mono);font-size:10px;line-height:1.4;letter-spacing:.17em;color:var(--dimmer);white-space:nowrap}
.ftr-contact{display:grid;gap:7px;justify-items:end;text-align:right}
.ftr-contact a{color:var(--dim)}
.ftr-contact .ftr-phone{font-family:var(--disp);font-weight:700;font-size:clamp(25px,2.4vw,34px);line-height:1;letter-spacing:.025em;color:var(--paper)}
.ftr-contact .ftr-email{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.09em}
.ftr-contact a:hover{color:var(--amber)}
.ftr-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:36px;padding-top:28px}
.ftr-line{color:var(--dimmer);font-size:13px;line-height:1.65;max-width:68em}
.ftr-fine{font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.14em;color:var(--dimmer);white-space:nowrap;text-align:right}
@media (max-width:820px){
  .ftr{padding-top:56px}
  .ftr-top{display:grid;gap:30px;padding-bottom:30px}
  .ftr-contact{justify-items:start;text-align:left}
  .ftr-meta{grid-template-columns:1fr;align-items:start;gap:22px;padding-top:26px}
  .ftr-fine{text-align:left;white-space:normal}
}

/* ========================================================================== 
   MOBILE EMERGENCY DOCK
   CALL remains dominant. Once the progressive location controller is ready,
   the dock becomes CALL / LOCATE ME / contextual route at 48 / 28 / 24.
   ========================================================================== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:none;grid-template-columns:62fr 38fr;align-items:stretch;
  transform:translateY(110%);
  transition:transform .4s var(--ease-land);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:#0B0D11;
}
.callbar.show,.callbar[data-persistent]{transform:none}
.callbar.is-location-ready{grid-template-columns:48fr 28fr 24fr}
.callbar-primary{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--amber);color:#0B0D11;
  font-family:var(--mono);font-weight:600;font-size:14.5px;letter-spacing:.06em;
  padding:17px 10px;box-shadow:var(--glow-box);
}
.callbar-primary .lamp.on{background:#0B0D11;box-shadow:none}
.callbar-locate{
  appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:#171B21;color:var(--amber);border-left:1px solid rgba(255,176,0,.38);
  font-family:var(--mono);font-weight:600;font-size:11.5px;line-height:1.1;
  letter-spacing:.08em;padding:12px 6px;text-align:center;min-width:0;cursor:pointer;
}
.callbar-locate-icon{font-size:20px;line-height:1}
.callbar-locate:active{background:#222831}
.callbar-secondary{
  display:flex;align-items:center;justify-content:center;
  background:var(--n2);color:var(--paper);
  border-left:1px solid rgba(255,176,0,.45);
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;
  padding:17px 8px;text-align:center;
}
.callbar-secondary:active{background:var(--n3)}
.callbar-primary:focus-visible,.callbar-locate:focus-visible,.callbar-secondary:focus-visible{
  outline:2px solid var(--paper);outline-offset:-4px
}
/* one conversion language: the third-party assistant conflicts with the
   approved call-led system and can cover emergency actions at small widths */
.rr-site .kodee-fab{display:none!important}
@media (max-width:820px), (pointer:coarse){
  .callbar{display:grid}
  /* nothing hides beneath the bar */
  .ftr{padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px))}
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */
@media (max-width:820px){
  /* --- mobile hero: its own composition, mechanic first --- */
  .phero{padding-bottom:clamp(40px,7vh,72px);min-height:100svh}
  .phero-img{object-position:66% 46%}   /* mechanic + engine bay hold the frame */
  .phero-scrim{
    background:
      linear-gradient(0deg, rgba(5,6,10,.96) 0%, rgba(5,6,10,.8) 30%,
                             rgba(6,8,12,.42) 52%, rgba(7,9,13,.12) 70%, transparent 88%),
      linear-gradient(180deg, rgba(5,6,10,.8) 0%, rgba(5,6,10,.2) 16%, transparent 34%);
  }
  /* the generated livery sits left of this crop — a light touch is enough */
  .phero-liveryscrim{
    background:radial-gradient(46% 20% at 16% 44%, rgba(4,5,9,.7), transparent 76%);
  }
  /* two lines, never three: sized so WE ROLL TO YOU. holds one line */
  .phero-h{font-size:12.9vw;line-height:.9;margin-left:-.03em}
  .hl-in{white-space:nowrap}
  .phero-tagline{font-size:clamp(1.15rem,5.6vw,1.55rem);letter-spacing:.025em}
  .phero-context{font-size:10px;letter-spacing:.08em;gap:3px 7px;max-width:36em}
  .phero-cta{width:100%;text-align:center}
  .phero-sub{font-size:10.5px;letter-spacing:.1em}
}
@media (min-width:400px) and (max-width:820px){
  .phero-sub{white-space:nowrap}
}
@media (max-width:820px){
  .matchcut-lamp{left:24%}

  /* --- bridge on mobile: reframe on the mechanic + rig + light pool --- */
  .bridge{min-height:0;padding-bottom:0}
  .bridge-copy{padding-top:clamp(44px,7vh,72px)}
  .bridge-h{font-size:clamp(2.1rem,9.6vw,3.4rem)}
  .hero-scene{position:relative;height:auto;aspect-ratio:16/11;margin-top:26px;overflow:hidden}
  .hero-scene svg{width:290%;margin-left:-138%;height:100%}
  .btn-call{width:100%;text-align:center}
  .ghost{
    position:static;text-align:left;font-size:clamp(3.4rem,15vw,6rem);margin-bottom:-10px;
    -webkit-text-stroke:1px rgba(237,232,223,.17);
  }
  .crew{padding-bottom:48px}
  .crew-grid{margin-top:40px;gap:34px}
  .proof{padding-block:48px}
}

/* ---- brand mark placements ---------------------------------------------- */
.ftr-brand .rr-mark{width:88px;flex:0 0 88px}
.hdr.scrolled .hdr-brand .rr-mark{width:88px;flex-basis:88px}
.hdr-brand .rr-mark,.hdr-word{transition:width .35s var(--ease-land), flex-basis .35s var(--ease-land), font-size .35s var(--ease-land)}
@media (max-width:900px){
  .hdr-brand .rr-mark,.hdr.scrolled .hdr-brand .rr-mark{width:62px;flex-basis:62px}
}

/* ==========================================================================
   SITE MENU — 5 items. Glass treatment inherited from the scrolled header:
   translucent night ground + backdrop blur + hairline. No new visual language.
   ========================================================================== */
.hdr-nav a[aria-current="page"]{color:var(--paper)}
.hdr-nav a[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:5px;background:var(--amber);
  box-shadow:var(--glow-box);
}
.hdr-menu{
  all:unset;display:none;cursor:pointer;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;
  color:var(--paper);padding:10px 14px;
  background:rgba(11,13,17,.55);backdrop-filter:blur(12px);
  border:1px solid var(--hair);
}
.hdr-menu:hover{border-color:rgba(255,176,0,.45)}
.hdr-menu:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hdr-menu-bars{display:grid;gap:3px;width:16px}
.hdr-menu-bars i{display:block;height:2px;background:currentColor;transition:transform .2s var(--ease-switch), opacity .2s}
.hdr-menu[aria-expanded="true"] .hdr-menu-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hdr-menu[aria-expanded="true"] .hdr-menu-bars i:nth-child(2){opacity:0}
.hdr-menu[aria-expanded="true"] .hdr-menu-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.rr-menu{
  position:fixed;inset:0 0 auto 0;z-index:99;
  padding:calc(var(--header-h,72px) + 18px) var(--gutter) 26px;
  background:rgba(9,11,15,.86);backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--hair);
}
.rr-menu[hidden]{display:none}
.rr-menu nav{display:grid}
.rr-menu nav a{
  display:grid;grid-template-columns:44px 1fr;align-items:center;gap:16px;
  padding:17px 0;border-top:1px solid var(--hair);
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.65rem;line-height:1;color:var(--paper);
  transition:color .12s var(--ease-switch);
}
.rr-menu nav a:last-child{border-bottom:1px solid var(--hair)}
.rr-menu nav a span{
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--dimmer);
}
.rr-menu nav a:hover,.rr-menu nav a:focus-visible{color:var(--amber)}
.rr-menu nav a:hover span{color:var(--amber-deep)}
.rr-menu-call{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;
  background:var(--amber);color:#0B0D11;padding:17px;
  font-family:var(--mono);font-weight:600;font-size:14.5px;letter-spacing:.06em;
  box-shadow:var(--glow-box);
}
.rr-menu-call .lamp.on{background:#0B0D11;box-shadow:none}

@media (max-width:1100px){
  .hdr-nav{display:none}
  .hdr-menu{display:flex;margin-left:auto}
  .hdr-call{margin-left:0}
}
@media (max-width:820px){
  /* compact call chip so logo + MENU + CALL always fit the bar */
  .hdr-call-full{display:none}
  .hdr-call-short{display:inline}
  .hdr-menu{padding:9px 12px}
  .rr-menu nav a{font-size:1.45rem;padding:15px 0}
}
@media (max-width:420px){
  .hdr-call{padding:9px 10px;font-size:11px}
  .hdr-brand .hdr-word{font-size:22px}
}
.hdr-call-short{display:none}

/* ==========================================================================
   FAULT / SYSTEM READOUT — mounted on the trailer so the answer appears
   where the eye already is. Cycles on its own; hovering a point takes over.
   ========================================================================== */
.fs-wrap{position:relative}
.fs-lead{stroke:var(--amber);stroke-width:1.6;opacity:0;
  transition:opacity .3s ease;stroke-dasharray:4 5}
.fs-lead.on{opacity:.55}

.fs-card{
  position:absolute;left:45%;top:24.5%;width:47%;
  background:rgba(12,15,20,.92);border:1px solid var(--hair);
  border-left:2px solid var(--amber);
  padding:16px 18px 15px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease, transform .4s var(--ease-land);
  pointer-events:auto;
}
.fs-card.on{opacity:1;transform:none}
.fs-n{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  color:var(--amber);display:flex;align-items:center;gap:9px;
}
.fs-name{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1;margin-top:8px;color:var(--paper);
}
.fs-sym{color:var(--dim);font-size:14px;margin-top:8px;line-height:1.5}
.fs-go{margin-top:10px}
.fs-go a,.fs-items{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);
}
.fs-go a{border-bottom:1px solid rgba(255,176,0,.4);padding-bottom:3px}
.fs-go a:hover{color:var(--amber-hi)}
.fs-items{color:var(--dim)}

/* the point being described reads as the source of the answer */
.spot.on,.spot-g.active .spot{
  filter:drop-shadow(0 0 5px rgba(255,176,0,.95)) drop-shadow(0 0 16px rgba(255,150,0,.55));
}

@media (max-width:900px){
  /* portrait: the card sits directly under the schematic — still one screen */
  .fs-card{position:static;width:auto;margin-top:14px;opacity:1;transform:none;
    border-left-width:2px}
  .fs-lead{display:none}
}

/* ---- mobile tap targets: nothing interactive below 44px ------------------ */
@media (max-width:900px){
  .hdr-call{min-height:44px;min-width:56px;justify-content:center}
  .hdr-menu{min-height:44px}
  .hdr-brand{min-height:44px}
  .unit-ix{min-height:44px;display:flex;align-items:center}
  .bay-go{min-height:44px;display:flex;align-items:center}
  .rhero-ghost{min-height:44px;display:inline-flex;align-items:center}
  .crumbs a,.crumbs li{min-height:44px;display:inline-flex;align-items:center}
  .ftr-contact a,.ftr-fine a{min-height:44px;display:inline-flex;align-items:center}
  .sec-link a{min-height:44px;display:inline-flex;align-items:center}
  .fs-go a{min-height:44px;display:inline-flex;align-items:center}
}
/* the row driving the card reads as selected on touch */
.fs-active .lamp{background:var(--amber);box-shadow:var(--glow-box)}
.fault.fs-active{background:rgba(255,176,0,.05)}
.fault.fs-active .fault-name{color:var(--amber);text-shadow:var(--glow-text)}
.fault.fs-active .fault-n{color:var(--amber-deep)}
.unit-ix.fs-active{color:var(--amber)}
@media (max-width:900px){
  /* catch-all: any remaining inline link in footer/breadcrumb chrome */
  .ftr p a,.crumbs li a,.ftr-fine a{
    min-height:44px;display:inline-flex;align-items:center;padding-inline:2px;
  }
}
@media (max-width:900px){
  /* the last two: manifest deep-link and the crew-spec phone number */
  .bay-ro-link a{min-height:44px;display:inline-flex;align-items:center}
  .crew-spec dd a{min-height:44px;display:inline-flex;align-items:center;padding-inline:2px}
}

/* --- RRX PORT ADDITIONS --- */
/* ==========================================================================
   HEADER CONTRACT — SITE-WIDE  (port fix)

   --header-h was previously declared only on .rs, in roadside.css. Every other
   Rig Rescue page therefore fell back to the guessed 72px in .rr-menu, and the
   scroll-margin rule that keeps anchor targets clear of the fixed header did
   not apply at all outside the roadside page. One variable now owns the header
   band on every route; .rs may still override it.
   ========================================================================== */
.rr-site{--header-h:78px}
@media (max-width:900px){.rr-site{--header-h:68px}}
@media (max-width:820px){.rr-site{--header-h:62px}}

/* the band is a contract, not an accident of its contents */
.rr-site .hdr{min-height:var(--header-h)}

/* every anchor target on every page lands clear of the fixed header */
.rr-site :where(section[id], article[id], footer[id], div[id]){
  scroll-margin-top:calc(var(--header-h) + 18px);
}

/* the glass panel begins exactly at the bottom edge of the header band */
.rr-site .rr-menu{padding-top:calc(var(--header-h) + 18px)}

/* the page must not scroll away beneath an open panel */
html.rr-menu-open{overflow:hidden}

/* ==========================================================================
   FOOTER NAVIGATION — the same five routes, reachable from the bottom of a
   long page. Same mono voice and the same amber active underline as the header:
   no new visual language, and amber still means "you are here / act here".
   ========================================================================== */
.ftr-nav{
  display:flex;flex-wrap:wrap;gap:6px clamp(20px,3vw,34px);
  margin:0;padding:24px 0;
  border-bottom:1px solid var(--hair);
}
.ftr-nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);
  transition:color .12s var(--ease-switch);
}
.ftr-nav a:hover{color:var(--amber)}
.ftr-nav a[aria-current="page"]{color:var(--paper)}
.ftr-nav a[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:5px;
  background:var(--amber);box-shadow:var(--glow-box);
}
@media (max-width:900px){
  .ftr-nav a{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
}

/* --------------------------------------------------------------------------
   PORT FIX — the compact CALL chip.

   core.css declares `.hdr-call-short{display:none}` AFTER the ≤820px block
   that sets it to `inline`. Same specificity, later wins, so below 821px the
   header CTA rendered as an empty amber box: the full number was hidden and
   the chip never appeared. These rules restate the intent at a specificity the
   base rule cannot override. Design lock §"Header CTA is responsive".
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .rr-site .hdr-call-full{display:none}
  .rr-site .hdr-call-short{display:inline}
}

/* ==========================================================================
   RR-02 · EMERGENCY + AEO LAYER
   No new palette, face, radius or easing. Every value below is an existing
   token. The yellow used throughout is --amber (#FFB000), never a new colour.
   ========================================================================== */

/* ---- hero status line: 24/7, first paint, no fade dependency ------------- */
.hero-status{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:16px;padding:7px 12px;
  border:1px solid rgba(255,176,0,.42);
  background:rgba(255,176,0,.07);
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-hi);            /* #FFC443 on near-black — AA at this size */
  opacity:1;                        /* never animated in */
}
.hero-status .lamp{background:var(--amber);box-shadow:var(--glow-box)}
@media (max-width:520px){
  .hero-status{font-size:11px;letter-spacing:.12em;padding:6px 10px;gap:8px}
}

/* ==========================================================================
   YELLOW-GLOW QUICK ANSWER (AEO)
   Prominent, but deliberately quieter than the amber CALL button: the button
   is a filled amber slab, this is a dark panel with an amber edge.
   ========================================================================== */
.rr-quick-answer{
  position:relative;
  margin:clamp(26px,4vh,44px) 0 0;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,34px);
  max-width:74ch;
  background:var(--n2);
  border:1px solid rgba(255,176,0,.28);
  border-left:3px solid var(--amber);
  box-shadow:
    0 0 0 1px rgba(255,176,0,.18),
    0 0 28px rgba(255,176,0,.14);
}
.rr-quick-answer__label{
  font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
}
.rr-quick-answer h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1;letter-spacing:.005em;
  margin-top:12px;color:var(--paper);
}
.rr-quick-answer__body{
  margin-top:14px;color:var(--paper);
  font-size:16.5px;line-height:1.7;max-width:68ch;
}
@media (max-width:820px){
  /* bleeds toward the gutter, never past it — no horizontal scroll at 360px */
  .rr-quick-answer{margin-left:calc(var(--gutter) * -0.5);margin-right:calc(var(--gutter) * -0.5);
    padding-left:calc(var(--gutter) * 0.5 + 16px);padding-right:calc(var(--gutter) * 0.5 + 16px);
    max-width:none;box-shadow:0 0 0 1px rgba(255,176,0,.16), 0 0 22px rgba(255,176,0,.12)}
}

/* ==========================================================================
   EMERGENCY ACTION PANEL
   ========================================================================== */
.rr-emg{margin-top:clamp(26px,4vh,40px)}
.rr-emg-actions{display:flex;flex-wrap:wrap;gap:14px}
.rr-emg-call{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--amber);color:#0B0D11;
  font-family:var(--mono);font-weight:600;font-size:clamp(15px,1.3vw,17px);letter-spacing:.06em;
  padding:17px 26px;min-height:52px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition:background .12s var(--ease-switch), box-shadow .12s var(--ease-switch);
}
.rr-emg-call:hover{background:var(--amber-hi);box-shadow:var(--glow-box)}
.rr-emg-call .lamp.on{background:#0B0D11;box-shadow:none}
.rr-emg-text{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,176,0,.45);color:var(--amber);
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;
  padding:17px 22px;min-height:52px;
  transition:background .12s var(--ease-switch), color .12s var(--ease-switch);
}
.rr-emg-text:hover{background:rgba(255,176,0,.1);color:var(--amber-hi)}

.rr-emg-loc{margin-top:20px;border-top:1px solid var(--hair);padding-top:18px}
.rr-emg-why{color:var(--dim);font-size:14.5px;max-width:56ch}
.rr-emg-share{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  border:1px solid var(--hair);background:var(--n3);color:var(--paper);
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.12em;
  padding:14px 20px;min-height:48px;
}
.rr-emg-share:hover{border-color:rgba(255,176,0,.5)}
.rr-emg-share:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rr-emg-share[disabled]{opacity:.6;cursor:progress}
.rr-emg-out{margin-top:12px;color:var(--dim);font-size:14px;min-height:1.2em;max-width:56ch}
.rr-emg-result{margin-top:14px;border-left:2px solid var(--amber);padding-left:14px}
.rr-emg-coords{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--amber)}
.rr-emg-result-actions{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.rr-emg-result-actions a,.rr-emg-copy{
  all:unset;box-sizing:border-box;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);padding-bottom:4px;
  min-height:44px;display:inline-flex;align-items:center;
}
.rr-emg-result-actions a:hover,.rr-emg-copy:hover{color:var(--amber);border-color:var(--amber)}
.rr-emg-copy:focus-visible,.rr-emg-result-actions a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.rr-emg-manual{margin-top:18px;border-top:1px solid var(--hair);padding-top:14px}
.rr-emg-manual summary{
  cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);min-height:44px;display:flex;align-items:center;
}
.rr-emg-manual summary:hover{color:var(--amber)}
.rr-emg-manual summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rr-emg-manual ol{margin:10px 0 4px 18px;color:var(--dim);font-size:14.5px;line-height:1.9}
.rr-emg-safety{
  margin-top:18px;padding-left:12px;border-left:2px solid var(--amber-deep);
  color:var(--dim);font-size:14px;line-height:1.65;max-width:62ch;
}

/* ---- operational information slots -------------------------------------- */
.rr-ops{
  margin-top:clamp(26px,4vh,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 clamp(22px,3vw,48px);
}
.rr-ops > div{border-top:1px solid var(--hair);padding:14px 0 16px}
.rr-ops dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep)}
.rr-ops dd{margin-top:7px;color:var(--paper);font-size:14.5px;line-height:1.55}

/* ==========================================================================
   MAP FACADE — nothing is requested from Google until the visitor asks
   ========================================================================== */
.rr-map{margin-top:clamp(26px,4vh,44px);width:100%;max-width:100%}
/* width must come from the container, never from min-height via aspect-ratio —
   240px x 16/9 forced a 427px box inside a 390px viewport. */
.rr-map-facade{
  position:relative;width:100%;max-width:100%;aspect-ratio:16/9;min-height:0;
  /* Without a cap, 16:9 on a 1800px container is a 1000px-tall box and the
     label block falls below the fold — the map read as an empty grey field. */
  max-height:clamp(300px,46vh,460px);
  display:flex;align-items:flex-end;
  background:linear-gradient(180deg,var(--n2) 0%,var(--n0) 100%);
  border:1px solid var(--hair);overflow:hidden;
}
.rr-map-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(237,232,223,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,232,223,.05) 1px, transparent 1px);
  background-size:46px 46px;
}
.rr-map-copy{position:relative;padding:clamp(18px,2.4vw,28px);width:100%}
.rr-map-addr{margin-top:10px;font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;color:var(--paper)}
.rr-map-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.rr-map-load{
  all:unset;box-sizing:border-box;cursor:pointer;
  background:var(--amber);color:#0B0D11;
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  padding:13px 20px;min-height:46px;display:inline-flex;align-items:center;
}
.rr-map-load:hover{background:var(--amber-hi);box-shadow:var(--glow-box)}
.rr-map-load:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rr-map-out{
  display:inline-flex;align-items:center;min-height:46px;padding:0 4px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair);
}
.rr-map-out:hover{color:var(--amber);border-color:var(--amber)}
.rr-map-facade.is-loaded{display:block;padding:0}
.rr-map-frame{display:block;width:100%;height:100%;border:0}
.rr-map-note{margin-top:12px;color:var(--dim);font-size:13.5px;max-width:60ch}
@media (max-width:560px){
  /* a 16:9 strip is too short to hold the label block on a phone */
  .rr-map-facade{aspect-ratio:4/3}
}
/* JS off: the facade button is inert, so hide it and let the link carry the job */
html:not(.rrx-js) .rr-map-load{display:none}

/* ==========================================================================
   RR-02 · REPAIRS
   ========================================================================== */

/* ---- footer contrast: --dimmer on --n0 measured 2.8:1, below AA ---------- */
.ftr-line,.ftr-fine{color:var(--dim)}

/* ---- hero paints immediately -------------------------------------------
   The headline and the call CTA are the emergency content. They no longer wait
   on an entrance animation, so LCP is first paint and both are readable with
   JavaScript disabled. The kicker and market line keep a short fade. */
@media (prefers-reduced-motion:no-preference){
  .phero-h .hl-in{transform:none;animation:none}
  .phero-cta{opacity:1;animation:none}
  .phero-k{animation-delay:.15s}
  .phero-sub{animation-delay:.45s}
  .matchcut{animation-delay:.5s}
}

/* ---- stable header lockup -----------------------------------------------
   The RR mark and wordmark remain one fixed identity at every scroll depth. */
.hdr-brand{transform-origin:left center;transition:transform .35s var(--ease-land)}
.hdr-brand .rr-mark,.hdr.scrolled .hdr-brand .rr-mark,
.hdr-word,.hdr.scrolled .hdr-word{transition:none}
.hdr.scrolled .hdr-word{font-size:34px}
@media (min-width:821px){
  .hdr.scrolled .hdr-brand{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hdr-brand{transition:none}
}

/* ---- mobile emergency dock ------------------------------------------------ */
.callbar-primary{font-size:15.5px;letter-spacing:.08em}
.callbar-secondary{line-height:1.15;font-size:12.5px;letter-spacing:.09em;color:var(--amber)}
.callbar-secondary .callbar-sub{font-size:10.5px;letter-spacing:.16em;color:var(--dim);display:block}
.callbar-primary,.callbar-locate,.callbar-secondary{min-height:60px}   /* thumb-friendly */
@media (max-width:360px){
  .callbar-primary{font-size:14px}
  .callbar-locate{font-size:10.5px;letter-spacing:.055em}
  .callbar-secondary{font-size:11.5px}
}

/* ---- final CTA number at 360px -------------------------------------------
   clamp(4rem,…) put the lockup at 64px, which is 367px wide — 7px past a
   360px viewport, and the only source of document overflow on the whole site.
   Below 400px the number scales with the viewport instead. */
@media (max-width:400px){
  .fin-num{font-size:15.5vw}
}

/* ==========================================================================
   RR-02.1 · THE DRAWN CORRIDOR  (map facade surface)
   A schematic in the site's own language — night ground, amber lamps, one work
   light running the route. No GPS UI, no coordinates, no ETA, no live tracking.
   ========================================================================== */
.rr-cmap{position:absolute;inset:0;overflow:hidden}
.rr-cmap svg{position:absolute;inset:0;width:100%;height:100%}
/* the drawing sits in the upper band so the label block never covers a market */
.rr-cmap svg{transform:translateY(-6%)}
@media (max-width:820px){.rr-cmap svg{transform:translateY(-10%)}}
.rr-cmap .rr-map-grid{opacity:.42}

.rr-cmap-stop text{
  font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.18em;
  fill:var(--paper);
}
.rr-cmap-stop .rr-cmap-sub{font-size:11px;letter-spacing:.22em;fill:var(--dim)}
.rr-cmap-stop rect{filter:drop-shadow(0 0 6px rgba(255,176,0,.8)) drop-shadow(0 0 16px rgba(255,150,0,.45))}
.rr-cmap-hwy{
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.26em;
  fill:var(--amber-deep);
}

/* the work light runs Winnipeg → Kenora → Dryden, then repeats */
@media (prefers-reduced-motion:no-preference){
  .rr-cmap-pulse{animation:rrRun 7s linear infinite;animation-play-state:paused}
  .rr-cmap-dash{animation:rrDrift 3.4s linear infinite;animation-play-state:paused}
  .rr-map-facade.is-active .rr-cmap-pulse,.rr-map-facade.is-active .rr-cmap-dash{animation-play-state:running}
}
@keyframes rrRun{from{stroke-dashoffset:1100}to{stroke-dashoffset:-120}}
@keyframes rrDrift{from{stroke-dashoffset:0}to{stroke-dashoffset:-26}}
@media (prefers-reduced-motion:reduce){
  /* holds still, with the route lit rather than animated */
  .rr-cmap-pulse{stroke-dasharray:none;opacity:.5}
}

/* the label block sits over the drawing, always legible */
.rr-map-copy{
  position:relative;z-index:2;padding:clamp(18px,2.4vw,28px);width:100%;
  background:linear-gradient(0deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.72) 55%, transparent 100%);
}
.rr-map-facade.is-loaded .rr-cmap{display:none}

/* ==========================================================================
   RR-02.1 · 24/7 PERMANENT BRAND QUALIFIER
   Unboxed and baseline-locked to the wordmark: identity, never a CTA.
   ========================================================================== */
.rr-247{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:20px;line-height:1;letter-spacing:.055em;
  color:var(--amber);
  padding:0;border:0;background:none;box-shadow:none;text-shadow:none;
  white-space:nowrap;
}
.hdr-brand{gap:14px}
.hdr .rr-247{align-self:baseline}
.ftr-brand .rr-247{margin-left:0;font-size:18px}
@media (max-width:1100px){ .hdr .rr-247{font-size:17px} }
@media (max-width:820px){ .hdr .rr-247{display:inline-flex;font-size:15px} }
@media (max-width:520px){
  .hdr{gap:10px}
  .hdr-brand{gap:9px}
  .hdr-brand .hdr-word{font-size:22px}
  .hdr-name-line{gap:7px}
  .hdr .rr-247{font-size:13px}
  .ftr-brand{gap:14px}
  .hdr-brand .rr-mark,.hdr.scrolled .hdr-brand .rr-mark{width:52px;flex-basis:52px}
  .ftr-brand .rr-mark{width:72px;flex-basis:72px}
  .ftr-name{font-size:29px}
  .ftr-name-line{gap:8px}
  .ftr-brand .rr-247{font-size:15px}
  .ftr-desc{font-size:9px;letter-spacing:.12em;white-space:normal}
  .ftr-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .hdr-menu{font-size:0;gap:0;width:44px;min-width:44px;padding:0;justify-content:center}
}
/* The full lockup fits 390px phones, but at 360px the permanent 24/7
   qualifier can push the compact CALL target outside the viewport. The
   qualifier remains in the hero and footer; the mobile header keeps the
   larger RR mark, full Rig Rescue name, MENU and a 44px+ CALL target. */
@media (max-width:380px){
  .hdr{padding-inline:16px;gap:8px}
  .hdr-brand{gap:8px;min-width:0}
  .hdr .rr-247{display:none}
  .hdr-lockup{min-width:0}
  .hdr-brand .hdr-word{font-size:21px}
}

/* ========================================================================== 
   LOOP 2 · MOBILE COMPOSITING BUDGET
   Keep the signature light and motion, but remove full-screen blending,
   permanent decoration and large SVG filters from the iPhone paint path.
   ========================================================================== */
@media (max-width:820px), (pointer:coarse){
  .grain{display:none}
  /* Emergency photography is content, not a reveal. Paint it immediately on
     touch devices and avoid a full-screen scale composite during first input. */
  .phero-img{opacity:1;transform:none;animation:none!important}
  .phero-scrim,.phero-liveryscrim{opacity:1;animation:none!important}
  .phero-h .hl-in,.phero-cta,.phero-sub,.matchcut{opacity:1;transform:none;animation:none!important}
  .hdr-menu,.rr-menu{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hdr-menu{background:rgba(11,13,17,.94)}
  .rr-menu{background:rgba(9,11,15,.98)}
  .bridge .far-traffic,.bridge .seam-track{animation:none!important}
  .unit .spot{animation:none!important}
  .spot-g.active .spot,
  .route.cp-wpg .ck-wpg .ck-node,
  .route.cp-ken .ck-ken .ck-node,
  .route.cp-dry .ck-dry .ck-node,
  .route.cp-hwy .ck-hwy .ck-badge,
  .rr-cmap-stop rect{filter:none}
  .route-beams polygon{filter:none!important}
  .rr-cmap-dash{animation:none!important}
  .proof-photo img,.rev-media img{filter:none}
}


/* ==========================================================================
   RR-03 · EQUAL MENU RHYTHM
   Equal-width desktop tracks keep every label on the same visual cadence.
   The shared mobile panel uses a consistent row height, so both location
   pages inherit the same spacing from this core stylesheet.
   ========================================================================== */
@media (min-width:1101px){
  .rr-site .hdr-nav{
    flex:1 1 auto;min-width:0;align-self:stretch;
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:stretch;gap:0;margin-left:auto;
  }
  .rr-site .hdr-nav a{
    position:relative;min-width:0;
    display:grid;place-items:center;
    padding:0 clamp(5px,.55vw,10px);
    text-align:center;line-height:1.35;
  }
  .rr-site .hdr-nav a[aria-current="page"]::after{
    position:absolute;left:clamp(5px,.55vw,10px);right:clamp(5px,.55vw,10px);bottom:5px;
    margin:0;
  }
}
@media (max-width:1100px){
  .rr-site .rr-menu nav{grid-auto-rows:minmax(58px,auto)}
  .rr-site .rr-menu nav a{
    box-sizing:border-box;min-height:58px;padding:14px 0;
  }
}
@media (max-width:820px){
  .rr-site .rr-menu nav{grid-auto-rows:minmax(56px,auto)}
  .rr-site .rr-menu nav a{min-height:56px;padding:12px 0}
}

/* ---- location-page footer maps ----------------------------------------- */
.ftr-locations{padding:clamp(34px,5vw,58px) 0;border-bottom:1px solid var(--hair)}
.ftr-locations-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  align-items:end;gap:clamp(28px,5vw,72px);margin-bottom:clamp(24px,4vw,40px);
}
.ftr-locations-title{
  margin-top:12px;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9;letter-spacing:.01em;
}
.ftr-locations-head>p{color:var(--dim);font-size:.94rem;line-height:1.75;max-width:54ch}
.ftr-location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.ftr-location-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--hair);background:var(--n1);min-width:0}
.ftr-location-card.is-current{border-color:rgba(255,174,0,.56);box-shadow:0 0 34px rgba(255,174,0,.07)}
.ftr-location-copy{padding:clamp(20px,2.6vw,30px)}
.ftr-location-city{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--amber)}
.ftr-location-copy h3{margin-top:11px;font-family:var(--disp);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1;text-transform:uppercase}
.ftr-location-copy address{margin-top:12px;color:var(--dim);font-style:normal;font-size:.86rem;line-height:1.65}
.ftr-location-actions{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.ftr-location-actions a{
  color:var(--paper);font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
}
.ftr-location-actions a:hover,.ftr-location-actions a:focus-visible,.ftr-location-actions a[aria-current="page"]{color:var(--amber)}
.ftr-location-frame{position:relative;aspect-ratio:16/10;min-height:240px;overflow:hidden;border-top:1px solid var(--hair);background:#090a0e}
.ftr-location-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:820px){
  .ftr-locations-head,.ftr-location-grid{grid-template-columns:1fr}
  .ftr-locations-head{align-items:start;gap:18px}
  .ftr-location-frame{aspect-ratio:4/3;min-height:280px}
}
.ftr-locations-inline{
  padding:clamp(48px,7vw,80px) var(--gutter);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--n0);
}

/* Mobile map frames: fixed height avoids aspect-ratio min-width overflow. */
@media (max-width:820px){
  .ftr-location-frame{width:100%;min-width:0;min-height:0;height:280px;aspect-ratio:auto}
}


/* ==========================================================================
   RR-06 · HOMEPAGE COMPOSITION REFINEMENT
   The emergency message remains the hero, with enough breathing room for the
   mechanic photograph and a compact, legible roadside review billboard.
   ========================================================================== */
/* A balanced identity lockup: the mark, wordmark and descriptor share one grid. */
@media (min-width:901px){
  .hdr{gap:24px;padding-block:13px}
  .hdr-brand{gap:13px}
  .hdr-brand .rr-mark,.hdr.scrolled .hdr-brand .rr-mark{width:72px;flex-basis:72px}
  .hdr-lockup{gap:5px}
  .hdr-word,.hdr.scrolled .hdr-word{font-size:31px;letter-spacing:.025em}
  .hdr-desc{font-size:9px;letter-spacing:.155em}
}

/* Keep the two-line hero as a composed lockup rather than a page-sized poster. */
@media (min-width:821px){
  .phero-copy{max-width:min(1080px,68vw)}
  .phero-h{font-size:clamp(3.25rem,7.35vw,9.25rem);line-height:.88}
  .phero-tagline{font-size:clamp(1.1rem,1.55vw,1.55rem);margin-top:18px}
  .phero-context{margin-top:16px}
}

/* The verified reviews use the original roadside-billboard language, not the
   display-poster treatment reserved for campaign photography. */
.proof .proof-grid{align-items:center}
.proof-copy{max-width:39rem}
.review-board{position:relative;margin:0;isolation:isolate}
.review-board svg{display:block;width:100%;height:auto}
.review-billboard{position:absolute;z-index:1;inset:23.5% 20.5% 31.2%;overflow:hidden}
.review-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:9px 13px;color:var(--paper);opacity:0;transform:translateY(4px);animation:rrx-review-cycle 12s var(--ease-land) infinite both}
.review-slide--kenora{animation-delay:-1s}
.review-slide--dryden{animation-delay:-7s}
.review-slide__meta,.review-slide__source{font-family:var(--mono);font-weight:600;font-size:clamp(.43rem,.62vw,.62rem);line-height:1.25;letter-spacing:.1em;color:var(--amber)}
.review-slide__source{margin-top:7px;color:var(--dim)}
.review-slide__quote{margin:7px 0 0;font-size:clamp(.72rem,.93vw,.93rem);line-height:1.22;color:var(--paper)}
.review-slide__quote p{margin:0}
.review-board__caption{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;line-height:1.45;color:var(--dimmer);text-align:center}
@keyframes rrx-review-cycle{0%,7%{opacity:0;transform:translateY(4px)}13%,43%{opacity:1;transform:translateY(0)}50%,100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .review-slide{animation:none;opacity:1;transform:none}
  .review-slide--dryden{display:none}
}
@media (max-width:820px){
  .proof-copy{max-width:none}
  .review-board{width:min(100%,390px);margin-top:6px}
  .review-billboard{inset:23.5% 20.5% 31.2%}
  .review-slide{padding:9px 13px}
  .review-slide__meta,.review-slide__source{font-size:clamp(.43rem,2vw,.6rem)}
  .review-slide__quote{font-size:clamp(.72rem,3.25vw,.94rem)}
}


/* ==========================================================================
   RR-07 · SERVICE ROUTES
   Compact internal links expose focused service pages without turning the
   homepage or service hub into a keyword wall.
   ========================================================================== */
.service-routes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.service-routes__grid > li{list-style:none;margin:0}
.service-routes__grid a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:82px;padding:17px 18px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);font-family:var(--disp);font-size:clamp(1.28rem,1.7vw,1.7rem);font-weight:700;line-height:.94;text-transform:uppercase;color:var(--paper);transition:background .16s var(--ease-switch),color .16s var(--ease-switch)}
.service-routes__grid a::after{content:'↗';font-family:var(--mono);font-size:13px;color:var(--amber);flex:0 0 auto}
.service-routes__grid a:hover{background:rgba(255,176,0,.08);color:var(--amber)}
@media (max-width:900px){.service-routes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.service-routes__grid{grid-template-columns:1fr}.service-routes__grid a{min-height:64px;font-size:1.3rem;padding:15px 16px}}


/* ==========================================================================
   RR-08 · SERVICE DETAIL CARDS — readable at every viewport
   ========================================================================== */
.rrx-service .service-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);margin-top:clamp(28px,4vw,48px);align-items:stretch}
.rrx-service .service-scope-grid .fd{display:flex;flex-direction:column;min-width:0;min-height:100%;margin:0;padding:clamp(20px,2.1vw,30px);border:1px solid var(--hair);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0));scroll-margin-top:96px}
.rrx-service .service-scope-grid .fd-n{margin:0 0 16px;font-size:11px;line-height:1;color:var(--amber)}
.rrx-service .service-scope-grid .fd h3{position:static;width:auto;max-width:none;margin:0 0 14px;font-size:clamp(1.55rem,2vw,2.35rem);line-height:.94;overflow-wrap:normal;word-break:normal}
.rrx-service .service-scope-grid .fd-check{margin:0;max-width:none;font-size:clamp(.9rem,1.05vw,1rem);line-height:1.58}
@media (max-width:980px){.rrx-service .service-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rrx-service .service-scope-grid{grid-template-columns:1fr;gap:14px}.rrx-service .service-scope-grid .fd{padding:22px 20px}.rrx-service .service-scope-grid .fd h3{font-size:clamp(1.6rem,8vw,2.15rem)}}


/* ==========================================================================
   RR-09 · SERVICE INTENT LISTS — prevent missing-number column collapse
   ========================================================================== */
.rrx-service .faults[aria-labelledby="service-problems"] .fault{grid-template-columns:16px minmax(0,.9fr) minmax(0,1.5fr);gap:0 clamp(16px,2vw,30px)}
.rrx-service .faults[aria-labelledby="service-problems"] .fault .lamp{grid-column:1}
.rrx-service .faults[aria-labelledby="service-problems"] .fault-name{grid-column:2}
.rrx-service .faults[aria-labelledby="service-problems"] .fault-sym{grid-column:3}
.rrx-service .faults[aria-labelledby="service-locations"] .fault{grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr) 34px;gap:0 clamp(16px,2vw,30px)}
.rrx-service .faults[aria-labelledby="service-locations"] .fault-name{grid-column:1}
.rrx-service .faults[aria-labelledby="service-locations"] .fault-sym{grid-column:2}
.rrx-service .faults[aria-labelledby="service-locations"] .fault-go{grid-column:3}
@media (max-width:820px){
  .rrx-service .faults[aria-labelledby="service-problems"] .fault{grid-template-columns:10px minmax(0,1fr);grid-template-areas:none;gap:7px 14px;padding:18px 0}
  .rrx-service .faults[aria-labelledby="service-problems"] .fault .lamp{display:block;grid-column:1;grid-row:1 / span 2}
  .rrx-service .faults[aria-labelledby="service-problems"] .fault-name,.rrx-service .faults[aria-labelledby="service-problems"] .fault-sym{grid-area:auto;grid-column:2}
  .rrx-service .faults[aria-labelledby="service-locations"] .fault{grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:none;gap:5px 14px;padding:18px 0}
  .rrx-service .faults[aria-labelledby="service-locations"] .fault-name,.rrx-service .faults[aria-labelledby="service-locations"] .fault-sym{grid-area:auto;grid-column:1}
  .rrx-service .faults[aria-labelledby="service-locations"] .fault-go{grid-area:auto;grid-column:2;grid-row:1 / span 2;align-self:center}
}


/* RRX-10 · mobile header stays reachable after scroll */
@media (max-width:820px){
  .rr-site .hdr{position:fixed;top:0;z-index:120;gap:16px;padding-top:16px;background:rgba(11,13,17,.94);border-color:var(--hair)}
  .rr-site .hdr.scrolled{background:rgba(11,13,17,.96);border-color:var(--hair)}
  .rr-site .rr-menu{z-index:119}
}