/* ==========================================================================
   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 SITE PLAN ────────────────────────────────────────────────────── */
.plan{background:var(--concrete);padding-top:calc(var(--rhythm) + 10px)}
.sheet{
  position:relative;width:min(1080px,100%);margin:0 auto;
  background:var(--blue);color:#eaf3ff;border:14px solid #082a4a;border-radius:2px;
  box-shadow:var(--shadow);overflow:hidden
}
html[data-shift="night"] .sheet{background:#07223c;border-color:#04182b}
.sheet__grid{
  position:absolute;inset:0;opacity:.3;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px
}
.sheet__body{position:relative;padding:clamp(26px,4.5vw,54px);padding-bottom:170px}
.sheet__head{position:relative;margin-bottom:26px}
.sheet .h-sec{color:#fff}
.sheet .h-sec .num{background:var(--yellow);color:var(--ink)}
.sheet .sub{color:#a9cdf0}
.tape-strip{
  position:absolute;top:-46px;left:-30px;width:120px;height:34px;
  background:rgba(255,255,255,.22);transform:rotate(-6deg);
  box-shadow:0 1px 0 rgba(255,255,255,.3)
}
.notes{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;gap:18px;max-width:74ch}
.notes li{
  counter-increment:n;position:relative;padding-left:52px;font-size:16px;line-height:1.68;color:#e3f0ff
}
.notes li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--ink);
  background:var(--yellow);padding:3px 7px;border-radius:2px
}
.sheet__dims{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px;opacity:.85}
.dim{display:flex;flex-direction:column;gap:6px}
.dim i{
  display:block;width:190px;height:1px;background:#cfe4f8;position:relative
}
.dim i::before,.dim i::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:#cfe4f8
}
.dim i::before{left:0}.dim i::after{right:0}
.dim b{font-size:9.5px;letter-spacing:.16em;color:#bcd9f4;font-weight:500}
.titleblock{
  position:absolute;right:0;bottom:0;width:min(370px,86%);
  background:var(--blue);border-top:2px solid #cfe4f8;border-left:2px solid #cfe4f8
}
.tb-row{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(207,228,248,.5);align-items:baseline}
.tb-row:last-child{border-bottom:0}
.tb-row .k{font-size:8.5px;letter-spacing:.14em;color:#9fc4e8;min-width:66px}
.tb-row .v{font-family:var(--f-head);font-size:17px;letter-spacing:.05em;color:#fff;text-transform:uppercase}
.tb-row.split{gap:16px}
.tb-row.split>span{display:flex;flex-direction:column;gap:2px}
.tb-row.split .k{min-width:0}
.tb-row.split .v{font-size:14px}

/* ── 07 CRANE + LOADS ────────────────────────────────────────────────── */
.exp{
  overflow:clip;
  background:linear-gradient(180deg,var(--concrete) 0%,color-mix(in srgb,var(--sky-2) 55%,var(--concrete)) 30%,var(--concrete) 100%)
}
.exp__head{width:min(1080px,100%);margin:0 auto 40px}

.crane{position:sticky;top:92px;height:0;pointer-events:none}
.crane--struct{z-index:4}   /* mast + jib pass behind the loads */
.crane--rig{z-index:24}     /* hook + slings stay in front */
.crane__mast{
  position:absolute;left:6%;top:0;width:34px;height:340vh;transform:translateX(-50%);
  background:
    linear-gradient(90deg,var(--orange) 0 5px,transparent 5px calc(100% - 5px),var(--orange) calc(100% - 5px) 100%),
    repeating-linear-gradient(38deg,transparent 0 12px,var(--orange) 12px 16px,transparent 16px 30px);
  opacity:.96;filter:drop-shadow(2px 0 4px rgba(0,0,0,.18))
}
.crane__jib{
  position:absolute;left:6%;right:2%;top:0;height:24px;
  background:
    linear-gradient(180deg,var(--orange) 0 5px,transparent 5px 19px,var(--orange) 19px 24px),
    repeating-linear-gradient(58deg,transparent 0 10px,var(--orange) 10px 14px,transparent 14px 26px);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))
}
.crane__counterjib{
  position:absolute;left:0;width:calc(6% + 4px);top:2px;height:18px;
  background:linear-gradient(180deg,var(--orange) 0 4px,transparent 4px 14px,var(--orange) 14px 18px)
}
.crane__counterjib .cw{
  position:absolute;left:-2px;top:-14px;padding:9px 8px;background:var(--steel);color:var(--yellow);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;border-radius:2px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)
}
.crane__cathead{
  position:absolute;left:6%;top:-58px;width:0;height:0;transform:translateX(-50%);
  border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:58px solid var(--orange)
}
.crane__cathead .light{
  position:absolute;left:-4px;top:-64px;width:9px;height:9px;border-radius:50%;background:#ff3b30;
  box-shadow:0 0 12px 3px rgba(255,59,48,.75);animation:blink 2.2s steps(1,end) infinite
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.crane__ties{
  position:absolute;left:6%;right:2%;top:-56px;height:56px;
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(30,38,46,.75) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))
}
.crane__trolley{
  position:absolute;top:22px;left:50%;width:46px;height:15px;margin-left:-23px;
  background:var(--steel);border-radius:2px;
  transition:left .55s cubic-bezier(.35,.1,.25,1);
  box-shadow:0 2px 0 rgba(0,0,0,.3)
}
.crane__trolley::before,.crane__trolley::after{
  content:"";position:absolute;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--steel-3);border:2px solid var(--steel)
}
.crane__trolley::before{left:4px}
.crane__trolley::after{right:4px}
.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));
  transition:height .55s cubic-bezier(.35,.1,.25,1)
}
.hook{
  position:absolute;left:50%;top:100%;width:24px;margin-left:-12px;
  transition:transform .55s cubic-bezier(.35,.1,.25,1)
}
.hook svg{display:block;width:24px;height:34px}
.hk-block{fill:var(--steel)}
.hk-shank{fill:var(--steel-3)}
.hk-hook{fill:var(--steel-2)}
.slings{position:absolute;left:0;top:0;width:100%;height:110vh;overflow:visible;opacity:0;transition:opacity .35s}
.slings.on{opacity:.9}
.slings line{stroke:var(--steel);stroke-width:2;stroke-dasharray:4 3}

