/* Shared navigation: the same alignment and progressive blur on every page. */
:root {
  --nav-outer: min(4.62962963vw, 80px);
  --nav-inset: clamp(24px, calc(8.333333vw - 64px), 80px);
  --nav-columns: minmax(0, 524fr) minmax(0, 1044fr);
}

body .navigation {
  z-index: 20;
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  height: 136px;
  margin: 0;
  padding: 40px var(--nav-outer);
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Mask each blur strength separately: the blur radius, as well as its
   opacity, decreases toward the bottom of the full-width header. */
body .navigation-blur {
  position: absolute;
  inset: 0 0 -32px;
  pointer-events: none;
  background: linear-gradient(to bottom, #161617e6, #16161780 50%, #16161700);
}
body .navigation-blur span {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--start), transparent var(--end));
  mask-image: linear-gradient(to bottom, #000 0%, #000 var(--start), transparent var(--end));
}
body .navigation-blur span:nth-child(1) { --blur: 1px; --start: 80%; --end: 100%; }
body .navigation-blur span:nth-child(2) { --blur: 2px; --start: 64%; --end: 88%; }
body .navigation-blur span:nth-child(3) { --blur: 4px; --start: 48%; --end: 76%; }
body .navigation-blur span:nth-child(4) { --blur: 8px; --start: 32%; --end: 64%; }
body .navigation-blur span:nth-child(5) { --blur: 12px; --start: 16%; --end: 52%; }
body .navigation-blur span:nth-child(6) { --blur: 18px; --start: 0%; --end: 40%; }

body .navigation .navigation-wrapper {
  position: relative;
  display: block;
  max-width: 1568px;
  height: 56px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .navigation-wrap {
  display: grid;
  grid-template-columns: var(--nav-columns);
  align-items: center;
  height: 100%;
}
body .logo-link { margin: 0; padding: 0 var(--nav-inset); }
body .logotype { font-size: 16px; font-weight: 500; line-height: 24px; }
body .navigation-items.dropdown {
  display: flex;
  justify-content: flex-start;
  gap: 48px;
  padding: 0 var(--nav-inset);
}
body .navigation-item {
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}


@media (max-width: 991px) {
  :root { --nav-outer: 32px; --nav-inset: 0px; }
  body .navigation { height: 96px; padding-top: 20px; padding-bottom: 20px; }
  body .navigation-wrap { display: flex; }
  body .navigation-items.dropdown { display: none; padding: 16px 24px; }
  body .navigation-item { padding: 12px; }
  body .navigation .menu-button { display: block; width: 44px; height: 44px; }
  body .navigation-items.w--nav-menu-open { display: block; }
}
@media (max-width: 599px) {
  :root { --nav-outer: 24px; }
}