main {
	--header-height: 60px;
	--scroll-bar-width: 12px;
	height: calc(2.4 * (100vh - var(--header-height)));
	margin-top: calc(var(--header-height) * -1);
}

.sticky-scroller {
	min-height: calc(100vh - var(--header-height));
	padding-bottom: var(--vem-1000);
	position: sticky;
	top: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: start !important;
	gap: 5vw;
	overflow: hidden;
	scroll-snap-type: x mandatory;
}

.sticky-scroller > * {
	scroll-snap-align: start;
	flex: calc(100vw - var(--scroll-bar-width)) 0 0;
	max-width: calc(100vw - var(--scroll-bar-width));
	margin: 0;
}

.page-indicator {
	--background-color: var(--bg);
	position: sticky;
	align-self: end;
	left: calc(100vw - 11.5 * var(--vem));
	z-index: 10;
	display: flex;
	flex: 0;
	padding: 0;
	scroll-snap-align: none;
	gap: var(--vem-50);
	background: radial-gradient(
				circle,
				#0000 calc(var(--vem) * 0.6),
				var(--background-color) 0
			) -5% 0 / calc(var(--vem) * 1.75) 100%,
		radial-gradient(
				circle at 10%,
				var(--acc-blue-300) calc(var(--vem) * 0.6),
				var(--background-color) 0
			)
			var(--current-offset, 0) 0;
	transition: background 0.5s, opacity 0.2s;
	opacity: 0.5;
}

.page-indicator--mobile {
	display: none;
}

.page-indicator:hover {
	opacity: 1;
}

.page-indicator * {
	width: var(--vem-200);
	height: var(--vem-200);
	border: calc(var(--vem) * 0.2) solid var(--acc-blue-300);
	border-radius: 100%;
	transition: scale 0.2s;
}

.page-indicator *:hover {
	scale: 1.2;
}

.hidden-header {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.intro {
	padding-inline: var(--vem-200);
	justify-content: center;
	display: grid;
	grid-template-columns: auto auto;
	gap: 0;
	min-height: min-content;
}

.intro__image {
	position: relative;
	padding: var(--vem-800);
	grid-row: 1 / 3;
}

.intro__image svg {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.intro__image img {
	border-radius: 100%;
	width: var(--vem-2000);
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
}

.curved-text text {
	font-weight: 800;
	font-size: 1.5rem;
	fill: var(--grey-500);
}

tspan {
	fill: var(--acc-blue-500);
}

.intro__title {
	display: flex;
	align-items: flex-end;
	gap: var(--vem);
	align-self: end;
	font-size: min(var(--vem-700), 6vw);
}

.intro__wave {
	max-height: 1.5em;
}

.intro__greet {
	line-height: 1;
	white-space: nowrap;
	font-size: inherit;
}

.intro__text {
	font-size: var(--vem-300);
	align-self: start;
}

.intro__text p {
	margin-block: 0.7em;
	max-width: 57ch;
}

.intro__text b {
	font-weight: 500;
}

.intro__text a {
	display: block;
	width: 100%;
	text-align: right;
	font-size: var(--vem-200);
	text-decoration: none;
	font-weight: 600;
	transform: skew(-9deg);
	transition: all 0.4s cubic-bezier(0.34, 2, 0.64, 1);
	transform-origin: bottom;
}

.CTA__svg {
	height: 0.7em;
}

.intro__text .CTA__svg path {
	stroke: var(--text);
}

.intro__text a:hover {
	transform: none;
	font-weight: 800;
}

.why {
	flex-direction: column;
	justify-content: center;
	background: var(--bg);
	z-index: 1;
	gap: 0;
}

#why__label {
	font-size: var(--vem-700);
	font-weight: 700;
	font-family: var(--museo);
	background: radial-gradient(
				var(--acc-purple-500) 20%,
				var(--acc-blue-500) 70%
			)
			calc(var(--mouse-x, 0px) - var(--x-offset, 0px))
			calc(var(--mouse-y, 0px) - var(--y-offset, 0px)) / var(--grid-width, 0px)
			var(--grid-height, 0px) no-repeat,
		var(--acc-blue-500);
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent;
	transition: background 0.5s;
}

#why__label span {
	font-family: var(--museo);
	font-size: 0.73em;
	font-weight: 900;
}

