:root{
  --void:#17120F;
  --iron:#221A15;
  --plate:#2E241D;
  --line:#3D2F26;
  --dust:#EDE6DB;
  --muted:#9C9085;
  --amber:#FFB000;
  --ore:#C24A31;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--dust);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);flex:none}
h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(38px,6.6vw,78px);line-height:.98;
  letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance;
}
h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(27px,3.6vw,43px);line-height:1.06;
  letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance;
}
h3{
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.005em;margin:0 0 8px;
}
.lede{font-size:clamp(17px,1.9vw,21px);color:var(--muted);max-width:60ch;margin:0}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(23,18,15,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.mark{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.1em;text-decoration:none}
.mark span{color:var(--amber)}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s;
}
.nav a:hover{color:var(--dust)}
/* the page you are on */
.nav a[aria-current]{color:var(--dust);border-bottom:1px solid var(--amber);padding-bottom:3px}
@media(max-width:820px){.nav ul{display:none}}
/* links in running copy — the only place a link is tinted rather than inheriting */
.lede a,.panel p a{color:var(--amber)}

/* ---------- product picker ---------- */
.picker-wrap{padding:clamp(44px,6.5vw,72px) 0 clamp(28px,4vw,40px)}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)}
@media(max-width:720px){.picker{grid-template-columns:1fr}}
.pick{
  position:relative;display:block;border:1px solid var(--line);background:var(--iron);
  text-decoration:none;overflow:hidden;transition:transform .15s ease,border-color .15s ease;
}
.pick:hover,.pick:focus-visible{transform:translateY(-3px);border-color:var(--amber)}
.pick-art{width:100%;aspect-ratio:480/210;background:var(--void);border-bottom:1px solid var(--line)}
.pick-art svg{width:100%;height:100%;display:block}
.pick-art img{width:100%;height:100%;object-fit:contain;display:block}
/* line-drawing strokes */
.ln-dim{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round}
.ln-fill{fill:var(--plate);stroke:var(--muted);stroke-width:1.4;stroke-linejoin:round;transition:stroke .15s}
.ln-hi{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brk{fill:none;stroke:var(--amber);stroke-width:2}
.wtag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;fill:var(--void)}
.pick:hover .ln-fill,.pick:focus-visible .ln-fill{stroke:var(--dust)}
.pick-body{padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,24px) clamp(20px,2.6vw,26px)}
.pick-body h3{margin-bottom:8px}
.pick-body p{color:var(--muted);font-size:15px;margin:0}
.pick-go{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);font-weight:600;
}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,70px) 0 clamp(40px,6vw,70px)}
.hero .lede{margin-bottom:34px}
.hazard{
  height:6px;margin:0 0 clamp(40px,6vw,64px);
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,var(--void) 10px 20px);
  opacity:.85;
}

/* product wordmark as the page title — same construction as the nav mark,
   with the product half of the name carrying the amber */
.prod-logo{letter-spacing:.04em}
.prod-logo span{color:var(--amber)}

/* ---------- camera renders ----------
   The product renders carry a real alpha channel (the studio white is keyed out in the
   source files), so they need no blend or mask trickery to sit on the page — earlier
   revisions faked transparency with contrast + mix-blend-mode because the only asset
   available was a flattened JPEG. Keep new renders transparent and this stays simple. */
.cam-hero{
  display:block;margin:0 auto;width:620px;max-width:100%;
  animation:camIn .6s ease both;
}
@keyframes camIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* views of the camera — a plain grid of renders, each on a panel so the transparent
   PNG reads as a product shot rather than a cutout floating on the page */
.views{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin-top:8px}
@media(max-width:900px){.views{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.views{grid-template-columns:1fr}}
/* margin:0 is load-bearing — <figure> carries a 40px UA side margin that would
   otherwise hold each card well inside its grid track */
.view{margin:0;border:1px solid var(--line);background:var(--iron);display:flex;flex-direction:column}
/* the renders are framed differently from one another, so a fixed square box with
   `contain` keeps the four tiles the same height and the product the same scale */
.view img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:clamp(12px,1.8vw,20px);box-sizing:border-box}
.view figcaption{
  border-top:1px solid var(--line);padding:12px 15px;margin-top:auto;
  font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--muted);
}