.loads{position:relative;width:min(1080px,100%);margin:0 auto;padding-top:clamp(40px,13vh,150px);display:grid;gap:clamp(52px,9vw,120px);z-index:10}
.load{
  position:relative;width:min(560px,92%);
  background:var(--card);border:3px solid var(--ink);border-radius:3px;
  box-shadow:var(--shadow);padding:26px 26px 22px;
  opacity:0;transform:translateY(-34px);
  transition:box-shadow .25s ease
}
.load[data-side="left"]{margin-right:auto}
.load[data-side="right"]{margin-left:auto}
.load.landed{animation:land .55s cubic-bezier(.18,.9,.28,1.15) forwards}
@keyframes land{
  0%{opacity:0;transform:translateY(-34px) rotate(-.6deg)}
  70%{opacity:1;transform:translateY(4px) rotate(.25deg)}
  85%{transform:translateY(-2px) rotate(-.15deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
.load:hover{box-shadow:0 24px 46px -18px rgba(17,22,27,.6)}
.load__eyes i{
  position:absolute;top:-9px;width:16px;height:16px;border:3px solid var(--steel);
  border-radius:50%;background:var(--card)
}
.load__eyes i:first-child{left:26px}
.load__eyes i:last-child{right:26px}
.load__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.load__no{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;background:var(--ink);color:var(--yellow);
  padding:5px 8px;border-radius:2px
}
.load__weight{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.load__role{font-size:clamp(23px,3.4vw,34px);letter-spacing:.01em}
.load__meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin:6px 0 14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--muted)
}
.load__meta .co{color:var(--orange);font-weight:700;letter-spacing:.1em}
.load__bullets{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.load__bullets li{position:relative;padding-left:22px;font-size:14.6px;line-height:1.62}
.load__bullets li::before{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)
}
.load__tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.tool{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;padding:5px 8px;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)
}
.load__dust{position:absolute;left:0;right:0;bottom:-2px;height:0;pointer-events:none;z-index:-1}
.load__dust i{
  position:absolute;bottom:0;width:16px;height:16px;border-radius:50%;
  background:rgba(120,110,95,.45);opacity:0
}
.load.landed .load__dust i{animation:puff .8s ease-out forwards}
.load__dust i:nth-child(1){left:6%;animation-delay:.34s}
.load__dust i:nth-child(2){left:26%;animation-delay:.38s}
.load__dust i:nth-child(3){left:50%;animation-delay:.34s}
.load__dust i:nth-child(4){left:72%;animation-delay:.4s}
.load__dust i:nth-child(5){left:92%;animation-delay:.36s}
@keyframes puff{
  0%{opacity:.75;transform:translate(0,0) scale(.4)}
  100%{opacity:0;transform:translate(var(--dx,-22px),16px) scale(2.6)}
}
.load__dust i:nth-child(4),.load__dust i:nth-child(5){--dx:22px}

.truckline{position:relative;height:80px;margin-top:60px;overflow:hidden}
.truck{position:absolute;bottom:0;left:-240px;width:200px;animation:haul 15s linear infinite}
@keyframes haul{to{left:112%}}
.tk-bed,.tk-cab{fill:var(--steel)}
.tk-glass{fill:#9fd0ee}
.tk-chassis{fill:var(--ink)}
.tk-wheel circle{fill:var(--ink)}
.tk-wheel .hubcap{fill:var(--steel-3)}
.tk-load{fill:var(--concrete-dk)}
.tk-wheel{transform-box:fill-box;transform-origin:center;animation:roll 1.1s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}

/* ── 08 EQUIPMENT / SKILLS ───────────────────────────────────────────── */
.skills{background:var(--steel);color:#e9eff5}
.skills .h-sec{color:#fff}
.skills .sub{color:#a9b8c5}
.skills .exp__head,.panel{width:min(1080px,100%);margin-left:auto;margin-right:auto}
.panel{
  position:relative;margin-top:34px;background:var(--steel-2);border:3px solid rgba(0,0,0,.5);
  border-radius:6px;padding:clamp(20px,3.6vw,38px);
  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:10px;left:10px}
.panel__rivets i:nth-child(2){top:10px;right:10px}
.panel__rivets i:nth-child(3){bottom:10px;left:10px}
.panel__rivets i:nth-child(4){bottom:10px;right:10px}
.gauges{display:grid;gap:26px}
.gauge-group{border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.gauge-group:first-child{border-top:0;padding-top:0}
.gauge-group>h3{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--yellow);
  margin:0 0 16px;text-transform:none
}
.gauge-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.gauge{
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  padding:14px 12px 12px;text-align:center
}
.gauge__dial{
  position:relative;width:120px;height:62px;margin:0 auto 6px;overflow:hidden
}
.gauge__arc{
  width:120px;height:120px;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 39px,#000 40px);
  mask:radial-gradient(circle,transparent 0 39px,#000 40px);
  transition:background 1s ease
}
.gauge__needle{
  position:absolute;left:50%;bottom:0;width:2px;height:50px;margin-left:-1px;
  background:var(--yellow);transform-origin:50% 100%;
  transform:rotate(-90deg);transition:transform 1.1s cubic-bezier(.3,1.4,.4,1)
}
.gauge.on .gauge__needle{transform:rotate(calc(-90deg + var(--v) * 180deg))}
.gauge__pin{position:absolute;left:50%;bottom:-6px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--steel-3);border:2px solid var(--ink)}
.gauge__name{display:block;font-family:var(--f-head);font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.gauge__val{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--yellow)}
.panel__foot{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:10px;letter-spacing:.14em;color:#9fb0bf}
.lamp{width:11px;height:11px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px 2px rgba(61,220,132,.6);animation:blink 3s steps(1,end) infinite}

.dozer{position:relative;width:min(1080px,100%);margin:34px auto 0;height:96px}
.dozer svg{position:absolute;bottom:0;left:0;width:220px;animation:push 9s ease-in-out infinite}
.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)}
@keyframes push{0%,100%{transform:translateX(0)}50%{transform:translateX(clamp(60px,26vw,320px))}}
.dirtpile{
  position:absolute;bottom:0;left:170px;width:120px;height:34px;background:var(--concrete-dk);
  border-radius:60px 60px 0 0;opacity:.5;animation:pile 9s ease-in-out infinite
}
@keyframes pile{0%,100%{transform:translateX(0) scaleX(1)}50%{transform:translateX(clamp(60px,26vw,320px)) scaleX(1.5)}}

/* ── 09 CREDENTIALS ──────────────────────────────────────────────────── */
.creds{background:var(--concrete);padding-bottom:clamp(24px,4vw,50px)}
.creds .exp__head,.creds__wrap{width:min(1080px,100%);margin:0 auto}
.creds__wrap{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(24px,5vw,60px);align-items:center;margin-top:36px}
.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:20px}
.sticker{
  position:relative;background:var(--card);border:3px solid var(--ink);border-radius:4px;
  padding:20px 16px;text-align:center;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1)
}
.sticker:nth-child(odd){transform:rotate(-2.2deg)}
.sticker:nth-child(even){transform:rotate(1.8deg)}
.sticker:hover{transform:rotate(0) translateY(-6px) scale(1.03)}
.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:26px;letter-spacing:.04em;text-transform:uppercase;color:var(--orange)}
.sticker span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted)}

