:root { --cream: #F8F6F3; --brown: #4E4135; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: #e5ddd2;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  /* allow scroll so full mockup shows — no crop */
  overflow-x: hidden;
  overflow-y: auto;
}
img { display: block; max-width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 5;
  background: var(--brown); color: #fff; padding: .6rem 1rem;
  border-radius: .5rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.hp { position: absolute; left: -5000px; }

.wrap { width: 100%; margin: 0; }
.stage { position: relative; width: 100%; line-height: 0; }
/* Full mockup — never crop with object-fit cover */
.stage img {
  width: 100%;
  height: auto;
  object-fit: unset;
}
.stage-desktop { display: none; }

.hit {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  background: transparent;
  z-index: 2;
}
.hit input[type="email"] {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--brown);
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  caret-color: var(--brown);
}
.hit input[type="email"]::placeholder { color: transparent; }
.hit input[type="email"]:focus {
  outline: 2px solid rgba(214,176,145,0.7);
  outline-offset: 1px;
  background: rgba(255,255,255,0.35);
}
.hit button {
  width: 100%;
  border: none;
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.hit button:focus-visible {
  outline: 2px solid rgba(214,176,145,0.9);
  outline-offset: 2px;
}
.hit-phone {
  left: 50.8%;
  width: 43%;
  top: 55.2%;
  height: 8.03%;
  display: grid;
  grid-template-rows: 1fr 0.97fr;
  gap: 11.5%;
  flex-direction: unset;
}
.hit-phone input[type="email"] {
  height: 100%;
  padding: 0 3% 0 14%; /* clear envelope icon in the art */
  font-size: clamp(14px, 3.6vw, 17px);
}
.hit-phone button {
  height: 100%;
  padding: 0;
}
.hit-desktop {
  left: 5%;
  width: 27.5%;
  top: 44.8%;
  height: 13%;
  display: grid;
  grid-template-rows: 1fr 0.98fr;
  gap: 10.9%;
  flex-direction: unset;
}
.hit-desktop input[type="email"] {
  height: 100%;
  padding: 0 3% 0 12%;
  font-size: clamp(14px, 1.1vw, 18px);
}
.hit-desktop button {
  height: 100%;
  padding: 0;
}

@media (min-width: 800px) {
  body { background: #f4f0ec; }
  .stage-phone { display: none; }
  .stage-desktop { display: block; }
  /* desktop also shows FULL mockup (scroll if needed) — no cover crop */
  .stage img {
    width: 100%;
    height: auto;
  }
}