.brand,
.login-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  flex-shrink: 0;
  width: fit-content;
}

.brand-logo {
  display: block;
  width: 172px;
  max-width: 100%;
  height: auto;
  transition: filter 400ms ease;
}

/* Keep the same platinum lettering legible on the pale sticky header. */
.site-header.is-scrolled:not(.is-menu-open) .brand-logo {
  filter: brightness(0.46) contrast(1.15);
}

/* Leave room for the complete navigation at smaller desktop widths. */
@media (min-width: 901px) and (max-width: 1200px) {
  .header-contact {
    display: none;
  }

  .desktop-nav {
    gap: 26px;
  }
}

@media (max-width: 600px) {
  .brand-logo {
    width: clamp(126px, 36vw, 146px);
  }

  .site-header.is-scrolled:not(.is-menu-open) .brand-logo {
    width: clamp(118px, 33vw, 136px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo {
    transition: none;
  }
}