/* Brand tokens and the text wordmark. Loaded LAST on every page.
 * Palette follows the live pages: navy #001D41 / dark navy #001030, blue #004FDE, aqua #98DBF8, greys #F3F5F7 / #D9DEE2.
 * THE WORDMARK lives in two places only: partials/wordmark.html (markup) and the .fad-wordmark rules below (style).
 * Run `npm run wordmark` to re-apply the partial to every page. See README "Swapping the wordmark for a final logo". */
:root {
  --navy: #001D41; --dnavy: #001030; --blue: #004FDE; --aqua: #98DBF8; --grey-1: #F3F5F7; --grey-2: #D9DEE2;
}
.fad-wordmark {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: -.02em;
  line-height: 1; text-decoration: none; display: inline-flex; gap: .28em; align-items: baseline; white-space: nowrap;
}
.fad-wordmark:hover { text-decoration: none; }
.fad-wordmark__a { color: #fff; }
.fad-wordmark__b { color: var(--aqua); }
.fad-wordmark--nav { font-size: 24px; padding: 6px 0; }
.fad-wordmark--hero { font-size: clamp(40px, 7vw, 72px); }
.fad-wordmark--foot { font-size: 20px; margin-bottom: 10px; }
.fad-wordmark:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; border-radius: 4px; }
.hero-logo { display: flex; justify-content: center; }
footer .fad-wordmark--foot { display: inline-flex; }