* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.page-shell {
  position: relative;
  width: min(100%, 1024px);
  margin: 0 auto;
  line-height: 0;
  background: #000;
}

.page-art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  background: transparent;
  outline: none;
}

.hotspot:focus-visible {
  outline: 2px solid #d9a441;
  outline-offset: 2px;
  background: rgba(217, 164, 65, 0.08);
}

/* Positions based on the approved 1024 × 1536 preview */
.logo-top       { left: 1.4%;  top: 0.7%;  width: 22.8%; height: 4.7%; }
.home           { left: 26.8%; top: 1.3%;  width: 4.4%;  height: 2.5%; }
.about          { left: 31.9%; top: 1.3%;  width: 4.8%;  height: 2.5%; }
.services       { left: 36.8%; top: 1.3%;  width: 5.7%;  height: 2.5%; }
.lifestyle      { left: 42.7%; top: 1.2%;  width: 10.7%; height: 2.7%; }
.wine           { left: 53.4%; top: 1.1%;  width: 17.7%; height: 2.9%; }
.service-areas  { left: 71.8%; top: 1.2%;  width: 7.2%;  height: 2.7%; }
.why            { left: 79.3%; top: 1.2%;  width: 8.1%;  height: 2.7%; }
.consult-top    { left: 87.6%; top: 1.0%;  width: 11.2%; height: 3.2%; }

.consult-bottom { left: 43.8%; top: 95.8%; width: 18.6%; height: 2.0%; }

.logo-bottom    { left: 1.4%;  top: 96.2%; width: 22.5%; height: 3.5%; }
.phone          { left: 28.3%; top: 96.7%; width: 10.0%; height: 1.2%; }
.email          { left: 28.3%; top: 97.8%; width: 17.0%; height: 1.4%; }

@media (max-width: 700px) {
  .page-shell {
    width: 100%;
    overflow-x: hidden;
  }
}