.why__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vem);
	width: 100%;
	padding: var(--vem);
}

.why__grid > div {
	display: flex;
	padding: var(--vem-600) var(--vem-400);
	font-size: var(--vem-400);
	gap: var(--vem-500);
	align-items: center;
	position: relative;
	isolation: isolate;
	text-wrap: pretty;
}

.why__grid h3 {
	font-weight: 600;
	line-height: 1.2;
	font-size: 1.25em;
}

.why__grid em {
	font-weight: 700;
}

.why__grid b {
	font-weight: 500;
}

.why__grid img {
	max-height: var(--vem-950);
}

.drop-down {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vem-500);
	padding: var(--vem-50) var(--vem-200) var(--vem-50) 0;
}

.why__grid .arrow {
	display: none;
}

.why__grid > div::before,
.why__grid > div::after {
	--border: calc(var(--vem) / 4);
	content: "";
	position: absolute;
	background: radial-gradient(
				var(--acc-purple-500) 10%,
				var(--acc-purple-400) 30%,
				var(--acc-blue-300) 70%
			)
			calc(var(--mouse-x, 0px) - var(--x-offset, 0px))
			calc(var(--mouse-y, 0px) - var(--y-offset, 0px)) / var(--grid-width, 0px)
			var(--grid-height, 0px) no-repeat,
		var(--acc-blue-300);
	inset: 0;
	border-radius: var(--vem);
	opacity: 0.6;
	z-index: -10;
	transition: background 0.5s, opacity 1s;
}

.why__grid > div::after {
	inset: var(--border);
	background: var(--bg);
	opacity: 0.9;
	border-radius: calc(var(--vem) - var(--border));
}

.why__grid > div:hover::before {
	opacity: 0.8;
}

.why__grid > div:hover::after {
	opacity: 0.6;
}

.mission {
	display: grid;
	justify-content: stretch;
	justify-items: center;
	align-content: space-around;
	align-self: stretch;
	padding: var(--vem) var(--vem-900) var(--vem-600);
}

#mission__label {
	justify-self: start;
	font-size: var(--vem-700);
	font-weight: 600;
}

#mission__label span {
	font-family: var(--museo);
	font-weight: 800;
}

.mission__point {
	font-size: var(--vem-650);
	font-weight: 600;
	transform: skew(-9deg);
	transition: transform 0.3s cubic-bezier(0.34, 2, 0.64, 1), opacity 0.3s;
}

.mission__point .show {
	background: var(--gradient-500);
	padding: 0.2em 0.5em;
	border-radius: 50vw;
	color: var(--white-100);
}

.mission__point .fade {
	opacity: 0.2;
	transition: opacity 0.3s;
}

.mission__point:hover,
.mission__point:hover .show {
	transform: scale(1.1);
	opacity: 1 !important;
}

.mission__point:hover span {
	opacity: 1;
}

.mission:has(.mission__point:hover) .mission__point {
	opacity: 0.3;
}

.mission__point:first-of-type {
	letter-spacing: 0.014em;
}
.mission__point:first-of-type .show {
	padding-inline: 0.7em;
}
.mission__point:nth-of-type(2) {
	letter-spacing: 0.0015em;
}

.mission .right-align {
	text-align: right;
	justify-self: end;
	font-size: var(--vem-500);
	font-weight: 600;
	text-wrap: balance;
}

#success {
	padding-inline: var(--vem-800);
	justify-content: space-between;
}

#success__label {
	font-size: var(--vem-800);
	font-weight: 700;
	flex-basis: 100%;
}

