@font-face {
  font-family: 'Gellix';
  src: url('assets/Gellix-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gellix';
  src: url('assets/Gellix-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Fraktion Mono';
  src: url('assets/PPFraktionMonoBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* ==== CSS Reset (Modern Minimal) ==== */

/* Box sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin & padding */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Remove list styles */
ul[role='list'], ol[role='list'] {
  list-style: none;
}

/* Remove anchor underline by default */
a {
  text-decoration: none;
  color: inherit;
}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  display: block;
}

/* Remove animations and transitions for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
	scroll-behavior: auto;
  }

  *, *::before, *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
  }
}

html, body {
	margin: 0;
	padding: 0;
	margin: 0;
}
html {
	scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background: #b5bcc3;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  overscroll-behavior: none;
  font-family: Gellix, sans-serif;
  line-height: 1.5;
}
body.no-scroll, body.preload {
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #171B41;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}
#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}
#preloader .page-section-fixed {
	position: relative !important;
	display: block;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
}

.load-indicator {
	opacity: 1 !important;
	transform: rotate(-90deg) translate(20px, 0px) !important;
	margin: 0 !important;
}

@media (hover: none) and (pointer: coarse) {
  #custom-cursor {
	display: none !important;
  }
}

.header-logo {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 8888;
	display: block;
}
.header-logo img {
	width: 70px;
	height: auto;
}

.side-nav {
  display: none;
}

.header-button {
	position: fixed;
	top: 27px;
	right: 20px;
	z-index: 8888;
	display: block;
}
.button-red {
	width: auto;
	height: 38px;
	padding: 10px 25px;
	justify-content: center;
	align-items: center;
	border-radius: 19px;
	background: #F8495E;
	display: block;
	line-height: 18px;
	color: #FFF;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.button-red:hover {
	background: #5b67d5;	
}
.button-wrap {
	font-size: 10px;
}
.popup-inner .button-wrap {
	position: sticky;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
}
.popup-inner .button-wrap .button-red {
	height: 49px;
	line-height: 19px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 25px;
	font-family: "Fraktion Mono";
	text-transform: uppercase;
	font-size: 15px;
}
.fzBeed {
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	cursor: pointer;
	font-family: "Fraktion Mono";
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	border-radius: 3em;
	background: none;
	padding: 0;
	margin: 0;
}
.ziacJ {
	transform: translateY(0em);
	display: block;
	opacity: 1;
	transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.kdyUFy {
	position: relative;
	display: block;
}
.geHhKH {
	display: none;
}
@keyframes spin {
  0% {
	transform: translate(-50%, -50%) translate3d(-0.074px, -0.074px, 0px) rotate(0deg);
  }
  100% {
	transform: translate(-50%, -50%) translate3d(-0.074px, -0.074px, 0px) rotate(360deg);
  }
}
.jzDoNC {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	aspect-ratio: 1 / 1;
	background-image: conic-gradient(from 90deg at 50% 50%, rgb(255, 240, 101) 0deg, rgb(249, 139, 112) 116.25deg, rgb(187, 128, 202) 181.87deg, rgb(91, 103, 213) 243.75deg, rgb(111, 42, 166) 305.62deg, rgb(29, 50, 71) 360deg);
	opacity: 0;
	transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform, opacity;
	touch-action: pan-y;
	translate: none;
	rotate: none;
	scale: none;
	transform: translate(-50%, -50%) translate3d(-0.078px, -0.078px, 0px) rotate(50.4deg);
}
.jrdDPa {
	position: relative;
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	gap: 10px;
	border-radius: 30px;
	padding: 8px 18px 8px 8px;
	color: #000;
	background-color: rgb(255, 255, 255);
}
.kktAQs {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 50%;
	flex-shrink: 0;
	transition: transform 0.15s cubic-bezier(1, 0, 0, 1);
}
.hmnEJF {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-200%, -50%);
	opacity: 0;
	z-index: 1;
	transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.kktAQs path {
	transition: color 0.2s cubic-bezier(1, 0, 0, 1);
}
.dkyqox {
	position: relative;
	display: block;
	width: 2.2em;
	aspect-ratio: 1 / 1;
	background-image: conic-gradient(from 90deg at 50% 50%, rgb(255, 240, 101) 0deg, rgb(249, 139, 112) 116.25deg, rgb(187, 128, 202) 181.87deg, rgb(91, 103, 213) 243.75deg, rgb(111, 42, 166) 305.62deg, rgb(29, 50, 71) 360deg);
	border-radius: 50%;
}
.dkyqox:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #F8495E;
	transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 0.05s;
	opacity: 0;
}
.gDFmxo {
	position: relative;
}

.fzBeed-back .dkyqox {
	transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	transform: rotate(180deg) !important;
}
.fzBeed-back .dkyqox:after {
	opacity: 1;
}
.fzBeed-back .hmnEJF {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(180deg);
}

.fzBeed-external .dkyqox {
	transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.fzBeed-external .dkyqox:after {
	opacity: 1;
	background: #9747FF;
}
.fzBeed-external .hmnEJF {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.scroll-pill {
	width: auto;
	height: 38px;
	padding: 10px 25px;
	justify-content: center;
	align-items: center;
	border-radius: 19px;
	background: #fff;
	display: inline-block;
	line-height: 18px;
	color: #FFF;
	font-family: Fraktion Mono, sans-serif;
	color: #000;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	will-change: opacity, transform;
}

.scroll-wrapper {
	position: relative;
	width: 100%;
	z-index: 10;
	background: #D7DBDF;
	height: 300vh; /* Adjust scroll duration */
}
.intro-text {
	position: fixed;
	z-index: 999;
	bottom: 4lvh;
	left: 0;
	width: 100%;
	text-align: center;
	transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
	will-change: opacity;
	transition-delay: 0.4s;
}
.intro-text h1 {
	color: #000;
	text-align: center;
	font-style: normal;
	font-weight: 500;
	font-size: 5vw;
	line-height: 1.3;
}
#loopVideoWrap.scrolled .intro-text {
	opacity: 0;
	transition-delay: 0s;
}
.intro-text .split-letters span {
  opacity: 0;
  display: inline-block;
  transition: 1.5s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: opacity, transform;
}
.intro-text.animate .split-letters span {
  opacity: 1;
  transform: translateY(0) !important;
}
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 100px;
  margin-top: 20px;

  opacity: 0;
  will-change: opacity, transform;

  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 1.5s;
}

