* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #07516b; }
.landing {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #07516b;
}
/* Keep the source artwork's 16:9 proportions at every viewport width. */
.artwork { display: block; width: 100%; height: auto; }
.artwork img { display: block; width: 100%; height: auto; }
.contact-hotspots { position: absolute; z-index: 1; left: 27.7%; top: 47.19vw; width: 44.7%; height: 2.36vw; direction: ltr; }
.hotspot { position: absolute; top: 0; height: 100%; }
.email { left: 0; width: 34%; }
.phone-one { left: 35%; width: 23%; }
.phone-two { left: 59%; width: 24%; }
.contact { right: 0; width: 16%; }

/* On portrait screens, center the complete uncropped image vertically. */
@media (max-aspect-ratio: 16 / 9) {
  .landing { min-height: 100svh; display: flex; align-items: flex-start; }
  .artwork { flex: 0 0 auto; }
}
@media (max-width: 700px) {
  /* Use the supplied mobile composition as-is, preserving its full decoration and spacing. */
  .landing { align-items: center; }
  .contact-hotspots { top: calc(50svh + 71.3vw); left: 0; width: 100%; height: 6.4vw; }
  .email { left: 5%; width: 34%; }
  .phone-one { left: 43%; width: 24%; }
  .phone-two { left: 70%; width: 25%; }
  .contact { left: 41%; right: auto; top: -2.5vw; width: 18%; height: 3vw; }
}