.brand-logo {
  width: 145px;
  height: 39px;
  overflow: hidden;
  position: relative;
}

.brand-logo img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 145px;
  height: auto;
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
  transition: filter .3s ease;
}

body.light .site-header .brand-logo img { filter: none; }

/* Larger header mark without changing header or hero height. */
.site-header .brand-logo { width: 290px; height: 64px; }
.site-header .brand-logo img { width: 290px; }

@media (max-width: 1180px) {
  .site-header .brand-logo { width: 230px; height: 55px; }
  .site-header .brand-logo img { width: 230px; }
}

@media (max-width: 720px) {
  .brand-logo { width: 122px; height: 33px; }
  .brand-logo img { width: 122px; }
  .site-header .brand-logo { width: 180px; height: 45px; }
  .site-header .brand-logo img { width: 180px; }
}