/* Shared styles for every page.
   Palette: one safety orange, white, near-black ink and two neutral greys. Nothing else.
   The visual language is the distribution centre: shipping labels and pallet tags, floor paint and hazard tape,
   pallet racking drawn as line work, printed forms and documents, barcodes and stencilled zone numbers.
   Corners are square. Rules are thick. There are no gradients, no shadows, no blur. */
:root{
  --or:#F26419;          /* safety orange */
  --ink:#121212;         /* near-black ink: text, rules, fills */
  --white:#FFFFFF;
  --rule:#D6D6D6;        /* grey 1: hairlines, form grids */
  --mut:#5F5F5F;         /* grey 2: secondary text */
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M-6 6L6-6M0 24L24 0M18 30L30 18' stroke='%23121212' stroke-width='8.5'/%3E%3C/svg%3E");
  --hzw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M-6 6L6-6M0 24L24 0M18 30L30 18' stroke='%23FFFFFF' stroke-width='8.5'/%3E%3C/svg%3E");
  --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10L10 6' stroke='%23F26419' stroke-width='1.6'/%3E%3C/svg%3E");
  --formgrid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 31.5H32M31.5 0V32' stroke='%23D6D6D6' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--white);scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
main{overflow-x:clip}
a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--or)}
a:focus-visible,button:focus-visible,video:focus-visible,summary:focus-visible{outline:3px solid var(--or);outline-offset:3px}
::selection{background:var(--or);color:var(--ink)}
img,video,canvas,svg{max-width:100%}
b,strong{font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;margin:0;line-height:.92;text-wrap:balance}
h2{font-weight:800;font-size:clamp(40px,6vw,76px);letter-spacing:-.005em}
h3{font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:.005em}
.acc{color:var(--or)}
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.skip{position:absolute;left:-999px;top:10px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;font:500 13px/1 var(--mono)}
.skip:focus{left:12px}

/* ---- the floor: faint location grid behind the white sections ---- */
#floor{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
main,footer{position:relative;z-index:1}
nav.top{position:sticky;top:0;z-index:30}

/* ---- hazard tape ---- */
.hz{height:10px;background:var(--or) var(--hz) 0 0/24px 24px repeat}
.hz.thin{height:6px}

/* ---- nav: a signboard. white, thick ink rule, stencilled mark ---- */
nav.top{background:var(--white);border-bottom:3px solid var(--ink)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.mark i{flex:none;width:38px;height:38px;background:var(--or);color:var(--ink);font:800 19px/38px var(--display);font-style:normal;text-align:center;letter-spacing:.02em;border:2px solid var(--ink)}
.mark span{font:700 17px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
nav.top ul a{display:block;padding:10px 12px;font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:3px solid transparent}
nav.top ul a:hover,nav.top ul a.on{border-bottom-color:var(--or);color:var(--ink)}
.menu{display:none;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:700 14px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:9px 12px;cursor:pointer}
.menu[aria-expanded="true"]{background:var(--ink);color:#fff}
@media (max-width:820px){
  .menu{display:inline-block}
  nav.top ul{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:3px solid var(--ink);flex-direction:column;gap:0;padding:6px 0}
  nav.top ul.open{display:flex}
  nav.top ul a{padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--rule);font-size:17px}
  nav.top ul li:last-child a{border-bottom:0}
  .mark span{font-size:16px}
}

/* ---- buttons: square, ink. real labels have square corners ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border:2px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;transition:background .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--ink);color:#fff}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--white);color:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* ---- hero: a full-bleed safety-orange block with a racking elevation and a conveyor along the bottom ---- */
.hero{background:var(--or);color:var(--ink);position:relative;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,12fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:end;padding-top:clamp(28px,3.5vw,40px);padding-bottom:118px}
.hero .copy{min-width:0}
.status{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:8px 10px}
.status i{width:8px;height:8px;background:var(--ink)}
.hero h1{font-weight:800;font-size:clamp(44px,7.2vw,84px);line-height:.86;margin-top:22px;letter-spacing:-.01em}
.hero h1 .l{display:block;white-space:nowrap}
.hero h1 .lt{color:var(--white)}
.hero p{max-width:56ch;font-size:clamp(17px,1.5vw,19px);line-height:1.5;margin:20px 0 0;font-weight:500}
.hero .cta{margin-top:22px}
.hero .btn.primary:hover{background:var(--white);color:var(--ink);border-color:var(--ink)}
.rackbox{min-height:360px;align-self:stretch;position:relative}
.rackbox .zone{position:absolute;right:0;top:0;font:800 13px/1 var(--mono);letter-spacing:.18em;border:2px solid var(--ink);padding:6px 8px;background:var(--or)}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-bottom:120px}
  .rackbox{min-height:300px}
  .rackbox .zone{top:auto;bottom:0;left:0;right:auto}
  .hero h1{font-size:clamp(40px,12.6vw,84px)}
}

