/* Homepage hero (option A) */

.hero { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }

.hero__well {
  position: absolute; right: -5%; bottom: 0; z-index: 0;
  width: 66vw; min-width: 480px; max-width: 1400px; height: auto;
  pointer-events: none;
}

.hero__inner {
  position: relative; z-index: 1; flex: 1 1 auto; width: 100%;
  max-width: 1600px; margin: 0 auto; padding: 4vh 32px 5vh;
  display: flex; flex-direction: column; justify-content: space-around; gap: 24px;
}

.hero__title {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(56px, min(10.1vw, 16vh), 160px); line-height: 1; letter-spacing: -0.017em;
  width: 6.72em; max-width: 100%;
}

.hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__lead { margin: 0; font-size: 23px; line-height: 1.45; max-width: 540px;
  /* a paper background, like the outlined tag: the well's lines pass cleanly behind the text */
  background: var(--paper); padding: 6px 10px 6px 0; border-radius: 4px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* portrait tablets: a larger headline and well, so the tall screen doesn't feel empty */
@media (min-width: 701px) and (max-width: 1099px) and (orientation: portrait) {
  .hero__title { font-size: clamp(56px, 12.5vw, 140px); }
  .hero__well { width: 118vw; right: -22vw; }
}

@media (max-width: 700px) {
  .hero__inner { padding: 3vh 20px 36vw; gap: 40px; }
  .hero__title { font-size: clamp(44px, 13vw, 72px); }
  .hero__lead { font-size: 20px; }
  .hero__well { width: 125vw; min-width: 0; right: -32vw; }
}