* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #111;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.site-shell {
  width: 100%;
  overflow-x: hidden;
}
.artwork-wrap {
  position: relative;
  width: 100%;
  max-width: 1504px;
  margin: 0 auto;
  line-height: 0;
}
.artwork {
  display: block;
  width: 100%;
  height: auto;
}
.hotspot {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  border-radius: 4px;
}
.hotspot:hover,
.hotspot:focus-visible {
  outline: 2px solid #f5b400;
  outline-offset: 2px;
  background: rgba(245,180,0,.08);
}

/* Coordinates are percentages of the approved 1504x1007 artwork. */
.home              { left: 31.0%; top: 2.3%; width: 5.5%; height: 6.5%; }
.products          { left: 36.9%; top: 2.3%; width: 7.8%; height: 6.5%; }
.about             { left: 45.8%; top: 2.3%; width: 5.0%; height: 6.5%; }
.contact           { left: 52.5%; top: 2.3%; width: 6.0%; height: 6.5%; }
.header-phone      { left: 67.0%; top: 1.5%; width: 14.0%; height: 7.5%; }
.header-quote      { left: 84.0%; top: 1.0%; width: 12.0%; height: 8.5%; }

.request-pricing   { left: 25.9%; top: 47.0%; width: 11.5%; height: 5.8%; }
.our-products      { left: 38.5%; top: 47.0%; width: 10.8%; height: 5.8%; }
.learn-about       { left: 72.4%; top: 84.8%; width: 15.2%; height: 5.5%; }

.product-stop      { left: 6.7%; top: 70.4%; width: 16.5%; height: 15.5%; }
.product-speed     { left: 23.0%; top: 70.4%; width: 17.0%; height: 15.5%; }
.product-reg       { left: 40.4%; top: 70.4%; width: 17.0%; height: 15.5%; }
.product-construction { left: 58.0%; top: 70.4%; width: 17.0%; height: 15.5%; }

.footer-phone      { left: 4.0%; top: 94.0%; width: 13.5%; height: 5.0%; }
.footer-email      { left: 20.0%; top: 94.0%; width: 23.0%; height: 5.0%; }
.footer-site       { left: 70.0%; top: 93.4%; width: 27.0%; height: 6.0%; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative;
  width: min(680px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #171717;
  border: 2px solid #f5b400;
  box-shadow: 0 20px 70px rgba(0,0,0,.6);
  padding: 34px;
  line-height: 1.5;
}
.modal h2 { margin: 0 0 12px; color: #f5b400; font-size: 30px; }
.modal h3 { color: #f5b400; margin-bottom: 4px; }
.modal p { margin: 8px 0 16px; }
.modal a {
  color: #fff;
  font-weight: 700;
}
.close {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 42px;
  height: 42px;
  border: 1px solid #f5b400;
  background: transparent;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}
.form-row { display: grid; gap: 6px; margin: 12px 0; }
.form-row input, .form-row textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #555;
  background: #0d0d0d;
  color: #fff;
  font: inherit;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.submit {
  background: #f5b400;
  border: 0;
  color: #111;
  font-weight: 800;
  padding: 13px 18px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .modal { padding: 26px 20px; }
  .modal h2 { font-size: 24px; }
}