/* ==========================================================================
   AN INTERACTIVE JOBSITE — stylesheet
   01 tokens · 02 base · 03 hud · 04 rail · 05 hero · 06 site plan
   07 crane + loads · 08 equipment · 09 credentials · 10 rfi · 11 responsive
   ========================================================================== */

/* ── 01 TOKENS ───────────────────────────────────────────────────────── */
:root{
  --orange:#ff6a13;
  --orange-dk:#d9530a;
  --amber:#ffb400;
  --yellow:#ffd400;
  --steel:#27313a;
  --steel-2:#3b4855;
  --steel-3:#5a6875;
  --ink:#11161b;
  --concrete:#d8d3c9;
  --concrete-dk:#b9b2a5;
  --paper:#f5f2ea;
  --blue:#0d3b66;
  --blue-lt:#1b6ca8;
  --sky-1:#8fbcd8;
  --sky-2:#dfeaf1;
  --white:#fff;
  --line:rgba(17,22,27,.14);
  --card:#fbf9f4;
  --text:#1b232b;
  --muted:#5d6b78;
  --shadow:0 18px 40px -18px rgba(17,22,27,.5);
  --hazard:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--ink) 14px 28px);
  --rhythm:clamp(48px,7vw,110px);
  --f-head:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* night shift */
html[data-shift="night"]{
  --sky-1:#0b1622; --sky-2:#16283a;
  --concrete:#2a323a; --concrete-dk:#1d242b;
  --paper:#171f27; --card:#1c252e;
  --text:#e8eef4; --muted:#93a3b2;
  --steel:#0e151b; --steel-2:#1c2731; --steel-3:#3a4855;
  --line:rgba(232,238,244,.16);
  --blue:#9dc6ea; --white:#0e151b;
  --shadow:0 20px 50px -18px rgba(0,0,0,.85);
}

/* ── 02 BASE ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--text);
  background:var(--concrete);
  overflow-x:hidden;overflow-x:clip; /* clip keeps position:sticky working */
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}
img,svg{max-width:100%}
[hidden]{display:none!important}
.mono{font-family:var(--f-mono);letter-spacing:.06em}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{
  width:auto;height:auto;clip:auto;top:70px;left:16px;z-index:999;
  background:var(--ink);color:var(--yellow);padding:10px 16px;font-family:var(--f-mono)
}
:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:2px
}
h1,h2,h3{font-family:var(--f-head);text-transform:uppercase;line-height:.95;margin:0}

.sec{position:relative;padding:var(--rhythm) 20px;overflow:hidden;overflow:clip}
.h-sec{
  font-size:clamp(30px,5.4vw,62px);letter-spacing:.01em;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap
}
.h-sec .num{
  font-size:.34em;letter-spacing:.14em;background:var(--ink);color:var(--yellow);
  padding:6px 10px;border-radius:2px;font-family:var(--f-mono);transform:translateY(-.35em)
}
.sub{font-size:12px;color:var(--muted);margin:10px 0 0;letter-spacing:.12em}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-head);font-size:17px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  padding:12px 22px;border:2px solid var(--ink);border-radius:2px;
  background:transparent;color:var(--text);
  box-shadow:4px 4px 0 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease,color .2s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 var(--ink)}
