*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;background:#fff}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Serif JP","Yu Mincho",serif;
  color:#050505;
}
.landing{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:#fff;
}
.visual{
  position:absolute;
  inset:0;
  background:url("/assets/landing.jpg") center center/cover no-repeat;
}

/* invisible clickable areas on top of the visual cards */
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:18px;
  -webkit-tap-highlight-color:transparent;
}
.hotspot:active{background:rgba(0,0,0,.035)}
.export{left:16.8%;top:56.4%;width:19.7%;height:30.8%}
.demolition{left:38.4%;top:56.4%;width:21.1%;height:30.8%}
.vehicles{left:61.1%;top:56.4%;width:19.4%;height:30.8%}

.maint{
  min-height:100svh;
  position:relative;
  display:grid;
  place-items:center;
  padding:28px 16px;
  overflow:hidden;
}
.maint:before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/landing.jpg") center center/cover no-repeat;
  opacity:.18;
  filter:grayscale(1);
}
.box{
  position:relative;
  z-index:2;
  width:min(900px,92vw);
  text-align:center;
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(0,0,0,.18);
  border-radius:26px;
  padding:48px 26px;
  box-shadow:0 24px 70px rgba(0,0,0,.14);
}
.brand{
  font-size:clamp(38px,8vw,82px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.05;
}
.subbrand{
  margin-top:10px;
  font-size:clamp(28px,6vw,52px);
  font-weight:900;
  letter-spacing:.16em;
}
.gear{font-size:54px;margin:24px 0}
h1{
  font-size:clamp(27px,5vw,48px);
  line-height:1.45;
  margin-bottom:22px;
}
p{
  font-size:clamp(16px,2.6vw,24px);
  line-height:1.9;
  font-weight:600;
}
.mail{
  display:inline-block;
  margin-top:30px;
  padding:14px 20px;
  border:1.7px solid #111;
  border-radius:14px;
  background:#fff;
  font-size:clamp(14px,2.4vw,21px);
  text-decoration:none;
  color:#050505;
}
.back{
  display:inline-block;
  margin-top:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:700;
  color:#050505;
}

/* Mobile: use the same exact visual, cropped like a poster. Hotspots are repositioned. */
@media(max-width:700px){
  .visual{background-size:cover;background-position:center top}
  .export{left:7%;top:55.5%;width:86%;height:10.5%}
  .demolition{left:7%;top:68.5%;width:86%;height:10.5%}
  .vehicles{left:7%;top:81.4%;width:86%;height:10.5%}
}

/* If the phone is very tall, keep the visual centered and the card hotspots lower */
@media(max-width:700px) and (min-height:820px){
  .export{top:55.8%}
  .demolition{top:68.8%}
  .vehicles{top:81.7%}
}