/* Keep the Multicon brand mark clear and proportionate on every screen size. */
.site-header { height: 108px; }
.brand { width: 225px; min-width: 185px; }
.brand img { height: 90px; }
.hero { height: calc(100vh - 108px); }

/* Tablets use the compact menu so the larger logo remains legible. */
@media (max-width: 1050px) {
  .site-header { height: 98px; padding: 6px 5%; }
  .brand { width: 205px; min-width: 170px; }
  .brand img { height: 82px; }
  .header-cta { display: none; }
  .menu-toggle { display: grid; gap: 4px; background: none; border: 0; margin-left: auto; }
  .menu-toggle span { display: block; height: 2px; width: 25px; background: var(--ink); }
  .main-nav { display: none; position: absolute; top: 97px; left: 0; right: 0; padding: 12px 6% 22px; background: #fff; box-shadow: 0 7px 15px #0001; flex-direction: column; align-items: flex-start; gap: 6px; }
  .main-nav.open { display: flex; }
  .hero { height: calc(100vh - 98px); }
}

@media (max-width: 680px) {
  .site-header { height: 86px; padding: 5px 6%; }
  .brand { width: 170px; min-width: 0; }
  .brand img { height: 76px; }
  .main-nav { top: 85px; }
  .hero { height: calc(100vh - 86px); }
}