/* One header layout for the home, company, leadership and profile pages. */
:root{scroll-padding-top:max(80px,calc(64 * var(--u) + 12px))}
#header.scrolled{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#header {
  --nav-wash: linear-gradient(135deg, #ffffff50, #a9dcff30);
  --nav-glow: #a8e5ff;
  left: 0; right: 0; width: min(100%, 1536px); margin-inline: auto;
  height: calc(64 * var(--u)); border: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
}
#header .nav-row {
  display: flex; align-items: center; height: 100%;
  width: 92%; max-width: 1413px; margin-inline: auto; gap: calc(15 * var(--u));
}
#header .brand { display: flex; align-items: center; flex-shrink: 0; gap: calc(8 * var(--u)); }
#header .brand img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(9 * var(--u)); }
#header .brand strong { display: block; font-size: calc(18 * var(--u)); font-weight: 850; line-height: 1.25; letter-spacing: -.7px; }
#header .brand small { display: block; font-size: calc(7.3 * var(--u)); font-weight: 750; line-height: 1.7; letter-spacing: -.1px; }
#header .desktop-nav {
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 calc(384 * var(--u)); margin-left: calc(53 * var(--u)); gap: 0;
}
#header .desktop-nav a {
  display: block; position: relative; isolation: isolate;
  font-size: calc(10 * var(--u)); font-weight: 400; line-height: 1.5;
  padding: calc(18 * var(--u)) 0; white-space: nowrap;
  transform: none; transition: color .25s;
}
#header .nav-label { display: block; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
#header .desktop-nav a::before {
  content: ''; position: absolute; inset: 9px -10px; border-radius: 12px;
  background: var(--nav-wash); opacity: 0; transform: scale(.86);
  transition: opacity .25s, transform .32s; z-index: -1;
}
#header .desktop-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 2px;
  border-radius: 2px; background: currentColor; box-shadow: 0 0 10px var(--nav-glow);
  transform: scaleX(0); transform-origin: left; transition: transform .36s cubic-bezier(.22,1,.36,1);
}
#header .desktop-nav a[aria-current]::after { transform: scaleX(1); }
#header .desktop-nav a:is(:hover,:focus-visible) .nav-label { transform: translateY(-3px); }
#header .desktop-nav a:is(:hover,:focus-visible)::before { opacity: 1; transform: scale(1); }
#header .desktop-nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
#header .desktop-nav a:active .nav-label { transform: translateY(-1px); }
#header .future {
  display: block; white-space: nowrap; margin-left: auto;
  font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1.5;
  padding: calc(6 * var(--u)) calc(23 * var(--u));
  background: #fffffff0; color: #0868d8; border-radius: 99px;
  box-shadow: 0 0 14px #fff8; transition: box-shadow .25s, background .25s;
}
#header .future:is(:hover,:focus-visible) { background: #fff; box-shadow: 0 3px 18px #2495ff40; transform: none; }
#header .future:is(:hover,:focus-visible) .nav-label { transform: translateY(-2px); }
#header .menu-toggle, #header #mobile-nav { display: none; }
.leadership-page #header, .company-page #header {
  position: sticky; top: 0; color: #082e72; background: #eaf5fff2;
  box-shadow: inset 0 -1px #e9edf1; backdrop-filter: blur(16px);
  --nav-wash: linear-gradient(135deg, #1687ef25, #46bbff18);
  --nav-glow: #419bea30;
}
#header a:focus-visible, #header button:focus-visible { outline: 3px solid #1687ef; outline-offset: 4px; }
@media (min-width:701px) and (max-width:850px) {
  #header .desktop-nav { flex:1 0 auto; gap:8px; margin-left:calc(14 * var(--u)); }
  #header .desktop-nav a, #header .future { font-size: 10px; }
  #header .nav-row { gap: calc(12 * var(--u)); }
  #header .brand strong { font-size: 13px; }
}
@media (max-width:700px) {
  :root{scroll-padding-top:74px}
  #header { height: 64px; }
  #header .nav-row { width: calc(100% - 28px); }
  #header .brand img { width: 38px; height: 38px; border-radius: 9px; }
  #header .brand strong { font-size: 14px; }
  #header .brand small { font-size: 5.8px; }
  #header .desktop-nav, #header .future { display: none; }
  #header .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 36px; height: 36px; margin-left: auto; border: 1px solid #fff6; border-radius: 10px; background: #ffffff30; }
  #header .menu-toggle span { width: 18px; height: 2px; background: currentColor; }
  #header #mobile-nav:not([hidden]) { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 0 14px; padding: 12px; background: #f4fbff; color: #1c548c; border-radius: 13px; box-shadow: 0 8px 30px #154a7833; }
  #header #mobile-nav a { font-size: 13px; padding: 9px 4px; text-align: center; border-radius: 7px; transition: background .2s; }
  #header #mobile-nav a:is(:hover,:focus-visible) { background: #dcefff; }
  #header #mobile-nav{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
}
@media (prefers-reduced-motion:reduce) {
  #header .nav-label, #header a, #header a::before, #header a::after { transition: none !important; }
  #header .nav-label { transform: none !important; }
}