.index-header {
  position: relative;
  overflow: hidden;
}
.index-header--animation {
  position: relative;
  background: var(--index-overlay-color, #ff675d);
}
.index-header--animation--swiper .swiper-prev,
.index-header--animation--swiper .swiper-next {
  position: absolute;
  margin-top: -25px;
  top: 50vh;
  right: 20px;
  width: 50px;
  height: 50px;
  bottom: 0;
  z-index: 8;
  background: url(../../../img/icons/chevron-right.svg) center center no-repeat;
  cursor: pointer;
}
.index-header--animation--swiper .swiper-prev {
  background-image: url(../../../img/icons/chevron-left.svg);
  left: 20px;
  right: unset;
}
.index-header--animation--video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--index-overlay-color, #ff675d);
}
.index-header--animation--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150vmax;
  height: 150vmax;
  border-radius: 50%;
  background: var(--index-overlay-color, #ff675d);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1), background-color 250ms ease;
  pointer-events: none;
}
.index-header--animation--video.is-video-ended::after {
  transform: translate(-50%, -50%) scale(1);
}
.index-header--animation--video video {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
}
@media (max-width: 640px) {
  .index-header--animation--video video {
    width: 130%;
  }
}
@media (max-width: 320px) {
  .index-header--animation--video video {
    width: 140%;
  }
}
.index-header--animation--video .index-header--lottie-canvas,
.index-header--animation--video noscript,
.index-header--animation--video noscript img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.index-header--animation--video .index-header--lottie-canvas,
.index-header--animation--video noscript img {
  object-fit: cover;
}
.index-header--animation--lottie {
  background: #fff;
  z-index: 3;
}
.index-header--animation .grid-width {
  position: relative;
  z-index: 2;
}
.index-header--animation .index-header--hover-video {
  position: absolute;
  left: var(--index-pill-x, 46vw);
  top: var(--index-pill-y, 38vh);
  z-index: 1;
  width: clamp(340px, 48vw, 980px);
  aspect-ratio: 2.45/1;
  border-radius: 999px;
  clip-path: inset(0 round 999px);
  background: var(--index-overlay-color, #ff675d);
  contain: paint;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: left, top, transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, -50%, 0) scale(var(--index-pill-scale, 1));
  transition: opacity 275ms ease, left 450ms cubic-bezier(0.22, 1, 0.36, 1), top 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 640px) {
  .index-header--animation .index-header--hover-video {
    display: none;
  }
}
.index-header--animation .index-header--hover-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: translateZ(0);
}
.index-header--animation--moveam svg {
  position: absolute;
  right: -250px;
  top: -260px;
  width: 85%;
  max-width: 1500px;
  height: auto;
}
@media (max-width: 999px) {
  .index-header--animation--moveam svg {
    right: -65px;
    top: 55px;
    width: auto;
    max-width: auto;
    max-height: 350px;
  }
}
.index-header--menu {
  position: relative;
  padding-top: 180px;
  z-index: 2;
  transition: opacity 350ms ease;
}
@media (max-width: 1620px) {
  .index-header--menu {
    padding-top: 20vh;
  }
}
@media (max-width: 999px) {
  .index-header--menu {
    padding-top: 120px;
  }
}
.index-header--menu ul li a {
  margin: 0 0 -30px 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(66px, 15vh, 150px);
  line-height: 1.15em;
  font-weight: 700;
  overflow: hidden;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, var(--index-header-accent, #ffffbf), var(--index-header-accent, #ffffbf) 50%, var(--index-menu-color, #ffffbf) 50%);
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease, opacity 275ms ease;
  text-decoration: none;
}
@media (max-width: 999px) {
  .index-header--menu ul li a {
    font-size: 66px;
    margin-bottom: -10px;
  }
}
.index-header--menu ul li a:hover {
  background-position: 0 100%;
}
@media (max-width: 999px) {
  .index-header--menu ul li a:hover {
    background-position: 100%;
  }
}
.index-header--menu ul li a span {
  font-size: clamp(24px, 6vh, 61px);
  line-height: 1;
  font-weight: 700;
  vertical-align: super;
}
.index-header--menu ul:hover li a, .index-header--menu ul:focus-within li a {
  background-position: 0 100%;
  opacity: 0.45;
}
.index-header--menu ul:hover li a:hover, .index-header--menu ul:hover li a:focus, .index-header--menu ul:focus-within li a:hover, .index-header--menu ul:focus-within li a:focus {
  opacity: 1;
}

body.has-index-video-intro:not(.index-video-ended) .index-header--menu,
body.has-index-video-intro:not(.index-video-ended) #meta-box,
body.has-index-video-intro:not(.index-video-ended) #header .logo,
body.has-index-video-intro:not(.index-video-ended) #header #burger,
body:has(.index-header--animation--lottie):not(.index-video-ended) .index-header--menu,
body:has(.index-header--animation--lottie):not(.index-video-ended) #meta-box,
body:has(.index-header--animation--lottie):not(.index-video-ended) #header .logo,
body:has(.index-header--animation--lottie):not(.index-video-ended) #header #burger {
  opacity: 0;
  pointer-events: none;
}