.intro-text .scroll-pill {
	opacity: 0;
	margin-top: 20px;
	transform: translateY(10px);
	transition-property: opacity, transform;
	transition-duration: 0.75s;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 1s;
}
.intro-text.animate .scroll-pill,
.intro-text.animate .scroll-indicator {
	opacity: 1;
	transform: translateY(0px);
}
.scroll-indicator span {
  width: 5px;
  height: 5px;
  background-color: #9747FF;
  border-radius: 50%;
  animation: pulse 1.3s infinite ease-in-out;
  opacity: 0.3;
  transform: scale(1);
}

/* Stagger the animation for each dot */
.scroll-indicator span:nth-child(1) {
  animation-delay: 0s;
}
.scroll-indicator span:nth-child(2) {
  animation-delay: 0.15s;
}
.scroll-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}
.scroll-indicator span:nth-child(4) {
  animation-delay: 0.45s;
}

@keyframes pulse {
  0%, 80% {
	opacity: 0.3;
	transform: scale(0.7);
  }
  50% {
	opacity: 1;
	transform: scale(1.6);
  }
  100% {
	  opacity: 0.3;
	  transform: scale(0.7);
	}
}

.sticky-video-container {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 1;
	user-select: none;
}
.sticky-video-container-inner {
	position: relative;
	width: 100%;
	height: 70vh;
	transition: none;
	overflow: hidden;
	will-change: height;
	user-select: none;
}
.sticky-video-container-inner:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20vh;
	z-index: 100;
	background: #D7DBDF;
	background: linear-gradient(180deg, rgba(181, 188, 195, 1) 0%, rgba(215, 219, 223, 0) 100%);
	pointer-events: none;
	transition: none;
	opacity: 1;
	opacity: var(--overlay-opacity, 1);
	will-change: opacity;
	user-select: none;
}
.sticky-video-container-inner:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10vh;
	z-index: 100;
	background: #D7DBDF;
	background: linear-gradient(0deg, rgba(215, 219, 223, 1) 0%, rgba(215, 219, 223, 0) 100%);
	pointer-events: none;
	transition: none;
	opacity: 1;
	opacity: var(--overlay-opacity, 1);
	will-change: opacity;
	user-select: none;
}

#scrollVideo {
	width: 108%;
	margin-left: -8%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	touch-action: none;
	transition: none !important;
	user-select: none;
	transform: translateZ(0);
}
#loopVideo {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: 108%;
	margin-left: -8%;
	height: 70vh;
	object-fit: cover;
	display: block;
	pointer-events: none;
	touch-action: none;
	transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	opacity: 1;
	will-change: opacity;
	user-select: none;
}
#loopVideoWrap.scrolled #loopVideo {
	opacity: 0;
}

.video-end-wrapper {
	background: #FFF;
	height: 200vh;
	padding-top: 100vh;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: opacity;
	user-select: none;
}
.video-end-wrapper.animate {
	opacity: 1;
}
.middle-content {
	width: 80%;
}
.middle-content h2 {
	color: #000;
	text-align: center;
	font-size: 6.2vw;
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
}
.middle-content-more p {
	color: #fff;
	text-align: center;
	font-size: 4.75vw;
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
}

