* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050505;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.exact-preview {
  position: relative;
  width: min(100vw, 1024px);
  margin: 0 auto;
  background: #050505;
}

.design-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 6px;
  outline-offset: 3px;
}

.hotspot:focus-visible {
  outline: 3px solid #ffd20a;
  background: rgba(255, 210, 10, 0.18);
}

.nav-home { left: 27.4%; top: 4.8%; width: 3.4%; height: 1.2%; }
.nav-services { left: 31.6%; top: 4.8%; width: 5%; height: 1.2%; }
.nav-about { left: 37.5%; top: 4.8%; width: 5.4%; height: 1.2%; }
.nav-gallery { left: 43.5%; top: 4.8%; width: 4.8%; height: 1.2%; }
.nav-reviews { left: 49.3%; top: 4.8%; width: 4.8%; height: 1.2%; }
.nav-areas { left: 55%; top: 4.8%; width: 6.3%; height: 1.2%; }

.quote-top { left: 62.2%; top: 4.45%; width: 13.2%; height: 2.2%; }
.quote-hero { left: 3.1%; top: 36.2%; width: 17.6%; height: 3.7%; }
.call-hero { left: 22.6%; top: 36.2%; width: 17.6%; height: 3.7%; }
.quote-form { left: 51.1%; top: 31.35%; width: 21.4%; height: 2.1%; }
.quote-cta { left: 56.3%; top: 85.55%; width: 18.2%; height: 2.7%; }
.call-footer { left: 26%; top: 97%; width: 10%; height: 1.4%; }
.email-footer { left: 43%; top: 97%; width: 18%; height: 1.4%; }

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

@media (max-width: 700px) {
  .exact-preview {
    width: 100vw;
  }
}