/* ---------- video embed ----------
   aspect-ratio replaces the padding-top:56.25% hack from Vimeo's snippet; the iframe is
   still absolutely positioned so it fills the box regardless of its own attributes.
   Deliberately NOT wrapped in .detector chrome — that chrome belongs to the illustrated
   scenes, which are captioned as illustrations, and real footage must not borrow it. */
.vid-block{border:1px solid var(--line);background:var(--iron)}
.vid{position:relative;aspect-ratio:16/9}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- detector ---------- */
.detector{border:1px solid var(--line);background:var(--iron)}
.det-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.det-bar .state{margin-left:auto;color:var(--amber);font-weight:600}
.det-bar.alert{border-color:var(--ore)}
.det-bar.alert .dot{background:var(--ore)}
.det-bar.alert .state{color:var(--ore)}
.stage{
  position:relative;height:clamp(260px,36vw,380px);overflow:hidden;
  background:
    linear-gradient(180deg,#1B1511 0%,#241B15 62%,#1A1410 100%);
}
/* The apron feeder runs to a discharge lip at 58% of the stage and tips its load onto a
   belt below. Every fraction below is mirrored by DECK/BEDD/HEAD/BSURF in the script. */
/* feeder pans, 48px pitch — bright leading lip and a shadow gap at each joint so the
   pans read as overlapping plates. The pitch is mirrored in the scroll modulo in JS. */
.pans{
  position:absolute;left:0;right:42%;bottom:40%;height:12%;z-index:3;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 44px,rgba(96,77,60,.9) 44px 46px,rgba(14,11,9,.9) 46px 48px),
    linear-gradient(180deg,#2E241D,#191310);
  border-top:1px solid #4A3B2F;
}
/* head shaft the pans wrap around, closing off the discharge end. Its size and position
   are set from the script so the crown lands exactly on the pan line at any viewport —
   the values here are only a no-JS fallback. */
.af-head{
  position:absolute;left:53.7%;width:8.5%;aspect-ratio:1;bottom:31%;z-index:2;
  border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#42342A,#171210 74%);
  box-shadow:inset 0 0 0 1px rgba(122,102,64,.22);
}
/* support steel under the feeder frame */
.af-leg{
  position:absolute;bottom:20%;width:1.5%;height:21%;z-index:1;
  background:linear-gradient(90deg,#2A211A,#151110);
}
/* the belt that takes the discharge, running on its own drive below the feeder */
.belt{
  position:absolute;left:0;right:0;bottom:9%;height:11%;z-index:1;
  background:linear-gradient(180deg,#2A211A,#151110);
  border-top:2px solid #4A3B2F;
}
/* idlers — fixed structure, so they do not travel with the belt */
.belt::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:10px;
  background-image:radial-gradient(circle,#3A2C23 0 3px,transparent 3.4px);
  background-size:64px 10px;
}
/* Material only exists on the belt from where the curtain lands onward. The script also
   insets this box from either side: from the left as the load runs off after the feeder
   stops, and from the right as it fills again once material is landing. */
.belt-load{position:absolute;left:62%;right:0;top:0;bottom:0;overflow:hidden;z-index:3}
/* The load on the pan, thinning down the discharge ramp. The ramp is cut by the script
   so it holds a true 60 degrees on screen — x and y percentages resolve against
   different axes, so a fixed polygon would change angle as the stage reflows. The
   clip-path below is only a no-JS fallback. */
.bedwrap{
  position:absolute;left:0;right:42%;top:0;bottom:0;z-index:2;
  clip-path:polygon(0 0,85.3% 0,100% 41%,100% 100%,0 100%);
}
/* chute skirt over the pan — liner plates and bolt heads, seen side-on */
.skirt{
  position:absolute;left:0;right:42%;top:0;height:12%;z-index:1;
  background:linear-gradient(180deg,#0E0B09,#1F1813);
  border-bottom:1px solid #33271F;
}
.skirt::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 50% 76%,rgba(122,102,64,.38) 0 2px,transparent 2.6px),
    linear-gradient(90deg,rgba(58,44,35,.85) 0 2px,transparent 2px);
  background-size:38px 100%,84px 100%;
}
/* packed fines and small rock filling the body of the bed, so the pan reads as loaded
   rather than a few lumps on an empty floor. 240px tile, travels with the pans. */
.bed{
  position:absolute;left:0;right:0;bottom:52%;height:28%;z-index:1;
  /* material settles into the pan rather than floating on it */
  box-shadow:inset 0 -14px 18px -8px rgba(14,11,9,.85);
  background-color:#32281E;
  background-image:
    radial-gradient(ellipse 17px 11px at 5% 22%,#48392A,transparent 66%),
    radial-gradient(ellipse 12px 8px at 14% 64%,#2C2218,transparent 66%),
    radial-gradient(ellipse 20px 12px at 24% 38%,#4E3E2D,transparent 66%),
    radial-gradient(ellipse 11px 8px at 33% 84%,#2A2017,transparent 66%),
    radial-gradient(ellipse 15px 10px at 42% 16%,#403223,transparent 66%),
    radial-gradient(ellipse 18px 11px at 51% 56%,#473828,transparent 66%),
    radial-gradient(ellipse 10px 7px at 60% 30%,#2E2419,transparent 66%),
    radial-gradient(ellipse 16px 10px at 69% 78%,#3B2E21,transparent 66%),
    radial-gradient(ellipse 13px 9px at 78% 44%,#443526,transparent 66%),
    radial-gradient(ellipse 19px 12px at 87% 22%,#4A3B2B,transparent 66%),
    radial-gradient(ellipse 11px 8px at 94% 66%,#2B2118,transparent 66%),
    radial-gradient(ellipse 14px 9px at 99% 40%,#3E3123,transparent 66%);
  background-size:240px 100%;
}
/* soften the top edge of the fill — the surface lumps carry the bed profile */
.bed::after{
  content:"";position:absolute;left:0;right:0;top:0;height:18%;
  background:linear-gradient(180deg,rgba(34,26,20,.85),rgba(34,26,20,0));
}
/* the whole load rides in one strip: the pattern is drawn twice, one SPAN apart, so a
   single transform scrolls it and wraps invisibly. One composited layer instead of
   hundreds of per-frame style writes, which is what makes a packed bed affordable. */
.load,.beltstrip{
  position:absolute;left:0;top:0;width:0;height:100%;z-index:2;will-change:transform;
}
/* dust lifting off the stream and off the transfer */
.dust{
  position:absolute;left:0;right:0;bottom:56%;height:26%;z-index:4;pointer-events:none;
  background:
    radial-gradient(ellipse 24% 62% at 16% 62%,rgba(237,230,219,.055),transparent 72%),
    radial-gradient(ellipse 28% 70% at 48% 42%,rgba(237,230,219,.045),transparent 72%),
    radial-gradient(ellipse 22% 58% at 82% 66%,rgba(237,230,219,.05),transparent 72%);
  animation:drift 11s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.item{position:absolute;bottom:34%;z-index:2}
.rock{background:linear-gradient(150deg,#6A5A49,#3B2F26 62%,#2A2118)}
/* bent, rusted bar — kinked along its length, redder than the ore so it reads as steel */
.bolt{
  background:linear-gradient(100deg,#8A5A3E,#573823 42%,#96613F 60%,#4E3120);
  clip-path:polygon(0 46%,26% 30%,54% 38%,78% 10%,100% 20%,100% 50%,78% 40%,54% 68%,26% 60%,0 76%);
}
/* galvanised coupling collar part-way along, clipped to the bar */
.bolt::after{content:"";position:absolute;left:47%;width:8%;top:0;bottom:0;background:rgba(214,204,190,.5)}
/* length of poly pipe — weathered grey HDPE tube, cylindrical shading,
   open bore showing at one end */
.pipe{
  background:linear-gradient(180deg,#43474C,#878C91 32%,#565B60 62%,#2E3134);
  border-radius:999px;
}
.pipe::after{
  content:"";position:absolute;right:0;top:4%;bottom:4%;width:15%;
  border-radius:50%;background:#141210;box-shadow:inset 0 0 0 2px #757A7F;
}
/* broken length of timber — stout weathered log, ragged splintered ends,
   grain running along its length */
.timber{
  background:
    repeating-linear-gradient(0deg,rgba(23,18,15,.28) 0 1.5px,transparent 1.5px 6px),
    linear-gradient(178deg,#65594A,#463B2F 55%,#332B22);
  clip-path:polygon(3% 18%,20% 10%,45% 16%,70% 8%,96% 14%,100% 30%,94% 48%,100% 66%,
    95% 88%,68% 94%,40% 86%,18% 92%,4% 84%,0 62%,5% 42%,0 26%);
}
/* shed bucket tooth (GET) — chunky steel wedge tapering to a blunt worn tip,
   pitted rust, pin slot at the mount end */
.get{
  background:
    radial-gradient(circle at 30% 38%,rgba(46,26,14,.5),transparent 55%),
    radial-gradient(circle at 72% 62%,rgba(158,96,52,.45),transparent 50%),
    linear-gradient(170deg,#8A5A34,#6B4426 50%,#4C2F1B);
  clip-path:polygon(0 12%,30% 6%,58% 14%,86% 32%,100% 46%,100% 60%,86% 72%,58% 88%,30% 95%,0 90%);
}
.get::after{
  content:"";position:absolute;left:10%;top:38%;width:14%;height:24%;
  border-radius:40%;background:#241A12;
}
/* torn sheet of weld mesh dragged through with the ore — a tangle of wire strands */
.mesh{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" fill="none" stroke="%23959CA3" stroke-width="1.8" stroke-linecap="round"><path d="M5 60 Q30 10 55 45 T110 20"/><path d="M10 20 Q40 70 70 30 T115 60" stroke-opacity=".8"/><path d="M0 40 Q35 35 60 65 T120 45" stroke-width="1.4"/><path d="M20 75 Q45 25 80 55 T118 10" stroke-opacity=".7"/><path d="M8 8 Q50 50 90 15" stroke-width="1.4" stroke-opacity=".8"/><path d="M30 5 Q55 60 100 70" stroke-width="2.2"/><path d="M60 78 Q75 40 112 72" stroke-opacity=".65"/></svg>') center/100% 100% no-repeat}
/* The camera watches the last of the pan, out to the far edge of the head roller.
   Detection fires as the object enters the zone, so there is still pan left to stop
   on — the gap between the frozen object and the lip is the point. The right edge here
   is a no-JS fallback; size() re-aligns it to the roller it lays out. */
.zone{
  position:absolute;top:14%;bottom:44%;left:42%;right:38.5%;z-index:5;
  border:1px dashed rgba(255,176,0,.22);
  background:linear-gradient(180deg,rgba(255,176,0,.05),transparent);
}
/* gyro variant — bounded box over the tipping stream */
.zone.box{top:46%;bottom:8%;left:38%;right:30%}
.zone::after{
  content:"DETECTION ZONE";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,176,0,.5);white-space:nowrap;
}
.reticle{position:absolute;z-index:6;opacity:0;transition:opacity .12s}
.reticle.on{opacity:1}
.reticle i{position:absolute;width:13px;height:13px;border:2px solid var(--ore)}
.reticle i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}
.reticle b{
  position:absolute;top:-25px;left:-2px;background:var(--ore);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  padding:2px 7px;white-space:nowrap;
}
.halt{
  position:absolute;inset:0;z-index:7;display:grid;place-items:center;
  background:rgba(194,74,49,.13);opacity:0;transition:opacity .18s;pointer-events:none;
}
.halt.on{opacity:1}
.halt span{
  font-family:var(--display);font-weight:900;font-size:clamp(20px,3.4vw,34px);
  letter-spacing:.04em;color:#fff;border:2px solid var(--ore);padding:9px 20px;
  background:rgba(23,18,15,.72);
}
.det-foot{
  padding:11px 16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;
}

/* ---------- truck tip / primary gyratory scene ---------- */
.stage.tall{height:clamp(340px,46vw,520px)}
.gy-plat{
  position:absolute;left:0;top:66%;width:40%;bottom:0;z-index:4;
  background:linear-gradient(180deg,#251C16,#1A1410);
  border-top:2px solid #3A2C23;border-right:1px solid #3A2C23;
}
.gy-pocket{
  position:absolute;left:38%;right:0;top:66%;bottom:0;z-index:1;
  background:linear-gradient(180deg,#100D0B,#191310);border-top:2px solid #3A2C23;
}
.gy-w{position:absolute;top:0;bottom:0;width:46%;background:linear-gradient(180deg,#2B211A,#1B1511)}
/* the feed chute ends short of the mantle, leaving the crushing gap open —
   material runs off the end of the face and falls into it */
.gy-w.l{left:0;clip-path:polygon(0 0,18% 0,66% 58.5%,58% 100%,0 100%)}
.gy-w.r{right:0;clip-path:polygon(100% 0,82% 0,34% 58.5%,42% 100%,100% 100%)}
/* bed and mantle sit in front of the falling load, so material settles out of sight */
.gy-bed{
  position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;
  background:linear-gradient(180deg,#33281F,#1E1712);border-top:1px solid #4A3B2F;
}
.gy-mantle{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:42%;height:60%;z-index:3;
}
/* mantle profile: head nut on top of the main shaft, then the cone flaring out —
   steep at the head, flattening toward the crushing chamber */
.gy-cone{
  position:absolute;inset:0;
  background:linear-gradient(105deg,#55432F,#241C17 72%);
  clip-path:polygon(
    44% 0,56% 0,57% 9%,62% 12%,
    69% 36%,85% 70%,94% 91%,94% 100%,
    6% 100%,6% 91%,15% 70%,31% 36%,38% 12%,43% 9%);
  transform-origin:50% 6%;
  animation:gyrate 1.15s ease-in-out infinite;
}
/* the eccentric throw, side-on: the shaft hangs from the spider bearing at the head,
   so the head stays put and the bottom of the cone sweeps as the eccentric turns.
   Pausing (not removing) the animation halts it mid-stroke, like the drive dropping out. */
@keyframes gyrate{
  0%,100%{transform:rotate(-3.6deg)}
  50%{transform:rotate(3.6deg)}
}
.stage.stopped .gy-cone{animation-play-state:paused}
.gy-label{
  position:absolute;right:14px;bottom:11px;z-index:5;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(156,144,133,.6);
}
/* haul truck, side elevation, cab forward (left), tray hinging to the rear (right).
   Sized off stage width with a fixed aspect so the silhouette holds at any viewport. */
.gy-truck{position:absolute;left:11%;bottom:34%;width:31%;aspect-ratio:2.05;z-index:4}
/* tyres ~47% of truck height, rear pair reads as duals */
.gy-wheel{
  position:absolute;bottom:0;width:23%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#3E3126,#1E1712 74%);
  box-shadow:inset 0 0 0 1px rgba(122,102,64,.3);
}
.gy-wheel::after{
  content:"";position:absolute;inset:29%;border-radius:50%;
  background:linear-gradient(160deg,#6B5A38,#41351F);
}
.gy-wheel.rear{filter:brightness(.66)}
.gy-chassis{position:absolute;left:20%;right:1%;bottom:22%;height:7%;background:#2A211B}
/* front frame under the cab — grounds it instead of leaving the cab floating */
.gy-frame{
  position:absolute;left:4%;bottom:18%;width:17%;height:30%;
  background:linear-gradient(170deg,#3A2E22,#241C17);
}
.gy-ladder{
  position:absolute;left:0;bottom:12%;width:3.5%;height:36%;
  background:repeating-linear-gradient(180deg,#4A3B2F 0 2px,transparent 2px 8px);
  border-left:1px solid #4A3B2F;border-right:1px solid #4A3B2F;
}
.gy-deck{position:absolute;left:2%;bottom:46%;width:14%;height:3.5%;background:#3A2C23}
.gy-rail{
  position:absolute;left:1%;bottom:49.5%;width:11%;height:9%;
  border-top:2px solid #4A3B2F;
  background:repeating-linear-gradient(90deg,transparent 0 24%,#4A3B2F 24% 27%);
}
.gy-cab{
  position:absolute;left:10%;bottom:48%;width:12%;height:33%;
  background:linear-gradient(165deg,#4A3D26,#2A211B);
  clip-path:polygon(0 22%,68% 0,100% 0,100% 100%,0 100%);
}
.gy-cab::after{
  content:"";position:absolute;left:13%;top:26%;width:62%;height:34%;
  background:rgba(156,144,133,.26);
}
/* tray, Austin-style profile: thin visor projecting forward over the cab, top rail
   falling steadily to the rear (tailgate ~40% of the front depth), chamfered rear
   bottom corner, floor deepening toward the front */
.gy-body{
  position:absolute;left:6%;right:0;top:0;height:82%;
  background:linear-gradient(172deg,#6B5A38,#3B301F);
  clip-path:polygon(0 8%,24% 2%,100% 24%,100% 55%,96% 59%,56% 63%,48% 90%,30% 90%,24% 62%,22% 34%,0 17%);
  transform-origin:100% 55%;transition:transform 1.1s cubic-bezier(.4,0,.5,1);
}
/* longitudinal creases, running parallel to the top rail rather than vertical ribs */
.gy-body::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,transparent 0 34%,rgba(0,0,0,.16) 34% 35%,
    transparent 35% 63%,rgba(255,255,255,.045) 63% 64%,transparent 64%);
}
/* positive angle pivots the tray up about the tailgate hinge */
.gy-truck.tip .gy-body{transform:rotate(36deg)}
/* zero-size marker at the tray hinge — the JS spawns the load from here */
.gy-spill{position:absolute;right:0;top:45%;width:0;height:0}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--line)}
.head{max-width:70ch;margin-bottom:clamp(32px,4.5vw,52px)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);background:var(--iron);padding:clamp(22px,3vw,32px)}
.panel .tag,.loc-copy .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:14px;
}
/* panel body content — one rule instead of the same inline style on every instance */
.panel p{color:var(--muted);font-size:15.5px}
.panel ul{margin:14px 0 0;padding-left:19px;color:var(--muted);font-size:15.5px}
.panel li{margin-bottom:7px}
.panel li:last-child{margin-bottom:0}
.panel img{width:100%;display:block;margin-top:14px;border:1px solid var(--line)}

/* recurring block spacing */
.mt{margin-top:clamp(24px,3vw,36px)}
.mt-lg{margin-top:clamp(30px,4vw,46px)}
.mb-lg{margin-bottom:clamp(32px,4.5vw,52px)}

.loc{margin-top:clamp(26px,3.4vw,40px)}
.loc-copy{max-width:70ch;margin-bottom:16px}
.loc-copy .tag{margin-bottom:9px}
.loc-copy p{color:var(--muted);font-size:15.5px;margin:7px 0 0}

.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.05em;
  padding:9px 15px;background:var(--plate);color:var(--dust);
}
/* the icon is the animation's own object class (.bolt/.mesh/...) at chip scale — one
   drawing shared by both, so the chips always match what the detector shows */
.chip i{display:block;position:relative;flex:none}
.chip .timber{width:30px;height:15px}
.chip .mesh{width:30px;height:20px}
.chip .bolt{width:36px;height:11px}
.chip .pipe{width:34px;height:9px}
.chip .get{width:22px;height:13px}
.chip::before,.chip::after{
  content:"";position:absolute;width:7px;height:7px;border:1.5px solid var(--amber);
}
.chip::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.chip::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);margin-top:8px}
@media(max-width:720px){.specs{grid-template-columns:1fr}}
.spec{border-top:2px solid var(--amber);padding-top:16px}
.spec h3{margin-bottom:6px}
.spec p{font-size:15px;color:var(--muted)}

.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,2.6vw,30px);margin-top:8px}
.cred{border:1px solid var(--line);padding:22px}
.cred .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:9px}
.cred p{font-size:15px;color:var(--muted)}

.cta{display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:var(--amber);color:var(--void);padding:15px 26px;text-decoration:none;transition:transform .12s}
.cta:hover{transform:translateY(-2px)}

/* ---------- info pack request dialog ---------- */
.pack-dialog{
  background:var(--iron);color:var(--dust);border:1px solid var(--line);
  padding:clamp(22px,3vw,32px);width:min(420px,calc(100vw - 40px));
}
.pack-dialog::backdrop{background:rgba(23,18,15,.72);backdrop-filter:blur(3px)}
.pack-dialog h3{margin-bottom:18px}
.pack-dialog label{
  display:block;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.pack-dialog input{
  display:block;width:100%;margin-top:6px;padding:11px 12px;
  font-family:var(--body);font-size:15.5px;color:var(--dust);
  background:var(--void);border:1px solid var(--line);
}
.pack-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.pack-actions .cta{margin-top:0;border:0;cursor:pointer}
.pack-cancel{
  background:none;border:0;cursor:pointer;padding:10px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.pack-cancel:hover{color:var(--dust)}

footer{border-top:1px solid var(--line);padding:44px 0;font-size:14px;color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
footer .mono{font-family:var(--mono);font-size:12px;letter-spacing:.05em}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}