/* ===== NCRepairBench — 3D workbench scene =====
   Scene design space: 1160 x 760 px, scaled by JS to fit.
   True 3D: perspective on .scale, preserve-3d all the way down.
   JS drives: .scene transform, .drawer transform, folder transforms.
   IMPORTANT: no overflow/opacity/filter on 3D containers (flattens 3D). */

.bench-track{height:430vh;position:relative}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:linear-gradient(#dfe6ee 0%,#e8edf3 55%,#cfd8e2 100%);
}

/* scaled 3D viewport */
.scale{
  position:absolute;left:50%;bottom:calc(2vh + var(--bench-raise,0px));
  width:1160px;height:760px;
  margin-left:-580px;
  transform-origin:50% 100%;
  perspective:1500px;
  perspective-origin:50% 34%;
}
.scene{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform-origin:50% 64%;
}
.scene,.scene *{position:absolute}
.scene *{transform-style:preserve-3d}
/* folder interiors are normal 2D documents — undo the scene-wide 3D rules */
.folder-body,.folder-body *{position:static;transform-style:flat}

/* ---------- room ---------- */
.room{left:0;right:0;top:0;bottom:0} /* wall/floor/pegboard anchor to the full scene */
/* Wall + floor are authored much larger than the 1160x760 scene so that when
   the scene is fitted (zoomed) down to a small fraction of a large window, the
   room still reaches every edge of the stage instead of leaving the backdrop
   showing. Keep the wall's bottom at y=642 so its baseboard meets the floor. */