#success figure {
	position: relative;
	background: color-mix(in oklab, var(--acc-blue-300), #0000 25%);
	box-shadow: inset 0 0 var(--vem-50) calc(-1 * var(--vem-25)) var(--white-100);
	padding: 1em;
	border-radius: var(--vem-400);
	font-size: var(--vem-500);
	max-width: 40ch;
}

#success figure::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--vem-50));
	background: var(--gradient-500);
	background-size: 200% 100%;
	z-index: -1;
	filter: blur(7px);
	border-radius: var(--vem-525);
	opacity: 0.8;
}

#success figure:nth-of-type(2):before {
	background-position: 100% 0;
}

.name {
	margin-top: 1em !important;
	text-align: right;
	opacity: 0.9;
}

.full-width {
	flex-basis: 100%;
}

#success a {
	background: var(--acc-blue-350);
	/* box-shadow: inset 0 -0.4em 0.4em var(--acc-blue-400),
		inset 0 0.4em 0.4em var(--acc-blue-300), 0 0.2em 0.4em var(--acc-blue-300); */
	box-shadow: inset 0 -0.1em 0.2em var(--acc-blue-400),
		inset 0 0.1em 0.2em var(--acc-blue-300), 0 0.2em 0.4em var(--acc-blue-300);
	text-decoration: none;
	color: var(--white-100);
	padding: 0.5em 1em;
	font-family: var(--museo);
	font-size: max(var(--vem-400), 24px);
	border-radius: 50vw;
	transition: background 0.2s, box-shadow 0.2s, scale 0.2s;
	margin-left: auto;
}

#success a .CTA__svg path {
	stroke: var(--white-100);
}

#success a:hover {
	scale: 1.03;
	background: var(--acc-blue-400);
	box-shadow: inset 0 -0.2em 0.2em var(--acc-blue-500),
		inset 0 0.2em 0.2em var(--acc-blue-300), 0 0.4em 0.4em var(--acc-blue-400);
}

@media (prefers-reduced-motion: no-preference) {
	header {
		translate: 0 -100%;
		animation: header-slide 1s 2s forwards;
	}

	.sticky-scroller {
		scroll-behavior: smooth;
	}

	.curved-text {
		opacity: 0;
		animation: textSweep 1s 0.5s forwards;
	}

	.delay {
		animation-delay: 1s;
	}

	@keyframes textSweep {
		from {
			opacity: 0;
			rotate: -75deg;
		}
		to {
			rotate: 0;
			opacity: 1;
		}
	}

	.intro__image img {
		animation: grow 1s forwards;
	}

	@keyframes grow {
		from {
			scale: 0;
		}
		to {
			scale: 1;
		}
	}

	.intro__title,
	.intro__text > * {
		translate: 100dvw 0;
		animation: slide-in 0.75s 1.5s forwards;
	}

	@keyframes slide-in {
		to {
			translate: 0 0;
		}
	}
}