.btn--primary{background:var(--orange);color:#fff;border-color:var(--ink)}
html[data-shift="night"] .btn{border-color:var(--yellow);box-shadow:4px 4px 0 0 rgba(255,212,0,.35)}
html[data-shift="night"] .btn:hover{box-shadow:2px 2px 0 0 rgba(255,212,0,.35)}

.chip{
  display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  padding:5px 9px;border-radius:2px;background:var(--ink);color:var(--yellow);white-space:nowrap
}
.chip--warn{background:var(--yellow);color:var(--ink);font-weight:700}
.tag-draft{
  position:absolute;top:10px;right:10px;z-index:3;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  padding:4px 7px;border:1px dashed #c1121f;color:#c1121f;background:rgba(193,18,31,.08);border-radius:2px
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* hazard tape strip */
.tape{height:14px;background:var(--hazard);box-shadow:0 -2px 0 rgba(0,0,0,.15)}

/* ── 03 HUD ──────────────────────────────────────────────────────────── */
.hud{position:fixed;inset:0 0 auto;z-index:60;font-family:var(--f-head)}
.hud__stripe{height:7px;background:var(--hazard)}
.hud__bar{
  display:flex;align-items:center;gap:18px;padding:8px 16px;
  background:color-mix(in srgb,var(--steel) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:2px solid rgba(0,0,0,.3);color:#eef3f7
}
.hud__badge{
  display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  color:inherit;padding:4px 6px;border-radius:3px
}
.hud__badge:hover{background:rgba(255,255,255,.08)}
.hardhat{width:38px;height:27px;flex:none}
.hh-brim,.hh-dome{fill:var(--orange)}
.hh-rib{fill:rgba(0,0,0,.28)}
html[data-shift="night"] .hh-brim,html[data-shift="night"] .hh-dome{fill:var(--yellow)}
.hud__badge-text{display:flex;flex-direction:column;line-height:1;text-align:left}
.hud__badge-text strong{font-size:22px;letter-spacing:.08em}
.hud__badge-text em{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;color:var(--yellow)}

.hud__progress{flex:1;max-width:340px;min-width:120px}
.hud__progress-head{
  display:flex;justify-content:space-between;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.14em;color:#c8d4de;margin-bottom:4px
}
.hud__track{height:9px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.hud__fill{
  height:100%;width:0;
  background:repeating-linear-gradient(-45deg,var(--orange) 0 8px,var(--amber) 8px 16px);
  transition:width .12s linear
}
.hud__nav{display:flex;gap:18px;margin-left:auto}
.hud__nav a{
  color:#dbe4ec;text-decoration:none;font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 2px;border-bottom:2px solid transparent
}
.hud__nav a:hover,.hud__nav a.active{color:var(--yellow);border-bottom-color:var(--yellow)}
.hud__tools{display:flex;gap:8px;align-items:center}
.iconbtn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:rgba(255,255,255,.07);color:#dbe4ec;border:1px solid rgba(255,255,255,.2);
  padding:6px 10px;border-radius:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em
}
.iconbtn:hover{background:rgba(255,255,255,.16);color:var(--yellow)}
.iconbtn[aria-pressed="true"]{background:var(--orange);color:#fff;border-color:var(--orange)}
.hud__menu{display:none;font-size:18px;line-height:1}

/* ── 04 ELEVATION RAIL ───────────────────────────────────────────────── */
.rail{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:2px;padding:10px 8px;
  background:color-mix(in srgb,var(--steel) 82%,transparent);
  border:1px solid rgba(255,255,255,.14);border-radius:4px;backdrop-filter:blur(6px)
}
.rail__item{display:flex;align-items:center;gap:8px;padding:5px 4px;text-decoration:none}
.rail__tick{width:20px;height:2px;background:rgba(255,255,255,.35);transition:.25s}
.rail__lbl{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;color:#a9b8c5;
  max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,color .25s
}
.rail:hover .rail__lbl{max-width:130px}
.rail__item.active .rail__tick{background:var(--yellow);width:30px;height:3px}
.rail__item.active .rail__lbl{color:var(--yellow);max-width:130px}

/* ── 05 HERO ─────────────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:grid;place-items:center;
  padding-top:110px;background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 62%,var(--concrete) 100%)
}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sun{
  position:absolute;top:9%;right:12%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#fff6d8 0%,#ffdf7e 55%,rgba(255,223,126,0) 70%);
  filter:blur(2px);animation:pulse 7s ease-in-out infinite
}
html[data-shift="night"] .sun{background:radial-gradient(circle,#eaf2ff 0%,#b9cbe4 46%,rgba(185,203,228,0) 70%);width:86px;height:86px}
@keyframes pulse{50%{transform:scale(1.07);opacity:.9}}
.cloud{
  position:absolute;height:34px;border-radius:40px;background:rgba(255,255,255,.82);
  box-shadow:34px 8px 0 -6px rgba(255,255,255,.82),-30px 6px 0 -8px rgba(255,255,255,.82)
}
html[data-shift="night"] .cloud{background:rgba(120,145,175,.28);box-shadow:34px 8px 0 -6px rgba(120,145,175,.28),-30px 6px 0 -8px rgba(120,145,175,.28)}
.c1{width:130px;top:16%;left:-20%;animation:drift 58s linear infinite}
.c2{width:90px;top:28%;left:-30%;animation:drift 78s linear infinite 6s}
.c3{width:160px;top:9%;left:-40%;animation:drift 96s linear infinite 14s}
@keyframes drift{to{left:130%}}
.skyline{position:absolute;left:0;right:0;bottom:76px;height:220px;opacity:.5}
.skyline.back{
  background:
    linear-gradient(var(--steel-3),var(--steel-3)) 4% 100%/70px 130px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 15% 100%/50px 180px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 27% 100%/90px 110px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 44% 100%/60px 205px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 60% 100%/110px 150px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 78% 100%/72px 190px no-repeat,
    linear-gradient(var(--steel-3),var(--steel-3)) 92% 100%/86px 120px no-repeat;
  filter:blur(.4px)
}
.skyline.mid{
  bottom:70px;height:150px;opacity:.85;
  background:
    linear-gradient(var(--steel-2),var(--steel-2)) 9% 100%/104px 96px no-repeat,
    linear-gradient(var(--steel-2),var(--steel-2)) 33% 100%/78px 140px no-repeat,
    linear-gradient(var(--steel-2),var(--steel-2)) 55% 100%/126px 86px no-repeat,
    linear-gradient(var(--steel-2),var(--steel-2)) 82% 100%/94px 124px no-repeat
}
.minicrane{position:absolute;bottom:70px}
.minicrane .mast{position:absolute;bottom:0;width:8px;background:var(--orange);opacity:.9}
.minicrane .jib{position:absolute;height:7px;background:var(--orange);opacity:.9;transform-origin:22% 50%}
.mc1{left:22%}
.mc1 .mast{height:230px}
.mc1 .jib{width:170px;bottom:230px;left:-36px;animation:slew 26s ease-in-out infinite}
.mc2{left:70%}
.mc2 .mast{height:170px}
.mc2 .jib{width:130px;bottom:170px;left:-28px;animation:slew 34s ease-in-out infinite reverse}
@keyframes slew{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.birds{position:absolute;top:22%;left:38%;display:flex;gap:16px;opacity:.45;animation:drift 120s linear infinite}
.birds i{width:12px;height:6px;border-top:2px solid var(--steel);border-radius:50% 50% 0 0;transform:rotate(-8deg)}
.birds i:nth-child(2){transform:translateY(9px) rotate(6deg)}
.birds i:nth-child(3){transform:translateY(-6px) rotate(2deg)}

.hero__inner{position:relative;z-index:2;width:min(880px,100%)}
.signboard{position:relative;padding-bottom:38px}
.signboard__posts{position:absolute;inset:auto 0 0;height:50px;z-index:-1}
.signboard__posts i{position:absolute;bottom:-6px;width:20px;height:70px;background:linear-gradient(90deg,#8a6b45,#6b5133)}
.signboard__posts i:first-child{left:16%}
.signboard__posts i:last-child{right:16%}
.signboard__panel{
  position:relative;background:var(--card);border:5px solid var(--ink);border-radius:3px;
  padding:clamp(22px,4vw,40px);box-shadow:var(--shadow);
  animation:sway 8s ease-in-out infinite;transform-origin:50% 0
}
@keyframes sway{0%,100%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}}
.signboard__top{margin-bottom:16px}
.signboard__eyebrow{font-size:10.5px;color:var(--muted);letter-spacing:.16em;margin:0 0 8px}
.signboard__name{
  font-size:clamp(48px,11vw,120px);letter-spacing:.005em;
  background:linear-gradient(180deg,var(--text) 60%,var(--muted));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.signboard__role{
  font-family:var(--f-head);text-transform:uppercase;font-size:clamp(17px,2.7vw,26px);
  letter-spacing:.06em;margin:6px 0 0;color:var(--muted)
}
.signboard__role b{color:var(--orange)}
.signboard__tag{
  margin:16px 0 0;max-width:56ch;font-size:15.5px;line-height:1.62;color:var(--text);
  border-left:4px solid var(--orange);padding-left:14px
}
.signboard__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stat{
  position:relative;flex:1 1 140px;padding:12px 14px;border:2px solid var(--line);border-radius:3px;
  background:color-mix(in srgb,var(--concrete) 40%,transparent)
}
.stat b{display:block;font-family:var(--f-head);font-size:34px;line-height:1;color:var(--orange)}
.stat span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;color:var(--muted)}
.stat .tag-draft{top:6px;right:6px}
.signboard__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.signboard__bolts i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--steel-3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.signboard__bolts i:nth-child(1){top:12px;left:12px}
.signboard__bolts i:nth-child(2){top:12px;right:12px}
.signboard__bolts i:nth-child(3){bottom:50px;left:12px}
.signboard__bolts i:nth-child(4){bottom:50px;right:12px}

.ground{position:absolute;left:0;right:0;bottom:0;height:76px;background:var(--concrete-dk);z-index:1}
.ground .tape{position:absolute;top:0;left:0;right:0}
.cones{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:space-around;padding:0 6%}
.cones i{
  width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:30px solid var(--orange);position:relative;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))
}
.cones i::after{content:"";position:absolute;left:-9px;top:14px;width:18px;height:5px;background:rgba(255,255,255,.85)}

.scrollcue{
  position:absolute;bottom:92px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink)
}
.scrollcue__txt{font-size:10px;letter-spacing:.24em}
.scrollcue__arrow{
  width:16px;height:16px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);animation:bob 1.6s ease-in-out infinite
}
html[data-shift="night"] .scrollcue{color:var(--yellow)}
html[data-shift="night"] .scrollcue__arrow{border-color:var(--yellow)}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(6px,6px)}}

/* ── 06 SCENE FRAMEWORK ──────────────────────────────────────────────
   A scene is a tall section with a viewport-tall sticky stage. Scroll
   through the section scrubs the stage's timeline; the stage is pinned
   while it plays.                                                       */
.scene{position:relative;height:var(--len,400vh);padding:0;overflow:visible}
.scene__stage{
  position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,var(--sky-2) 0%,color-mix(in srgb,var(--concrete) 70%,var(--sky-2)) 58%,var(--concrete) 100%)
}
.stage__caption{
  position:absolute;top:104px;left:clamp(16px,4vw,54px);z-index:7;
  max-width:min(620px,68vw);pointer-events:none
}
/* scene headings stay out of the machinery's way */
.stage__caption .h-sec{font-size:clamp(24px,3.6vw,44px)}
.stage__ground{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--concrete-dk);z-index:2}
.stage__ground .tape{position:absolute;top:0;left:0;right:0}
.stage__hint{
  position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:7;
  font-size:10px;letter-spacing:.26em;color:var(--muted);margin:0
}
.scene__stage [style*="translate"]{will-change:transform}

/* ── 07 SCENE · EARTHWORK ────────────────────────────────────────────
   Both machines are now supplied artwork (assets/img/rig/), not CSS
   shapes: one excavator arm that rotates as a rigid body to dig and
   pour, and one rigid-frame hauler whose bed carries the note plate.
   Everything else in the scene keys off where those two images actually
   render, read live from the DOM each frame.                          */
#plan .scene__stage{
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 30%,var(--concrete) 100%)
}

