* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Coral behind the bottom safe area so the mobile bottom bar reads coral */
  background: #ff5757;
  overflow: hidden;
}

/*
  The hero fills the whole viewport. The background photo covers it (no black
  bars), and every foreground layer is positioned in percentages relative to
  the hero, so the composition scales together on any screen.
*/
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.layer {
  position: absolute;
  display: block;
}

/*
  Coral strip pinned to the very bottom edge of the screen. Mobile browsers
  colour the bottom toolbar by sampling the page at that edge, so this makes
  the bottom bar coral while the sky keeps the top bar blue. It also fills the
  home-indicator safe area on phones.
*/
.browser-bar-bottom {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: #ff5757;
  z-index: 20;
  pointer-events: none;
}

/* Only relevant on touch devices that have browser chrome to colour */
@media (pointer: coarse) {
  .browser-bar-bottom {
    display: block;
  }
}

.layer--bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 1;
}

/* The moai farmer, bottom-left, standing on the road */
.layer--farmer {
  left: 1.5%;
  bottom: 0;
  height: 94%;
  width: auto;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/*
  The logo, script text and footer logo are centred within the open space to
  the right of the farmer. The farmer's right edge sits around 36% of the
  width, so the centre of that gap is roughly 68%.
*/

/* MOAI life.co.uk logo, centred in the right-hand gap */
.layer--logo {
  top: 6%;
  left: 68%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 760px;
  height: auto;
  z-index: 4;
}

/* "We'll be with you shortly..." script text, beneath the logo */
.layer--shortly {
  top: 35%;
  left: 68%;
  transform: translateX(-50%);
  width: 46%;
  max-width: 680px;
  height: auto;
  z-index: 5;
}

/* MOAI systems.com logo, aligned under the block, clickable */
.layer--systems {
  bottom: 4%;
  left: 68%;
  transform: translateX(-50%);
  width: 16%;
  max-width: 230px;
  z-index: 6;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.layer--systems img {
  display: block;
  width: 100%;
  height: auto;
}

.layer--systems:hover,
.layer--systems:focus-visible {
  transform: translateX(-50%) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.layer--systems:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  border-radius: 4px;
}

/*
  Portrait / narrow screens: the photo is cropped to its centre by object-fit,
  keeping the field and road. We enlarge the figure and stack the wording so
  everything stays legible without black bars.
*/
@media (max-aspect-ratio: 1 / 1) {
  .layer--farmer {
    height: 46%;
    left: -4%;
  }
  .layer--logo {
    top: 7%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 76%;
  }
  .layer--shortly {
    top: 25%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 74%;
  }
  .layer--systems {
    width: 34%;
    left: 50%;
    bottom: 5%;
  }
}

@media (max-aspect-ratio: 1 / 1) and (max-width: 480px) {
  .layer--farmer {
    height: 42%;
  }
  .layer--shortly {
    top: 27%;
    left: 50%;
    width: 84%;
  }
}