.brand-logo-crop {
  position: relative;
  display: block;
  width: 230px;
  height: 58px;
  overflow: hidden;
  background: #fff;
}

.site-header {
  height: 100px;
  background: rgba(255, 255, 255, 0.97);
}

.site-header .brand {
  gap: 13px;
}

.brand-symbol {
  display: block;
  width: 42px;
  height: 80px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-wordmark {
  position: relative;
  display: block;
  padding-bottom: 10px;
  color: #082e71;
  font: 700 29px/1 "Space Grotesk", Manrope, sans-serif;
  letter-spacing: -1px;
  white-space: nowrap;
}

.brand-wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #ffd400;
}

.brand-wordmark sup {
  margin-left: 2px;
  font: 700 9px/1 Manrope, sans-serif;
  vertical-align: top;
}

.brand-logo-crop img {
  position: absolute;
  left: -29px;
  bottom: 0;
  display: block;
  width: 268px;
  max-width: none;
  height: auto;
}

.footer-brand .brand-logo-crop {
  width: 205px;
  height: 51px;
}

.footer-brand .brand-logo-crop img {
  left: -26px;
  width: 239px;
}

@media (max-width: 900px) {
  .site-header {
    height: 78px;
  }

  .site-header nav {
    top: 78px;
  }
}

@media (max-width: 560px) {
  .brand-symbol {
    width: 29px;
    height: 56px;
  }

  .brand-wordmark {
    padding-bottom: 7px;
    font-size: 23px;
    letter-spacing: -0.5px;
  }

  .brand-wordmark::after {
    height: 3px;
  }

  .site-header .brand-logo-crop {
    width: 184px;
    height: 46px;
  }

  .site-header .brand-logo-crop img {
    left: -23px;
    width: 214px;
  }
}