/* One visible mark size across the landing hero, inner-page header, and footer.
   Desktop: 390px × 1.2 × .85 = 397.8px, rounded to 398px. */
:root { --site-logo-width: 398px; }
.site-header { height: 146px; }
.site-header .brand,
.hero-brand img,
.footer-top img { width: var(--site-logo-width); max-width: 100%; }
.hero-brand img { transform: translateY(-20px); }

@media (max-width: 1200px) {
  :root { --site-logo-width: 326px; }
  .site-header { height: 122px; }
}

@media (max-width: 900px) {
  :root { --site-logo-width: 255px; }
  .site-header { height: 100px; }
}

@media (max-width: 700px) {
  :root { --site-logo-width: min(255px, calc(100vw - 96px)); }
  .site-header { height: 96px; }
  .hero-brand img { width: var(--site-logo-width); }
}