/* Wide hero: preserve the content width and reserve a separate control row. */
@media (min-width: 1800px) {
  .hero {
    --nf-hero-gutter: max(7vw, calc((100vw - 1440px) / 2 + 100px));
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: clamp(630px, calc(100svh - var(--header)), 1000px);
    max-height: none;
  }

  .hero .hero-copy {
    flex: none;
    width: min(860px, calc(100% - var(--nf-hero-gutter) - 7vw));
    max-width: none;
    margin-left: var(--nf-hero-gutter);
    margin-right: 7vw;
    padding-left: 0;
    padding-right: 0;
  }

  .hero .hero-bottom {
    position: relative;
    flex: none;
    left: auto;
    right: auto;
    bottom: auto;
    margin: auto 130px 0 var(--nf-hero-gutter);
    padding-top: 40px;
    padding-bottom: 30px;
  }
}