:root {
	--ease: cubic-bezier(0.46, 0.07, 0.25, 1);
}

/* normalize html */
html {
	box-sizing: border-box;
	font-size: 6.69vw;
	background-color: #ecfdfd;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
html {
		font-size: 16vw;
}
	}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga" 1;
	font-smoothing: antialiased;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 500;
	font-size: 0.24rem;
	line-height: 1.8em;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
	/* we set the opacity to 0 */
	opacity: 0;
}

/* Image without 'data' attribute is (or becomes) visible */

img.lazyloaded {
	/* prepare the future animation */
	-webkit-transition: opacity 0.5s linear 0.2s;
	-moz-transition: opacity 0.5s linear 0.2s;
	transition: opacity 0.5s linear 0.2s;
	/* we set the opacity to 1 to do the magic */
	opacity: 1;
}

.overflow-hidden {
	overflow: hidden;
}

.main {
	overflow: hidden;
}

.spacer {
	height: 200vh;
}

.media-frame {
	display: block;
	position: relative;
}

.media-frame.fill .media {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.media-frame .media {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

.absolute-fill-115p {
	position: absolute;
	top: -7.5%;
	left: -7.5%;
	width: 115%;
	height: 115%;
}

.text {
	font-size: 0.16rem;
	line-height: 1.1em;
	letter-spacing: 0em;
	font-weight: 500;
	text-transform: uppercase;
	color: #1da1a5;
}

:scope .link {
	display: block;
	position: relative;
	padding: 0 0.2em;
	margin: 0 -0.2em;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	overflow: hidden;
}

:is(:scope .link) span {
		display: block;
	}

:is(:scope .link) span:last-child {
		position: absolute;
		transform: translate(0, 125%);
		left: 0.2em;
		top: 0.05em;
	}

/*  */
.popup-wrap {
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: flex-end;
	transition: opacity 512ms var(--ease);
	z-index: 200;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 0 0.4rem;
	pointer-events: none;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.popup-wrap.is-open {
		pointer-events: all;
		opacity: 1;
	}
.popup-wrap.is-open .popup {
			transform: translate3d(0rem, 0, 0);
			opacity: 1;
		}
/*  */
.popup-wrap .popup {
		display: flex;
		flex-direction: column;
		transition:
			transform 512ms var(--ease),
			opacity 512ms var(--ease);
		transform: translate3d(0.2rem, 0, 0);
		opacity: 0;
		position: relative;
		padding: 0.5rem 0.24rem;
		padding-right: 0.3rem;
		border-radius: 0.04rem;
		background-color: #ecfdfd;
		max-height: calc(100% - 0.2rem);
		width: 3.64rem;
	}
:is(.popup-wrap .popup) .scroller {
			position: relative;
			width: calc(100% + 0.1rem);
			overflow: auto;
			max-height: calc(100%);
			scrollbar-width: thin;
		}
:is(.popup-wrap .popup) .close {
			display: block;
			cursor: pointer;
			transition: transform 256ms var(--ease);
			width: 0.16rem;
			margin: auto;
			margin-bottom: 0.4rem;
		}
:is(:is(.popup-wrap .popup) .close):hover {
				transform: scale(0.9);
			}
:is(.popup-wrap .popup) .subtitle {
			font-size: 0.16rem;
			line-height: 1.3em;
			font-weight: 500;
			color: #1da0a5;
			margin-bottom: 0.4rem;
		}
:is(.popup-wrap .popup) .text {
			text-transform: none;
			font-size: 0.14rem;
		}
:is(.popup-wrap .popup) .list {
			list-style: disc;
			padding-left: 1.8em;
			margin: 0.2rem 0;
		}
:is(:is(.popup-wrap .popup) .list) li:not(:last-child) {
				margin-bottom: 0.04rem;
			}
:is(.popup-wrap .popup) .take-a-tour {
			position: relative;
			display: block;
			width: fit-content;
			margin: auto;
			margin-top: 0.4rem;

			font-size: 0.16rem;
			line-height: 1.3em;
			font-weight: 700;
			text-align: center;
			color: #1da0a5;
		}
:is(:is(.popup-wrap .popup) .take-a-tour) > div {
				transition: transform 256ms var(--ease);
			}
:is(:is(.popup-wrap .popup) .take-a-tour) img {
				display: block;
				width: 0.8rem;
				margin: auto;
			}
:is(:is(.popup-wrap .popup) .take-a-tour):hover > div {
					transform: translate(0, -0.03rem);
				}