/* ── 10 RFI / CONTACT ────────────────────────────────────────────────── */
.contact{background:linear-gradient(180deg,var(--concrete),var(--concrete-dk));padding-bottom:0;padding-top:clamp(40px,6vw,80px)}
.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{background:var(--paper);border-radius:2px;padding:clamp(22px,4vw,40px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.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)
}
.punch li.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--orange)}

.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}

/* toast */
.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)}

/* NOT FOR CONSTRUCTION stamp */
.stamp{
  position:fixed;left:16px;bottom:16px;z-index:70;pointer-events:none;
  transform:rotate(-11deg);opacity:.72
}
.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)
}
.stamp[hidden]{display:none}

.noscript{padding:140px 24px;text-align:center;font-family:var(--f-body)}

/* ── 11 RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1180px){ .rail{display:none} }
@media (max-width:900px){
  .stickers{grid-template-columns:1fr}
  .hero{padding-bottom:150px}
  /* the drawing's title block drops into the flow instead of overlapping */
  .titleblock{position:static;width:100%;border-left:0}
  .sheet__body{padding-bottom:26px}
  .sheet__dims{gap:14px}
  .dim i{width:min(190px,60vw)}
  .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}
  .crane__mast{left:8%}
  .crane__jib{left:8%;right:4%}
  .crane__cathead,.crane__ties{left:8%}
  .crane__ties{right:4%}
  .load{width:100%}
  .creds__wrap{grid-template-columns:1fr}
  .bighat{max-width:240px;margin:0 auto}
  .rfi{grid-template-columns:1fr}
  .stamp{transform:rotate(-11deg) scale(.62);transform-origin:left bottom;opacity:.42}
}
@media (max-width:560px){
  .hud__badge-text strong{font-size:18px}
  .signboard__panel{border-width:4px}
  .cones i:nth-child(n+4){display:none}
  .load{padding:22px 18px 18px}
}

/* ── ACCESSIBILITY ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .load{opacity:1;transform:none}
  .crane{display:none}
  .signboard__panel{animation:none}
}