/* ---- tools belt: pallet tags moving along a strip ---- */
.belt{background:var(--white);border-bottom:3px solid var(--ink);overflow:hidden;position:relative}
.belt .track{display:flex;width:max-content;animation:belt 48s linear infinite}
.belt .mv{display:flex;align-items:center;gap:12px;padding:14px 28px 14px 0;white-space:nowrap;font-size:15px;color:var(--mut);border-right:1px solid var(--rule);margin-right:28px}
.belt .mv i{font:800 12px/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--ink);background:var(--or);padding:7px 8px;border:2px solid var(--ink)}
.belt .mv b{color:var(--ink);font-weight:600}
@keyframes belt{to{transform:translateX(-50%)}}

/* ---- numbers strip: a tally form ---- */
.count{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);margin-top:clamp(40px,6vw,72px)}
.cnum{padding:18px 14px 20px 0;margin-right:14px;border-right:1px solid var(--rule);min-width:0}
.cnum:last-child{border-right:0;margin-right:0}
.cnum .code{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnum b{display:block;margin-top:10px;font:800 clamp(40px,3.9vw,54px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.cnum b.up{color:var(--or)}
.cnum small{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--mut)}
@media (max-width:900px){.count{grid-template-columns:repeat(3,minmax(0,1fr))}.cnum:nth-child(3){border-right:0}.cnum:nth-child(n+4){border-top:1px solid var(--rule)}}
@media (max-width:560px){.count{grid-template-columns:repeat(2,minmax(0,1fr))}.cnum:nth-child(3){border-right:1px solid var(--rule)}.cnum:nth-child(2n){border-right:0;margin-right:0}.cnum:nth-child(n+3){border-top:1px solid var(--rule)}.cnum:nth-child(5){grid-column:1/-1;border-right:0}}

/* ---- section headings: zone signage ---- */
section.wrap{padding-top:clamp(64px,9vw,120px)}
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:clamp(28px,4vw,44px);padding-bottom:18px;border-bottom:3px solid var(--ink)}
.shead .eyebrow{display:block;margin-bottom:10px}
.shead p{margin:0;max-width:48ch;color:var(--mut);font-size:17px;justify-self:end}
@media (max-width:820px){.shead{grid-template-columns:minmax(0,1fr)}.shead p{justify-self:start}}

/* ---- featured: a monitor in an ink frame next to a delivery-stage list ---- */
.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);text-decoration:none;color:inherit;align-items:start}
.feat .media{border:3px solid var(--ink);background:var(--ink);position:relative;min-width:0}
.feat .media .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;color:#fff;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.feat .media .bar i{display:inline-block;width:9px;height:9px;background:var(--or);margin-right:8px;vertical-align:-1px;font-style:normal}
.feat .media video,.feat .media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.feat .play{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--or);color:var(--ink);font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;border-top:3px solid var(--ink)}
.feat .play i{display:inline-block;width:0;height:0;border-left:12px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.feat .body h3{font-size:clamp(40px,5vw,64px);font-weight:800;margin-top:10px;line-height:.9}
.feat .body p{margin:18px 0 0;color:var(--mut);font-size:17px;max-width:48ch}
.tl{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--ink)}
.tl li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.4;align-items:baseline}
.tl time{font:500 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--mut);white-space:nowrap}
.tl li.hot{border-bottom:2px solid var(--ink)}
.tl li.hot time,.tl li.hot b{color:var(--or)}
.tl li.hot time::before{content:"";display:inline-block;width:8px;height:8px;background:var(--or);margin-right:8px;vertical-align:0}
.more{display:inline-block;margin-top:22px;font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;border-bottom:3px solid var(--or);padding-bottom:4px}
.feat:hover .more{color:var(--or)}
.feat:hover .body h3 .acc{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
@media (max-width:820px){.feat{grid-template-columns:minmax(0,1fr)}}

/* ---- filters: square chips with a count box ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-self:end}
.chip{display:inline-flex;align-items:center;gap:10px;padding:0 0 0 12px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font:700 14px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;height:38px}
.chip span{display:inline-grid;place-items:center;min-width:34px;height:100%;padding:0 8px;border-left:2px solid var(--ink);font:500 12px/1 var(--mono)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip[aria-pressed="true"] span{background:var(--or);color:var(--ink)}
.chip:hover:not([aria-pressed="true"]){background:var(--or)}
@media (max-width:820px){.filters{justify-self:start}}

/* ---- the rack: shipping labels ---- */
.rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.rack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rack{grid-template-columns:minmax(0,1fr)}}
.slot{border:2.5px solid var(--ink);background:var(--white);display:flex;flex-direction:column;min-width:0;position:relative}
.slot[hidden]{display:none}
.slot .lab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px 14px 10px;border-bottom:2.5px solid var(--ink)}
.slot .lab .code{font:800 30px/1 var(--display);letter-spacing:.01em}
.slot .lab .kind{display:block;margin-top:4px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .lab svg{display:block;height:40px;width:auto;max-width:150px}
.slot .lab .bc{text-align:right}
.slot .lab .bc small{display:block;font:400 10px/1 var(--mono);letter-spacing:.2em;margin-top:3px;color:var(--mut)}
.slot .viz{display:block;width:100%;height:168px;border-bottom:1px solid var(--rule)}
.slot .in{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1}
.slot .rk{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.slot .rk i{width:10px;height:10px;background:var(--or);border:1.5px solid var(--ink)}
.slot .rk em{margin-left:auto;font-style:normal;letter-spacing:.1em}
.slot h3{margin-top:10px;font-size:30px}
.slot h3 a{text-decoration:none;color:inherit}
.slot h3 a::after{content:"";position:absolute;inset:0}
.slot:hover{outline:3px solid var(--or);outline-offset:-3px}
.slot:focus-within{outline:3px solid var(--or);outline-offset:-3px}
.slot p{margin:10px 0 0;color:var(--mut);font-size:15.5px;line-height:1.45}
.slot ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:14.5px;line-height:1.4}
.slot li{padding-left:16px;position:relative}
.slot li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border:1.5px solid var(--ink)}
.slot .foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font:400 11.5px/1 var(--mono);padding:5px 7px;border:1px solid var(--ink);color:var(--ink)}
.go{flex:none;font:800 20px/1 var(--display);letter-spacing:.04em}
.slot:hover .go{color:var(--or)}
.slot.out{opacity:0;transform:translateY(6px)}
.slot.in{animation:slotin .5s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes slotin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rack-empty{grid-column:1/-1;padding:28px;border:2px dashed var(--ink);font:500 14px/1.5 var(--mono)}
.noscript-rack{border:2px solid var(--ink);padding:20px;font-size:16px}
/* a card left alone on the last row of the full rack becomes a wide pallet: label, sketch and text side by side */
@media (min-width:981px){
  .rack:not(.filtered) .slot:nth-child(3n+1):last-child{grid-column:1/-1;display:grid;grid-template-columns:230px minmax(0,1fr) minmax(0,1.15fr)}
  .rack:not(.filtered) .slot:nth-child(3n+1):last-child .lab{border-bottom:0;border-right:2.5px solid var(--ink);grid-template-columns:minmax(0,1fr);align-content:start;gap:14px}
  .rack:not(.filtered) .slot:nth-child(3n+1):last-child .lab .bc{text-align:left}
  .rack:not(.filtered) .slot:nth-child(3n+1):last-child .viz{height:100%;min-height:240px;border-bottom:0;border-right:1px solid var(--rule)}
}

/* ---- how I work: a numbered form, not three cards with icons ---- */
.pick{border-top:3px solid var(--ink)}
.step{display:grid;grid-template-columns:92px minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:18px 28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:3px solid var(--ink)}
.step .n{font:800 64px/.9 var(--display);color:var(--or);letter-spacing:-.02em}
.step h3{font-size:30px;margin-top:4px}
.step p{margin:4px 0 0;color:var(--mut);max-width:52ch}
.step .ex{display:grid;grid-template-columns:auto minmax(0,1fr);border:2px solid var(--ink);font:500 14px/1.45 var(--mono)}
.step .ex i{font-style:normal;background:var(--ink);color:#fff;padding:10px 10px;font:700 11px/1.45 var(--mono);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center}
.step .ex span{padding:10px 12px}
@media (max-width:900px){.step{grid-template-columns:64px minmax(0,1fr)}.step .n{font-size:48px}.step p,.step .ex{grid-column:2}}

/* ---- writing: one row of a document register ---- */
.post{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.post .pic{width:72px;height:72px;background:var(--ink);color:#fff;font:800 40px/72px var(--display);text-align:center}
.post h3{font-size:26px;margin-top:8px;text-transform:none;font-family:var(--body);font-weight:600;line-height:1.25;letter-spacing:0}
.post p{margin:6px 0 0;color:var(--mut);font-size:15px}
.post:hover h3{color:var(--or)}
.allposts{display:inline-block;margin-top:18px;font:700 15px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:3px solid var(--or);padding-bottom:4px}
.allposts:hover{color:var(--or)}
@media (max-width:600px){.post{grid-template-columns:56px minmax(0,1fr)}.post .pic{width:56px;height:56px;font-size:30px;line-height:56px}.post .go{grid-column:2}}

/* ---- about: paragraph plus a form of facts ---- */
.about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,72px)}
.about p{margin:0 0 16px;font-size:18px;max-width:50ch}
.facts{border-top:3px solid var(--ink)}
.fact{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.4}
.fact small{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding-top:3px}
.stack{display:flex;flex-wrap:wrap;gap:6px}
.stack span{font:400 12px/1 var(--mono);padding:6px 8px;border:1px solid var(--ink)}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}}

