.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; --nav-fg: var(--fg); --nav-logo: var(--logo);
  transform: translateY(var(--header-shift, 0px)); will-change: transform;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out); }
html[data-nav-chrome="light"] .hdr { --nav-fg: var(--neutral-white); --nav-logo: var(--neutral-white); }
.hdr[data-appearance][data-scrolled] { --nav-fg: var(--fg); --nav-logo: var(--logo); background-color: var(--bg); }
html[data-intro="play"] .hdr { opacity: 0; animation: nav-reveal .75s ease-in-out var(--intro-nav-delay, 1.775s) forwards; }
@keyframes nav-reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html[data-intro="play"] .hdr { opacity: 1; animation: none; }
  .hdr { transition: none; }
}
.hdr__skip:focus { position: absolute; left: 16px; top: 16px; z-index: 100; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
  white-space: normal; border-radius: 6px; background: var(--blue-ink); color: var(--neutral-white); padding: 8px 16px; font-size: 1rem; font-weight: 500; }
.hdr__bar { height: 64px; color: var(--nav-fg); }
.hdr__bar--desk { display: none; }
.hdr__bar--mob { display: flex; }
@media (min-width: 1100px) { .hdr__bar--desk { display: flex; } .hdr__bar--mob { display: none; } }
.hdr__row { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.hdr__left { display: flex; height: 100%; align-items: center; gap: 32px; }
.hdr__logo { display: inline-flex; height: 100%; align-items: center; border-radius: 6px; color: var(--nav-logo); transition: color .2s var(--ease-out); }
.wordmark--nav { height: 26px; width: auto; }
.hdr__nav { height: 100%; }
.hdr__list { display: flex; height: 100%; align-items: center; gap: 8px; }
.hdr__item { display: flex; height: 100%; align-items: center; }
.hdr__trigger { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 8px 12px; font-size: 1rem; line-height: 1.6;
  transition: color .15s var(--ease), background-color .15s var(--ease); }
@media (hover: hover) { .hdr__trigger--pill:hover { color: var(--fg); background: var(--blue-subtle); } }
.hdr__trigger[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.hdr__right { display: flex; height: 100%; align-items: center; gap: 16px; }
.hdr__mleft { display: flex; min-width: 0; flex: 1 1 0%; align-items: center; gap: 16px; }
.hdr__micon { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 8px; }
.hdr__mlogo { display: inline-flex; min-width: 0; flex: 1 1 0%; align-items: center; justify-content: center; border-radius: 6px; color: var(--nav-logo); }
.hdr__mright { display: flex; min-width: 0; flex: 1 1 0%; align-items: center; justify-content: flex-end; }
.hdr__mcta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; font-size: 1rem; line-height: 1.3; font-weight: 500; }
@media (min-width: 1100px) {
  .hdr { padding: 14px 20px 0; }
  .hdr[data-appearance][data-scrolled] { background-color: transparent; }
  .hdr__bar { max-width: var(--page); margin-inline: auto; border-radius: 14px; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .hdr__bar > .frame { padding-inline: 20px; }
  html[data-nav-chrome="light"] .hdr__bar { background: color-mix(in srgb, var(--navy-dark) 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  html[data-nav-chrome="dark"] .hdr__bar, .hdr[data-scrolled] .hdr__bar { background: color-mix(in oklab, var(--paper-soft) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--fg-08), 0 10px 30px -12px color-mix(in srgb, var(--neutral-black) 18%, transparent); }
}