.highlight {
	color: #000 !important;
	position: relative;
	display: inline-block;
	color: inherit;
	z-index: 1;
	text-shadow: none;
}
.middle-content-more .highlight {
	color: #fff !important;	
}
.highlight::before {
  content: "";
  position: absolute;
  bottom: 0;       
  left: -0.4vw;
  height: 8%;
  width: 0;
  background: #f8495e;
  transition: width 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.25s;
  z-index: -1;
  will-change: width;
}
.page-section .highlight:nth-of-type(2)::before {
	transition-delay: 0.75s;
}
.page-section .highlight:nth-of-type(3)::before {
	transition-delay: 1.25s;
}
.page-section .highlight:nth-of-type(4)::before {
	transition-delay: 1.75s;
}
.page-section .highlight:nth-of-type(5)::before {
	transition-delay: 2.25s;
}
.page-section .highlight:nth-of-type(6)::before {
	transition-delay: 2.75s;
}
.animate .highlight::before {
  width: 100%; 
  width: calc(100% + 0.8vw);
}

.content-wrapper {
	position: relative;
	background: #171B41;
	overflow-x: hidden;
}
.text-shadow {
	text-shadow: 0px 0px 15px rgba(23,27,65,0.5);
}
.page-content {
  position: relative;
}
#tunnel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  will-change: opacity; user-select: none;
}
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  user-select: none;
}
.gradient {
  position: absolute;
  width: 120vw;
  height: 120vh;
  top: -10vh; left: -10vw;
  opacity: 0;
  animation: moveGradient 8s infinite ease-in-out alternate;
  will-change: opacity, transform;
  user-select: none;
}
.gradient1 {
  background: url('assets/grad-1.svg') no-repeat center center scroll;
  background-size: cover;
  animation-delay: 0s;
}
#preloader .gradient1 {
	animation: moveGradient 5s infinite ease-in-out alternate;
	animation-delay: 0s;
}
.gradient2 {
  background: url('assets/grad-2.svg') no-repeat center center scroll;
  background-size: cover;
  animation-delay: 2.3s;
}
#preloader .gradient2 {
	animation: moveGradient 5s infinite ease-in-out alternate;
	animation-delay: 3s;
}
.gradient3 {
  background: url('assets/grad-3.svg') no-repeat center center scroll;
  background-size: cover;
  animation-delay: 5.7s;
}
#preloader .gradient3 {
	animation: moveGradient 5s infinite ease-in-out alternate;
	animation-delay: 1.5s;
}
@keyframes moveGradient {
  0% { transform: translate(0, 0); opacity: 0; }
  40% { transform: translate(-10vw, -10vh); opacity: 0.7; }
  60% { transform: translate(10vw, 10vh); opacity: 0.35; }
  80% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}

.page-section.animate .page-section-fixed {
	pointer-events: all;
}

.white-spacer {
	background: #fff;
	display: block;
	height: 5vh;
}
.video-wrap {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	background: #171B41;
	user-select: none;
}
.unmute-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.unmute-btn img {
  width: 20px;
  height: 20px;
}
.unmute-btn:hover {
	background: #5b67d5;
}

.scale-up {
	opacity: 0;
	transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	transform-origin: center;
	will-change: opacity;
}
.animate .scale-up {
	opacity: 1 !important;
}