/* ---- access pass: the portrait, worn on a lanyard like a DC badge ---- */
.about{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.idwrap{padding-top:44px}
.idpass{position:relative;margin:0;width:100%;max-width:320px;background:var(--white);border:2px solid var(--ink);transform-origin:50% -44px;animation:sway 7s ease-in-out infinite}
.idpass:hover{animation-play-state:paused}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
.idpass .strap{position:absolute;left:50%;top:-46px;width:22px;height:34px;margin-left:-11px;background:var(--ink)}
.idpass .clip{position:absolute;left:50%;top:-14px;width:46px;height:20px;margin-left:-23px;border:3px solid var(--ink);background:var(--white)}
.idpass .clip::after{content:"";position:absolute;left:50%;top:5px;width:18px;height:4px;margin-left:-9px;background:var(--ink)}
.bhead{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--or);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.bbody{padding:16px 16px 14px}
.bphoto{position:relative;border:2px solid var(--ink);aspect-ratio:3/4;overflow:hidden;background:var(--rule)}
.bphoto img{display:block;width:100%;height:100%;object-fit:cover}
.bphoto span{position:absolute;left:0;bottom:0;padding:5px 8px;background:var(--ink);color:var(--white);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bname{margin-top:14px;font:800 32px/.92 var(--display);text-transform:uppercase;letter-spacing:.01em}
.brole{margin-top:6px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:8px}.brole::before{content:"";width:10px;height:10px;background:var(--or);flex:none}
.brows{margin:12px 0 0;border-top:1px solid var(--ink)}
.brows div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--rule)}
.brows dt{font:500 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.brows dd{margin:0;font-size:15px;line-height:1.35}
.bbc{margin-top:12px;height:40px;color:var(--ink)}
.bbc svg{display:block;width:100%;height:40px}
.bbcl{margin-top:4px;font:500 10px/1 var(--mono);letter-spacing:.3em;text-align:center}
.bfoot{height:12px;background:var(--hz) 0 0/24px 24px,var(--or);border-top:2px solid var(--ink)}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}.idwrap{max-width:300px}}
@media (prefers-reduced-motion:reduce){.idpass{animation:none}}

