*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #2a4682;
  color: #fff;
  overflow-x: hidden;
}

.page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
}

.hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* Transparent absolute overlays — percentages of the tall hero image */
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  cursor: pointer;
  /* Keep hit area visible to AT / focus without looking like a button chrome */
  background: transparent;
  border: 0;
  text-decoration: none;
}

.hotspot:focus-visible {
  outline: 3px solid #c6791d;
  outline-offset: 2px;
}

/* SIGN UP! badge → mailto */
.hotspot-signup {
  top: 90.32%;
  left: 30.84%;
  width: 39.29%;
  height: 3.14%;
}

/* Footer email HELLO@… → mailto */
.hotspot-email {
  top: 97.46%;
  left: 4.88%;
  width: 46.36%;
  height: 0.50%;
}

/* Instagram icon + @handle */
.hotspot-instagram {
  top: 97.87%;
  left: 4.88%;
  width: 39.04%;
  height: 0.76%;
}

/* Navy covers matching merch section bg (#2a4682) — belt-and-suspenders with painted image */
.buy-cover {
  position: absolute;
  z-index: 1;
  background: #2a4682;
  pointer-events: none;
}

.buy-cover-shirts {
  top: 73.11%;
  left: 30.26%;
  width: 40.85%;
  height: 1.34%;
}

.buy-cover-tumblers {
  top: 84.13%;
  left: 29.14%;
  width: 40.85%;
  height: 1.34%;
}