/* Single-line brand slogan: keep the registered fonts and square image slot. */
body[data-page-id="index"] .hero h1 {
  white-space: nowrap;
  line-height: 1.2;
}

@media (min-width: 1100px) {
  body[data-page-id="index"] .hero {
    padding-block: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    column-gap: clamp(48px, 4.4vw, 72px);
  }

  body[data-page-id="index"] .hero-art {
    align-self: center;
    width: 100%;
    max-width: 560px;
    justify-self: end;
  }

  body[data-page-id="index"] .hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding-top: 56px;
  }

  body[data-page-id="index"] .hero-lead { margin-top: 22px; }
  body[data-page-id="index"] .hero-bottom {
    margin-top: auto;
    min-height: 51px;
    padding-top: 15px;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  body[data-page-id="index"] .hero h1 {
    font-size: clamp(38px, 5.1vw, 56px);
  }
}

@media (max-width: 767px) {
  body[data-page-id="index"] .hero {
    padding-top: 32px;
    row-gap: 26px;
  }

  body[data-page-id="index"] .hero h1 {
    font-size: clamp(42px, 13.5vw, 54px);
  }

  body[data-page-id="index"] .hero-lead { margin-top: 18px; }
  body[data-page-id="index"] .hero-description { margin-top: 10px; }
  body[data-page-id="index"] .hero .actions {
    margin-top: 22px;
    gap: 18px 14px;
  }
  body[data-page-id="index"] .hero-bottom { margin-top: 24px; }
}