/* ── the excavator arm: one image, rotated about the boom root (off the
   top-right of the art) so the bucket swings through the dig/pour arc. */
/* Framed like the reference: the arm is never a floating object in the
   sky — it enters from off the top-right corner and runs out of frame,
   so only the bucket and the end of the stick are ever in shot. */
.exc{
  position:absolute;right:-16%;top:-8%;width:min(940px,60vw);z-index:3;
  /* pivot on the boom foot — the far right of the art, which sits past
     the edge of the stage, so the arm swings from off-camera */
  transform-origin:97% 74%;will-change:transform
}
.exc__img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(17,22,27,.28))}
/* zero-size marker sitting on the bucket lip — a child, so it inherits
   the arm's rotation and its rect is always the true pour point */
.exc__tip{position:absolute;left:26%;top:86%;width:0;height:0}

.spoil{
  position:absolute;left:50%;top:50%;width:110px;height:78px;z-index:5;opacity:0;
  border-radius:50% 46% 40% 52%;
  background:radial-gradient(circle at 35% 25%,#8a7355,#5f4d38 72%);
  box-shadow:0 6px 0 rgba(0,0,0,.12)
}

/* ── the hauler: one image, with the load heaped behind it and the note
   plate bolted to the bed side in front of it.                        */
/* Pulled right up to the viewer and cropped on three sides — the truck
   is the frame, not the subject. `aspect-ratio` keeps the box's height
   known before the image decodes, so the bed percentages below (and the
   rail maths in haulScene) never key off a zero-height box on frame 1. */
.rig{
  position:absolute;left:61%;top:0;width:min(680px,47vw);
  aspect-ratio:672/435;z-index:4;will-change:transform
}
.rig__img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
/* The load is drawn BEHIND the truck inside a window that stops dead at
   the bed rail, so only the crown of the heap is ever visible — which is
   all you can see of a loaded haul body from the side. Clipping at the
   rail (rather than just stacking z-index) also stops the heap showing
   through the transparent gaps under the body, between the wheels. */
.rig__bed{position:absolute;z-index:0;left:4%;width:47%;top:0;height:16%;overflow:hidden}
.rig__heap{
  position:absolute;left:0;right:0;bottom:0;height:0;
  background:repeating-linear-gradient(58deg,#7b6448 0 10px,#6b5740 10px 20px);
  border-radius:46% 40% 0 0 / 74% 66% 0 0
}
/* the plate: same construction-document language as the hero signboard
   (card ground, hard dark border, offset shadow, corner bolts), bolted
   over the bed side. z-index above the spoil/splash/dust layers so the
   pour happens behind the plate, never on top of it. */
.haul__board{
  position:absolute;z-index:10;left:clamp(24px,15vw,232px);top:50%;transform:translateY(-50%);
  width:min(440px,31vw);height:min(320px,38svh);pointer-events:none
}
.hpanel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(940px,94%);opacity:0;
  background:var(--card);border:5px solid var(--ink);border-radius:3px;
  box-shadow:var(--shadow);
  padding:clamp(20px,2.6vw,34px) clamp(24px,3vw,40px)
}
.hpanel__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hpanel__no{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--muted)}
.hpanel__head{
  font-size:clamp(30px,4.6vw,62px);letter-spacing:.01em;line-height:.92;
  background:linear-gradient(180deg,var(--text) 62%,var(--muted));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hpanel__line{
  margin:16px 0 0;max-width:56ch;font-size:clamp(14px,1.55vw,18px);line-height:1.55;
  color:var(--text);font-weight:500;border-left:4px solid var(--orange);padding-left:14px
}
.hpanel__more{
  display:block;margin-top:16px;font-size:9px;letter-spacing:.18em;color:var(--muted)
}
.hpanel__bolts i{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--steel-3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)
}
.hpanel__bolts i:nth-child(1){top:9px;left:9px}
.hpanel__bolts i:nth-child(2){top:9px;right:9px}
.hpanel__bolts i:nth-child(3){bottom:9px;left:9px}
.hpanel__bolts i:nth-child(4){bottom:9px;right:9px}

