@font-face {
  font-family: "Mulish Brand";
  src: url("../fonts/Mulish-VariableFont_wght.woff2") format("woff2"),
       url("../fonts/Mulish-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

.brand {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: max-content;
  font-family: "Mulish Brand", Mulish, sans-serif !important;
  line-height: 1 !important;
  text-align: center;
  text-shadow: none;
}

.brand img,
.brand .brand-logo {
  width: 174px !important;
  height: 114px !important;
  margin: 0 !important;
  object-fit: contain;
}

.brand > span,
.brand-copy {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0 !important;
  margin: -22px 0 0 !important;
  color: inherit;
  font-family: "Mulish Brand", Mulish, sans-serif !important;
  font-size: 25px !important;
  font-weight: 200 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  transform: scaleX(.72);
  transform-origin: center top;
  white-space: nowrap;
}

.brand-copy small { display: none !important; }

.nav.is-past-hero .brand img,
.nav.is-past-hero .brand-logo {
  width: 108px !important;
  height: 68px !important;
}

.nav.is-past-hero .brand > span,
.nav.is-past-hero .brand-copy {
  margin-top: -12px !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  .brand img,
  .brand .brand-logo {
    width: 128px !important;
    height: 84px !important;
  }

  .brand > span,
  .brand-copy {
    display: flex !important;
    margin-top: -14px !important;
    font-size: 18px !important;
  }
}