/* Keep the desktop navigation on one clean, stable line. */
@media (min-width: 961px) {
  .site-header__inner {
    max-width: 1480px;
    gap: clamp(24px, 3vw, 56px);
  }

  .site-header__brand {
    flex: 0 0 auto;
  }

  .site-nav {
    min-width: 0;
    margin-left: auto;
  }

  .site-nav__list {
    flex-wrap: nowrap;
    gap: clamp(18px, 2vw, 38px);
  }

  .site-nav__link {
    display: block;
    padding-bottom: 0;
    line-height: 1.3;
    white-space: nowrap;
  }

  .site-nav__item--cta {
    flex: 0 0 auto;
  }

  .site-nav__item--cta .site-nav__link--cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1.25rem;
    line-height: 1;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
}

/* The warm CTA background needs a light foreground in every state. */
.site-nav__item--cta .site-nav__link--cta,
.site-nav__item--cta .site-nav__link--cta:hover,
.site-nav__item--cta .site-nav__link--cta:focus-visible {
  color: #fff8eb;
}

/* Hero and content primary buttons use the same warm background. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff8eb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* The toggle contains two bars, so both must remain visible to form the X. */
.nav-toggle--open .nav-toggle__bar:nth-child(2) {
  opacity: 1;
}

.nav-toggle--open .nav-toggle__bar:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle--open .nav-toggle__bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}