body.menu-open {
  overflow: hidden;
}

:root {
  --menu-open-speed: 1200ms;
}

.language-switcher {
  --language-control-size: 32px;
  --language-control-gap: 8px;
  position: fixed;
  top: calc(var(--hero-menu-top) + var(--hero-menu-height) - var(--language-control-size));
  right: calc(var(--hero-menu-right) + var(--hero-menu-width) + 16px);
  z-index: 41;
  width: var(--language-control-size);
  height: var(--language-control-size);
  color: #ffffff;
  mix-blend-mode: difference;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.language-switcher button {
  width: var(--language-control-size);
  height: var(--language-control-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

.language-switcher.is-loading {
  pointer-events: none;
}

.language-switcher.is-loading button {
  opacity: 0.62;
}

.language-switcher__current {
  position: absolute;
  right: 0;
  bottom: 0;
}

.language-switcher__options {
  position: absolute;
  right: calc(var(--language-control-size) + var(--language-control-gap));
  bottom: 0;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.language-switcher:hover,
.language-switcher:focus-within,
.language-switcher.is-open {
  width: calc((var(--language-control-size) * 2) + var(--language-control-gap));
}

.language-switcher:hover .language-switcher__options,
.language-switcher:focus-within .language-switcher__options,
.language-switcher.is-open .language-switcher__options {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.language-switcher button:hover,
.language-switcher button:focus-visible {
  opacity: 0.62;
  outline: none;
}

body.menu-open .language-switcher {
  top: calc(clamp(30px, min(3.704vw, 5.709svh), 64px) + clamp(28px, 2.498vw, 43px) - var(--language-control-size));
  right: calc(clamp(24px, 3.183vw, 55px) + clamp(66px, 6.178vw, 107px) + 14px);
}

.menu-button {
  position: fixed;
  top: var(--hero-menu-top);
  right: var(--hero-menu-right);
  z-index: 40;
  width: var(--hero-menu-width);
  height: var(--hero-menu-height);
  display: grid;
  gap: var(--hero-menu-gap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button:not(.is-open) {
  mix-blend-mode: difference;
}

.menu-button:not(.is-open) span {
  border-top-color: #ffffff;
}

.menu-button span {
  width: var(--hero-menu-line);
  height: 0;
  border-top: var(--hero-menu-stroke) solid var(--ink);
  transform-origin: left center;
  transition:
    width 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms ease,
    opacity 180ms ease,
    border-top-color 180ms ease;
}

.menu-button span:nth-child(2) {
  width: var(--hero-menu-line-short);
}

.menu-button:not(.is-open):hover span,
.menu-button:not(.is-open):focus-visible span {
  width: var(--hero-menu-line-short);
}

.menu-button:not(.is-open):hover span:nth-child(2),
.menu-button:not(.is-open):focus-visible span:nth-child(2) {
  width: var(--hero-menu-line);
}

.menu-button:not(.is-open):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

.menu-button.is-open {
  position: fixed;
  top: clamp(30px, min(3.704vw, 5.709svh), 64px);
  right: clamp(24px, 3.183vw, 55px);
  width: clamp(66px, 6.178vw, 107px);
  height: clamp(28px, 2.498vw, 43px);
  display: block;
  mix-blend-mode: normal;
}

.menu-button.is-open span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top-color: #76777a;
  border-top-width: 2px;
  transform-origin: center;
}

.menu-button.is-open span:nth-child(1) {
  transform: rotate(15deg);
}

.menu-button.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-button.is-open span:nth-child(3) {
  transform: rotate(-15deg);
}

.menu-button.is-open:hover span,
.menu-button.is-open:focus-visible span {
  border-top-color: rgba(252, 252, 251, 0.9);
}

.menu-button.is-open:focus-visible {
  outline: none;
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  min-width: var(--layout-min-width);
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: #111111;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-clip-path: circle(0 at 100% 0);
  clip-path: circle(0 at 100% 0);
  transform: translate3d(22px, -22px, 0) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 260ms ease,
    transform calc(var(--menu-open-speed) - 80ms) cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-clip-path var(--menu-open-speed) cubic-bezier(0.16, 1, 0.3, 1),
    clip-path var(--menu-open-speed) cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear var(--menu-open-speed);
}

.menu-panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-clip-path: circle(150vmax at 100% 0);
  clip-path: circle(150vmax at 100% 0);
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
}

.menu-panel__brand {
  position: absolute;
  top: var(--hero-brand-top);
  left: var(--hero-brand-left);
  width: var(--hero-brand-width);
  height: var(--hero-brand-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: var(--hero-brand-size);
  font-weight: 600;
  line-height: var(--hero-brand-line);
  text-align: center;
  text-decoration: none;
  transition: color 180ms ease;
}

.menu-panel__brand:hover,
.menu-panel__brand:focus-visible {
  color: rgba(252, 252, 251, 0.9);
  outline: none;
}

.menu-panel__links {
  position: absolute;
  top: clamp(150px, 19.625svh, 220px);
  left: clamp(420px, 48.785vw, 843px);
  width: min(745px, calc(100vw - clamp(420px, 48.785vw, 843px) - 80px));
  display: grid;
  gap: 0;
}

.menu-panel__links a {
  color: rgba(159, 159, 159, 0.6);
  font-size: clamp(52px, min(5.556vw, 8.564svh), 96px);
  font-weight: 700;
  line-height: 1.146;
  text-decoration: none;
  transition: color 180ms ease;
}

.menu-panel__links a:hover,
.menu-panel__links a:focus-visible {
  color: rgba(252, 252, 251, 0.9);
  outline: none;
}

.menu-panel__stripe {
  position: absolute;
  top: clamp(630px, 80.107svh, 898px);
  left: clamp(420px, 48.785vw, 843px);
  width: clamp(210px, 17.245vw, 298px);
  height: clamp(12px, 1.516svh, 17px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.menu-panel__stripe span {
  border-top: clamp(7px, 0.892svh, 10px) solid currentColor;
}

.menu-panel__stripe span:nth-child(1) {
  color: #bf7b5a;
}

.menu-panel__stripe span:nth-child(2) {
  color: #fcfcfb;
}

.menu-panel__stripe span:nth-child(3) {
  color: #667869;
}

.menu-panel__stripe span:nth-child(4) {
  color: #010100;
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher,
  .language-switcher__options,
  .menu-button span,
  .menu-panel,
  .menu-panel__brand {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .menu-panel__links {
    top: clamp(145px, 18svh, 190px);
    left: clamp(220px, 34vw, 360px);
    width: min(560px, calc(100vw - clamp(220px, 34vw, 360px) - 40px));
  }

  .menu-panel__links a {
    font-size: clamp(48px, 7vw, 72px);
  }

  .menu-panel__stripe {
    top: clamp(560px, 72svh, 760px);
    left: clamp(220px, 34vw, 360px);
  }
}

@media (max-width: 640px) {
  .language-switcher {
    top: calc(30px + 38px - var(--language-control-size));
    right: 77px;
  }

  body.menu-open .language-switcher {
    top: calc(30px + 32px - var(--language-control-size));
    right: 98px;
  }

  .menu-panel {
    inset: 0;
  }

  .menu-panel__brand {
    justify-content: flex-start;
  }

  .menu-panel__links {
    top: clamp(130px, 20svh, 160px);
    left: 20px;
    width: calc(100% - 40px);
  }

  .menu-panel__links a {
    font-size: clamp(34px, 11vw, 50px);
    line-height: 1.14;
  }

  .menu-panel__stripe {
    top: clamp(460px, 72svh, 560px);
    left: 20px;
    width: clamp(188px, 58vw, 298px);
  }

  .menu-button.is-open {
    top: 30px;
    right: 20px;
    width: 64px;
    height: 32px;
  }
}