:root{--gold:#d99a28;--navy:#06182a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;width:100%;min-height:100%;background:#06182a;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.site-stage{width:100vw;max-width:none;margin:0;position:relative;background:#06182a}
.site-stage>img{display:block;width:100vw;height:auto;max-width:none}
.hotspot{position:absolute;z-index:20;display:block;border-radius:6px}
.hotspot:hover{outline:2px solid rgba(217,154,40,.9);background:rgba(217,154,40,.07)}
/* Header/menu hotspots based on the exact 1024x1536 reference */
.logo{left:2.2%;top:1.0%;width:20%;height:5.4%}
.phone-top{left:31.7%;top:1.0%;width:13%;height:3.2%}
.email-top{left:46.5%;top:1.0%;width:18%;height:3.2%}
.location-top{left:65%;top:1.0%;width:14%;height:3.2%}
.quote-top{left:80.5%;top:1.0%;width:18%;height:3.8%}
.nav-home{left:28.5%;top:4.4%;width:7%;height:3%}
.nav-about{left:36.5%;top:4.4%;width:8%;height:3%}
.nav-services{left:45.2%;top:4.4%;width:8.5%;height:3%}
.nav-projects{left:55.2%;top:4.4%;width:7.5%;height:3%}
.nav-resources{left:63.2%;top:4.4%;width:9%;height:3%}
.nav-contact{left:74.6%;top:4.4%;width:9.5%;height:3%}
.hero-quote{left:31.5%;top:28.0%;width:20%;height:4.2%}
.hero-emergency{left:52.8%;top:28.0%;width:20.5%;height:4.2%}

/* Service hotspots */
.s1{left:1.0%;top:45.7%;width:16.2%;height:11.3%}
.s2{left:17.4%;top:45.7%;width:16.2%;height:11.3%}
.s3{left:33.8%;top:45.7%;width:16.2%;height:11.3%}
.s4{left:50.2%;top:45.7%;width:16.2%;height:11.3%}
.s5{left:66.6%;top:45.7%;width:16.2%;height:11.3%}
.s6{left:83.0%;top:45.7%;width:16%;height:11.3%}

/* Gallery */
.g1{left:0;top:57.0%;width:33.3%;height:13.0%}
.g2{left:33.3%;top:57.0%;width:33.4%;height:13.0%}
.g3{left:66.7%;top:57.0%;width:33.3%;height:13.0%}

/* Bottom links */
.footer-home{left:24.5%;top:89.4%;width:6.5%;height:1.4%}
.footer-about{left:24.5%;top:90.9%;width:7%;height:1.4%}
.footer-services{left:24.5%;top:92.4%;width:7%;height:1.4%}
.footer-projects{left:24.5%;top:93.9%;width:7%;height:1.4%}
.footer-resources{left:24.5%;top:95.4%;width:8%;height:1.4%}
.footer-contact{left:24.5%;top:96.9%;width:8%;height:1.4%}
.footer-admin{left:38%;top:89.5%;width:14%;height:1.4%}
.footer-finance{left:38%;top:91.0%;width:14%;height:1.4%}
.footer-maint{left:38%;top:92.5%;width:14%;height:1.4%}
.footer-vendors{left:38%;top:94.0%;width:15%;height:1.4%}
.footer-emergency{left:38%;top:95.5%;width:14%;height:1.4%}
.footer-inspection{left:38%;top:97.0%;width:15%;height:1.4%}
.footer-phone{left:79.2%;top:91.0%;width:17%;height:2.5%}
.footer-call{left:79.2%;top:94.0%;width:18%;height:3.2%}

/* Actual interactive form overlay */
.form-overlay{
  position:absolute;z-index:30;
  left:52.8%;top:73.3%;width:44.3%;height:14.4%;
  display:grid;grid-template-columns:1fr 1fr;gap:.7%;
  padding:0;
}
.form-overlay input,.form-overlay select,.form-overlay textarea{
  width:100%;border:1px solid transparent;background:rgba(255,255,255,.001);
  color:#fff;font-size:clamp(9px,1vw,14px);padding:3%;
  outline:none;border-radius:3px;
}
.form-overlay input:focus,.form-overlay select:focus,.form-overlay textarea:focus{
  border-color:#d99a28;background:rgba(6,24,42,.55)
}
.form-overlay textarea{grid-column:1/-1;resize:none}
.form-overlay button{
  grid-column:1/-1;border:0;background:rgba(217,154,40,.001);
  color:transparent;cursor:pointer;border-radius:3px;
}
.form-overlay button:hover{outline:2px solid rgba(217,154,40,.9)}
.status{
  position:absolute;z-index:40;left:53%;top:88.2%;width:44%;
  color:#fff;background:#0b2b46;padding:.5rem;border-radius:5px;display:none;font-size:12px
}
.status.show{display:block}

@media(max-width:700px){
  .hotspot:hover{outline:none;background:transparent}
  .form-overlay input,.form-overlay select,.form-overlay textarea{font-size:9px}
}

@media(min-width:1400px){
  .site-stage{width:100vw}
  .site-stage>img{width:100vw}
}