:root {
  --reference-width: 1285;
  --reference-height: 1224;
}

* {
  box-sizing: border-box;
}

html {
  background: #000;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: #000;
}

.reference-page {
  position: relative;
  width: 100%;
  max-width: 1285px;
  margin: 0 auto;
  background: #000;
  line-height: 0;
}

.reference-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
}

.reference-hotspots {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  outline: none;
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ed101b;
}

/* Coordinates are based on the supplied 1285 × 1224 reference. */
.hotspot-home {
  top: 2.35%;
  left: 29.3%;
  width: 4.1%;
  height: 2.6%;
}

.hotspot-vves {
  top: 2.35%;
  left: 35.5%;
  width: 5.5%;
  height: 2.6%;
}

.hotspot-business {
  top: 2.35%;
  left: 43%;
  width: 7.2%;
  height: 2.6%;
}

.hotspot-process {
  top: 2.35%;
  left: 52.2%;
  width: 6.3%;
  height: 2.6%;
}

.hotspot-benefits {
  top: 2.35%;
  left: 61%;
  width: 5.3%;
  height: 2.6%;
}

.hotspot-about {
  top: 2.35%;
  left: 69.1%;
  width: 6.8%;
  height: 2.6%;
}

.hotspot-contact-nav {
  top: 2.35%;
  left: 78%;
  width: 5%;
  height: 2.6%;
}

.hotspot-header-cta {
  top: 1.55%;
  right: 2.2%;
  width: 14.1%;
  height: 3.6%;
  border-radius: 30px;
}

.hotspot-hero-cta {
  top: 22.8%;
  left: 3.2%;
  width: 17.2%;
  height: 3.2%;
  border-radius: 30px;
}

.hotspot-hero-work {
  top: 22.8%;
  left: 21.6%;
  width: 13.2%;
  height: 3.2%;
  border-radius: 30px;
}

.hotspot-vves-card {
  top: 34.2%;
  left: 2.6%;
  width: 46.5%;
  height: 12.3%;
}

.hotspot-business-card {
  top: 34.2%;
  right: 2.6%;
  width: 46.5%;
  height: 12.3%;
}

.hotspot-footer-cta {
  top: 71.25%;
  right: 7.3%;
  width: 19.7%;
  height: 3.3%;
  border-radius: 8px;
}

.anchor-target {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
}

@media (max-width: 600px) {
  .reference-image {
    min-height: 100vh;
    object-fit: contain;
    object-position: top center;
  }

  .hotspot {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}