/* Critical header reservation — loaded render-blocking in every page . The site is multi-page, so each navigation reloads the document and nav.js re-injects the header. These rules hold the header bar's geometry + colour from the FIRST paint so it never collapses/flashes while nav.js runs; nav.js then fills in the links, dropdown, CTAs and full styling (with !important). */ header.nav { position: sticky; top: 0; z-index: 500; background: #fff; min-height: 68px; display: block; } .nav-inner { display: flex; align-items: center; height: 68px; gap: 28px; } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; } .brand-icon { width: 38px; height: 38px; border-radius: 6px; background: #2FBE66; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand-icon img { width: 72%; height: 72%; object-fit: contain; display: block; filter: brightness(0) invert(1); } .brand-type { display: block; height: 26px; width: auto; max-width: min(140px, 36vw); object-fit: contain; flex-shrink: 0; } @media (max-width: 720px) { header.nav { min-height: 60px; } .nav-inner { height: 60px; gap: 10px; } }