/* AF4U shared header styling. Single source for the brand header + nav. */
.top-stripe, header.brand { --navy: #002868; --navy-d: #001a4a; --navy-dd: #000d2a; --red: #BF0A30; --red-d: #8a061e; --gold: #C9971B; --gold-l: #E5B238; --green: #22C55E; --green-d: #15803d; --cream: #F5EFE0; --paper: #FCFAF4; --ink: #1a1a1a; --muted: rgba(255,255,255,0.7); --line: rgba(255,255,255,0.12); }

.top-stripe { height: 5px; background: var(--red); position: relative; z-index: 10; }
.elai-mark { font-weight: 800; color: var(--gold); letter-spacing: 0.02em; }
header.brand { position: relative; z-index: 10; max-width: 1180px; margin: 0px auto; padding: 22px 32px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand-mark { width: 42px; height: 53px; flex-shrink: 0; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: rgb(255, 255, 255); text-transform: uppercase; }
.brand-tag { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 3px; }
nav.main-nav { display: flex; gap: 24px; }
nav.main-nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255, 255, 255); text-decoration: none; padding: 5px 0px; border-bottom: 2px solid transparent; transition: 150ms; }
nav.main-nav a:hover { color: var(--gold); border-bottom-color: rgba(201, 151, 27, 0.5); }
.skip-link { position: absolute; top: -100px; left: 0px; background: var(--gold); color: var(--navy-dd); padding: 8px 16px; font-weight: 700; z-index: 1000; text-decoration: none; }
.skip-link:focus { top: 0px; }

@media (max-width: 720px) {
  header.brand { flex-direction: column; gap: 14px; padding: 16px 20px; }
  nav.main-nav { width: 100%; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
}