:root {
  --page-bg: #f7f2e9;
  --ink: #23392e;
  --accent: #b69456;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.page-shell {
  position: relative;
  width: min(100%, 1024px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 18px 70px rgba(25, 32, 26, .14);
}

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

.hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  text-indent: -9999px;
  overflow: hidden;
}
.hotspot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  background: rgba(182,148,86,.18);
}

/* Positions are percentages of the approved 1024x1536 mockup. */
.nav-home { left: 27.5%; top: 2.1%; width: 4.4%; height: 2%; }
.nav-living { left: 33.7%; top: 2.1%; width: 9.7%; height: 2%; }
.nav-wellness { left: 46.5%; top: 2.1%; width: 8.3%; height: 2%; }
.nav-about { left: 57.5%; top: 2.1%; width: 5.8%; height: 2%; }
.nav-tech { left: 66%; top: 2.1%; width: 8.7%; height: 2%; }
.nav-gallery { left: 77.1%; top: 2.1%; width: 7%; height: 2%; }
.nav-contact { left: 86.5%; top: 2.1%; width: 6.6%; height: 2%; }
.hero-tour { left: 4.2%; top: 25.9%; width: 12.8%; height: 2.9%; }
.hero-learn { left: 18.3%; top: 25.9%; width: 11.8%; height: 2.9%; }
.bottom-tour { left: 39.4%; top: 86.2%; width: 20%; height: 2.7%; }

.seo-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 1200px) {
  body { padding: 18px 0; }
  .page-shell { border-radius: 12px; overflow: hidden; }
}

@media (max-width: 600px) {
  body { background: #fff; }
  .page-shell { box-shadow: none; }
}