/* Shared public-site header: index desktop, Careers mobile behavior. */
:root {
  --header-forest: #1e4f3b;
  --header-forest-deep: #12291f;
  --header-cream: #f6f4ec;
  --header-lime-soft: #e6f3d9;
  --header-line: rgba(255, 255, 255, .55);
}

html { scroll-behavior: smooth; }

body > header,
header:not(.top) {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  z-index: 1000 !important;
  width: min(1180px, calc(100% - 28px)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 22px !important;
  background: rgba(246, 244, 236, .2) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  box-shadow: 0 12px 40px rgba(18, 41, 31, .1), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease,
    top .35s ease, width .35s ease, left .35s ease, right .35s ease,
    opacity .25s ease, visibility .25s ease !important;
}

body > header.is-scrolled,
header:not(.top).is-scrolled {
  background: rgba(246, 244, 236, .82) !important;
  border-color: var(--header-line) !important;
  box-shadow: 0 14px 38px rgba(18, 41, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

body > header .header-inner,
header:not(.top) .header-inner {
  min-height: 84px;
}

body > header.is-compact,
header:not(.top).is-compact {
  width: min(900px, calc(100% - 28px)) !important;
  height: 74px !important;
  top: 10px !important;
  border-radius: 20px !important;
  background: rgba(246, 244, 236, .76) !important;
  box-shadow: 0 14px 36px rgba(18, 41, 31, .17), inset 0 1px 0 rgba(255, 255, 255, .56) !important;
}

body > header.is-compact .header-inner,
header:not(.top).is-compact .header-inner {
  height: 72px !important;
  min-height: 72px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  gap: 10px !important;
  justify-content: center !important;
}

body > header.is-compact .logo,
header:not(.top).is-compact .logo {
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(.72) !important;
  pointer-events: none !important;
}

body > header.is-compact nav a,
header:not(.top).is-compact nav a {
  padding: 9px 12px !important;
  font-size: .84rem !important;
}

body > header nav a,
header:not(.top) nav a {
  text-decoration: none !important;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease !important;
}

body > header nav a:hover,
body > header nav a:focus-visible,
header:not(.top) nav a:hover,
header:not(.top) nav a:focus-visible {
  transform: translateY(-3px) !important;
  background: var(--header-lime-soft) !important;
  color: var(--header-forest) !important;
  box-shadow: 0 8px 20px rgba(18, 41, 31, .1) !important;
}

body > header .menu-toggle,
header:not(.top) .menu-toggle,
.careers-page header .menu {
  touch-action: manipulation;
}

body > header .mobile-menu,
header:not(.top) .mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .3s ease, opacity .2s ease;
}

body > header .mobile-menu.open,
header:not(.top) .mobile-menu.open {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
}

body > header.logo-hidden .logo,
header:not(.top).logo-hidden .logo {
  max-width: 0 !important;
  width: 0 !important;
  margin-right: -8px !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(.72) !important;
  pointer-events: none !important;
}

@media (min-width: 901px) {
  body > header.is-past-hero,
  header:not(.top).is-past-hero {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body > header:not(.top),
  header:not(.top) {
    top: 18px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body > header:not(.top).is-scrolled,
  header:not(.top).is-scrolled,
  body > header:not(.top).is-compact,
  header:not(.top).is-compact,
  body > header:not(.top).logo-hidden,
  header:not(.top).logo-hidden {
    border: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body > header .header-inner,
  header:not(.top) .header-inner {
    width: min(1520px, calc(100% - 96px)) !important;
    max-width: none !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body > header nav.main-nav,
  header:not(.top) nav.main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1.2vw, 20px) !important;
  }

  body > header nav.main-nav a.nav-link,
  header:not(.top) nav.main-nav a.nav-link {
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, .68) !important;
    border-radius: 999px !important;
    background: rgba(246, 244, 236, .38) !important;
    color: #1e4f3b !important;
    font-size: clamp(.78rem, .95vw, 1rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px rgba(18, 41, 31, .10), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease !important;
    transform: none !important;
  }

  body > header nav.main-nav a.nav-link:hover,
  body > header nav.main-nav a.nav-link:focus-visible,
  body > header nav.main-nav a.nav-link.active,
  header:not(.top) nav.main-nav a.nav-link:hover,
  header:not(.top) nav.main-nav a.nav-link:focus-visible,
  header:not(.top) nav.main-nav a.nav-link.active {
    border-color: rgba(230, 243, 217, .95) !important;
    background: rgba(230, 243, 217, .92) !important;
    color: #1e4f3b !important;
    box-shadow: 0 6px 18px rgba(18, 41, 31, .10), inset 0 1px 0 rgba(255, 255, 255, .62) !important;
    transform: none !important;
  }

  body > header .open-badge,
  header:not(.top) .open-badge {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    padding: 14px 20px !important;
    border-radius: 999px !important;
    background: rgba(230, 243, 217, .96) !important;
    color: #1e4f3b !important;
    font-size: clamp(.72rem, .82vw, .88rem) !important;
    white-space: nowrap !important;
  }

  body.careers-page > header nav > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, .68) !important;
    border-radius: 999px !important;
    background: rgba(246, 244, 236, .38) !important;
    color: #1e4f3b !important;
    font-size: clamp(.78rem, .95vw, 1rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px rgba(18, 41, 31, .10), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease !important;
    transform: none !important;
  }

  body.careers-page > header nav > a:hover,
  body.careers-page > header nav > a:focus-visible,
  body.careers-page > header nav > a.active {
    border-color: rgba(230, 243, 217, .95) !important;
    background: rgba(230, 243, 217, .92) !important;
    color: #1e4f3b !important;
    box-shadow: 0 6px 18px rgba(18, 41, 31, .10), inset 0 1px 0 rgba(255, 255, 255, .62) !important;
    transform: none !important;
  }

  body.careers-page > header.is-compact,
  body.careers-page > header.logo-hidden {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(900px, calc(100% - 48px)) !important;
  }

  body.careers-page > header.is-compact .header-inner,
  body.careers-page > header.logo-hidden .header-inner {
    justify-content: center !important;
  }

  body.careers-page > header.is-compact nav,
  body.careers-page > header.logo-hidden nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body > header.is-compact,
  header:not(.top).is-compact {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(980px, calc(100% - 48px)) !important;
  }

  body > header.is-compact .header-inner,
  header:not(.top).is-compact .header-inner {
    width: 100% !important;
    justify-content: center !important;
  }

  body > header.is-compact nav.main-nav,
  header:not(.top).is-compact nav.main-nav {
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  body > header .header-inner,
  header:not(.top) .header-inner {
    width: calc(100% - 48px) !important;
  }

  body > header .logo,
  header:not(.top) .logo,
  body > header .logo-image,
  header:not(.top) .logo-image {
    width: 150px !important;
    max-width: 150px !important;
  }

  body > header nav.main-nav,
  header:not(.top) nav.main-nav {
    gap: 4px !important;
  }

  body > header nav.main-nav a.nav-link,
  header:not(.top) nav.main-nav a.nav-link {
    padding: 9px 11px !important;
    font-size: .72rem !important;
  }

  body > header .open-badge,
  header:not(.top) .open-badge {
    padding: 9px 11px !important;
    font-size: .68rem !important;
  }

  body > header .nav-cta,
  header:not(.top) .nav-cta {
    padding: 9px 11px !important;
    font-size: .72rem !important;
  }

  body.careers-page > header nav > a {
    padding: 9px 11px !important;
    font-size: .72rem !important;
  }
}

@media (max-width: 900px) {
  body > header,
  header:not(.top) {
    top: 9px !important;
    width: calc(100% - 18px) !important;
    border-radius: 18px !important;
  }

  body > header .main-nav,
  header:not(.top) .main-nav,
  body > header nav:not(.mobile-menu),
  header:not(.top) nav:not(.mobile-menu) {
    display: none !important;
  }

  body > header .menu-toggle,
  header:not(.top) .menu-toggle,
  body > header .menu,
  header:not(.top) .menu {
    display: flex !important;
  }

  body > header .mobile-menu,
  header:not(.top) .mobile-menu {
    display: flex !important;
  }

  body > header,
  header:not(.top) {
    height: 66px !important;
    border-radius: 18px !important;
    background: rgba(246, 244, 236, .48) !important;
    overflow: visible !important;
  }

  body > header .header-inner,
  header:not(.top) .header-inner {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 12px !important;
  }

  body > header .logo,
  header:not(.top) .logo {
    width: 175px !important;
    max-width: 175px !important;
    height: 56px !important;
  }

  body > header.is-compact:not(.nav-open),
  header:not(.top).is-compact:not(.nav-open) {
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    top: 10px !important;
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 20px !important;
    background: rgba(246, 244, 236, .52) !important;
    border-color: rgba(255, 255, 255, .58) !important;
    box-shadow: 0 12px 28px rgba(18, 41, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .52) !important;
    overflow: hidden !important;
  }

  body > header.is-compact:not(.nav-open) .header-inner,
  header:not(.top).is-compact:not(.nav-open) .header-inner {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  body > header.is-compact:not(.nav-open) .logo,
  header:not(.top).is-compact:not(.nav-open) .logo {
    display: none !important;
  }

  body > header.is-compact:not(.nav-open) .menu-toggle,
  header:not(.top).is-compact:not(.nav-open) .menu-toggle,
  body > header.is-compact:not(.nav-open) .menu,
  header:not(.top).is-compact:not(.nav-open) .menu {
    display: flex !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    flex: 0 0 58px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body > header.is-compact.nav-open,
  header:not(.top).is-compact.nav-open {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: 9px !important;
    width: calc(100% - 18px) !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    background: rgba(246, 244, 236, .96) !important;
    overflow: visible !important;
  }

  body > header.is-compact.nav-open .header-inner,
  header:not(.top).is-compact.nav-open .header-inner {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 12px !important;
    gap: 16px !important;
    justify-content: space-between !important;
  }

  body > header.is-compact.nav-open .logo,
  header:not(.top).is-compact.nav-open .logo {
    display: flex !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 54px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body > header.is-compact.nav-open .menu-toggle,
  header:not(.top).is-compact.nav-open .menu-toggle,
  body > header.is-compact.nav-open .menu,
  header:not(.top).is-compact.nav-open .menu {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 12px !important;
  }

  body > header.is-compact.nav-open .mobile-menu,
  header:not(.top).is-compact.nav-open .mobile-menu,
  .careers-page header.is-compact.nav-open #mobileNav {
    display: flex !important;
    width: 100% !important;
    max-height: calc(100svh - 84px) !important;
    overflow-y: auto !important;
    padding: 10px 20px 18px !important;
    border-radius: 0 0 18px 18px !important;
  }
}

@media (max-width: 900px) {
  html body > header:not(.top),
  html body > header:not(.top).is-scrolled,
  html body > header:not(.top).is-compact,
  html body > header:not(.top).nav-open,
  html body > header:not(.top).menu-open,
  html body > header:not(.top).is-compact.nav-open {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body > header #menuToggle,
  html body > header #menu {
    border: 1px solid rgba(30, 79, 59, .22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .22) !important;
    color: #1E4F3B !important;
    box-shadow: 0 6px 20px rgba(18, 41, 31, .14) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
  }

  html body > header #menuToggle svg,
  html body > header #menu svg {
    color: #1E4F3B !important;
    stroke: #1E4F3B !important;
  }

  html body > header #menuToggle:hover,
  html body > header #menuToggle:focus-visible,
  html body > header #menu:hover,
  html body > header #menu:focus-visible {
    background: rgba(255, 255, 255, .28) !important;
    border-color: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 8px 24px rgba(18, 41, 31, .18) !important;
  }

  html body > header #menuToggle:focus-visible,
  html body > header #menu:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85) !important;
    outline-offset: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > header,
  body > header *,
  header:not(.top),
  header:not(.top) * {
    transition: none !important;
  }
}

/* Careers owns the mobile reference markup (#mobileNav + .menu). */
@media (max-width: 900px) {
  .careers-page header #mobileNav {
    overflow: hidden !important;
    transition: max-height .3s ease, opacity .2s ease;
  }

  .careers-page header:not(.nav-open) #mobileNav {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .careers-page header.nav-open #mobileNav,
  .careers-page header #mobileNav.open {
    max-height: 520px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Match About's rounded open-menu geometry on every public page. */
  body > header.is-compact.nav-open,
  body > header.nav-open:not(.is-compact),
  header:not(.top).is-compact.nav-open,
  header:not(.top).nav-open:not(.is-compact) {
    border-radius: 18px !important;
  }

  body > header.is-compact.nav-open .mobile-menu,
  body > header.nav-open:not(.is-compact) .mobile-menu,
  header:not(.top).is-compact.nav-open .mobile-menu,
  header:not(.top).nav-open:not(.is-compact) .mobile-menu,
  body > header.is-compact.nav-open #mobileNav,
  body > header.nav-open:not(.is-compact) #mobileNav,
  header:not(.top).is-compact.nav-open #mobileNav,
  header:not(.top).nav-open:not(.is-compact) #mobileNav {
    border-radius: 0 0 18px 18px !important;
  }
}