*{box-sizing:border-box}html{background:#f3f2ed}body{margin:0;color:#101317;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d7d1}.brand{display:flex;align-items:center;gap:12px}.brand-copy{display:flex;align-items:baseline;gap:9px}.brand-copy>span{font-size:23px;font-weight:900;letter-spacing:3px}.brand-copy small,.contact{font-size:9px;font-weight:800;letter-spacing:2px}.hero{min-height:390px;padding:62px 5vw 48px;display:grid;grid-template-columns:2fr 1fr;align-items:end;gap:7vw}.kicker,.copy>p,.features{font-size:9px;font-weight:800;letter-spacing:2px}.kicker{margin:0 0 22px;color:#656c73}.hero h1{font-size:clamp(52px,6.4vw,94px);line-height:.9;letter-spacing:-.06em;margin:0}.lead{font-size:clamp(18px,2vw,25px);line-height:1.45;color:#656c73;max-width:430px;margin:0 0 5px}.products{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d8d7d1;border-bottom:1px solid #d8d7d1}.product{min-height:540px;padding:27px 4vw 35px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:background .25s}.product:first-child{border-right:1px solid #d8d7d1}.meta{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px}.meta span{border:1px solid;border-radius:99px;padding:7px 10px}.visual{position:absolute;top:76px;left:4vw;right:4vw;height:145px}.racks{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:7px;border:4px solid;padding:8px}.racks i{border:3px solid}.pitch{border:4px solid}.pitch:before{content:"";position:absolute;left:50%;height:100%;border-left:4px solid}.pitch i{position:absolute;width:78px;height:78px;border:4px solid;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.pitch u{position:absolute;width:55px;height:70%;top:15%;border:4px solid;text-decoration:none}.pitch u:nth-of-type(1){left:-4px}.pitch u:nth-of-type(2){right:-4px}.copy{margin-top:auto}.copy>p{margin:0 0 9px}.copy h2{font-size:clamp(43px,5vw,68px);letter-spacing:-.06em;margin:0 0 8px}.copy h3{font-size:16px;line-height:1.4;max-width:510px;margin:0 0 17px;font-weight:500}.features{line-height:1.7}.cta{display:inline-flex;gap:17px;margin-top:20px;padding-bottom:5px;border-bottom:2px solid;font-size:10px;font-weight:900;letter-spacing:1.5px}.cta b{font-size:17px;line-height:10px;transition:.2s}.product:hover .cta b{transform:translateX(6px)}.wms:hover,.match:hover{background:#e5e4df}footer{padding:28px 5vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;font-size:11px}footer div{display:flex;flex-direction:column;gap:5px}footer div span,footer small{color:#697079;font-size:9px;letter-spacing:1px}footer>a{text-align:center;text-decoration:underline}footer>small{text-align:right}@media(max-width:760px){header{height:68px}.hero{min-height:420px;padding:55px 6vw 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.hero h1{font-size:54px}.lead{font-size:18px}.products{grid-template-columns:1fr}.product{min-height:520px;padding:25px 6vw 32px}.product:first-child{border-right:0;border-bottom:1px solid #d8d7d1}.visual{left:6vw;right:6vw;height:135px}.copy h2{font-size:49px}footer{grid-template-columns:1fr;gap:18px}footer>a,footer>small{text-align:left}}
/* v3 — large-screen responsive refinement */
@media (min-width: 761px){
  body{
    max-width: 1440px;
    margin: 0 auto;
    border-left: 1px solid #d8d7d1;
    border-right: 1px solid #d8d7d1;
    min-height: 100vh;
  }
  .hero{
    min-height: 440px;
    padding-top: 74px;
    padding-bottom: 58px;
  }
  .products{
    min-height: 590px;
  }
  .product{
    min-height: 590px;
    padding-top: 32px;
    padding-bottom: 42px;
  }
  .visual{
    top: 88px;
    height: 178px;
  }
  .copy h3{
    font-size: 17px;
  }
}
@media (min-width: 1500px){
  html{
    background:#e9e8e2;
  }
  body{
    box-shadow: 0 0 0 1px rgba(16,19,23,.02);
  }
}
/* More warehouse-like rack drawing */
.racks{
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:0;
  padding:10px;
  border-width:4px;
}
.racks i{
  position:relative;
  border:0;
  border-right:4px solid #101317;
  border-bottom:4px solid #101317;
}
.racks i:nth-child(-n+3){border-top:4px solid #101317}
.racks i:nth-child(3n+1){border-left:4px solid #101317}
.racks i:after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:10%;
  height:42%;
  border:2px solid #101317;
  opacity:.28;
}

/* v4 — final desktop typography/spacing polish */
@media (min-width: 761px){
  .hero{
    min-height: 380px;
    grid-template-columns: minmax(0, 2.35fr) minmax(300px, .85fr);
    gap: 4vw;
    padding-top: 58px;
    padding-bottom: 48px;
  }
  .hero h1{
    font-size: clamp(58px, 5.15vw, 82px);
    line-height: .92;
    letter-spacing: -.055em;
    white-space: nowrap;
  }
  .lead{
    max-width: 390px;
    font-size: 21px;
    margin-bottom: 8px;
  }
  .copy h3{
    font-size: 18px;
    line-height: 1.45;
  }
  .features{
    font-size: 10px;
    letter-spacing: 1.7px;
  }
}
@media (min-width: 761px) and (max-width: 1180px){
  .hero h1{
    white-space: normal;
    font-size: clamp(54px, 6vw, 70px);
  }
}