body.index-video-ended .index-header--animation--lottie {
  z-index: 0;
}

body.has-index-video-intro.index-video-ended .index-header--menu,
body.has-index-video-intro.index-video-ended #meta-box,
body.has-index-video-intro.index-video-ended #header .logo,
body.has-index-video-intro.index-video-ended #header #burger {
  opacity: 1;
  pointer-events: auto;
}

body.has-index-video-intro.index-video-ended.index-video-header-active:not(.main-menu-open) #header #burger {
  opacity: 0;
  pointer-events: none;
}

body.has-index-video-intro.index-video-ended.index-menu-hover-active .index-header--hover-video {
  opacity: 1;
}

body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(1):hover) .index-header--hover-video, body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(1):focus-within) .index-header--hover-video {
  left: 48vw;
  top: 38vh;
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(1);
}
body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(2):hover) .index-header--hover-video, body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(2):focus-within) .index-header--hover-video {
  left: 48vw;
  top: 52vh;
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(0.96);
}
body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(3):hover) .index-header--hover-video, body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(3):focus-within) .index-header--hover-video {
  left: 44vw;
  top: 47vh;
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(0.96);
}
body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(4):hover) .index-header--hover-video, body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(4):focus-within) .index-header--hover-video {
  left: 49vw;
  top: 42vh;
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(0.94);
}
body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(5):hover) .index-header--hover-video, body.has-index-video-intro.index-video-ended:has(.index-header--menu li:nth-child(5):focus-within) .index-header--hover-video {
  left: 47vw;
  top: 50vh;
  opacity: 1;
  transform: translate3d(0, -50%, 0) scale(0.96);
}

body.has-index-video-intro #header .logo {
  color: var(--index-header-accent, #ff675d);
}
body.has-index-video-intro #header #burger .burger-inner span {
  background-color: var(--index-header-accent, #ff675d);
}

body.has-index-video-intro.scroll-up #header .logo {
  color: var(--logo-menu-scroll-color, #ff675d);
}
body.has-index-video-intro.scroll-up #header #burger .burger-inner span {
  background-color: var(--logo-menu-scroll-color, #ff675d);
}

body.has-index-video-intro.scroll-up.index-menu-hover-active #header .logo {
  color: var(--index-header-accent, #ff675d);
}
body.has-index-video-intro.scroll-up.index-menu-hover-active #header #burger .burger-inner span {
  background-color: var(--index-header-accent, #ff675d);
}

body.has-index-video-intro.index-video-ended.index-video-header-active.scroll-up:not(.main-menu-open) #header .logo {
  color: var(--index-header-accent, #ffffbf);
}
body.has-index-video-intro.index-video-ended.index-video-header-active.scroll-up:not(.main-menu-open) #header #burger .burger-inner span {
  background-color: var(--index-header-accent, #ffffbf);
}

body.has-index-video-intro.main-menu-open #header .logo {
  color: var(--main-menu-open-logo-burger-items-color, #ffffff);
}
body.has-index-video-intro.main-menu-open #header #burger .burger-inner span {
  background-color: var(--main-menu-open-logo-burger-items-color, #ffffff);
}

#meta-box {
  transition: opacity 350ms ease;
}

body.has-index-video-intro #header .logo,
body.has-index-video-intro #header #burger {
  transition: opacity 350ms ease, color 0.25s ease;
}

/*# sourceMappingURL=index-header.css.map */
