/* The approved AdWords logo includes its own wordmark and clear space.
   Give the complete square image room to remain legible without cropping,
   redrawing, recolouring, or adding a second typed company name. */
:root {
  --brand-header-height: 144px;
  --brand-header-logo-size: 140px;
}

/* One shared height keeps the header, mobile menu, and anchor spacing aligned.
   This file loads after the existing styles so those older heights do not win. */
html {
  scroll-padding-top: calc(var(--brand-header-height) + 8px);
}

.site-header {
  height: var(--brand-header-height);
}

.brand {
  gap: 0;
}

.brand-logo {
  display: block;
  width: var(--brand-header-logo-size);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
}

/* The logo's original dark green stays unchanged on a paper background.
   A larger footer image makes the company name readable at the end of a page. */
.site-footer .brand-plate {
  background: var(--paper);
  border-radius: 8px;
}

.site-footer .brand-logo {
  width: 170px;
}

/* Keep the expanded navigation comfortable beside the taller square logo
   in the narrow desktop range, before the existing mobile menu takes over. */
@media (min-width: 801px) and (max-width: 1100px) {
  .main-nav {
    gap: 18px;
    font-size: 15px;
  }

  .main-nav .button-small {
    gap: 12px;
    padding-inline: 16px;
  }
}

/* A compact mobile header preserves the whole artwork. The menu begins
   immediately below the header rather than overlapping the enlarged logo. */
@media (max-width: 800px) {
  :root {
    --brand-header-height: 120px;
    --brand-header-logo-size: 116px;
  }

  .main-nav {
    top: var(--brand-header-height);
  }
}