/* HEADER BRAND V34
   Light mode: original horizontal color logo.
   Dark mode: exact original round logo + HTML wordmark. */

header#header {
  border-bottom: 1px solid rgba(30,42,51,.12);
  background: color-mix(in srgb,var(--bg) 94%,transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] header#header {
  border-bottom-color: rgba(255,255,255,.12);
  background: color-mix(in srgb,#11171b 93%,transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.24);
}

header#header.scrolled {
  border-bottom-color: rgba(171,27,20,.24);
  box-shadow: 0 10px 28px rgba(23,32,39,.08);
}

.brand-logo .logo-dark-lockup {
  display: none;
}

html[data-theme="dark"] .brand-logo .logo-light {
  display: none !important;
}

html[data-theme="dark"] .brand-logo .logo-dark-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
  color: #fff;
}

.logo-dark-lockup > img {
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px;
  border-radius: 50%;
  object-fit: contain;
}

.logo-dark-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.logo-dark-copy strong {
  color: #fff;
  font: 800 20px/1 "Montserrat",sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.logo-dark-copy small {
  color: rgba(255,255,255,.68);
  font: 700 9px/1.1 "Montserrat",sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width:1451px) {
  html[data-theme="dark"] .brand-logo {
    flex: 0 0 330px !important;
    max-width: 330px !important;
  }

  html[data-theme="dark"] header.scrolled .brand-logo {
    flex-basis: 235px !important;
    max-width: 235px !important;
  }

  html[data-theme="dark"] header.scrolled .logo-dark-lockup > img {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px;
  }

  html[data-theme="dark"] header.scrolled .logo-dark-copy strong {
    font-size: 16px;
  }
}

@media (max-width:1450px) {
  .logo-dark-lockup > img {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px;
  }

  .logo-dark-copy strong {
    font-size: 16px;
  }

  .logo-dark-copy small {
    font-size: 8px;
  }
}

@media (max-width:700px) {
  html[data-theme="dark"] .brand-logo .logo-dark-lockup {
    gap: 8px;
  }

  .logo-dark-lockup > img {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px;
  }

  .logo-dark-copy strong {
    font-size: 14px;
  }

  .logo-dark-copy small {
    display: none;
  }
}