:root {
  --page-background: #f7f3e8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--page-background);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page-background);
}

/*
  Responsive behaviour:
  - Large desktop: artwork expands to almost the full browser width,
    capped at 1440px for readability.
  - Laptop/tablet: artwork uses 97% of the viewport.
  - Mobile: artwork uses the full screen width.
*/
.page {
  position: relative;
  width: min(96vw, 1440px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--page-background);
}

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

.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  text-decoration: none;
}

/* Top navigation */
.nav-home {
  left: 51.8%;
  top: 1.6%;
  width: 6.5%;
  height: 2.1%;
}

.nav-about {
  left: 60.0%;
  top: 1.6%;
  width: 8.5%;
  height: 2.1%;
}

.nav-services {
  left: 70.2%;
  top: 1.6%;
  width: 10.8%;
  height: 2.1%;
}

.nav-contact {
  left: 83.0%;
  top: 1.6%;
  width: 10.5%;
  height: 2.1%;
}

/* Appointment / WhatsApp panel */
.whatsapp-main {
  left: 16.8%;
  top: 33.8%;
  width: 62.8%;
  height: 5.3%;
}

/* Contact section */
.whatsapp-contact {
  left: 23.2%;
  top: 63.0%;
  width: 20.0%;
  height: 7.2%;
}

.email-contact {
  left: 45.0%;
  top: 63.0%;
  width: 22.5%;
  height: 7.2%;
}

/* Location section */
.map-area {
  left: 6.4%;
  top: 76.8%;
  width: 52.4%;
  height: 14.4%;
}

/* Bottom-right floating WhatsApp button */
.floating-whatsapp {
  right: 4.0%;
  bottom: 2.0%;
  width: 7.0%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
}

.anchor-top {
  top: 0;
}

.anchor-about {
  top: 22%;
}

.anchor-services {
  top: 41%;
}

.anchor-contact {
  top: 61%;
}

/* Standard laptops and tablets */
@media (max-width: 1100px) {
  .page {
    width: 98vw;
  }
}

/* Mobile devices */
@media (max-width: 600px) {
  .page {
    width: 100vw;
    max-width: none;
  }
}