.mz-mainheader {
  --lo-content-width: 1200px;
  z-index: 1000;
  transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
  font-family: 'AtlasGrotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Both variants are always position:fixed (see below) — nothing about the
   header's position ever changes on scroll, so there's no jump to cause.
   The spacer is the only real difference between the two: transparent
   reserves nothing (floats over a hero image on purpose), white reserves
   a constant 85px so page content starts below the header instead of
   underneath it. */
.mz-mainheader__spacer--bg-top-transparent {
  height: 0;
}

.mz-mainheader__spacer--bg-top-white {
  height: 85px;
}

/* ---- Position — top (before scroll) ----
   Despite the class names (kept as-is since the underlying field values are
   "transparent"/"white" for backwards compatibility), this no longer picks
   a background color — the top background is always transparent in both
   cases now, and both are always position:fixed. The only real difference
   is the spacer height above. (position:sticky, and later a scroll-
   triggered position:fixed, were both tried here first — sticky turned out
   to be broken on the live page, likely an ancestor with overflow set to
   something other than visible, and the scroll-triggered switch caused its
   own jump right at the moment the header left normal flow. Always-fixed
   with a fixed-size spacer avoids both problems entirely.) */
.mz-mainheader--bg-top-transparent,
.mz-mainheader--bg-top-white {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

/* ---- Background — on scroll ----
   Toggled by module.js, which adds mz-mainheader--scrolled once window.scrollY > 0. */
.mz-mainheader--scrolled.mz-mainheader--bg-scroll-transparent {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mz-mainheader--scrolled.mz-mainheader--bg-scroll-white {
  background: #ffffff;
  border-bottom: 0;
  box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .mz-mainheader--scrolled.mz-mainheader--bg-scroll-blurry {
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 0;
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
  }
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .mz-mainheader--scrolled.mz-mainheader--bg-scroll-blurry {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.1);
  }
}

/* ---- Level-1 color scheme, from the page_settings module's header_settings ----
   --top-light applies only before scroll, --scroll-light only once scrolled —
   each is independent of the other and of the background_top/background_scroll
   choices above. Only level 1 (top nav links, their caret, and the language
   trigger) is affected — dropdowns/mega/language list stay on their own white
   panels regardless. */
.mz-mainheader--top-light:not(.mz-mainheader--scrolled) .mz-mainheader__link,
.mz-mainheader--top-light:not(.mz-mainheader--scrolled) .mz-mainheader__lang-trigger {
  color: #ffffff;
}

.mz-mainheader--top-light:not(.mz-mainheader--scrolled) .mz-mainheader__caret {
  border-color: #ffffff;
}

.mz-mainheader--scroll-light.mz-mainheader--scrolled .mz-mainheader__link,
.mz-mainheader--scroll-light.mz-mainheader--scrolled .mz-mainheader__lang-trigger {
  color: #ffffff;
}

.mz-mainheader--scroll-light.mz-mainheader--scrolled .mz-mainheader__caret {
  border-color: #ffffff;
}

/* Mobile hamburger/X icon follows the same level-1 scheme — it always sits
   in the header bar itself (not inside the white panel below it), even
   once toggled into its X shape, so the scheme still applies then too. */
.mz-mainheader--top-light:not(.mz-mainheader--scrolled) .mz-mainheader__toggle span {
  background: #ffffff;
}

.mz-mainheader--scroll-light.mz-mainheader--scrolled .mz-mainheader__toggle span {
  background: #ffffff;
}

.mz-mainheader__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--lo-content-width, 1200px);
  margin: 0 auto;
  padding: 16px 0;
}

/* Same responsive edge-inset scale as the site's .page-center — expressed as
   padding rather than margin, since .mz-mainheader__inner centers itself via
   max-width + margin:auto and explicit margin-left/right would override that. */
@media (min-width: 1201px) and (max-width: 1280px) {
  .mz-mainheader__inner {
    max-width: calc(100% - 80px);
  }
}