.splash{position:absolute;left:50%;top:50%;width:0;height:0;z-index:7}
.splash i{
  position:absolute;left:0;top:0;width:var(--d,22px);height:var(--d,22px);
  border-radius:46% 54% 50% 44%;background:#7b6448;opacity:0;
  box-shadow:0 2px 0 rgba(0,0,0,.12)
}
/* the curtain that hides the swap on the side of the bed */
.dustcloud{
  position:absolute;left:50%;top:50%;width:620px;height:320px;z-index:8;opacity:0;
  border-radius:50%;pointer-events:none;filter:blur(16px);
  background:radial-gradient(ellipse at 50% 60%,
    rgba(150,133,108,.98) 0%, rgba(150,133,108,.86) 38%,
    rgba(150,133,108,.45) 62%, rgba(150,133,108,0) 78%)
}

/* ── 08 SCENE · ERECTION ─────────────────────────────────────────────
   One pinned stage, one crane, N loads (`.lcard`, one per experience).
   Every card starts in the yard — small, closed, already slung — and
   sits there in normal-looking rest until its own turn: the crane
   travels out empty, drops its hook onto the sling above that load,
   hoists, swings it to the display slot and opens it. Delivered cards
   don't vanish or get replaced — once the next load's turn begins, the
   previous one glides up off the top of the stage on its own to make
   room, purely as a function of scroll position like everything else
   here, so it reverses for free scrolling back up.                    */
#experience .scene__stage{padding-bottom:74px;
  background:linear-gradient(180deg,var(--sky-2) 0%,color-mix(in srgb,var(--concrete) 78%,var(--sky-2)) 60%,var(--concrete) 100%)
}

.crane{position:absolute;inset:0;z-index:3;pointer-events:none}
.crane__mast{
  position:absolute;left:6%;top:150px;width:26px;bottom:0;transform:translateX(-50%);
  background:
    linear-gradient(90deg,var(--orange) 0 4px,transparent 4px calc(100% - 4px),var(--orange) calc(100% - 4px) 100%),
    repeating-linear-gradient(38deg,transparent 0 10px,var(--orange) 10px 13px,transparent 13px 24px);
  filter:drop-shadow(1px 0 3px rgba(0,0,0,.18))
}
.crane__jib{
  position:absolute;left:6%;right:2%;top:150px;height:18px;
  background:
    linear-gradient(180deg,var(--orange) 0 4px,transparent 4px 14px,var(--orange) 14px 18px),
    repeating-linear-gradient(58deg,transparent 0 9px,var(--orange) 9px 12px,transparent 12px 22px);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))
}
.crane__cathead{
  position:absolute;left:6%;top:108px;width:0;height:0;transform:translateX(-50%);
  border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:44px solid var(--orange)
}
.crane__cathead .light{
  position:absolute;left:-3px;top:-48px;width:8px;height:8px;border-radius:50%;background:#ff3b30;
  box-shadow:0 0 10px 2px rgba(255,59,48,.75);animation:blink 2.2s steps(1,end) infinite
}
.crane__ties{
  position:absolute;left:6%;right:2%;top:112px;height:42px;
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(30,38,46,.7) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))
}
.crane__trolley{
  position:absolute;top:170px;left:0;width:42px;height:13px;margin-left:-21px;
  background:var(--steel);border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.3)
}
.crane__trolley::before,.crane__trolley::after{
  content:"";position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--steel-3);border:2px solid var(--steel)
}
.crane__trolley::before{left:3px}
.crane__trolley::after{right:3px}

.lcard{
  position:absolute;left:50%;top:50%;width:min(560px,88vw);
  background:var(--card);border:3px solid var(--ink);border-radius:3px;
  box-shadow:var(--shadow);opacity:0;z-index:5
}
.rm .lcard{visibility:visible!important}
/* the sling: two straps tied to the top corners of the box, meeting at
   an apex above it — the crane hook attaches AT that apex, never below
   the load, exactly the way a real strap-and-hook rig works. It's a
   child of the card, so it travels, scales and rotates with the box
   automatically, and fades out once the box is set down and opened. */
/* fixed px, not %: `.lcard`'s own height is auto (content-driven), so a
   percentage top/height here would resolve against an indeterminate
   containing-block height and collapse to 0 — the same class of bug
   fixed earlier in the excavator stick. A fixed length in the card's
   own local pixel space scales correctly anyway, since the parent's
   transform:scale() (applied in JS) scales this whole subtree with it. */
