/* Layout is expressed in "u" units: 1u = 1px of the 780px-wide Figma mockup,
   scaled to the viewport and capped so it stays sane on very wide screens. */
:root {
  --u: calc(min(100vw, 1440px) / 780);
  --orange: #fd6937;
  --green: #d6ef74;
  --pink: #fcb8da;
  --blue: #bfcbf8;
  --ink: #000;
}

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

html, body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p { margin: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(327 * var(--u));
  overflow: hidden;
  text-align: center;
}

.hero h1 {
  position: absolute;
  left: 0; right: 0;
  top: calc(121.7 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tagline {
  position: absolute;
  left: 0; right: 0;
  top: calc(185.7 * var(--u));
  font-size: max(calc(12.5 * var(--u)), 9px);
  font-weight: 800;
  line-height: 1;
}

.nose {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.nose--top-right { width: calc(122 * var(--u)); right: calc(-49 * var(--u));  top: calc(-2 * var(--u)); }
.nose--right     { width: calc(138 * var(--u)); right: calc(-77 * var(--u));  top: calc(190 * var(--u)); }
.nose--left      { width: calc(236 * var(--u)); left: calc(-167 * var(--u)); top: calc(55 * var(--u)); }

/* ---------- Colour bands ---------- */
.band {
  position: relative;
  height: calc(408 * var(--u));
  overflow: hidden;
}
.band--orange { background: var(--orange); }
.band--green  { background: var(--green); }
.band--pink   { background: var(--pink); }
.band--blue   { background: var(--blue); }

.strip {
  display: flex;
  padding-left: calc(49 * var(--u));
  height: calc(81 * var(--u));
  white-space: nowrap;
}
.strip img {
  flex: none;
  display: block;
  width: calc(48.7 * var(--u));
  height: 100%;
  object-fit: cover;
}

.band h2 {
  position: absolute;
  left: calc(var(--x) * var(--u));
  right: calc(20 * var(--u));
  top: calc(165 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: calc(81 * var(--u));
}

/* ---------- Footer ---------- */
footer {
  height: calc(41 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(calc(12.5 * var(--u)), 9px);
}