@media (max-width: 1200px) {
  .mz-mainheader__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 575px) {
  .mz-mainheader__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---- Logo ---- */
.mz-mainheader__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mz-mainheader__logo-img {
  display: block;
  height: auto;
  max-width: 240px;
}

.mz-mainheader__logo-img--scroll {
  display: none;
}

.mz-mainheader--scrolled .mz-mainheader__logo-img--default {
  display: none;
}

.mz-mainheader--scrolled .mz-mainheader__logo-img--scroll {
  display: block;
}

/* ---- Mobile toggle (checkbox hack, no JS) ---- */
.mz-mainheader__toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mz-mainheader__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  cursor: pointer;
}

.mz-mainheader__toggle span {
  display: block;
  height: 2px;
  background: #2d3f47;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Hamburger morphs into an X when the panel is open — top/bottom bars
   rotate into the middle bar's position (2px height + 5px gap = 7px),
   middle bar fades out. No separate close button needed. */
.mz-mainheader__toggle-input:checked ~ .mz-mainheader__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mz-mainheader__toggle-input:checked ~ .mz-mainheader__toggle span:nth-child(2) {
  opacity: 0;
}

.mz-mainheader__toggle-input:checked ~ .mz-mainheader__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Panel (nav + language + buttons) ----
   One wrapper so the mobile breakpoint can turn all three into a single
   full-screen overlay instead of letting them compete for row space. */
.mz-mainheader__panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

/* ---- Top-level nav ---- */
.mz-mainheader__nav {
  display: flex;
  justify-content: center;
  flex: 1;
}

.mz-mainheader__menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-mainheader__item {
  position: relative;
  cursor: pointer;
}

.mz-mainheader__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4em;
  color: #2d3f47;
  text-decoration: none;
  white-space: nowrap;
}

.mz-mainheader__item--has-children > .mz-mainheader__link {
  padding-right: 0px;
}

.mz-mainheader__link:hover {
  color: #0f242c;
}

.mz-mainheader__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid #5a6b75;
  border-bottom: 2px solid #5a6b75;
  transform: rotate(45deg) translateY(-2px);
}

/* ---- Mobile accordion (level 3+ hidden behind a tap on level 2) ----
   A real <button> toggled via aria-expanded in module.js — not a checkbox,
   since a sitewide [type="checkbox"] + span rule (for toggle-switch form
   fields) was matching our checkbox + label span and injecting its own
   padding/layout. Desktop ignores all of this and keeps the existing
   hover/focus-within reveal — these only do anything inside the
   max-width:900px block below. */
.mz-mainheader__acc-toggle {
  display: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
}

.mz-mainheader__acc-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5a6b75;
  border-bottom: 2px solid #5a6b75;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* ---- Simple dropdown ----
   Plain fade + slide — the earlier rotateX/perspective "swing" animation
   was dropped: it glitched badly in Safari across every dropdown variant
   (simple, mega, language), not just the fixed-position mega, so the 3D
   transform itself was the problem, not how it was hidden. Uses opacity +
   pointer-events (not display/visibility) so the transition still animates. */
.mz-mainheader__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 310px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 36, 44, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mz-mainheader__item--has-children:not(.mz-mainheader__item--advanced):hover > .mz-mainheader__dropdown,
.mz-mainheader__item--has-children:not(.mz-mainheader__item--advanced):focus-within > .mz-mainheader__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mz-mainheader__dropdown-item {
  position: relative;
}

/* Nested (level 3+) flyouts need their own show-on-hover rule —
   the top-level rule above only reveals the first dropdown level. */
.mz-mainheader__dropdown-item--has-children:hover > .mz-mainheader__dropdown,
.mz-mainheader__dropdown-item--has-children:focus-within > .mz-mainheader__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mz-mainheader__dropdown-link {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #2d3f47;
  text-decoration: none;
  white-space: nowrap;
}

.mz-mainheader__dropdown-link:hover {
  background: #f6fcff;
  color: #0f242c;
}

.mz-mainheader__dropdown-item--has-children > .mz-mainheader__dropdown {
  top: 0;
  left: 100%;
}

/* ---- Advanced (mega) menu ----
   .mega is the hoverable hit-area only — it stays flush against the trigger
   (top: 100%, no gap) so the :hover chain is never broken, and its 30px
   padding-top is an invisible buffer that pushes the visible .mega-panel
   card down without moving where the hover area starts.

   Two positioning variants:
   - Default (2+ columns): fixed at --lo-content-width, centered under the
     header, independent of which item triggered it (a stable target you
     can move the mouse into, and always fills the content width).
   - --single (one column, e.g. a lone child that has its own children):
     anchored to its trigger .mz-mainheader__item, sized to its content —
     stays a compact card rather than stretching to the full content width. */