.lcard__sling{position:absolute;left:0;right:0;top:-72px;height:72px;overflow:visible;pointer-events:none;z-index:1}
.lcard__strap{stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linecap:round}
.lcard__apexdot{fill:var(--steel-3);stroke:var(--ink);stroke-width:2.4}
.lcard__eyes i{
  position:absolute;top:-9px;width:16px;height:16px;border:3px solid var(--steel);
  border-radius:50%;background:var(--card);z-index:3
}
.lcard__eyes i:first-child{left:26px}
.lcard__eyes i:last-child{right:26px}
.lcard__crate{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  background:repeating-linear-gradient(90deg,#8a6b45 0 26px,#7a5d3b 26px 52px);
  border-radius:1px;opacity:calc(1 - var(--open,0))
}
.lcard__crate::before,.lcard__crate::after{
  content:"";position:absolute;left:0;right:0;height:16px;background:var(--steel);opacity:.85
}
.lcard__crate::before{top:16%}
.lcard__crate::after{bottom:16%}
.lcard__crate span{
  position:relative;z-index:2;font-size:clamp(22px,3vw,40px);letter-spacing:.14em;
  color:#f7ecd9;text-shadow:0 2px 0 rgba(0,0,0,.4)
}
.lcard__body{padding:26px 26px 22px;opacity:var(--open,0)}
.lcard__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lcard__no{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;background:var(--ink);color:var(--yellow);
  padding:5px 8px;border-radius:2px
}
.lcard__weight{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.lcard__role{font-family:var(--f-head);text-transform:uppercase;font-size:clamp(21px,3vw,32px);line-height:.98}
.lcard__meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:6px 0 12px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted)
}
.lcard__meta .co{color:var(--orange);font-weight:700;letter-spacing:.1em}
.lcard__bullets{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lcard__bullets li{position:relative;padding-left:20px;font-size:clamp(12.5px,1.35vw,14.4px);line-height:1.56}
.lcard__bullets li::before{
  content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)
}
.lcard__tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.tool{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;padding:4px 7px;border-radius:2px;
  background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 40%,transparent)
}

/* cable + hook: shared by both the mini per-load crane and (still) the
   earlier .crane__trolley markup elsewhere on the page */
.cable{
  position:absolute;left:50%;top:100%;width:3px;height:0;margin-left:-1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),var(--steel) 40%,var(--steel))
}
.hook{position:absolute;left:50%;top:100%;width:20px;margin-left:-10px}
.hook svg{display:block;width:20px;height:28px}
.hk-block{fill:var(--steel)}
.hk-shank{fill:var(--steel-3)}
.hk-hook{fill:var(--steel-2)}

/* ── 08z BACKGROUND EASTER EGGS ──────────────────────────────────────
   Tool names and the file formats the work moves through, drifting in
   the background of every scene. Deliberately near-invisible: texture
   you notice on the second pass, never something competing with a card. */
.eggs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;will-change:transform}
.egg{
  position:absolute;font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;
  color:var(--text);opacity:.07;white-space:nowrap;
  transform:scale(var(--s,1));animation:eggfloat 14s ease-in-out infinite;animation-delay:var(--d,0s)
}
#projects .egg,#skills .egg{color:#fff;opacity:.09}
@keyframes eggfloat{
  0%,100%{transform:scale(var(--s,1)) translate(0,0)}
  50%{transform:scale(var(--s,1)) translate(10px,-14px)}
}
@media (prefers-reduced-motion:reduce){.egg{animation:none}}

/* ── 08a LOAD RAIL + LIGHTBOX ────────────────────────────────────────
   The rail pins to the bottom of the erection stage for the whole
   section, so every load stays one click away instead of something you
   scroll back up to find. Click flies a load in; double-click (or
   ctrl/cmd-click) opens it full-size in the lightbox.                 */
.loadbar{
  position:absolute;left:0;right:0;bottom:0;z-index:9;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  padding:10px clamp(10px,3vw,24px) 12px;
  background:color-mix(in srgb,var(--steel) 88%,transparent);
  border-top:2px solid rgba(0,0,0,.35);backdrop-filter:blur(8px)
}
.loadchip{
  display:flex;align-items:baseline;gap:7px;cursor:pointer;text-align:left;
  padding:6px 10px;border-radius:3px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#dbe4ec;font-family:var(--f-body);
  transition:background .18s ease,border-color .18s ease,color .18s ease
}
.loadchip:hover{background:rgba(255,255,255,.16);border-color:var(--yellow);color:#fff}
.loadchip__no{font-size:9.5px;letter-spacing:.1em;color:var(--muted)}
.loadchip__role{font-family:var(--f-head);text-transform:uppercase;font-size:14px;letter-spacing:.04em;line-height:1}
.loadchip__co{font-size:8.6px;letter-spacing:.08em;color:var(--muted)}
/* delivered: this load has already been flown in and set */
.loadchip.is-done{background:rgba(255,212,0,.1);border-color:rgba(255,212,0,.45)}
.loadchip.is-done .loadchip__no{color:var(--yellow)}
/* on the hook right now */
.loadchip.is-current{background:var(--orange);border-color:var(--orange);color:#fff}
.loadchip.is-current .loadchip__no,.loadchip.is-current .loadchip__co{color:rgba(255,255,255,.85)}

.lbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,4vw,40px)}
.lbox__scrim{position:absolute;inset:0;background:rgba(9,13,17,.78);backdrop-filter:blur(3px)}
.lbox__panel{
  position:relative;z-index:1;width:min(680px,100%);max-height:86vh;overflow:auto;
  background:var(--card);border:4px solid var(--ink);border-radius:3px;
  box-shadow:var(--shadow);padding:clamp(20px,3vw,32px)
}
.lbox__x{
  position:absolute;top:8px;right:10px;cursor:pointer;line-height:1;
  background:none;border:0;font-size:30px;color:var(--muted);padding:2px 8px
}
.lbox__x:hover{color:var(--orange)}
.lbox__nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)
}
.lbox__nav .btn{font-size:14px;padding:8px 14px;box-shadow:3px 3px 0 0 var(--ink)}
.lbox__count{font-size:10px;letter-spacing:.14em;color:var(--muted)}

