/* Hero = photo + name + measurements, sized to fill exactly one screen on laptop/desktop. */
.hero {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  padding-bottom: 40px; /* gap under the measurements so their bottom line is visible */
}

.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-block: 24px 32px;
}

/* Raise or lower the name block: change padding-bottom (bigger = higher). */
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding-bottom: 120px;
}
.hero__name { font-size: var(--text-h1); line-height: .95; letter-spacing: -0.01em; }
.hero__text .button-row { margin-top: 16px; }

/* The photo stretches to whatever height is left after the measurements */
.hero__media { position: relative; min-height: 0; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
}

/* Measurements strip inside the hero: line above and below */
.hero .stats { flex: none; }
.hero .stats__grid { padding-block: 22px; }

/* Shorter laptop screens: tighten everything so it still fits in one view */
@media (min-width: 761px) and (max-height: 760px) {
  .hero__inner { padding-block: 16px 24px; }
  .hero__name { font-size: clamp(48px, 6.5vw, 88px); }
  .hero__text { padding-bottom: 60px; }
  .hero .stats__grid { padding-block: 16px; }
  .hero .stats dd { font-size: 24px; }
}

@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; padding-bottom: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 8px 32px; }
  .hero__media { order: -1; min-height: 0; }
  .hero__media img { position: static; height: 52svh; }
  .hero__text { padding-bottom: 0; }
}