*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#07111b;
  font-family:Arial,Helvetica,sans-serif;
}
.site{width:100%;overflow-x:hidden}
.approved-design{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  margin:0 auto;
  background:url("assets/approved-design.png") center top/100% 100% no-repeat;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:10;
  border-radius:4px;
}
.hotspot:focus-visible,
.hotspot:hover{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:2px;
  background:rgba(255,255,255,.04);
}

/* Navigation */
.nav-home{left:47.4%;top:2.0%;width:5.0%;height:2.4%}
.nav-services{left:53.7%;top:2.0%;width:7.2%;height:2.4%}
.nav-about{left:62.5%;top:2.0%;width:8.5%;height:2.4%}
.nav-contact{left:72.6%;top:2.0%;width:7.2%;height:2.4%}
.nav-quote{left:81.0%;top:1.4%;width:15.1%;height:3.7%}

/* Hero buttons */
.hero-quote{left:4.5%;top:27.1%;width:17.7%;height:3.7%}
.hero-call{left:23.5%;top:27.1%;width:13.9%;height:3.7%}

/* Anchors */
.anchor{position:absolute;left:0;width:1px;height:1px}
.anchor-home{top:0}
.anchor-services{top:43%}
.anchor-about{top:46%}
.anchor-contact{top:70%}
.anchor-quote{top:69%}

/* Contact links */
.contact-phone{left:6.3%;top:79.9%;width:21.5%;height:2.2%}
.contact-email-main{left:6.3%;top:82.0%;width:25.5%;height:2.0%}
.contact-email-alt{left:6.3%;top:84.0%;width:24.5%;height:2.0%}
.youtube-link{left:3.5%;top:89.0%;width:32.5%;height:8.0%}

/* Form precisely positioned over the form area in the approved design */
.quote-form{
  position:absolute;
  z-index:20;
  left:49.6%;
  top:71.9%;
  width:44.8%;
  height:17.0%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:13% 13% 13% 13% 13% 16%;
  gap:2.7% 2%;
}
.quote-form input,
.quote-form button{
  width:100%;
  min-width:0;
  border:0;
  border-radius:0;
  font-family:Arial,Helvetica,sans-serif;
}
.quote-form input{
  background:#23272b;
  color:#fff;
  padding:0 3%;
  font-size:clamp(6px,1vw,13px);
  outline:1px solid rgba(255,255,255,.03);
}
.quote-form input::placeholder{color:#d5d7d9;opacity:.96}
.quote-form input:focus{outline:2px solid #e40812}
.quote-form .wide{grid-column:1/3}
.quote-form button{
  background:#e40812;
  color:#fff;
  font-weight:800;
  font-size:clamp(7px,1.1vw,14px);
  cursor:pointer;
}
.quote-form button:hover{filter:brightness(1.08)}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:700px){
  .approved-design{width:100vw}
  .quote-form input{font-size:5.5px}
  .quote-form button{font-size:6.5px}
}