/* ── 08b SCENE · PROJECT TOUR ────────────────────────────────────────
   One beat per project in a pinned frame: the photo is full-bleed, the
   project's name tracks across it at its own rate, and a thin caption
   line carries value and location. The full write-up is not repeated
   here — that lives on the project boards along the side of the later
   scenes. Only opacity/transform are scrubbed, so it all reverses free. */
.tourleg .scene__stage{background:var(--ink)}
.tour{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;z-index:1}
.tour__beats{position:absolute;inset:0;z-index:1}
.beat{position:absolute;inset:0;opacity:0}
.beat__shot{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.beat__shot img{width:100%;height:100%;object-fit:cover;display:block}
.beat__shot::after{ /* keeps the name legible over any photo */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,13,17,.62) 0%,rgba(9,13,17,.3) 42%,rgba(9,13,17,.78) 100%)
}
.beat__title{
  position:absolute;left:0;right:0;top:42%;z-index:2;
  font-size:clamp(40px,9vw,132px);line-height:.9;letter-spacing:.005em;
  color:#fff;text-align:center;white-space:nowrap;pointer-events:none;
  text-shadow:0 10px 40px rgba(0,0,0,.6)
}
.beat__title span{display:inline-block;will-change:transform}
.beat__sub{
  position:absolute;left:0;right:0;top:58%;z-index:2;margin:0;
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;
  font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.72);pointer-events:none
}
.beat__sub span:first-child{color:var(--yellow)}