.popup {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 1; /* Always opaque to preserve blur compositing */
}
.popup.active {
  pointer-events: all;
  opacity: 1;
}
.popup-inner {
  padding: 20px;
  width: 100vw;
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  background-color: #202555;
  opacity: 0;
  transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.popup.active .popup-inner {
  opacity: 1;
}
.popup-inner p {
	margin-bottom: 15px;
}

.tiles-wrap {
	text-align: center;
	will-change: auto;
	max-width: 400px;
	margin: 0 auto;
}
.tiles-wrap .section-title {
	margin-top: 25px;
}
.tiles-wrap .button-wrap {
	margin-top: 25px;
}
.tiles-wrap .glass-wrap {
	margin-top: 15px;
}
.tiles-wrap .section-title h2 {
	color: #fff;
	font-size: 22px;
	line-height: 1.3;
}
.tiles-wrap .section-title h2 br {
	display: none;
}
.tiles-wrap .dots {
	display: none;
}
.glass {
	position: relative;
	z-index: 1;
	border-radius: 10px;
	background-color: rgba(70, 80, 179, 0.25);
	padding: 15px;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#timeline {
	height: 300vh;
}
.timeline-intro {
	position: absolute;
	top: 100px;
	left: 50%;
	width: 80%;
	transform: translateX(-50%);
	color: #fff;
	text-align: center;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	font-size: 3.5vw;
}
.timeline-intro h2 {
	color: #fff;
	font-size: 6vw;	
}
.timeline-intro p {
	font-size: 3.5vw;
	margin-top: 10px;
}
.page-section-fixed-timeline {
	overflow: hidden;
	display: block;
}
.timeline-wrap-outer {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(ellipse farthest-corner at center, 
	  rgba(23, 27, 65, 0.75) 0%, 
	  rgba(23, 27, 65, 0) 80%);
}
.timelinecircle-wrap {
	position: absolute;
	width: 130vw;
	height: 100%;
	top: 0;
	bottom: 0;
	left: -40%;
	display: flex;
	align-items: center;
	z-index: 3;
	transform: translateY(10%);
}
.timelinecircle {
	position: relative;
	display: grid;
	place-items: center stretch;
	width: 100%;
	transform: rotate(0deg);
	transform-origin: 0% 50%;
	will-change: transform;
	user-select: none;
}
.timelinecircle:before {
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	background: url('../assets/circle-dots.svg') no-repeat center center scroll;
	background-size: 100% 100%;
	top: 50%;
	right: 0;
	width: 260vw;
	height: 260vw;
	transform-origin: center;
	transform: translate(0, -50%) scale(0.53);
	opacity: 0.5;
}
.timelinecircle:after {
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	background: url('../assets/circle-dots-2.svg') no-repeat center center scroll;
	background-size: 100% 100%;
	top: 50%;
	right: 0;
	width: 260vw;
	height: 260vw;
	transform-origin: center;
	transform: translate(0, -50%) scale(0.545);
	opacity: 0.75;
}
.timelinecircle-bigdots {
	display: block;
	pointer-events: none;
	position: absolute;
	background: url('../assets/circle-dots-3.svg') no-repeat center center scroll;
	background-size: 100% 100%;
	top: 50%;
	right: 0;
	width: 260vw;
	height: 260vw;
	transform-origin: center;
	transform: translate(0, -50%) scale(0.57);
}

.year-wrap {
	transform-origin: 0% 50%;
	padding-left: 60%;
	position: relative;
	grid-area: 1 / 1;
	opacity: 0;
	transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: opacity;
	user-select: none;
}
.year-wrap.active {
	opacity: 1;
}
.year-wrap.nearby {
  opacity: 0.2;
}
.year-wrap.far {
  opacity: 0.05;
}
.timeline-images {
	display: none;
}
.year-number {
	position: absolute;
	right: 50%;
	color: #fff;
	line-height: 1;
	font-size: 5vw;
	top: 50%;
	text-align: right;
	transform: translate(-20%, -50%);
	transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
	user-select: none;
}
.year-wrap.active .year-number {
	transform: translate(0%, -50%);
}
.year-content {
	color: #fff;
	font-size: 3.07vw;
	line-height: 1.3;
	position: relative;
}
.year-content:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 107.45%;
	transform: translateY(-50%);
	width: 2vw;
	height: 2vw;
	display: block;
	background: #F8495E;
	transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	opacity: 0;
	border-radius: 50%;
}
.year-wrap.active .year-content:before {
	opacity: 1;
}

.subscribe-wrap {
	text-align: center;
	margin-top: 7vw;
}

#repelCanvas {
	display: none;
}
.canvas-wrapper {
	display: none;
	will-change: opacity;
	user-select: none;
}
.logo-large {
	width: 80%;
	height: auto;
	margin: 0 auto 6vw auto;
}
.sig {
	width: 50%;
	max-width: 534px;
	height: auto;
	margin: 8vw auto 0 auto;
}

.iframe-wrapper {
	padding:56.25% 0 0 0; position:relative;
}
.iframe-wrapper iframe {
	position:absolute;top:0;left:0;width:100%;height:100%;
}

@media (max-width: 999px) {
	
	.hide-text-mobile {
		display: none !important;
	}
	.hide-on-mobile .video-wrap {
		display: none !important;
	 }
	.page-section {
		height: auto;
	}
	.page-section-fixed-inner {
		display: block;
		width: 100%;
		padding: 20% 10%;
	}
	#next .page-section-fixed-inner {
		padding-bottom: 0%;
		padding-top: 0%;
	}
	#next {
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.page-section-spacer-next {
		height: 75vh;
		display: block;
		width: 100%;
	}
	.video-padding {
		padding: 40% 10% 20% 10%;
	}
	.page-section-fixed {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		z-index: 5;
		pointer-events: none;
	}
	.page-section-fixed-timeline {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.above-timeline {
		padding-bottom: 75vh;
	}
	
}

@media (min-width: 500px) {
	
	.intro-text h1 {
		font-size: 3.8vw;
	}
	#loopVideo, #scrollVideo {
		width: 104%;
		margin-left: -4%;
	}
	.video-padding, .page-section-fixed-inner {
		padding-left: 15%;
		padding-right: 15%;
	}
	.middle-content-more p {
		font-size: 3.5vw;
	}
	
	.unmute-btn {
	  top: 20px;
	  left: 20px;
	  padding: 15px;
  	}
	.unmute-btn img {
		width: 30px;
		height: 30px;
	}
	
	.timeline-intro {
		width: 400px;
	}
	.timeline-intro, .timeline-intro p {
		font-size: 16px;
	}
	.timeline-intro h2 {
		font-size: 30px;
	}
	
	.subscribe-wrap {
		margin-top: 5vw;
	}
	
}