@media (width < 770px) {
	header {
		position: relative;
		top: 0;
	}

	main {
		height: max-content;
	}

	.sticky-scroller {
		overflow: scroll hidden;
		padding: 0;
		min-height: max-content;
		position: static;
	}

	.sticky-scroller::-webkit-scrollbar {
		display: none;
	}

	.page-indicator {
		display: none;
	}

	.page-indicator--mobile {
		display: flex;
		margin: auto;
		width: max-content;
		position: static;
		opacity: 1;
	}

	.indicator-container {
		width: max-content;
		padding: 0.75em 1em;
		border-radius: 50vh;
		margin: 0.5em auto;
	}

	.indicator-container--select {
		background: color-mix(in oklab, var(--grey-500) 10%, var(--bg));
	}

	.indicator-container--select .page-indicator--mobile {
		--background-color: color-mix(in oklab, var(--grey-500) 10%, var(--bg));
	}

	.sticky-scroller > * {
		padding-top: var(--header-height);
		outline: none;
	}

	.page-indicator:hover {
		opacity: 1;
	}

	.page-indicator *:hover {
		scale: 1;
	}

	.intro {
		align-self: start;
		justify-items: center;
		grid-template-columns: 1fr minmax(min-content, 1fr);
		padding: var(--header-height) 0 0;
		background: white;
	}

	.intro__image {
		padding: 0;
		grid-row: 1/2;
		justify-self: right;
	}

	.intro__image svg {
		display: none;
	}

	.intro__image img {
		border-radius: 0;
		margin: 0 auto;
		transition: aspect-ratio 1s;
	}

	.intro__title {
		justify-self: left;
		align-self: center;
		justify-content: center;
		padding: 0 2em 2em 0;
		z-index: 1;
	}

	.intro__text {
		grid-column: 1/-1;
		font-size: var(--vem-500);
		background: var(--bg);
		width: 100%;
		padding-inline: max(calc(50% - 28ch), var(--vem-500));
		box-shadow: var(--vem-200) 0 var(--bg),
			0 calc(-1 * var(--vem)) var(--vem-200) calc(-1 * var(--vem-25))
				var(--grey-50010);
		z-index: 1;
	}

	.intro__text a {
		font-size: inherit;
	}

	.intro__text p span {
		display: none;
	}

	#why {
		align-self: stretch;
		z-index: 9;
		position: relative;
	}

	#why__label {
		font-size: var(--vem-800);
	}

	.why__grid {
		grid-template-columns: auto;
		justify-content: center;
	}

	.why__grid div {
		max-width: 70ch;
	}

	.why__grid > div:hover::before {
		opacity: 0.6;
	}

	.why__grid > div:hover::after {
		opacity: 0.9;
	}

	.why__grid h3 {
		font-size: 1.5em;
	}

	.why__grid > div > img {
		align-self: start;
	}

	.why__grid .arrow {
		max-height: var(--vem-600);
		display: block;
		transition: transform 0.2s;
	}

	.why__grid div p {
		overflow: hidden;
		transition: height 0.2s;
		font-size: var(--vem-500);
	}

	.expanded .arrow {
		transform: rotateX(180deg);
	}

	.why__grid .expanded p {
		opacity: 1;
		height: var(--p-height, 3lh) !important;
	}

	.expanded::before {
		opacity: 0.8 !important;
	}

	.expanded::after {
		opacity: 0.6 !important;
	}

	#mission {
		gap: 0;
		padding: var(--header-height) var(--vem-700) var(--vem-500);
	}

	#mission__label {
		font-weight: 700;
		text-align: center;
		line-height: 1;
	}

	.mission__point {
		text-align: center;
		text-wrap: balance;
		font-size: var(--vem-550);
		background: linear-gradient(
			160deg,
			var(--acc-blue-400),
			var(--acc-purple-400)
		);
		background-size: 100% 300%;
		max-width: 28ch;
		padding: 0.5em;
		border-radius: 50vw;
		transform: none;
	}

	#mission div:nth-of-type(2) .mission__point {
		background-position: 0 50%;
	}

	#mission div:nth-of-type(3) .mission__point {
		background-position: 0 100%;
	}

	.mission__point .show {
		white-space: wrap;
		background: none;
		color: var(--text);
		padding: 0 !important;
	}

	.mission__point .fade {
		opacity: 1;
	}

	#success {
		justify-content: center;
		padding: var(--header-height) var(--vem-700) var(--vem-500);
		gap: var(--vem-900);
	}

	#success__label {
		text-align: center;
	}

	#success figure {
		background: var(--acc-blue-300);
	}

	#success figure::before,
	#success .full-width {
		display: none;
	}

	#success a {
		font-size: var(--vem-500);
		margin: auto;
	}
}

@media (width < 364px) {
	.intro__text a span {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) and (width < 770px) {
	.intro__image img {
		transform-origin: bottom;
	}

	.intro__title,
	.intro__text > * {
		animation: slide-in 0.75s 0.5s cubic-bezier(0.77, 1.33, 0.5, 1) forwards;
	}

	.intro__text > * {
		animation-delay: 2s;
	}
}