/* progress ticks — how far along the route you are */
.tour__ticks{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  display:flex;gap:6px
}
.tour__ticks i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.tour__ticks i.is-done{background:rgba(255,212,0,.55)}
.tour__ticks i.is-current{background:var(--orange);width:26px}
.tourleg .stage__caption{z-index:6}
.tourleg .stage__caption .h-sec{color:#fff}
.tourleg .stage__hint{color:rgba(255,255,255,.6);bottom:44px}

/* ── 08b PROJECT LOG DRAWER ──────────────────────────────────────────
   The projects have their own tour legs; this is the index to them. It
   rides closed against the right edge of every working scene as a thin
   tab, and slides out into a short list of chips — the same size and
   language as the erection rail's loads — each opening full-size.      */
.pboards{
  position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:9;
  display:flex;align-items:flex-start
}
.pboards__tab{
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  padding:12px 7px;border:1px solid rgba(255,255,255,.2);border-right:0;
  border-radius:3px 0 0 3px;background:color-mix(in srgb,var(--ink) 78%,transparent);
  color:#dbe4ec;backdrop-filter:blur(6px)
}
.pboards__tab:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.pboards__tab-lbl{writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em}
.pboards__tab-n{font-size:9px;letter-spacing:.06em;color:var(--yellow)}
.pboards.is-open .pboards__tab-n{color:#fff}

/* closed: zero width, no hit area. Open: a narrow column of chips. */
.pboards__list{
  width:0;overflow:hidden;transition:width .26s ease;
  display:flex;flex-direction:column;gap:5px;
  max-height:70svh;overflow-y:auto;scrollbar-width:thin
}
.pboards.is-open .pboards__list{
  width:min(258px,26vw);padding:7px;
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)
}
@media (prefers-reduced-motion:reduce){.pboards__list{transition:none}}

.pchip{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  padding:4px;border-radius:3px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#dbe4ec;
  transition:background .18s ease,border-color .18s ease
}
.pchip:hover,.pchip:focus-visible{background:rgba(255,255,255,.16);border-color:var(--yellow)}
.pchip__img{width:42px;height:30px;object-fit:cover;flex:0 0 auto;border-radius:2px;display:block}
.pchip__txt{min-width:0}
.pchip__name{
  display:block;font-family:var(--f-head);text-transform:uppercase;font-size:11.5px;
  line-height:1.05;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pchip__meta{display:block;margin-top:2px;font-size:8px;letter-spacing:.08em;color:var(--muted)}

.lbox__shot{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border:3px solid var(--ink);border-radius:2px;margin-bottom:12px}

/* narrow: the drawer opens over the scene rather than beside it, and
   stays clear of the load rail pinned to the very bottom */
@media (max-width:900px){
  .pboards{top:auto;bottom:104px;transform:none}
  .pboards.is-open .pboards__list{width:min(240px,64vw)}
}

/* ── 09 SCENE · EQUIPMENT YARD ───────────────────────────────────────── */
#skills .scene__stage{background:var(--steel);color:#e9eff5}
#skills .h-sec{color:#fff}
#skills .sub{color:#a9b8c5}
.panel{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  width:min(1060px,92vw);max-height:64vh;overflow:auto;
  background:var(--steel-2);border:3px solid rgba(0,0,0,.5);border-radius:6px;
  padding:clamp(16px,2.4vw,30px);z-index:4;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),var(--shadow)
}
.panel__rivets i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--steel-3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.45)}
.panel__rivets i:nth-child(1){top:9px;left:9px}
.panel__rivets i:nth-child(2){top:9px;right:9px}
.panel__rivets i:nth-child(3){bottom:9px;left:9px}
.panel__rivets i:nth-child(4){bottom:9px;right:9px}
.gauges{display:grid;gap:16px}
.gauge-group{border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.gauge-group:first-child{border-top:0;padding-top:0}
.gauge-group>h3{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--yellow);margin:0 0 10px;text-transform:none}
.gauge-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px}
.gauge{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:10px 8px 8px;text-align:center}
.gauge__dial{position:relative;width:96px;height:50px;margin:0 auto 4px;overflow:hidden}
.gauge__arc{
  width:96px;height:96px;border-radius:50%;
  background:conic-gradient(from 270deg,
    var(--orange) 0turn calc(var(--v) * .5turn),
    rgba(255,255,255,.14) calc(var(--v) * .5turn) .5turn,
    transparent .5turn 1turn);
  -webkit-mask:radial-gradient(circle,transparent 0 31px,#000 32px);
  mask:radial-gradient(circle,transparent 0 31px,#000 32px)
}
.gauge__needle{
  position:absolute;left:50%;bottom:0;width:2px;height:40px;margin-left:-1px;
  background:var(--yellow);transform-origin:50% 100%;
  transform:rotate(calc(-90deg + var(--v) * 180deg))
}
.gauge__pin{position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--steel-3);border:2px solid var(--ink)}
.gauge__name{display:block;font-family:var(--f-head);font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1.05}
.gauge__val{font-size:9px;letter-spacing:.14em;color:var(--yellow)}
.panel__foot{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:9.5px;letter-spacing:.14em;color:#9fb0bf}
.lamp{width:11px;height:11px;border-radius:50%;background:#7d5a2a;transition:background .3s,box-shadow .3s}
.lamp.on{background:#3ddc84;box-shadow:0 0 10px 2px rgba(61,220,132,.6);animation:blink 3s steps(1,end) infinite}
.dozer{position:absolute;left:0;bottom:120px;width:220px;z-index:3}
.dz-blade{fill:var(--concrete-dk)}
.dz-arm,.dz-track{fill:var(--ink)}
.dz-body,.dz-cab{fill:var(--yellow)}
.dz-roller{fill:var(--steel-3)}
.dozer__berm{
  position:absolute;left:-104px;bottom:0;width:110px;height:34px;
  background:var(--concrete-dk);border-radius:60px 60px 0 0;opacity:.55;transform-origin:100% 100%
}

/* ── 10 SCENE · BADGING ──────────────────────────────────────────────── */
#education .scene__stage{background:linear-gradient(180deg,var(--sky-2),var(--concrete) 60%)}
.badging{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:min(1060px,92vw);display:grid;grid-template-columns:minmax(190px,300px) 1fr;
  gap:clamp(20px,4vw,54px);align-items:center;z-index:4
}
.bighat svg{filter:drop-shadow(0 20px 24px rgba(0,0,0,.28))}
.bh-brim,.bh-dome{fill:var(--orange)}
.bh-rib{fill:rgba(0,0,0,.16)}
.bh-shine{fill:rgba(255,255,255,.3)}
.bh-shadow{fill:rgba(0,0,0,.16)}
html[data-shift="night"] .bh-brim,html[data-shift="night"] .bh-dome{fill:var(--yellow)}
.stickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sticker{
  position:relative;background:var(--card);border:3px solid var(--ink);border-radius:4px;
  padding:18px 14px;text-align:center;box-shadow:var(--shadow);opacity:0
}
.sticker::before{content:"";position:absolute;inset:6px;border:1px dashed var(--line);border-radius:2px;pointer-events:none}
.sticker b{display:block;font-family:var(--f-head);font-size:clamp(19px,2.4vw,26px);letter-spacing:.04em;text-transform:uppercase;color:var(--orange)}
.sticker span{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:var(--muted)}

/* ── 11 TURNOVER ─────────────────────────────────────────────────────── */
.contact{background:linear-gradient(180deg,var(--concrete),var(--concrete-dk));padding-bottom:0;padding-top:clamp(46px,7vw,90px)}
.clipboard{
  position:relative;width:min(760px,100%);margin:0 auto;
  background:linear-gradient(180deg,#a07c4f,#7f6238);
  border-radius:8px;padding:34px 16px 20px;box-shadow:var(--shadow)
}
.clipboard__clip{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:linear-gradient(180deg,#c9d2da,#8e99a4);
  border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.35)
}
.clipboard__clip::after{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:56px;height:12px;background:#5d6874;border-radius:3px}
.clipboard__paper{position:relative;background:var(--paper);border-radius:2px;padding:clamp(22px,4vw,40px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.rfi{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld--wide{grid-column:1/-1}
.fld span{font-size:9.5px;letter-spacing:.16em;color:var(--muted)}
.fld input,.fld textarea{
  font-family:var(--f-body);font-size:15px;color:var(--text);
  background:transparent;border:0;border-bottom:2px solid var(--line);padding:8px 2px;resize:vertical
}
.fld input:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--orange)}
.rfi__actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.punch{margin-top:34px;border-top:2px dashed var(--line);padding-top:20px}
.punch h3{font-size:10px;letter-spacing:.2em;color:var(--muted);margin:0 0 12px;font-family:var(--f-mono)}
.punch ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.punch li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.punch li i{
  width:21px;height:21px;flex:none;border:2px solid var(--ink);border-radius:2px;
  display:grid;place-items:center;font-size:14px;line-height:1;font-style:normal;
  color:var(--orange);font-weight:700;background:var(--white)
}
/* the tick scales in as the punch item is walked */
.punch li i s{text-decoration:none;display:block;transform:scale(var(--check,0));transform-origin:center}
.punch li.done span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--orange)}
.turnstamp{
  position:absolute;right:6%;bottom:8%;z-index:4;pointer-events:none;opacity:0;
  transform:rotate(-13deg)
}
.turnstamp span{
  display:block;font-family:var(--f-head);font-size:clamp(16px,2.6vw,26px);line-height:1.02;
  letter-spacing:.09em;text-align:center;color:#1f7a4d;border:4px double #1f7a4d;border-radius:4px;
  padding:10px 18px;background:rgba(31,122,77,.07)
}
.footer{margin-top:var(--rhythm);background:var(--ink);color:#8f9daa;padding:0 0 22px}
.footer p{margin:20px 16px 0;font-size:9.5px;letter-spacing:.14em;text-align:center}

/* ── 12 OVERLAYS ─────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:80;
  background:var(--ink);color:var(--yellow);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  padding:13px 18px;border-radius:3px;border-left:5px solid var(--orange);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,.9,.3,1.2);max-width:88vw
}
.toast.show{transform:translate(-50%,0)}
.stamp{position:fixed;left:16px;bottom:16px;z-index:70;pointer-events:none;transform:rotate(-11deg);opacity:.7}
.stamp span{
  display:block;font-family:var(--f-head);font-size:15px;line-height:1.05;letter-spacing:.1em;
  text-align:center;color:#c1121f;border:3px double #c1121f;border-radius:3px;padding:8px 14px;
  background:rgba(255,255,255,.12)
}
.noscript{padding:140px 24px;text-align:center}

/* ── 13 RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1180px){ .rail{display:none} }
/* ── narrow screens: the plant is redrawn, not just shrunk ───────────── */
@media (max-width:820px){
  .stage__caption .h-sec{font-size:clamp(20px,5.4vw,30px)}
  .stage__caption{top:96px}
  /* the gap between arm and bed has to close hard on a phone's tall
     narrow viewport, or the frame is mostly empty sky. The bed's own
     percentages travel with the truck image, so only the outer sizes
     and the note's type need a narrower-screen value. */
  .exc{left:20%;top:12%;width:min(300px,60vw)}
  .rig{width:min(520px,88vw);top:86%}
  .hpanel{padding:12px 14px}
  .hpanel__no{margin-bottom:5px;font-size:8.5px}
  .hpanel p{font-size:11.5px;line-height:1.4}
  .dustcloud{width:320px;height:190px}
  /* the rail has to stay one or two rows on a phone, or it eats the stage:
     drop the employer line and shrink the role to just the load number */
  .loadbar{gap:4px;padding:7px 8px 8px}
  .loadchip{padding:5px 7px;gap:5px}
  .loadchip__role{font-size:11.5px}
  .loadchip__co{display:none}
  /* the crane and yard, resized for a phone viewport */
  .crane__mast,.crane__jib{top:118px}
  .crane__cathead{top:78px}
  .crane__ties{top:80px;height:32px}
  .crane__trolley{top:138px}
  .lcard__sling{top:-46px;height:46px}
}
@media (max-width:900px){
  .hud__bar{flex-wrap:wrap;gap:10px 14px}
  .hud__progress{order:3;max-width:none;flex-basis:100%}
  .hud__menu{display:inline-flex}
  .hud__nav{
    order:4;flex-basis:100%;display:none;flex-direction:column;gap:0;margin:0;
    border-top:1px solid rgba(255,255,255,.16);padding-top:6px
  }
  .hud__nav.open{display:flex}
  .hud__nav a{padding:9px 2px}
  .hero{padding-bottom:150px}
  .stage__caption{top:120px;max-width:82vw}
  .stickers{grid-template-columns:1fr}
  .badging{grid-template-columns:1fr;gap:16px;top:56%}
  .bighat{max-width:180px;margin:0 auto}
  .rfi{grid-template-columns:1fr}
  .stamp{transform:rotate(-11deg) scale(.62);transform-origin:left bottom;opacity:.42}
  .panel{max-height:66vh}
}
@media (max-width:560px){
  .hud__badge-text strong{font-size:18px}
  .cones i:nth-child(n+4){display:none}
  .lcard__body{padding:18px 16px 16px}
  .gauge-row{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .gauge__dial{width:78px;height:42px}
  .gauge__arc{width:78px;height:78px;-webkit-mask:radial-gradient(circle,transparent 0 25px,#000 26px);mask:radial-gradient(circle,transparent 0 25px,#000 26px)}
  .gauge__needle{height:32px}
}

/* ── 14 REDUCED MOTION ───────────────────────────────────────────────
   No pinning, no scrubbing: every scene collapses into ordinary
   document flow with all of its content on show.                       */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.rm .scene{height:auto!important}
.rm .scene__stage{position:static;height:auto;min-height:0;overflow:visible;padding:var(--rhythm) 20px;background:var(--concrete)}
.rm #skills .scene__stage{background:var(--steel)}
.rm .stage__caption{position:static;max-width:none;margin-bottom:26px;text-align:left!important}
.rm .exc,.rm .spoil,.rm .splash,.rm .dustcloud,.rm .crane,.rm .dozer,.rm .stage__ground,.rm .stage__hint{display:none}
.rm .lcard__sling{display:none}
.rm .rig{position:static;transform:none!important;width:min(760px,100%);margin:0 auto}
.rm .rig__heap,.rm .rig__img{display:none}
.rm .haul__board{position:static;inset:auto;background:none;border:0;box-shadow:none;overflow:visible}
.rm .hpanel{position:static;inset:auto;opacity:1!important;transform:none!important;padding:0 0 18px;display:block}
.rm .lcard{
  position:static;opacity:1!important;transform:none!important;
  width:min(620px,100%);margin:0 auto 26px
}
.rm .lcard__crate{display:none}
.rm .beat{position:static;opacity:1!important;visibility:visible!important;margin-bottom:18px}
.rm .beat__shot{position:static;opacity:1!important;transform:none!important;height:200px}
.rm .beat__title,.rm .tour__ticks{display:none}
.rm .beat__sub{position:static;opacity:1!important;justify-content:flex-start;color:var(--muted)}
.rm .pboards{position:static;transform:none;display:block;padding:0 0 22px}
.rm .pboards__tab{display:none}
.rm .pboards__list{width:100%!important;max-height:none;flex-direction:row;flex-wrap:wrap;
  background:none;border:0;backdrop-filter:none;padding:0}
.rm .pchip{width:min(240px,100%);background:rgba(17,22,27,.05);border-color:var(--line);color:var(--text)}
.rm .eggs{display:none}
.rm .loadbar{position:static;background:none;border:0;backdrop-filter:none;justify-content:flex-start;padding:0 0 22px}
.rm .loadchip{background:rgba(17,22,27,.05);border-color:var(--line);color:var(--text)}
.rm .lcard__body{opacity:1!important}
.rm .panel{position:static;transform:none;max-height:none;overflow:visible;width:min(1060px,100%);margin:0 auto}
.rm .badging{position:static;transform:none;width:min(1060px,100%);margin:0 auto}
.rm .sticker{opacity:1!important;transform:none!important}
.rm .bighat{opacity:1!important;transform:none!important}
.rm .lamp{background:#3ddc84}
.rm .punch li i s{transform:scale(1)}
.rm .turnstamp{opacity:1;position:static;transform:rotate(-4deg);margin-top:24px;display:inline-block}

/* the project drawer only needs a lane when it is open, and it closes
   over the scene rather than pushing it — so only the tab is reserved */
@media (min-width:1181px){
  .panel,.badging{width:min(1060px,calc(92vw - 120px))}
}