/* ---- closing block and footer: orange again, with a dock bay painted on the floor ---- */
.end{background:var(--or);color:var(--ink);position:relative;overflow:hidden}
.end .wrap{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:end}
.end h2{font-size:clamp(44px,7vw,84px);line-height:.86;margin-top:14px;white-space:nowrap}
.end h2 .lt{color:var(--white)}
.end p{margin:20px 0 0;font-size:18px;font-weight:500;max-width:44ch}
.end .eyebrow{color:var(--ink)}
.end .btn.primary:hover{background:var(--white);color:var(--ink)}
.end .dock{display:block;width:100%;max-width:440px;height:auto;justify-self:end;margin-bottom:8px}
.end .dock text{font-family:var(--mono);font-weight:500;letter-spacing:.18em;fill:var(--ink)}
.end .dock .big{font-family:var(--display);font-weight:800;letter-spacing:.02em;fill:var(--white)}
@media (max-width:820px){.end .wrap{grid-template-columns:minmax(0,1fr)}.end .dock{justify-self:start;max-width:360px}.end h2{font-size:clamp(40px,12.6vw,84px)}}
footer{background:var(--or);color:var(--ink);position:relative}
footer .beltline{display:block;width:100%;height:64px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:18px;padding-bottom:96px;border-top:3px solid var(--ink);font:500 13px/1.5 var(--mono)}
footer a{color:var(--ink)}
footer a:hover{color:var(--white)}

