:root {
  --page-max: 1920px;
  --focus: #00e5d0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #020a18; }
body {
  margin: 0;
  background: #020a18;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .8rem 1rem;
  background: #fff;
  color: #000;
  border-radius: .3rem;
}
.skip-link:focus { top: 1rem; }

.site-canvas {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  background: #020a18;
  overflow: hidden;
}

.visual-section {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.visual-section > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.semantic-copy,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  z-index: 6;
  display: block;
  padding: 0;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hotspot:focus-visible {
  outline: max(2px, .12vw) solid var(--focus);
  outline-offset: max(2px, .12vw);
}

/* Approved header interaction map */
.logo-link     { left: 2.2%; top: 1.4%; width: 18.5%; height: 7%; }
.nav-shift     { left: 26.4%; top: 1.2%; width: 8.5%; height: 7.5%; }
.nav-how       { left: 35.4%; top: 1.2%; width: 10.2%; height: 7.5%; }
.nav-markets   { left: 46.8%; top: 1.2%; width: 8.0%; height: 7.5%; }
.nav-agencies  { left: 55.0%; top: 1.2%; width: 10.7%; height: 7.5%; }
.nav-insights  { left: 66.0%; top: 1.2%; width: 8.3%; height: 7.5%; }
.nav-scan      { left: 79.8%; top: 1.0%; width: 17.7%; height: 7.8%; }

/* Pathway cards */
.pathway-one   { left: 3.2%; top: 15%; width: 30.0%; height: 82%; }
.pathway-two   { left: 34.5%; top: 15%; width: 29.4%; height: 82%; }
.pathway-three { left: 65.2%; top: 15%; width: 30.5%; height: 82%; }

/* Market cards */
.market-one  { left: 3.3%; top: 28%; width: 17.4%; height: 68%; }
.market-two  { left: 21.2%; top: 28%; width: 17.4%; height: 68%; }
.market-three{ left: 39.1%; top: 28%; width: 17.4%; height: 68%; }
.market-four { left: 57.1%; top: 28%; width: 18.0%; height: 68%; }
.market-five { left: 75.7%; top: 28%; width: 19.0%; height: 68%; }

.insights-button { left: 4.5%; top: 73%; width: 23%; height: 18%; }
.footer-primary  { left: 4.6%; top: 49%; width: 21%; height: 26%; }
.footer-secondary{ left: 27.5%; top: 49%; width: 16%; height: 26%; }

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