/* Shared navigation for every public page. Page themes change colours only. */
html {
  --nav-height:89px;
  --page-nav-height:56px;
  scroll-padding-top:calc(var(--nav-height) + 16px);
}
html:has(.page-nav) {
  scroll-padding-top:calc(var(--nav-height) + var(--page-nav-height) + 16px);
}
[data-nav-theme] {
  --nav-bg:#000000e8;
  --nav-text:#f5f7f6;
  --nav-muted:#b7c0bb;
  --nav-line:#ffffff14;
  --nav-accent:#22d3a0;
  --nav-cta:#22d3a0;
  --nav-cta-text:#042219;
  --nav-cta-hover:#53dfb8;
  --nav-logo-filter:none;
}
[data-nav-theme="company"] {
  --nav-bg:#f4f3efe8;
  --nav-text:#252624;
  --nav-muted:#60615a;
  --nav-line:#25262415;
  --nav-accent:#22765e;
  --nav-cta:#292b27;
  --nav-cta-text:#fff;
  --nav-cta-hover:#41443d;
  --nav-logo-filter:brightness(0);
}
[data-nav-theme="hearing"], [data-nav-theme="dark"] {
  --nav-bg:#0b0f0eeb;
  --nav-text:#f4faf8;
  --nav-muted:#a8bdb6;
  --nav-accent:#2bd9c4;
  --nav-cta:#2bd9c4;
  --nav-cta-text:#0b0f0e;
  --nav-cta-hover:#57e3d2;
}
[data-nav-theme="focus"] {
  --nav-bg:color-mix(in srgb, var(--bg, #fcfbf8) 91%, transparent);
  --nav-text:var(--ink, #22211f);
  --nav-muted:var(--ink-soft, #5d5b54);
  --nav-line:var(--card-border, #e5e3db);
  --nav-accent:#43594b;
  --nav-cta:#43594b;
  --nav-cta-text:#fff;
  --nav-cta-hover:#34453c;
  --nav-logo-filter:brightness(0);
}
.global-header, .page-nav {
  position:sticky;
  box-sizing:border-box;
  background:var(--nav-bg);
  color:var(--nav-text);
  border-bottom:1px solid var(--nav-line);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.global-header { top:0; z-index:50; height:var(--nav-height) }
.global-skip { position:fixed; top:8px; left:8px; z-index:200; padding:12px 20px; background:var(--nav-cta); color:var(--nav-cta-text); font-size:14px; text-decoration:none; transform:translateY(-200%) }
.global-skip:focus { transform:none; outline:2px solid var(--nav-accent); outline-offset:3px }
.global-header__inner, .page-nav__inner {
  box-sizing:border-box;
  width:100%;
  max-width:1192px;
  height:100%;
  margin-inline:auto;
  padding-inline:40px;
  display:flex;
  align-items:center;
}
.global-header__inner { gap:30px }
.global-logo { display:inline-flex; flex-shrink:0; text-decoration:none }
.global-logo img { display:block; width:83px; height:auto; filter:var(--nav-logo-filter) }
.global-nav { display:flex; align-items:center; gap:28px; margin-left:auto }
.global-nav a {
  position:relative;
  padding-block:12px;
  color:var(--nav-muted);
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  text-decoration:none;
  border-radius:8px;
  transition:color .2s;
}
.global-nav a:hover, .global-nav a[aria-current="page"] { color:var(--nav-text) }
.global-nav a[aria-current="page"] { font-weight:650 }
.global-nav a[aria-current="page"]::after {
  content:'';
  position:absolute;
  bottom:4px;
  left:calc(50% - 2px);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--nav-accent);
}
.global-cta {
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:166px;
  min-height:42px;
  padding:10px 17px;
  border:1px solid transparent;
  border-radius:99px;
  background:var(--nav-cta);
  color:var(--nav-cta-text);
  font-size:13px;
  font-weight:650;
  line-height:1.4;
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s,transform .2s;
}
.global-cta:hover { background:var(--nav-cta-hover); transform:translateY(-2px) }
.global-header a:focus-visible, .page-nav a:focus-visible { outline:2px solid var(--nav-accent); outline-offset:5px }
.page-nav { top:var(--nav-height); z-index:40; height:var(--page-nav-height) }
.page-nav__inner { gap:34px; overflow-x:auto; scrollbar-width:none }
.page-nav__inner::-webkit-scrollbar { display:none }
.page-nav a {
  position:relative;
  display:flex;
  flex-shrink:0;
  align-items:center;
  align-self:stretch;
  color:var(--nav-muted);
  font-size:12px;
  font-weight:400;
  line-height:20px;
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s;
}
.page-nav a:hover, .page-nav a[aria-current="location"] { color:var(--nav-accent) }
.page-nav a[aria-current="location"]::after { content:''; position:absolute; height:2px; bottom:0; left:0; right:0; background:currentColor }
[data-nav-theme="voice"] .page-nav .iris-link:hover,
[data-nav-theme="voice"] .page-nav .iris-link[aria-current="location"] { color:#a78bfa }
/* Use one scroll offset, including for the existing Voice and newsletter anchors. */
.voice-page #main, .voice-page section[id], .home-newsletter-band { scroll-margin-top:0 }
@media(max-width:1000px) {
  .global-header__inner, .page-nav__inner { padding-inline:30px }
  .global-header__inner { gap:23px }
  .global-nav { gap:22px }
}
@media(max-width:760px) {
  html { --nav-height:75px; --page-nav-height:49px }
  .global-header__inner, .page-nav__inner { padding-inline:24px }
  .global-header__inner { gap:17px }
  .global-logo img { width:67px }
  .global-nav { gap:17px }
  .global-nav a { font-size:12px }
  .global-cta { min-width:142px; min-height:38px; padding:9px 13px; font-size:11px }
  .global-nav .global-updates { display:none }
  .page-nav__inner { gap:25px }
  .page-nav a { font-size:11px }
}
@media(max-width:600px) {
  html { --nav-height:103px }
  .global-header__inner { display:grid; grid-template-columns:1fr auto; grid-template-rows:38px 36px; gap:4px 16px; padding-block:12px }
  .global-nav { grid-column:1/-1; grid-row:2; margin-left:0; justify-content:center; gap:32px }
  .global-nav a { padding-block:8px; line-height:20px }
  .global-cta { justify-self:end }
}
@media(max-width:390px) {
  .global-header__inner, .page-nav__inner { padding-inline:20px }
  .global-logo img { width:58px }
  .global-cta { min-width:122px; padding-inline:10px; font-size:10px }
  .global-cta span { display:none }
}
@media(prefers-color-scheme:dark) {
  [data-nav-theme="focus"] { --nav-accent:#93ad97; --nav-logo-filter:none }
}
@media(prefers-reduced-motion:reduce) {
  .global-header a, .page-nav a { transition:none }
  .global-cta:hover { transform:none }
}
@media(prefers-reduced-transparency:reduce) {
  .global-header, .page-nav { background:var(--nav-solid, #0b0f0e); backdrop-filter:none; -webkit-backdrop-filter:none }
  [data-nav-theme="company"] { --nav-solid:#f4f3ef }
  [data-nav-theme="focus"] { --nav-solid:var(--bg, #fcfbf8) }
}