html, body {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  min-height: 100%;
}

.homepage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Invisible clickable navigation areas over the approved mockup */
.click-nav a {
  position: absolute;
  top: 4.5%;
  height: 6%;
  text-indent: -9999px;
  overflow: hidden;
}

.click-nav .about { left: 18%; width: 15%; }
.click-nav .work { left: 43%; width: 14%; }
.click-nav .contact { left: 65%; width: 18%; }

@media (max-width: 768px) {
  .hero-image {
    width: 100vw;
    min-height: 100vh;
    object-fit: cover;
    object-position: center top;
  }
}