.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100vw;
  min-height: 76px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  border-bottom: 0;
  background: var(--primary-green);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: -20px;
  margin-top: -25px;
}

.logoMark {
  position: relative;
  width: clamp(147px, 19.11vw, 221px);
  height: clamp(58px, 7.35vw, 88px);
  display: block;
  overflow: hidden;
}

.headerLogoImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 54px 0 var(--primary-white));
  transform: translateY(-54px);
}

.nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: nowrap;
}

.navLink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--mutedStrong);
}

.languageSwitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--mutedStrong);
}

.languageSwitchLink {
  color: inherit;
}

.languageSwitchLink:hover,
.languageSwitchLink.active {
  color: var(--button);
}

.languageDivider {
  color: rgba(16, 24, 40, 0.32);
}

.header .brand {
  margin: 0;
  flex: 0 0 auto;
}

.header .logoMark {
  width: clamp(132px, 14vw, 176px);
  height: 54px;
}

.navPrimary,
.navActions {
  display: flex;
  align-items: center;
}

.navPrimary {
  gap: clamp(16px, 2vw, 28px);
  margin-right: auto;
}

.navActions {
  gap: 12px;
  margin-left: auto;
}

.headerCta,
.loginButton {
  min-height: 42px;
  padding: 0 18px;
}

.mobileHeaderCta {
  display: none;
}

.loginButton {
  border: 1px solid var(--primary-green);
  background: transparent;
  color: var(--primary-green);
}

.loginButton:hover,
.loginButton:focus-visible {
  background: color-mix(in srgb, var(--primary-white) 55%, transparent);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 900px) {
  .header {
    min-height: 68px;
  }

  .nav {
    gap: 8px;
  }

  .navPrimary,
  .navActions {
    gap: 8px;
  }

  .headerCta,
  .languageSwitch,
  .loginButton {
    display: none;
  }

  .mobileHeaderCta {
    display: inline-flex;
    min-height: 36px;
    padding-inline: 12px;
  }
}

@media (max-width: 620px) {
  .header .logoMark {
    width: 118px;
  }

  .navPrimary .navLink {
    display: none;
  }
}

.headerInner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max);
  min-height: 76px;
  margin: 0 auto;
  padding: 10px 20px;
  gap: clamp(28px, 4vw, 56px);
}

.headerInner .nav {
  min-width: 0;
}

@media (max-width: 900px) {
  .headerInner {
    min-height: 68px;
    padding-inline: 14px;
    gap: 18px;
  }
}

@media (max-width: 620px) {
  .headerInner {
    gap: 10px;
  }
}

@media (max-width: 720px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav {
    width: 100%;
    justify-content: flex-start;
  }

  .logoMark {
    width: clamp(176px, 56vw, 236px);
    height: clamp(68px, 20vw, 96px);
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .header {
    gap: 12px;
  }

  body:has(.policyIntro) .header {
    gap: 24px;
  }
}

.header .navPrimary > .navLink,
.header .productMenuToggle {
  color: var(--primary-white);
}

.header .navPrimary > .navLink:hover,
.header .navPrimary > .navLink:focus-visible,
.header .productMenuToggle:hover,
.header .productMenuToggle:focus-visible {
  color: var(--primary-white);
}

.header .navActions .languageSwitch {
  color: color-mix(in srgb, var(--primary-white) 76%, transparent);
}

.header .navActions .languageSwitchLink:hover,
.header .navActions .languageSwitchLink:focus-visible,
.header .navActions .languageSwitchLink.active {
  color: var(--primary-white);
}

.header .navActions .languageDivider {
  color: color-mix(in srgb, var(--primary-white) 40%, transparent);
}

.header .navActions > .loginButton {
  border-color: color-mix(in srgb, var(--primary-white) 70%, transparent);
  background: transparent;
  color: var(--primary-white);
}

.header .navActions > .loginButton:hover,
.header .navActions > .loginButton:focus-visible {
  border-color: var(--primary-white);
  background: color-mix(in srgb, var(--primary-white) 12%, transparent);
  color: var(--primary-white);
}

.header .navActions > .button.primary,
.header .headerInner > .mobileNavDemo {
  border-color: var(--primary-white);
  background: var(--primary-white);
  color: var(--primary-green);
}

.header .navActions > .button.primary:hover,
.header .headerInner > .mobileNavDemo:hover {
  border-color: var(--primary-white);
  background: var(--primary-white);
  color: var(--primary-green);
}

.header :focus-visible {
  outline: 2px solid var(--aqua-500);
  outline-offset: 3px;
}