/* FieldKit logo Concept 1 (gold field-marker flag + Newsreader wordmark), preview 2026-10-04.
   The SVGs carry built-in padding (about 17% top and bottom), so heights here are a bit larger than the visible mark. */
.brand .brand-logo { display: block; height: 58px; width: auto; flex: none; margin-left: -10px; }
.brand.foot .brand-logo { height: 68px; }
.brand .lockup:empty { display: none; }
@media (min-width: 901px) and (max-width: 1300px) { .brand .brand-logo { height: 50px; } }
@media (max-width: 900px) { .brand .brand-logo { height: 48px; margin-left: -8px; } .brand.foot .brand-logo { height: 60px; } }

/* Tagline stacked under the logo.
   Shown at every width where it fits; sentence case so it reads exactly as written. */
.brand:has(.brand-logo) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.brand:has(.brand-logo) .lockup { display: flex; }
.brand:has(.brand-logo) .tagline { display: block; text-transform: none; letter-spacing: .02em; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-top: -8px; white-space: nowrap; }
.brand:has(.brand-logo) .tagline::before, .brand:has(.brand-logo) .tagline::after { content: none; display: none; }
.nav .brand:has(.brand-logo) .tagline { color: var(--pal-gold, #ebbd68); }
footer .brand:has(.brand-logo) .tagline { color: var(--pal-bronze, #8a6416); font-size: 13.5px; margin-top: -9px; }
@media (min-width: 901px) and (max-width: 1300px) { .nav .brand:has(.brand-logo) .tagline { font-size: 11.5px; margin-top: -7px; } }
/* 901 to 1399px: the full desktop nav leaves no room for the tagline, so the header shows the logo only.
   The tagline shows in the header at 1400px and up and on phones/tablets (900px and down), and in the footer at every width. */
@media (min-width: 901px) and (max-width: 1399px) { .nav .brand:has(.brand-logo) .tagline { display: none; } }
@media (min-width: 1101px) and (max-width: 1300px) { .nav-links { gap: 18px; } }
/* 901 to 1100px: tighten the nav a little so nine items fit on one line (live is already tight here) */
@media (min-width: 901px) and (max-width: 1100px) { .nav .brand .brand-logo { height: 42px; } .nav-links { gap: 12px; font-size: 13.5px; } .nav-links .btn { padding: 0 14px; font-size: 13.5px; } }
@media (min-width: 901px) and (max-width: 980px) { .nav .brand .brand-logo { height: 40px; } .nav-links { gap: 9px; font-size: 13px; } .nav-links .btn { padding: 0 12px; font-size: 13px; } }
@media (max-width: 360px) { .nav .brand:has(.brand-logo) .tagline { font-size: 10.5px; } }
@media (max-width: 900px) { .nav .brand:has(.brand-logo) .tagline { font-size: 11.5px; margin-top: -6px; } footer .brand:has(.brand-logo) .tagline { font-size: 12.5px; margin-top: -8px; } }
@media (max-width: 1180px) {
  .nav .nav-toggle { display: flex; }
  .nav .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; background: var(--pal-navy); }
  .nav .nav-links:not(.open) { display: none; }
  .nav .nav-links.open { display: flex; }
  .nav .nav-links a { padding-block: 10px; }
}
@media (min-width: 901px) and (max-width: 940px) { .nav-links { gap: 7px; font-size: 12.5px; } .nav-links .btn { padding: 0 11px; font-size: 12.5px; } } /* "How I help" label (v2) is longer than "Services" */