/* Layout B — fold and rhythm refinement. Loaded after revision.css. */
:root {
  --header-height: 86px;
  --hero-floor: calc(100svh - var(--header-height));
}

/* The opening is a self-contained desktop screen: header + hero = one fold. */
@media (min-width: 801px) {
  .hero {
    min-height: var(--hero-floor);
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding-block: clamp(56px, 8vh, 104px);
  }

  .hero-copy > p:not(.kicker) {
    max-width: 26rem;
  }

  .hero-photo,
  .hero-brand {
    min-height: 0;
  }

  .hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 801px) and (max-height: 680px) {
  .hero-copy {
    padding-block: 40px;
  }

  .hero h1 {
    font-size: clamp(34px, 3.5vw, 48px);
  }
}

/* Keep the same rule on touch devices without forcing a cramped fixed height. */
@media (max-width: 800px) {
  :root {
    --header-height: 78px;
  }

  .hero {
    min-height: var(--hero-floor);
  }

  .hero-copy {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero-copy {
    min-height: calc(var(--hero-floor) - 290px);
  }
}