.mz-mainheader__mega {
  z-index: 10;
  padding-top: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mz-mainheader__item--advanced:hover > .mz-mainheader__mega,
.mz-mainheader__item--advanced:focus-within > .mz-mainheader__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mz-mainheader__mega-panel {
  display: grid;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 36, 44, 0.14);
  padding: 24px 0;
}

@media (min-width: 901px) {
  /* Same width + centering as .mz-mainheader__inner (both driven by
     --lo-content-width) so the panel's edges land exactly on the
     logo/button edges. Above 1280px this matches inner's flat
     max-width:1200 centering; the 901–1280px override below matches
     inner's own 40px-inset behavior in that same range (see the
     .mz-mainheader__inner responsive rules).

     Always position:fixed relative to the viewport, regardless of the
     header's own top-of-page positioning mode — a "white" header sits at
     the top of the page anyway before scrolling (it's the first element),
     and switches to position:fixed itself once scrolled, so a hardcoded
     viewport offset stays visually correct in both of its states. */
  .mz-mainheader__mega:not(.mz-mainheader__mega--single) {
    position: fixed;
    top: 67px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: min(var(--lo-content-width, 1200px), 100vw);
  }

  .mz-mainheader__item--advanced:hover > .mz-mainheader__mega:not(.mz-mainheader__mega--single),
  .mz-mainheader__item--advanced:focus-within > .mz-mainheader__mega:not(.mz-mainheader__mega--single) {
    transform: translateX(-50%) translateY(0);
  }

  .mz-mainheader__mega:not(.mz-mainheader__mega--single) .mz-mainheader__mega-panel {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .mz-mainheader__mega--single {
    position: absolute;
    top: 100%;
    left: 0;
  }

  .mz-mainheader__mega--single .mz-mainheader__mega-panel {
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, max-content);
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .mz-mainheader__mega:not(.mz-mainheader__mega--single) {
    width: calc(100vw - 80px);
  }
}

.mz-mainheader__mega-col {
  padding: 0 24px;
  border-right: 1px solid #e1edf3;
}

.mz-mainheader__mega-col:first-child {
  padding-left: 24px;
}

.mz-mainheader__mega-col:last-child {
  padding-right: 24px;
  border-right: 0;
}

.mz-mainheader__mega-title {
  display: block;
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2em;
  color: #0f242c;
  text-decoration: none;
}

/* Without a link, the title is plain text — don't inherit the pointer
   cursor set on the ancestor .mz-mainheader__item. */
span.mz-mainheader__mega-title {
  cursor: default;
}

a.mz-mainheader__mega-title:hover {
  color: #2d3f47;
}

.mz-mainheader__mega-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-mainheader__mega-link {
  display: block;
  padding: 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: #828282;
  text-decoration: none;
}

.mz-mainheader__mega-link:hover {
  color: #0f242c;
}

/* ---- Language switcher ---- */
.mz-mainheader__lang {
  position: relative;
  flex-shrink: 0;
}

.mz-mainheader__lang-trigger {
  display: inline-flex;
  align-items: center;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #2d3f47;
  text-decoration: none;
  white-space: nowrap;
}

.mz-mainheader__lang-trigger:hover {
  color: #0f242c;
}

.mz-mainheader__dropdown--lang {
  left: auto;
  right: 0;
  min-width: 220px;
}

.mz-mainheader__lang-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mz-mainheader__lang-name-en {
  font-weight: 600;
  color: #2d3f47;
}

.mz-mainheader__lang-name-native {
  color: #828282;
}

.mz-mainheader__lang:hover > .mz-mainheader__dropdown--lang,
.mz-mainheader__lang:focus-within > .mz-mainheader__dropdown--lang {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---- Buttons ---- */
.mz-mainheader__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---- Responsive ----
   Below 900px, .panel (nav + language + buttons) becomes a full-screen
   overlay instead of competing for space in the header row. There's no
   hover on touch, so nested items render always-expanded/flat rather than
   behind a tap-to-toggle caret that wouldn't work without JS. */
@media (max-width: 900px) {
  .mz-mainheader__toggle {
    display: flex;
  }

  /* Always position:fixed at a hardcoded viewport offset — both
     background_top variants are always fixed now (see
     .mz-mainheader--bg-top-transparent/--bg-top-white above), so this is
     correct regardless of which one is active. */
  .mz-mainheader__panel {
    display: none;
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    height: calc(100vh - 73px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    overflow-y: auto;
    padding: 16px 24px 24px;
    z-index: 999;
  }

  .mz-mainheader__toggle-input:checked ~ .mz-mainheader__panel {
    display: flex;
  }

  .mz-mainheader__nav {
    display: block;
    width: 100%;
    flex: none;
  }

  .mz-mainheader__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 16px;
  }

  .mz-mainheader__item {
    border-top: 0;
  }

  .mz-mainheader__link {
    width: 100%;
    padding: 14px 0 25px;
    font-size: 25px;
  }

  /* Always dark in the mobile panel, regardless of --top-light/--scroll-light —
     the panel is its own full-screen white overlay, not the transparent/blurry
     header bar those schemes are meant for. */
  .mz-mainheader--top-light:not(.mz-mainheader--scrolled) .mz-mainheader__link,
  .mz-mainheader--scroll-light.mz-mainheader--scrolled .mz-mainheader__link {
    color: #2d3f47;
  }

  .mz-mainheader__caret {
    display: none;
  }

  .mz-mainheader__dropdown,
  .mz-mainheader__mega {
    position: static;
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    padding-top: 0;
  }

  .mz-mainheader__dropdown {
    padding: 0 0 12px 16px;
  }

  .mz-mainheader__mega-panel {
    display: block;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 12px 0;
  }

  .mz-mainheader__mega-col,
  .mz-mainheader__mega-col:first-child,
  .mz-mainheader__mega-col:last-child {
    padding: 0;
    border-right: 0;
    margin-bottom: 10px;
  }

  /* Defensive: a sitewide rule styles [type="checkbox"] + span with a
     :before "fake checkbox" visual. We no longer render a checkbox here,
     but keep this in case any other global rule targets spans directly. */
  span.mz-mainheader__mega-title:before {
    display: none;
  }

  /* ---- Accordion: level 3+ collapsed until its level-2 toggle is tapped ----
     .dropdown-item and .mega-col each become a wrapping flex row so the
     toggle sits beside the level-2 link/title, with the (now-hidden) level-3
     content forced onto its own full-width line below via flex-basis:100%. */
  .mz-mainheader__dropdown-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .mz-mainheader__dropdown-item > .mz-mainheader__dropdown-link {
    flex: 1;
  }

  .mz-mainheader__dropdown-item > .mz-mainheader__dropdown {
    flex-basis: 100%;
  }

  .mz-mainheader__mega-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .mz-mainheader__mega-col > .mz-mainheader__mega-title {
    flex: 1;
  }

  .mz-mainheader__mega-col > .mz-mainheader__mega-list {
    flex-basis: 100%;
  }

  .mz-mainheader__acc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }

  /* Level 3+ stays collapsed until its accordion toggle is expanded —
     more specific than the general .dropdown/.mega-panel mobile rules
     above, which only cover the level 1 -> level 2 reveal. */
  .mz-mainheader__dropdown-item--has-children > .mz-mainheader__dropdown,
  .mz-mainheader__mega-list {
    display: none;
  }

  .mz-mainheader__acc-toggle[aria-expanded="true"] ~ .mz-mainheader__dropdown,
  .mz-mainheader__acc-toggle[aria-expanded="true"] ~ .mz-mainheader__mega-list {
    display: block;
  }

  .mz-mainheader__acc-toggle[aria-expanded="true"] .mz-mainheader__acc-caret {
    transform: rotate(-135deg);
  }

  .mz-mainheader__lang {
    border-top: 1px solid #e1edf3;
  }

  .mz-mainheader__lang-trigger {
    width: 100%;
    padding: 14px 4px;
  }

  .mz-mainheader__dropdown--lang {
    left: auto;
    right: auto;
    min-width: 0;
  }

  .mz-mainheader__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .mz-mainheader__actions .pwr-cta_button {
    text-align: center;
  }
}