@media (min-width: 768px) {
	
	.popup {
		z-index: 777;
		height: 100vh;
	}
	.popup-inner {
		max-width: 650px;
		height: auto;
		min-height: auto;
		max-height: 650px;
		max-height: calc(100vh - 200px);
		padding: 25px;
		font-size: 15px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background-color: rgba(32, 37, 85, 0.75);
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
	}
	.subscribe-wrap {
		margin-top: 4vw;
	}
	
}

@media (min-width: 1000px) {
	
	.hide-text-desktop {
		display: none !important;
	}
	body {
		background: #D7DBDF;
	}
	/* Hide the default cursor */
	body, * {
	  cursor: none !important;
	}
	/* Custom cursor style */
	#custom-cursor {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 20px;
	  height: 20px;
	  line-height: 1;
	  opacity: 1;
	  display: block;
	  background-color: #9747FF;
	  border-radius: 50%;
	  pointer-events: none;
	  z-index: 9999;
	  transform: translate(-50%, -50%);
	  transition: opacity 0.35s ease, transform 0.35s ease;
	  will-change: transform;
	  background-color: rgba(151, 71, 255, 0.5);
	  backdrop-filter: invert(1);
	}
	#custom-cursor.cursor-hover {
	  transform: translate(-50%, -50%) scale(1.7);
	}
	#custom-cursor.cursor-small-hover {
		transform: translate(-50%, -50%) scale(0.6);
	}
	#custom-cursor.cursor-hidden {
	  opacity: 0;
	  pointer-events: none;
	}
	
	.header-logo {
		top: 30px;
		left: 30px;
	}
	.header-logo img {
		width: 87px;
		height: auto;
	}
	.header-button {
		top: 43px;
		right: 40px;
	}
	.intro-text {
		bottom: 20px;
	}
	.intro-text h1 {
		font-size: 30px;
	}
	
	.scale-up {
		opacity: 0;
		transform: scale(0.25);
		transition: 0.65s cubic-bezier(0.75, 0, 0.35, 1);
		transform-origin: center;
		will-change: auto;
	}
	.animate .scale-up {
		opacity: 1 !important;
		transform: scale(1);
	}
	.glass {
		background-color: rgba(91, 103, 213, 0.17);
		background-blend-mode: multiply;
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}
	.scale-up.tiles-wrap .glass {
		backdrop-filter: blur(0px);
		-webkit-backdrop-filter: blur(0px);
		transition: 0.25s cubic-bezier(0.65, 0, 0.35, 1);
		transition-delay: 0.75s;
	}
	.animate .scale-up.tiles-wrap .glass {
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}
	
	.page-section {
		height: 80vh;
	}
	.page-section-fixed {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		pointer-events: none;
		overflow: hidden;
	}
	.page-section-fixed-inner {
		width: 100%;
		display: block;
	}
	.video-padding, .page-section-fixed-inner {
		padding: 5% 15%;
	}
	.scroll-wrapper {
		height: 400vh; /* Adjust scroll duration */
	}
	.sticky-video-container-inner {
		height: 100vh;
		transform: scale(0.7);
		will-change: transform;
		user-select: none;
		transform-origin: center top;
		transition: none !important;
	}
	#loopVideo, #scrollVideo {
		width: 105%;
		margin-left: -5%;
		height: 100vh;
	}
	#scrollVideo {
		height: 100%;
	}
	
	.sticky-video-container-inner:before,
	.sticky-video-container-inner:after {
		display: none;
	}
	.sticky-video-container-overlay {
		position: absolute;
		pointer-events: none;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: #DADDE1;
		background:
		  linear-gradient(to top, rgba(215, 219, 223, 1), transparent 20%),
		  linear-gradient(to bottom, rgba(215, 219, 223, 1), transparent 20%),
		  linear-gradient(to left, rgba(215, 219, 223, 1), transparent 20%),
		  linear-gradient(to right, rgba(215, 219, 223, 1), transparent 20%);
		backface-visibility: hidden;
	    will-change: opacity;
		transition: none;
		opacity: 1;
		opacity: var(--overlay-opacity, 1);
		/* this fixes the overlay bleed on 4k*/
		transform: scale(1.01);
		transform-origin: center;
	}
	
	#timeline {
		height: 580vh; /* 6 sections minus spacer */
	}
	#tunnel {
	  filter: blur(0.25px);
  	}
	
	.page-section-spacer {
		height: 20vh;
		display: block;
		width: 100%;
	}
	.middle-content {
		width: 60%;
	}
	.middle-content h2 {
		font-size: 3.39vw;
	}
	.middle-content-more p {
		font-size: 2.2vw;
		line-height: 1.2;
	}
	
	.side-nav {
	  position: fixed;
	  right: 88px;
	  top: 50%;
	  transform: translateY(-50%);
	  display: flex;
	  flex-direction: column;
	  gap: 2vh;
	  z-index: 8888;
	  align-items: center;
	}
	.dot {
	  width: 2px;
	  height: 2px;
	  background: white;
	  border-radius: 50%;
	  transform: scale(1);
	  transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	  will-change: opacity, transform;
	}
	.dot.active {
	  background: #F8495E;
	  opacity: 1;
	  transform: scale(2);
	}
	.anchor-dot {
	  width: 10px;
	  height: 10px;
	  position: relative;
	  z-index: 9999;
	  transform: scale(1) !important;
	}
	.anchor-dot:hover {
		background: #F8495E;
	}
	.anchor-dot span {
		position: absolute;
		width: 200%;
		height: 200%;
		transform: translate(-25%, -25%);
	}
	.anchor-dot::before {
	  content: attr(data-label);
	  position: absolute;
	  right: -5px;
	  top: 50%;
	  transform: translate(-20%, -50%);
	  background: #fff;
	  color: #000;
	  font-size: 10px;
	  padding: 5px 20px 5px 10px;
	  border-radius: 999px;
	  white-space: nowrap;
	  opacity: 0;
	  transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	  z-index: 8888;
	  line-height: 1;
	  font-family: Fraktion Mono, sans-serif;
	  font-style: normal;
	  font-weight: 700;
	  text-transform: uppercase;
	  will-change: opacity, transform;
	  pointer-events: none;
	}
	.anchor-text-hide::before {
		display: none !important;
	}
	.anchor-dot:hover::before,
	.anchor-dot.section-active::before {
	  opacity: 1;
	  transform: translate(0%, -50%);
	  pointer-events: all;
	}
	.anchor-dot::after {
	  content: '';
	  position: absolute;
	  right: 0;
	  top: 50%;
	  transition: 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	  z-index: 9999;
	  transform: translateY(-50%);
	  width: 10px;
	  height: 10px;
	  background: #F8495E;
	  border-radius: 50%;
	  opacity: 0;
	  will-change: opacity;
	}
	.anchor-dot:hover::after,
	.anchor-dot.section-active::after {
		opacity: 1;
	}
	
	.tiles-wrap {
		width: 80%;
		height: 30vw;
		max-width: none;
		position: relative;
		text-align: left;
	}
	.tiles-wrap .dots {
		display: block;
		width: 50%;
		height: auto;
		position: absolute;
		top: 10%;
		left: 20%;
	}
	.tiles-wrap .dots img {
		width: 100%;
		height: auto;
	}
	.tiles-wrap .video-wrap {
		display: block;
		width: 50%;
		height: auto;
		position: absolute;
		top: 20%;
		right: 10%;
	}
	.tiles-wrap .video-wrap:hover {
		z-index: 100;
	}
	.tiles-wrap .section-title {
		margin: 0;
		display: block;
		width: 50%;
		height: auto;
		position: absolute;
		top: 0%;
		left: 5%;
		pointer-events: none;
		z-index: 40;
	}
	.tiles-wrap .section-title h2 {
		font-size: 3.25vw;
		line-height: 1.1;
	}
	.tiles-wrap .section-title h2 br {
		display: inline-block;
	}
	.tiles-wrap .glass-wrap {
		width: 40%;
		height: auto;
		position: absolute;
		top: auto;
		bottom: 10%;
		left: 4%;
		pointer-events: none;
		margin: 0;
	}
	.tiles-wrap .glass {
		margin: 0;
		display: block;
		width: 100%;
		padding: 1.3vw;
		font-size: 1.09vw;
		line-height: 1.4;
	}
	.tiles-wrap .button-wrap {
		margin: 0;
		display: block;
		position: absolute;
		z-index: 50;
		bottom: 5%;
		left: 38%;
	}
	
	.layout-1.tiles-wrap .section-title {
		width: 80%;
	}
	.layout-2.tiles-wrap .section-title {
		right: auto;
		left: 25%;
	}
	.layout-2.tiles-wrap .video-wrap {
		right: auto;
		left: 0;
		top: auto;
		bottom: 0
	}
	.layout-2.tiles-wrap .glass-wrap {
		right: 14%;
		left: auto;
		top: 30%;
		bottom: auto;
	}
	.layout-2.tiles-wrap .button-wrap {
		top: 78%;
		left: 55%;
		bottom: auto;
	}
	
	.layout-3.tiles-wrap .section-title {
		right: auto;
		left: 5%;
		top: 57%;
		bottom: auto;
		width: 80%;
	}
	.layout-3.tiles-wrap .section-title span {
		margin-left: 10%;
	}
	.layout-3.tiles-wrap .video-wrap {
		right: auto;
		left: 14%;
		top: 0;
		bottom: auto;
	}
	.layout-3.tiles-wrap .glass-wrap {
		right: 0%;
		left: auto;
		top: 35%;
		bottom: auto;
	}
	.layout-3.tiles-wrap .button-wrap {
		top: 88%;
		left: 38%;
		bottom: auto;
	}
	
	.layout-4.tiles-wrap .section-title {
		right: 4%;
		left: auto;
		top: 60%;
		bottom: auto;
		width: 100%;
		text-align: right;
	}
	.layout-4.tiles-wrap .video-wrap {
		right: 10%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	.layout-4.tiles-wrap .glass-wrap {
		right: auto;
		left: 4%;
		top: 20%;
		bottom: auto;
	}
	.layout-4.tiles-wrap .button-wrap {
		bottom: auto;
		top: 90%;
		left: 28%;
	}
	
	.layout-5.tiles-wrap .section-title {
		right: 15%;
		left: auto;
		width: 75%;
		text-align: right;
	}
	.layout-5.tiles-wrap .video-wrap {
		right: auto;
		left: 3%;
		top: 30%;
		bottom: auto
	}
	.layout-5.tiles-wrap .glass-wrap {
		right: 3%;
		left: auto;
		top: 30%;
		bottom: auto;
	}
	.layout-5.tiles-wrap .button-wrap {
		bottom: auto;
		top: 82%;
		left: 57%;
	}
	
	.layout-6.tiles-wrap .section-title {
		text-align: right;
		left: auto;
		right: 54%;
		top: 5%;
	}
	.layout-6.tiles-wrap .video-wrap {
		right: 0%;
	}
	.layout-6.tiles-wrap .glass-wrap {
		left: -2%;
		bottom: auto;
		top: 35%;
	}
	.layout-6.tiles-wrap .button-wrap {
		bottom: auto;
		top: 70%;
		left: 43%;
	}
	
	.layout-7.tiles-wrap .section-title {
		right: 0;
		left: auto;
		bottom: 10%;
		top: auto;
		width: 100%;
		text-align: right;
	}
	.layout-7.tiles-wrap .video-wrap {
		right: auto;
		left: 5%;
		top: auto;
		bottom: 28%;
	}
	.layout-7.tiles-wrap .glass-wrap {
		right: 10%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	.layout-7.tiles-wrap .button-wrap {
		top: 52%;
		left: auto;
		right: 20%;
		bottom: auto;
	}
	
	.layout-8.tiles-wrap .section-title {
		left: 10%;
		right: auto;
		top: 5%;
	}
	.layout-8.tiles-wrap .video-wrap {
		right: 6%;
		top: 35%;
		bottom: auto;
		left: auto;
	}
	.layout-8.tiles-wrap .glass-wrap {
		left: 0%;
		bottom: auto;
		top: 22%;
	}
	.layout-8.tiles-wrap .button-wrap {
		bottom: auto;
		top: 64%;
		right: 60%;
		left: auto;
	}
	
	.tiles-wrap .video-wrap,
	.tiles-wrap .section-title,
	.tiles-wrap .glass-wrap,
	.tiles-wrap .button-wrap {
	  transition: transform 4s cubic-bezier(0.22, 1, 0.36, 1) !important;
	  transition-delay: 0s !important;
	  will-change: transform;
	}
	
	.timelinecircle-wrap {
		width: 100vw;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform: translateY(0%);
	}
	.timeline-intro {
		position: absolute;
		top: auto;
		bottom: 54vh;
		left: 11%;
		width: 22vw;
		text-align: left;
		transform: none;
		z-index: 5;
	}
	.timeline-intro h2 {
		font-size: 3vw;
	}
	.timeline-intro, .timeline-intro p {
		font-size: 1vw;
	}
	
	.timelinecircle-wrap {
		width: 70vw;
		left: 11vw;
	}
	.year-content {
		font-size: 1.4vw;
	}
	.year-number {
		font-size: 2.2vw;
	}
	.timelinecircle-bigdots, .timelinecircle:before, .timelinecircle:after {
		width: 140vw;
		height: 140vw;
	}
	.year-content:before {
		width: 1.1vw;
		height: 1.1vw;
		right: 107.25%;
		transform: translateY(-50%);
	}
	.timeline-images {
		position: absolute;
		top: 52vh;
		left: 0;
		pointer-events: none;
		display: block;	
	}
	.year-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 12vw;
		pointer-events: none;
		display: block;
		border-radius: 10px;
		transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
		opacity: 0;
		will-change: opacity; user-select: none;
	}
	.timeline-images .year-image.active {
	  opacity: 1;
	}
	.year-image img {
		border-radius: 10px;
		width: 100%;
		height: auto;
	}
	
	#next {
		height: 120vh;
		min-height: 120vh;
	}
	.below-timeline {
		padding-top: 0px;
	}
	#next .page-section-fixed {
		align-items: flex-end;
	}
	.canvas-wrapper {
		height: 100%;
		width: 100%;
		margin: 0;
		position: absolute;
		top: 0;
		left: 0;
		transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
		opacity: 0;
		display: none;
		will-change: transform, opacity; user-select: none;
	}
	.hg-logo {
		width: auto;
		height: 14%;
		max-width: none;
		max-height: none;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-53%, 85%);
		pointer-events: none;
		z-index: 5;
	}
	#next.animate .canvas-wrapper {
		opacity: 1;
		transition-delay: 0.5s;
	}
	#repelCanvas {
		display: block;
		width: 100%;
		height: 100%;
		opacity: 0.75;
		will-change: transform;
		user-select: none;
	}
	.subscribe-wrap {
		margin-top: 4vh;
	}
	.canvas-wrapper {
		display: block;	
	}
	.logo-large {
		display: none;
	}
	#next .page-section-fixed-inner {
		padding: 0 10% 15vh 10%;
		pointer-events: none;
	}
	#next .middle-content-more p {
		font-size: 4.5vh;
		pointer-events: none;
	}
	#next.animate .page-section-fixed-inner .button-wrap a {
		pointer-events: all;
	}
	
	.sig {
		width: 30%;
		margin: 4vw auto 0 auto;
	}
	
	.geHhKH {
		display: block;
		position: absolute;
		inset: 0px;
		transform: scaleX(0.9) scaleY(0.7);
		overflow: hidden;
		border-radius: 3em;
		filter: blur(2em);
	}
	
	/*
	#interview {
		background: #fff;
		position: relative;
		height: 106vh;
	}
	#interview .page-section-fixed {
		position: absolute;
		pointer-events: all;
	}
	#interview .scale-up {
		opacity: 1 !important;
		transform: scale(1);
	}
	#interview .video-wrap {
		background: #fff;
	}
	*/
	
	.fzBeed:hover .jzDoNC {
		opacity: 1;
		animation: spin 3s linear infinite;
	}
	.fzBeed:hover .hmnEJF {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
	.fzBeed:hover .dkyqox {
		transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
		transform: rotate(180deg) !important;
	}
	.fzBeed:hover .dkyqox:after {
		opacity: 1;
	}
	.fzBeed-back:hover .dkyqox {
		transform: rotate(0deg) !important;
		transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.fzBeed-back:hover .dkyqox:after {
		opacity: 0;
	}
	.fzBeed-back:hover .hmnEJF {
		opacity: 0;
		transform: translate(-200%, -50%) rotate(180deg);
	}
	.fzBeed-external:hover .dkyqox {
		transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
	}
	.fzBeed-external:hover .dkyqox:after {
		opacity: 0;
	}
	.fzBeed-external:hover .hmnEJF {
		opacity: 0;
		transform: translate(100%, -150%);
	}
	
}

@media (max-width: 999px) and (max-height: 700px) {
	
	.scroll-indicator {
		gap: 11px;
		margin-top: 0px;
		height: 90px;
	}
	.intro-text {
		bottom: 0px;
	}
	.intro-text .scroll-pill {
		margin-top: 15px;
	}
	.scroll-indicator span {
		width: 3px;
		height: 3px;
	}
	
}

@media (max-width: 999px) and (max-height: 640px) {
	
	.intro-text .scroll-pill {
		display: none;
	}
	
}

@media (min-width: 1000px) and (max-height: 780px) {
	
	.scroll-pill {
		display: none;
	}
	.scroll-indicator {
		transition-delay: 1s;	
	}
	
}

@media (min-width: 1000px) and (min-height: 900px) {
	
	.intro-text h1 {
		font-size: 38px;
	}	
	.intro-text .scroll-pill, .scroll-indicator {
		margin-top: 30px;
	}
	
}

@media (min-width: 1200px) {
	
	.popup-inner {
		width: 65vw;
		max-width: none;
	}
	.popup-columns {
		column-count: 2;
		column-gap: 25px;
	}
	.popup-inner .button-wrap {
		margin-top: 25px;
	}
	
}

@media (min-width: 1400px) {
	
	.popup-inner {
		padding: 35px;
		font-size: 16px;
	}
	.popup-inner .button-wrap {
		margin-top: 35px;
	}
	.popup-columns {
		column-gap: 35px;
	}
	
}

@media (min-width: 1600px) {
	.popup-columns {
		column-count: 3;
	}
}

@media (min-width: 1700px) {
	
	.popup-inner {
		font-size: 17px;
	}
	
}

@media (min-width: 1900px) {
	
	.popup-inner {
		padding: 50px;
	}
	.popup-inner .button-wrap {
		margin-top: 45px;
	}
	.popup-columns {
		column-gap: 40px;
	}
	
}