/* Hero hierarchy and spacing; motion is handled separately. */
@media (min-width: 901px) {
  .hf-body {
    max-width: calc(880px + 2 * var(--page-gutter));
    padding-block: clamp(32px, 5vh, 56px);
  }

  .hf-title,
  .hf-sub {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    text-align: left;
  }

  .hf-title {
    font-size: clamp(52px, 4.8vw, 72px);
    line-height: 1.18;
  }

  :root[lang="en"] .hf-title {
    font-size: clamp(56px, 5.6vw, 80px);
    line-height: 1.06;
  }

  .hf-sub {
    margin-top: 20px;
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
  }

  .hf-act {
    max-width: var(--hero-content);
    margin-top: 32px;
    gap: 20px;
  }

  .hf-actions {
    gap: 64px;
  }

  .hf-actions .hf-request {
    min-height: 56px;
    padding: 10px 18px;
    font-size: 20px;
    font-weight: 700;
  }

  .hf-foot {
    max-width: var(--wrap);
    padding-bottom: 28px;
  }

  .hf-stats {
    gap: 24px;
  }

  .hf-stats li {
    grid-template-rows: minmax(2.75em, auto) auto;
    gap: 8px;
  }

  .hf-stats b {
    font-size: clamp(32px, calc(32px + (100vw - 1100px) * .024), 40px);
    line-height: 44px;
  }

  .hf-stats > li > span {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (min-width: 1100px) {
  .hf-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9em, (100% - 120px) / 6)), 1fr));
  }
}

@media (max-width: 900px) {
  .hf-title {
    font-size: clamp(36px, 10vw, 44px);
    overflow-wrap: anywhere;
  }

  .hf-title i {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hf-sub {
    width: 100%;
  }
}