.brand-logo {
  display: block;
  width: 286px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
}

.brand {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.brand::after {
  content: 'INDUSTRIAL GELATIN & GLUE';
  display: block;
  margin-top: 1px;
  color: var(--ink-soft);
  font: 700 10px var(--mono);
  letter-spacing: .15em;
  white-space: nowrap;
}

.site-header { height: 104px; }

.footer-brand .brand-logo {
  width: 235px;
  max-height: 66px;
}

.main-nav { gap: 18px; }
.main-nav a:not(.nav-cta) { padding: 10px 9px; font-size: 15px; font-weight: 800; border-bottom: 2px solid transparent; }
.main-nav a:not(.nav-cta):hover, .main-nav a.active { color: var(--orange); border-bottom-color: var(--orange); }
.topline.contact-bar { justify-content: flex-start; align-items: center; gap: 28px; }
.topline.contact-bar a, .topline.contact-bar .contact-bar-address { white-space: nowrap; }

@media (max-width: 850px) {
  .brand-logo,
  .footer-brand .brand-logo {
    width: 225px;
    height: auto;
    max-height: 56px;
  }

  .site-header { height: 88px; }
  .main-nav { top: 88px; }
  .brand::after { font-size: 9px; letter-spacing: .12em; }
  .topline.contact-bar { gap: 14px; }
  .main-nav a:not(.nav-cta) { font-size: 16px; padding: 8px 0; }
}