/* ---- the control panel: two industrial switches, fixed in the corner ---- */
.panel{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;flex-direction:column;gap:3px;border:2px solid var(--ink);background:var(--ink);padding:2px}
.sw{display:inline-flex;align-items:stretch;border:0;background:var(--ink);color:#fff;cursor:pointer;padding:0;font:700 12px/1 var(--mono);letter-spacing:.14em;text-align:left}
.sw .st{width:12px;background:var(--or) var(--hz) 0 0/24px 24px}
.sw .lamp{display:flex;align-items:center;padding:0 10px;border-right:1px solid var(--mut)}
.sw .lamp i{width:12px;height:12px;background:var(--or);display:block}
.sw[aria-pressed="false"] .lamp i{background:transparent;border:2px solid var(--mut)}
.sw .txt{display:flex;align-items:center;padding:12px 14px 12px 10px;min-width:118px}
.sw:hover .txt{color:var(--or)}
.sw[hidden]{display:none}
@media (max-width:600px){.panel{right:10px;bottom:10px}.sw .txt{padding:10px 12px 10px 8px;min-width:104px;font-size:11px}}

/* ---- scroll reveal, quiet ---- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ---- page transitions: the old page lifts away, the new document feeds in like paper ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .44s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{transform:translateY(-26px);opacity:0}}
@keyframes vt-in{from{transform:translateY(44px);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0)}}
:root.still::view-transition-old(root),:root.still::view-transition-new(root){animation:none}
/* fallback for browsers without cross-document view transitions (html.fb, set by site.js) */
html.fb:not(.still) body{animation:fb-in .36s var(--ease) both}
html.fb.leaving body{animation:fb-out .24s cubic-bezier(.4,0,1,1) forwards}
@keyframes fb-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fb-out{to{opacity:0;transform:translateY(-18px)}}

/* ---- project document pages ---- */
.doc{max-width:1080px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px) 0}
.back{display:inline-flex;gap:8px;align-items:center;font:700 14px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;margin-bottom:22px}
.back:hover{color:var(--or)}
.form{border:3px solid var(--ink);background:var(--white);position:relative}
.form .holes{position:absolute;left:-3px;top:0;bottom:0;width:0}
.dhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;padding:18px 22px;border-bottom:3px solid var(--ink);align-items:start}
.dhead .dt{font:800 clamp(26px,3.4vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.dhead .dsub{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 22px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.dhead .dsub b{color:var(--ink);font-weight:500}
.dhead .bc{text-align:right;justify-self:end}
.dhead .bc svg{display:block;height:54px;width:auto;max-width:260px}
.dhead .bc small{display:block;font:500 12px/1 var(--mono);letter-spacing:.24em;margin-top:5px}
.stamp{display:inline-block;border:3px solid var(--or);color:var(--or);font:800 20px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;transform:rotate(-6deg);margin-right:4px}
.copies{display:flex;gap:0;border-bottom:1px solid var(--ink);font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.copies span{padding:7px 12px;border-right:1px solid var(--ink)}
.copies span:last-child{border-right:0;margin-left:auto}
.copies span.on{background:var(--ink);color:#fff}
.dbody{padding:clamp(20px,3vw,36px) clamp(16px,3vw,32px) 0}
.dbody h1{font-weight:800;font-size:clamp(46px,7.6vw,96px);line-height:.88;letter-spacing:-.01em}
.dbody h1 .acc{display:block}
.lede{font-size:clamp(18px,1.8vw,21px);line-height:1.5;max-width:62ch;margin:22px 0 0;font-weight:500}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;border:2px solid var(--ink)}
.meta div{padding:10px 14px;border-right:1px solid var(--ink);min-width:0}
.meta div:last-child{border-right:0}
.meta small{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.meta span{display:block;margin-top:4px;font-size:16px;line-height:1.35;font-weight:500}
@media (max-width:640px){.meta{grid-template-columns:minmax(0,1fr)}.meta div{border-right:0;border-bottom:1px solid var(--ink)}.meta div:last-child{border-bottom:0}}
.fig{margin:28px 0 0;border:2px solid var(--ink)}
.fig canvas{display:block;width:100%;height:clamp(220px,34vw,380px)}
.fig figcaption{padding:9px 12px;border-top:2px solid var(--ink);font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.fig figcaption span{color:var(--mut)}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:28px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.num{padding:16px 16px 16px 0;margin-right:16px;border-right:1px solid var(--rule);min-width:0}
.num:last-child{border-right:0}
.num .nh{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.num b{display:block;margin-top:8px;font:800 clamp(40px,4.6vw,58px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num b .sfx{font-size:.5em;letter-spacing:0;margin-left:2px}
.num > span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--mut)}
.num .sys{margin-top:10px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:end;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.num .sys i{display:block;height:22px;border-bottom:1.5px dashed var(--mut)}
.lines{margin-top:clamp(36px,5vw,56px);border-top:3px solid var(--ink);counter-reset:ln}
.line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:start}
.line:last-child{border-bottom:3px solid var(--ink)}
.line .ln{display:flex;flex-direction:column;gap:8px;min-width:92px}
.line .ln b{font:800 44px/.9 var(--display);color:var(--or);letter-spacing:-.02em}
.line .ln small{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.line h3{font-size:30px}
.line p{margin:8px 0 0;max-width:62ch;color:var(--mut);font-size:17px}
.box{width:18px;height:18px;border:2px solid var(--ink);display:inline-block;vertical-align:-3px;flex:none}
.dsec{margin-top:clamp(40px,6vw,72px)}
.dsec h2{font-size:clamp(34px,4.6vw,56px)}
.dsec h2 .acc{display:block}
.dsec .blocks{margin-top:22px;display:grid;gap:22px}
pre.code{margin:0;padding:16px 18px;border:2px solid var(--ink);background:var(--white);font:400 14px/1.55 var(--mono);overflow:auto;color:var(--ink);white-space:pre}
table.tb{width:100%;border-collapse:collapse;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);font-size:16px}
table.tb th{text-align:left;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:10px 12px 10px 0;border-bottom:2px solid var(--ink)}
table.tb td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.4}
table.tb td.k{font:500 14px/1.5 var(--mono);color:var(--or);white-space:nowrap;width:1%}
table.tb td.ck,table.tb th.ck{width:1%;padding-right:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:2px solid var(--ink)}
.card{padding:18px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0;display:flex;flex-direction:column}
.card h3{font-size:22px;line-height:1.05;display:flex;gap:10px;align-items:flex-start}
.card p{margin:10px 0 0;color:var(--mut);font-size:15.5px}
.card .fix{margin-top:auto;padding-top:14px}
.card .fix span{display:block;padding:10px 12px;border-top:2px solid var(--ink);font:500 13.5px/1.45 var(--mono)}
.card .fix span::before{content:"FIX";display:inline-block;background:var(--or);color:var(--ink);font:700 10px/1 var(--mono);letter-spacing:.14em;padding:4px 6px;margin-right:10px;vertical-align:1px}
.gauges{display:grid;gap:12px;border-top:3px solid var(--ink);padding-top:14px}
.gauge{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:12px;align-items:center;font-size:15.5px}
.gauge .lbl{grid-column:1/-1;margin-bottom:-4px}
.gauge .tr{height:22px;border:2px solid var(--ink);position:relative;background:var(--white)}
.gauge .tr i{position:absolute;left:0;top:0;bottom:0;right:0;background:var(--or);transform-origin:left;transform:scaleX(var(--w,0));transition:transform 1.1s var(--ease)}
.gauge .v{font:800 22px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums}
.callout{border:2px solid var(--ink);border-left:12px solid var(--or);padding:16px 20px;font-size:16.5px}
.callout b{display:block;font:700 22px/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.dfoot{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;border-top:3px solid var(--ink);padding-top:20px}
.dfoot .tags{margin-top:0}
.note{margin:18px 0 0;font-size:14.5px;color:var(--mut);max-width:70ch;line-height:1.5}
.sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:clamp(32px,5vw,56px);border:2px solid var(--ink);background:var(--formgrid) 0 0/32px 32px}
.sig{padding:12px 14px 14px;border-right:1px solid var(--ink);min-height:104px;display:flex;flex-direction:column;justify-content:space-between}
.sig:last-child{border-right:0}
.sig small{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sig span{font:500 15px/1.3 var(--body);border-top:1.5px dashed var(--mut);padding-top:8px;min-height:30px}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink);margin-top:0}
.pn a{padding:22px clamp(16px,3vw,32px);text-decoration:none;color:inherit;border-right:1px solid var(--ink);min-width:0}
.pn a:last-child{border-right:0;text-align:right}
.pn small{display:block;font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.pn b{display:block;margin-top:6px;font:800 24px/1 var(--display);text-transform:uppercase}
.pn a:hover b{color:var(--or)}
.pn em{display:block;font-style:normal;font-size:14px;color:var(--mut);margin-top:4px}
@media (max-width:640px){.pn{grid-template-columns:1fr}.pn a{border-right:0;border-bottom:1px solid var(--ink)}.pn a:last-child{border-bottom:0;text-align:left}}
@media (max-width:640px){.dhead{grid-template-columns:minmax(0,1fr)}.dhead .bc{justify-self:start;text-align:left}.dfoot{grid-template-columns:minmax(0,1fr)}.line{grid-template-columns:minmax(0,1fr)}.line .ln{flex-direction:row;align-items:baseline;gap:14px}}
/* document types: one family, five forms.
   count    Stock Count Sheet: white head with a double rule, every number has a counted line and an empty system line
   po       Purchase Order: orange head band
   picking  Picking List: ink head band, a tick box on every line
   delivery Delivery Note: hazard tape under the head, a third signature box for the receiver
   receipt  Goods Receipt: a RECEIVED stamp in the head */
.doc-count .dhead{border-bottom:double 9px var(--ink)}
.doc-count .nums{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.doc-count .lines .ln b{color:var(--ink)}
.doc-po .dhead{background:var(--or)}
.doc-po .dhead .dsub,.doc-po .dhead .dsub b{color:var(--ink)}
.doc-po .copies span.on{background:var(--or);color:var(--ink)}
.doc-picking .dhead{background:var(--ink);color:#fff}
.doc-picking .dhead .dsub b{color:#fff}
.doc-picking .dhead .dsub{color:var(--rule)}
.doc-delivery .dhead{border-bottom:0}
.doc-delivery .dhead + .hz{height:12px;border-bottom:3px solid var(--ink)}
.doc-receipt .dhead .dt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.notfound{padding:clamp(40px,8vw,96px) 0;max-width:60ch}
.notfound h1{font-size:clamp(44px,8vw,96px);font-weight:800;line-height:.9}
.notfound p{font-size:18px;margin:20px 0 0}

/* ---- wms case study ---- */
.cs{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(16px,4vw,40px) 0}
.cs h1{font-weight:800;font-size:clamp(56px,9.6vw,124px);line-height:.86;margin-top:16px;letter-spacing:-.01em}
.cs h1 .acc{display:block}
.cs .who{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--mut)}
.cs .who b{color:var(--ink);font-weight:500}
.cs section{margin-top:clamp(56px,8vw,96px)}
.cs .head{margin-bottom:24px;padding-bottom:14px;border-bottom:3px solid var(--ink)}
.cs .head h2{margin-top:8px}
.film{margin-top:36px;border:3px solid var(--ink);background:var(--ink)}
.film .bar{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#fff;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.film .bar i{width:9px;height:9px;background:var(--or)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
.cap{font:400 13px/1.5 var(--mono);color:var(--mut);margin-top:10px}
.files{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:2px solid var(--ink)}
.file{padding:14px 16px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}
.file .fn{display:flex;align-items:center;gap:8px;font:400 13.5px/1.3 var(--mono);overflow-wrap:anywhere}
.badge{flex:none;font:700 10px/1 var(--mono);letter-spacing:.1em;padding:4px 6px;border:1.5px solid var(--ink)}
.badge.x{background:var(--ink);color:#fff}
.file .k{margin-top:14px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.file .v{font:800 40px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--or);margin-top:4px}
.file .v.n{color:var(--ink)}
.cs .note{font-size:17px;color:var(--ink);max-width:66ch}
.flow{display:grid;gap:clamp(36px,5vw,56px);counter-reset:mv}
.mv2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:center}
.mv2:nth-child(even) .txt{order:2}
.txt{min-width:0}
.txt .slot2{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.12em;margin-bottom:12px;border:2px solid var(--ink)}
.txt .slot2 i{width:30px;height:30px;display:grid;place-items:center;font:800 16px/1 var(--display);font-style:normal;background:var(--or);border-right:2px solid var(--ink)}
.txt .slot2 span{padding:0 10px}
.txt p{margin:10px 0 0;color:var(--mut);max-width:52ch}
.txt ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.txt li{font-size:15px;padding-left:18px;position:relative}
.txt li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border:1.5px solid var(--ink)}
.shot{margin:0;min-width:0}
.shot .win{border:2px solid var(--ink);background:var(--white)}
.shot .tb{height:22px;background:var(--ink);display:flex;align-items:center;gap:6px;padding:0 10px}
.shot .tb span{width:7px;height:7px;background:var(--mut)}
.shot .tb span:first-child{background:var(--or)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:400 12px/1.4 var(--mono);color:var(--mut);margin-top:8px}
.board-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.how{border:2px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.how .card{border-bottom:0}
.how .card p{margin:10px 0 0;color:var(--mut);font-size:16px}
.rule{font:400 14px/1.5 var(--mono);border:1.5px solid var(--ink);padding:9px 12px;margin-top:10px}
.cs .stack{margin-top:14px}
.csfoot{margin-top:0;background:var(--or)}
.csfoot .wrap.lead{display:block;border-top:0;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(28px,4vw,48px);font:inherit}
.csfoot .big{font:800 clamp(48px,8vw,104px)/.86 var(--display);text-transform:uppercase}
.csfoot .big .acc{color:var(--white);display:block}
.csfoot .lead p{margin:18px 0 0;font-size:15px;max-width:70ch}
.csfoot a{color:var(--ink)}
.csfoot a:hover{color:var(--white)}
@media (max-width:760px){.mv2{grid-template-columns:minmax(0,1fr)}.mv2:nth-child(even) .txt{order:0}}

/* ---- stillness: the switch, the user setting, or print ---- */
html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .belt .track{animation:none}
  .slot.in{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.fb body{animation:none}
}
@media print{.panel,#floor,nav.top{display:none}}