@font-face {
  font-display: swap;
  font-family: "Helvetica Neue Beeldbrekers";
  font-style: normal;
  font-weight: 400;
  src: url("../../../../../BEELDBREKERS_HELVETICA_NEUE_WEBFONT/HelveticaNeueLTStd-Roman.otf") format("opentype");
}

@font-face {
  font-display: swap;
  font-family: "Helvetica Neue Beeldbrekers";
  font-style: normal;
  font-weight: 700;
  src: url("../../../../../BEELDBREKERS_HELVETICA_NEUE_WEBFONT/HelveticaNeueLTStd-Bd.otf") format("opentype");
}

body, h1, h2, h3, h4, h5, h6, button, input, select, textarea,
header .logo a, header nav .menu ul li a {
  font-family: "Helvetica Neue Beeldbrekers", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header .logo a {
  text-transform: none;
}

header .logo a img {
  display: block;
  height: auto;
  width: 130px;
}

header .logo--service a img {
  width: 130px;
}

header nav .menu ul li a {
  text-transform: lowercase;
}

header nav .menu ul li a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  height: 1px;
  background: currentColor;
  border: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

header nav .menu ul li.is-active a::after,
header nav .menu ul li a:hover::after,
header nav .menu ul li a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media only screen and (max-width: 767px) {
  header nav {
    background-color: #fff;
    box-sizing: border-box;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 2.5rem 15px 2rem;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transform: translateX(100%);
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.42s;
  }

  header nav.is-open {
    padding: 2.5rem 15px 2rem;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  header nav .menu ul li,
  header nav.is-open .menu ul li {
    display: table;
    opacity: 0 !important;
    visibility: visible !important;
    transform: translateX(24px) !important;
    transition:
      opacity 0.22s ease,
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  header nav .menu ul li:nth-child(1) {
    transition-delay: 0.18s;
  }

  header nav .menu ul li:nth-child(2) {
    transition-delay: 0.12s;
  }

  header nav .menu ul li:nth-child(3) {
    transition-delay: 0.06s;
  }

  header nav .menu ul li:nth-child(4) {
    transition-delay: 0s;
  }

  header nav.is-open .menu ul li {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  header nav.is-open .menu ul li:nth-child(1) {
    transition-delay: 0.12s;
  }

  header nav.is-open .menu ul li:nth-child(2) {
    transition-delay: 0.19s;
  }

  header nav.is-open .menu ul li:nth-child(3) {
    transition-delay: 0.26s;
  }

  header nav.is-open .menu ul li:nth-child(4) {
    transition-delay: 0.33s;
  }
}

@media (prefers-reduced-motion: reduce) {
  header nav,
  header nav.is-open,
  header nav .menu ul li,
  header nav.is-open .menu ul li {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media only screen and (min-width: 768px) {
  header,
  header.fixed {
    padding: 6rem 0 3rem;
  }

  header nav {
    bottom: -16px;
  }
}