.room-wall{
  left:-1300px;right:-1300px;top:-1000px;height:1642px;
  transform:translateZ(-320px);
  background:
    linear-gradient(180deg,#eef2f6 0%,#e4eaf1 62%,#d7dfe8 99%,#b9c3cf 100%);
}
.room-wall::after{ /* baseboard */
  content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(#f5f8fa,#dfe5ec);
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
}
.room-floor{
  left:-1300px;right:-1300px;top:642px;height:1500px;
  transform-origin:top center;
  transform:translateZ(-320px) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg,rgba(30,50,70,.075) 0 3px,transparent 3px 118px),
    repeating-linear-gradient(180deg,rgba(30,50,70,.045) 0 2px,transparent 2px 190px),
    linear-gradient(180deg,#c3cdd8 0%,#d4dce5 45%,#e7ecf1 100%);
}
.window-light{
  left:-400px;top:-900px;width:2000px;height:1700px;
  transform:translateZ(-318px);
  background:linear-gradient(115deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 46%);
  pointer-events:none;
}
/* wall sign sits high on the upper-right wall so its center lines up with the
   hero's "Click a cabinet..." sub-line (measured at 1920x1080: sign center 231px
   = hero-sub center 231px with top:-47px). The hero text is centered and much
   narrower than the viewport at desktop widths, so the right-anchored sign
   clears it horizontally. The negative top is fine: the wall plane is authored
   far past the scene top, so the sign still sits on wall. Right/width keep its
   left edge right of the pegboard (x~900) and off the x=1160 frame edge. */
.wall-sign{
  right:42px;top:-47px;width:198px;left:auto;margin-left:0;
  transform:translateZ(-316px);
  padding:9px 0;text-align:center;
  font:700 15px/1 "Segoe UI",sans-serif;letter-spacing:.26em;color:#8494a6;
  border:2px solid #c3cdd8;border-radius:6px;background:rgba(255,255,255,.62);
  box-shadow:0 4px 10px rgba(30,45,60,.08);
}

/* ---------- clickable storefront shelf on the wall (-> store.html) ----------
   Sits on the wall (translateZ ~ -314) in the free space above the left shelf.
   Hover/focus floats it toward the viewer; a click runs the same "dive" page
   transition as the cabinets (bench.js wires .shop-shelf into that handler). */
.shop-shelf{
  display:block;text-decoration:none;
  left:44px;top:60px;width:196px;height:78px;
  transform:translateZ(-314px);
  transition:transform .35s cubic-bezier(.2,.75,.3,1);
}
.shop-shelf:hover,.shop-shelf:focus-visible{transform:translateZ(-290px)}
.shop-shelf:focus-visible{outline:3px solid var(--accent-hi);outline-offset:4px;border-radius:10px}
.shop-sign{
  left:4px;right:4px;top:0;height:54px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,#12b7d6,#0e7490);
  box-shadow:0 10px 18px rgba(14,116,144,.4),inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -3px 8px rgba(0,40,55,.28);
}
.shop-txt{
  position:relative;color:#fff;font:800 17px/1 "Segoe UI",sans-serif;letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(0,30,45,.35);
}
.shop-sign .arw{display:inline-block;transition:transform .3s}
.shop-shelf:hover .shop-sign .arw{transform:translateX(5px)}
.shop-bag{ /* little shopping-bag glyph */
  position:relative;width:20px;height:22px;border-radius:3px 3px 5px 5px;
  background:rgba(255,255,255,.92);box-shadow:0 2px 4px rgba(0,30,45,.3);
}
.shop-bag::before{ /* handle */
  content:"";position:absolute;left:4px;right:4px;top:-5px;height:9px;border:2px solid rgba(255,255,255,.92);
  border-bottom:none;border-radius:7px 7px 0 0;background:transparent;
}
.shop-bag::after{ /* front seam */
  content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:rgba(14,116,144,.5);
}
.shop-cap{
  left:0;right:0;top:56px;text-align:center;
  font:700 10px/1 "Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:#5a6b7c;
}
.shop-shelf .wsh-board{left:0;right:0;top:66px;bottom:auto}

/* ---------- bench shell ---------- */
.bench{
  left:50%;top:342px;width:940px;height:300px;margin-left:-470px;
}

/* desktop slab: top surface + front edge, nudged forward for overhang */
.desktop{left:0;right:0;top:0;height:26px;transform:translateZ(16px)}
.desk-top{
  left:-22px;right:-22px;top:-282px;height:282px;
  transform-origin:bottom center;
  transform:rotateX(90deg);
  background:
    /* item shadows + lamp light, painted straight onto the wood */
    radial-gradient(ellipse 92px 26px at 490px 76px,rgba(25,40,58,.26),transparent 70%),
    radial-gradient(ellipse 54px 16px at 223px 148px,rgba(25,40,58,.22),transparent 70%),
    radial-gradient(ellipse 76px 20px at 830px 130px,rgba(25,40,58,.2),transparent 70%),
    radial-gradient(ellipse 76px 62px at 886px 118px,rgba(255,238,170,.4),transparent 72%),
    repeating-linear-gradient(90deg,rgba(122,89,43,.10) 0 3px,transparent 3px 66px),
    linear-gradient(180deg,#e2cfae 0%,#eddcbd 30%,#e6d3b1 100%);
  border-radius:4px 4px 0 0;
  box-shadow:inset 0 0 60px rgba(120,90,40,.12);
}
/* everything drawn on the desk surface is a flat 2D painting */
.desk-top *{transform-style:flat}
.desk-edge{
  left:-22px;right:-22px;top:0;height:26px;
  background:linear-gradient(180deg,#f0e0c2 0%,#dcc59c 55%,#c2a678 100%);
  border-radius:0 0 3px 3px;
  box-shadow:0 2px 3px rgba(30,40,55,.25);
}

/* under-desk framing */
.under{left:0;right:0;top:26px;height:254px}
.kick{
  left:14px;right:14px;top:280px;height:20px;
  background:linear-gradient(#5d6a78,#414c59);
  border-radius:0 0 4px 4px;
}
.bench-shadow{
  left:-70px;right:-70px;top:298px;height:320px; /* 2px above the floor plane to avoid z-fighting */
  transform-origin:top center;
  transform:translateZ(-270px) rotateX(90deg);
  background:radial-gradient(ellipse 60% 62% at 50% 34%,rgba(25,40,58,.38),rgba(25,40,58,0) 70%);
  pointer-events:none;
}

/* ---------- pedestals & clickable cabinets ---------- */
/* the pedestal face is a FRAME: the door openings are transparent windows,
   otherwise the solid face would hide the interiors behind opened doors */
.pedestal{
  top:0;width:240px;height:254px;
  background:
    linear-gradient(90deg,#eef1f4 0 8px,transparent 8px calc(100% - 8px),#eef1f4 calc(100% - 8px)),
    linear-gradient(180deg,#eef1f4 0 4px,transparent 4px 123px,#eef1f4 123px 131px,transparent 131px 250px,#eef1f4 250px);
}
.ped-left{left:10px}
.ped-right{right:10px}
/* outer side panels for depth */
.ped-left::before,.ped-right::before{
  content:"";position:absolute;top:0;width:262px;height:254px;
  background:linear-gradient(90deg,#c6ced6,#dbe1e7);
}
.ped-left::before{left:0;transform-origin:left center;transform:rotateY(90deg)}
.ped-right::before{right:0;transform-origin:right center;transform:rotateY(-90deg)}

.cab{display:block;left:8px;right:8px;height:119px;text-decoration:none}
.cab:nth-child(1){top:4px}
.cab:nth-child(2){top:131px}
/* furnished interior seen when the door swings */
.cab-inside{
  left:-6px;right:-6px;top:-4px;bottom:-4px; /* oversized so oblique views can't see past its edges */
  transform:translateZ(-36px);
  background:linear-gradient(#2e3b48,#141c26);
  box-shadow:inset 0 0 34px rgba(0,0,0,.55),inset 0 6px 10px rgba(255,255,255,.05);
}
.cab-inside .shelf{
  left:6px;right:6px;top:56%;height:7px;border-radius:2px;
  background:linear-gradient(#67767f,#39434d);
}
.cab-inside .bin1{
  left:16px;width:34%;height:24px;top:calc(56% - 24px);border-radius:3px 3px 2px 2px;
  background:linear-gradient(#12a3bf,#0b7e96);
}
.cab-inside .bin2{
  right:16px;width:25%;height:19px;top:calc(56% - 19px);border-radius:3px 3px 2px 2px;
  background:linear-gradient(#8a99a8,#5f6e7c);
}
.cab-inside .pcb{
  left:20%;width:44%;height:16px;bottom:9px;border-radius:2px;
  background:linear-gradient(90deg,#1d7a4c,#27995f 60%,#1d7a4c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.cab-door{
  left:0;right:0;top:0;bottom:0;
  transform:translateZ(.8px); /* tiny offset so the closing door never z-fights the frame */
  background:linear-gradient(160deg,#fdfefe 0%,#f2f5f8 60%,#e3e8ee 100%);
  border:1px solid #d4dae1;border-radius:7px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(30,40,55,.14);
  /* closing: settle without overshoot — overshoot swings the door past the frame = flash */
  transition:transform .4s cubic-bezier(.33,0,.18,1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
}
.ped-left .cab-door{transform-origin:left center}
.ped-right .cab-door{transform-origin:right center}
.cab:hover .cab-door,.cab:focus-visible .cab-door{
  transition:transform .5s cubic-bezier(.2,.75,.3,1);
}
.ped-left .cab:hover .cab-door,.ped-left .cab:focus-visible .cab-door{transform:translateZ(.8px) rotateY(-38deg)}
.ped-right .cab:hover .cab-door,.ped-right .cab:focus-visible .cab-door{transform:translateZ(.8px) rotateY(38deg)}
.cab:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}

.cab-handle{
  position:absolute;top:50%;width:7px;height:44px;margin-top:-22px;border-radius:4px;
  background:linear-gradient(90deg,#aeb9c3,#e8edf1 45%,#98a5b1);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.ped-left .cab-handle{right:10px}
.ped-right .cab-handle{left:10px}
.cab-icon{position:relative;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#0fb5d4,#0e7490);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(14,116,144,.35);
  transition:transform .3s;
}
.cab-icon svg{width:22px;height:22px;fill:#fff;position:static}
.cab:hover .cab-icon{transform:scale(1.12)}
.cab-text{
  position:relative;font:700 15px/1 "Segoe UI",sans-serif;color:#3c4c5e;
  letter-spacing:.02em;
}
.cab:hover .cab-text{color:var(--accent)}

/* ---------- center bay + THE DRAWER ---------- */
.bay{left:250px;width:440px;top:0;height:254px}
.cavity{ /* dark hole the drawers slide out of */
  left:4px;right:4px;top:4px;bottom:4px;
  transform:translateZ(-300px);
  background:linear-gradient(#141d26,#060a0e);
}
.cavity::before{ /* cavity side shading, cheap depth */
  content:"";position:absolute;inset:-2px;
  transform:translateZ(6px);
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5));
}
.bay::before{ /* frame around both drawer openings, at bench front plane */
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  border:4px solid #e7ebef;border-radius:2px;
  box-shadow:inset 0 0 0 1px #cfd6dd;
}
.bay .rail{ /* crossbar between the two drawers */
  left:2px;right:2px;top:170px;height:8px;
  transform:translateZ(.4px);
  background:linear-gradient(#f2f5f8,#dde3e9);
  box-shadow:inset 0 -1px 0 #cfd6dd;
}

/* misc drawer under the main one. It is a real (shallow) drawer box now: the
   .misc-pull unit carries plywood walls + a cluttered floor behind the face,
   using the exact wall/floor recipe of the big .drawer above (same wood
   gradients, same -.6px z-offset trick so nothing shares a plane with the
   face). Hovering slides the WHOLE unit out, so the tilted camera and the
   pointer parallax can look into it — the misc drawer finally has an interior
   like the four cabinets. */
.misc{display:block;left:10px;right:10px;top:182px;height:60px;text-decoration:none}
.misc-pull{
  left:0;right:0;top:0;bottom:0;
  transition:transform .45s cubic-bezier(.2,.75,.3,1);
}
.misc:hover .misc-pull,.misc:focus-visible .misc-pull{transform:translateZ(84px)}
/* box walls — same warm plywood as the big drawer, at misc scale */
.misc-wall{
  top:7px;height:44px;
  background:linear-gradient(180deg,#c9a76e,#a8834c);
  box-shadow:inset 0 -10px 16px rgba(70,45,12,.38),inset 0 2px 4px rgba(255,240,210,.35);
}
.mw-left,.mw-right{width:150px}
.mw-left{left:2px;transform-origin:left center;transform:translateZ(-.6px) rotateY(90deg)}
.mw-right{right:2px;transform-origin:right center;transform:translateZ(-.6px) rotateY(-90deg)}
.mw-back{
  left:2px;right:2px;
  transform:translateZ(-150px);
  background:linear-gradient(180deg,#bd9a61,#96733e);
  box-shadow:inset 0 -8px 14px rgba(70,45,12,.4);
}
.misc-floor{
  left:2px;right:2px;bottom:7px;height:150px;
  transform-origin:bottom center;
  transform:translateZ(-.6px) rotateX(90deg);
  background:
    /* the "everything else" clutter, painted straight onto the wood: a coiled
       cable, a roll of tape, and a scatter of small screws */
    radial-gradient(circle 15px at 26% 44%,transparent 8px,rgba(40,44,50,.55) 9px 12px,transparent 13px),
    radial-gradient(circle 10px at 31% 58%,transparent 4px,rgba(40,44,50,.45) 5px 8px,transparent 9px),
    radial-gradient(circle 11px at 72% 38%,transparent 5px,rgba(190,195,205,.75) 6px 10px,transparent 11px),
    radial-gradient(circle 2px at 55% 66%,rgba(60,66,74,.7) 0 2px,transparent 3px),
    radial-gradient(circle 2px at 60% 52%,rgba(60,66,74,.7) 0 2px,transparent 3px),
    radial-gradient(circle 2px at 49% 40%,rgba(60,66,74,.7) 0 2px,transparent 3px),
    repeating-linear-gradient(90deg,rgba(90,60,20,.12) 0 2px,transparent 2px 52px),
    radial-gradient(ellipse at 50% 36%,rgba(70,45,12,.30),transparent 75%),
    linear-gradient(#c8a267,#b58e54);
  box-shadow:inset 0 0 26px rgba(70,45,12,.35);
}
/* one upright spare part leaning on the back wall for depth */
.misc-part{
  left:56%;width:64px;height:26px;top:27px;
  transform:translateZ(-96px);
  border-radius:3px;
  background:linear-gradient(90deg,#1d7a4c,#27995f 60%,#1d7a4c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.misc-face{
  left:-7px;right:-7px;top:-5px;bottom:-6px;
  background:linear-gradient(160deg,#fdfefe 0%,#f1f4f7 55%,#e1e7ed 100%);
  border:1px solid #d4dae1;border-radius:7px;
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(30,40,55,.2);
}
.misc:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}
.misc-handle{
  left:50%;top:9px;width:150px;height:10px;margin-left:-75px;border-radius:6px;
  background:linear-gradient(#dfe6ec,#9fadba 55%,#c7d1da);
  box-shadow:0 2px 4px rgba(0,0,0,.25),inset 0 1px 0 #fff;
}
.misc-text{
  left:0;right:0;bottom:8px;text-align:center;
  font:700 12px/1 "Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#5a6b7c;transition:color .2s;
}
.misc:hover .misc-text{color:var(--accent)}

.drawer{left:10px;width:420px;top:10px;height:150px}
/* box walls — warm plywood interior, dark enough to read against the pale room */
.dw-left,.dw-right{
  width:280px;height:132px;top:12px;
  background:linear-gradient(180deg,#c9a76e,#a8834c);
  box-shadow:inset 0 -18px 30px rgba(70,45,12,.38),inset 0 4px 6px rgba(255,240,210,.35);
}
/* walls sit .6px behind the front plane so no element shares/crosses z=0
   with the face — shared planes make the renderer's depth-sort flicker */
.dw-left{left:0;transform-origin:left center;transform:translateZ(-.6px) rotateY(90deg)}
.dw-right{right:0;transform-origin:right center;transform:translateZ(-.6px) rotateY(-90deg)}
.dw-back{
  left:0;right:0;top:12px;height:132px;
  transform:translateZ(-280px);
  background:linear-gradient(180deg,#bd9a61,#96733e);
  box-shadow:inset 0 -16px 26px rgba(70,45,12,.4);
}
.dw-floor{
  left:0;right:0;bottom:6px;height:280px;
  transform-origin:bottom center;
  transform:translateZ(-.6px) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg,rgba(90,60,20,.12) 0 2px,transparent 2px 52px),
    radial-gradient(ellipse at 50% 36%,rgba(70,45,12,.30),transparent 75%),
    linear-gradient(#c8a267,#b58e54);
  box-shadow:inset 0 0 40px rgba(70,45,12,.35);
}
.dw-front{ /* the drawer face: oversized like a real drawer front so it
  covers the opening's frame — no gaps peeking at top/bottom */
  left:-9px;right:-9px;top:-7px;bottom:-9px;
  background:linear-gradient(160deg,#fdfefe 0%,#f1f4f7 55%,#e1e7ed 100%);
  border:1px solid #d4dae1;border-radius:7px;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(30,40,55,.14),
             0 2px 5px rgba(30,40,55,.2);
}
.dw-face{ /* flat 2D child: only carries the handle + plate */
  left:0;right:0;top:0;bottom:0;
  transform:none;transform-style:flat;
}
.dw-face *{transform-style:flat}
.dw-handle{
  position:absolute;left:50%;top:50%;width:190px;height:13px;margin:-30px 0 0 -95px;
  border-radius:8px;
  background:linear-gradient(#dfe6ec,#9fadba 55%,#c7d1da);
  box-shadow:0 3px 5px rgba(0,0,0,.28),inset 0 1px 0 #fff;
}
.dw-handle::before,.dw-handle::after{
  content:"";position:absolute;top:9px;width:12px;height:12px;
  background:linear-gradient(#b7c2cc,#8b98a5);
}
.dw-handle::before{left:16px}
.dw-handle::after{right:16px}
.dw-plate{
  position:absolute;left:50%;top:50%;transform:translateX(-50%);
  margin-top:8px;
  font:600 13px/1 "Segoe UI",sans-serif;letter-spacing:.14em;color:#7d8b99;
  border:1px solid #d7dde3;border-radius:5px;padding:6px 14px;
  background:#f6f8fa;white-space:nowrap;
}

/* ---------- folders inside the drawer ----------
   AUTHORED AT 2x (supersample): every dimension below is double its on-screen
   size, and bench.js multiplies the folder scale by 0.5. The layer's backing
   texture is therefore twice the pixels it is ever shown at, so when perspective
   and the scene scale magnify a card toward the camera it stays crisp instead
   of turning into an upscaled, blurry bitmap. Edit sizes here in 2x units. */
.folders{left:50%;top:0;width:0;height:0}
.folder{
  /* top is chosen so the bottom-centre transform-origin lands at the SAME point
     as the original 360x250 card (left+width/2 = 0, top+height = 132). Doubling
     the box for supersampling must keep that pivot fixed, or the cards sit too
     low and clip through the drawer. */
  left:-360px;top:-368px;width:720px;height:500px;
  transform-origin:50% 100%;
  opacity:0;
  /* JS sets transform + opacity every frame */
}
.folder .tab{
  position:absolute;top:-60px;height:64px;padding:0 44px;
  cursor:pointer;
  display:flex;align-items:center;
  font:700 28px/1 "Segoe UI",sans-serif;color:#fff;letter-spacing:.04em;
  background:linear-gradient(135deg,#0fb5d4,#0e7490);
  border-radius:18px 18px 0 0;
  box-shadow:0 -4px 12px rgba(14,116,144,.25);
}
.folder.f1 .tab{left:32px}
.folder.f2 .tab{left:50%;transform:translateX(-50%)}
.folder.f3 .tab{right:32px}
.folder-body{
  position:absolute;inset:0;
  background:#fff;
  border:2px solid #dfe4ea;border-radius:0 24px 24px 24px;
  box-shadow:0 36px 80px rgba(20,40,60,.22);
  padding:40px 44px;
  overflow:hidden;transform-style:flat;
}
.folder.f2 .folder-body{border-radius:24px}
.folder-body h2{font-size:2.12rem;color:#16394a;margin-bottom:18px}
.folder-body p{font-size:1.72rem;line-height:1.5;color:#4c5c6d}
.folder-body ul{margin:20px 0 0 36px}
.folder-body li{font-size:1.7rem;line-height:1.65;color:#3d4e60}
.folder-body table{width:100%;border-collapse:collapse;margin-top:4px}
.folder-body td{
  font-size:1.7rem;padding:13px 4px;border-bottom:2px dashed #e2e8ee;color:#3d4e60;
}
.folder-body td:last-child{text-align:right;font-weight:800;color:var(--accent)}
.folder-body .fine{font-size:1.48rem;color:#8b98a6;margin-top:18px}
.contact-line{margin-bottom:18px;font-size:1.8rem !important}
.contact-line strong{color:#16394a}
.folder-body .folder-cta{
  display:inline-block;margin-top:22px;
  font:800 1.6rem/1 "Segoe UI",sans-serif;text-decoration:none;
  color:#fff;background:linear-gradient(135deg,#0fb5d4,#0e7490);
  padding:16px 26px;border-radius:14px;
  box-shadow:0 10px 22px rgba(14,116,144,.32);
}

/* ---------- hero + hint ---------- */
.hero{
  position:absolute;left:0;right:0;top:9.5vh;z-index:6;
  text-align:center;pointer-events:none;padding:0 20px;
}
/* soft light halo keeps the hero legible even where it overlaps the dark
   monitor on shorter / narrower windows (invisible over the pale wall above) */
.hero h1{
  font-size:clamp(2.1rem,5.2vw,3.6rem);color:#1c2b3a;letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(242,247,251,.92),0 0 26px rgba(242,247,251,.75);
}
.hero h1 span{color:var(--accent)}
.hero p{
  color:#4a5c70;font-weight:600;margin-top:6px;font-size:clamp(.9rem,1.8vw,1.1rem);
  text-shadow:0 1px 9px rgba(242,247,251,.96),0 0 18px rgba(242,247,251,.85);
}
.hero .hero-sub{
  font-weight:600;font-size:.9rem;color:#566779;margin-top:12px;
  text-shadow:0 1px 9px rgba(242,247,251,.98),0 0 16px rgba(242,247,251,.9);
}
/* device-appropriate wording: desktop says click a cabinet, the small path
   swaps in a tap-the-buttons line (gated in the <=1024px block below) */
.hero-sub .sub-mobile{display:none}
.scroll-hint{
  position:absolute;left:0;right:0;bottom:3.2vh;z-index:6;
  text-align:center;color:#5d7085;font:600 .82rem/1 "Segoe UI",sans-serif;
  letter-spacing:.08em;text-transform:uppercase;pointer-events:none;
}
.chev{
  width:14px;height:14px;margin:10px auto 0;
  border-right:3px solid #5d7085;border-bottom:3px solid #5d7085;
  transform:rotate(45deg);
  animation:chev 1.6s ease-in-out infinite;
}
@keyframes chev{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(7px) rotate(45deg);opacity:1}}

/* fade veil for the "dive into the cabinet" page transition (opacity set by JS) */
.nav-veil{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 60%,#f4f8fc 0%,#dde5ee 68%,#c6d1dd 100%);
}

/* =========================================================================
   MOBILE / TABLET (<=1024px) — same 3D bench, tuned for small screens.
   The scene is the SAME scroll-driven 3D experience as desktop (hover/tap
   opens things, the drawer slides out, the cards float up). Because fit()
   renders the whole 1160x760 scene at a small fraction of its size on phones,
   the in-scene labels are authored LARGER here so they land readable after
   the fit scale. bench.js additionally settles the three folder cards into a
   near-full-width overlapping pile (see "pile mode" there) instead of the
   desktop fan. Desktop (>1024px) matches none of these rules.
   ========================================================================= */
@media (max-width:1024px){
  /* a 430vh scroll track is a lot of thumb; keep the same choreography over a
     shorter run so the drawer opens in about two swipes */
  .bench-track{height:300vh}
  /* wall sign: with the bench balanced lower, the sign clears the hero again;
     larger type on a wider plate so it stays readable at the phone fit scale */
  .wall-sign{font-size:22px;letter-spacing:.1em;width:240px;right:24px}
  /* MODEST in-scene label bumps only — the fitted scene stays proportionate and
     true to the desktop design. The readable, tap-friendly UI on phones is the
     .quick-strip overlay (below), not blown-up bench lettering. */
  .cab-icon{width:56px;height:56px;border-radius:15px}
  .cab-icon svg{width:30px;height:30px}
  .cab-text{font-size:22px}
  .misc-text{font-size:18px;letter-spacing:.1em}
  .dw-plate{font-size:18px;letter-spacing:.1em}
  .shop-txt{font-size:21px}
  .shop-cap{font-size:13px;letter-spacing:.08em}
  /* folder tabs: taller + larger type so the pile's three tabs are readable,
     comfortable tap targets at phone fit scales (2x-authored units) */
  .folder .tab{top:-88px;height:92px;font-size:36px;padding:0 52px;border-radius:24px 24px 0 0}
  /* cards behind the front one get a dimmer tab (bench.js toggles .is-back on
     the small path) — a background swap, NEVER filter/opacity, which would
     flatten the preserve-3d chain */
  .folder.is-back .tab{
    background:linear-gradient(135deg,#66aebf,#4d7a8a);
    box-shadow:0 -4px 12px rgba(14,116,144,.14);
  }
  /* the hero invites a tap, not a click, and points at the button tray */
  .hero-sub .sub-desktop{display:none}
  .hero-sub .sub-mobile{display:inline}
}

/* ---------- quick-link strip (phones/tablets only) ----------
   Big, high-contrast tap targets standing on the floor in front of the bench,
   for visitors who will never hover or scroll-drive a 3D scene. A flat overlay
   child of .stage (like .hero), NEVER inside the 3D scene, so it cannot flatten
   preserve-3d. display is controlled by fit() in bench.js: grid on the small
   path when the floor band under the raised bench has room, none otherwise
   (and always none on desktop). frame() fades it out as the drawer opens and
   cuts its pointer-events so the pile cards behind become tappable. */
.quick-strip{
  position:absolute;left:16px;right:16px;bottom:calc(3.2vh + 46px);
  display:none;
  /* minmax(0,1fr): plain 1fr sizes tracks by the widest label's min-content,
     which made the two columns unequal — force them truly equal instead */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  z-index:6;
}
/* one shared button anatomy: fixed-width icon slot on the left so every icon
   lines up in a clean column, label next to it, chevron pinned right. All rows
   are the same 58px so the grid reads as an even tray of controls. */
.qb{
  display:flex;align-items:center;justify-content:flex-start;gap:11px;
  height:58px;padding:0 13px 0 11px;text-decoration:none;border-radius:14px;
  background:linear-gradient(170deg,#ffffff 0%,#f4f7fa 62%,#e9eef3 100%);
  border:1px solid #d7dde4;
  box-shadow:inset 0 1.5px 0 #fff,0 1px 2px rgba(30,40,55,.08),
             0 7px 16px rgba(30,40,55,.16);
  font:700 15px/1.15 "Segoe UI",sans-serif;color:#243748;letter-spacing:.01em;
  min-width:0;
  transition:transform .15s ease,box-shadow .15s ease;
}
/* narrow phones: slightly smaller labels so "Data Recovery" stays on one line */
@media (max-width:409px){
  .qb{font-size:14px;gap:9px;padding:0 11px 0 9px}
}
.qb::after{ /* right-pinned chevron affordance */
  content:"";flex:none;width:8px;height:8px;margin-left:auto;
  border-right:2.5px solid #9fb0c0;border-top:2.5px solid #9fb0c0;
  transform:rotate(45deg);
}
.qb:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 6px rgba(30,40,55,.22),inset 0 1px 0 rgba(255,255,255,.5),
             0 2px 5px rgba(30,40,55,.12);
}
.qb-ic{
  flex:none;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#0fb5d4,#0e7490);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 7px rgba(14,116,144,.32),inset 0 1px 0 rgba(255,255,255,.35);
}
.qb-ic svg{width:19px;height:19px;fill:#fff}
/* Store + Book share the last row so the strip stays three rows tall and never
   creeps up over the bench */
.qb-ic-amber{
  background:linear-gradient(135deg,#f2b04a,#cf7d0e);
  box-shadow:0 3px 7px rgba(190,120,20,.35),inset 0 1px 0 rgba(255,255,255,.4);
}
.qb-cta{
  justify-content:center;padding:0 13px;
  color:#fff;font-size:16px;letter-spacing:.02em;
  background:linear-gradient(135deg,#0fa3c4 0%,#0e7490 55%,#125e75 100%);
  border:1px solid rgba(10,80,100,.55);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 10px 22px rgba(14,116,144,.35);
  text-shadow:0 1px 2px rgba(0,40,55,.3);
}
.qb-cta::after{border-color:rgba(255,255,255,.9)}
/* gentle one-time entrance so the tray presents itself on load */
@media (max-width:1024px){
  .quick-strip{animation:qsIn .55s cubic-bezier(.2,.75,.3,1) .12s backwards}
}
@keyframes qsIn{from{opacity:0;transform:translateY(16px)}}
/* the hamburger nav is one slim row (~56px); pin the hero just below it on
   phones where 9.5vh would land inside the nav bar */
@media (max-width:860px){
  .hero{top:72px}
}


@media (prefers-reduced-motion:reduce){
  .chev{animation:none}
  .cab-door{transition:none}
  .misc-pull{transition:none}
  .qb{transition:none}
  .quick-strip{animation:none}
}