.whe-hero {
	--whe-duration: 1200ms;
	--whe-ease: cubic-bezier(0.45, 0, 0.55, 1);
	--whe-header-fallback: 96px;
	--whe-max-height: 1000px;
	--whe-overlay-opacity: 0.08;
	--whe-zoom-duration: 6500ms;
	--whe-zoom-scale: 1.07;
	--whe-logo-width: 180px;
	--whe-text-size: 18px;
	position: relative;
	display: flex;
	width: 100%;
	height: calc(100vh - var(--whe-header-height, var(--whe-header-fallback)));
	height: min(
		calc(100dvh - var(--whe-header-height, var(--whe-header-fallback))),
		var(--whe-max-height)
	);
	overflow: hidden;
}

.whe-hero.is-intro-active .whe-panel {
	pointer-events: none;
}

.whe-intro {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: #e9ebec;
	opacity: 1;
	animation: whe-intro-fallback 0s 15s forwards;
	transition:
		opacity 1300ms var(--whe-ease),
		transform 1300ms var(--whe-ease);
}

.whe-intro.is-running {
	animation: none;
}

.whe-intro.is-leaving {
	opacity: 0;
	pointer-events: none;
	transform: scale(1.015);
}

.whe-intro.is-complete {
	display: none;
}

.whe-intro__background {
	position: absolute;
	z-index: 0;
	inset: 0;
	transform: scale(1.001);
	transition: transform var(--whe-intro-zoom-duration, 6500ms) ease-out;
	will-change: transform;
}

.whe-intro__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.whe-responsive-picture {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.whe-intro__background .whe-responsive-picture > .whe-intro__background-image,
.whe-panel__background .whe-responsive-picture > .whe-panel__background-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}

.whe-intro.is-background-running .whe-intro__background {
	transform: scale(1.06);
}

.whe-intro__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(255, 255, 255, 0.72);
	opacity: 0;
	transition: opacity 900ms var(--whe-ease);
}

.whe-intro.is-overlay-visible .whe-intro__overlay {
	opacity: 1;
}

.whe-intro__brand {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px;
	text-align: center;
}

.whe-intro__mark {
	position: relative;
	flex: 0 0 auto;
	width: min(var(--whe-logo-width, 180px), 28dvh, 36vw);
	max-width: 100%;
	aspect-ratio: 1;
}

.whe-intro__half {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	overflow: hidden;
	opacity: 0;
	transition:
		opacity 1200ms var(--whe-ease),
		transform 1600ms var(--whe-ease);
}

.whe-intro__half img {
	position: absolute;
	top: 0;
	width: 200%;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

.whe-intro__half--left {
	left: 0;
	transform: translateX(-90%);
}

.whe-intro__half--left img {
	left: 0;
}

.whe-intro__half--right {
	right: 0;
	transform: translateX(90%);
}

.whe-intro__half--right img {
	right: 0;
}

.whe-intro.is-logo-running .whe-intro__half {
	opacity: 1;
	transform: translateX(0);
}

.whe-intro__title,
.whe-intro__tagline {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 800ms var(--whe-ease),
		transform 800ms var(--whe-ease);
}

.whe-intro__title {
	margin-top: -6px;
	color: #435086;
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1;
	transition-delay: 1150ms;
}

.whe-intro__tagline {
	margin-top: 8px;
	color: #435086;
	font-size: clamp(1rem, 2vw, 1.65rem);
	line-height: 1.25;
	transition-delay: 1450ms;
}

.whe-intro.is-logo-running .whe-intro__title,
.whe-intro.is-logo-running .whe-intro__tagline {
	opacity: 1;
	transform: translateY(0);
}

@keyframes whe-intro-fallback {
	to {
		visibility: hidden;
		pointer-events: none;
	}
}

.whe-panel {
	position: relative;
	display: flex;
	flex: 1 1 0;
	max-width: 100%;
	min-width: 0;
	backface-visibility: hidden;
	contain: layout paint;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	cursor: pointer;
	outline: 0;
	transform: translateZ(0);
	transition:
		flex-grow var(--whe-duration) var(--whe-ease),
		opacity var(--whe-duration) var(--whe-ease);
	will-change: flex-grow, opacity;
}

.whe-hero.has-active-panel .whe-panel {
	flex-grow: 0;
	opacity: 0;
	pointer-events: none;
}

.whe-hero.has-active-panel .whe-panel.is-active {
	flex-grow: 1;
	opacity: 1;
	pointer-events: auto;
}

.whe-panel__strip,
.whe-panel__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.whe-panel__strip {
	z-index: 0;
}

.whe-panel__stage {
	z-index: 1;
}

.whe-panel__background,
.whe-panel__overlay {
	position: absolute;
	inset: 0;
}

.whe-panel__background {
	z-index: -2;
	background-color: #29323c;
	backface-visibility: hidden;
	transform: scale(1.001);
	transition: transform var(--whe-duration) var(--whe-ease);
	will-change: transform;
}

.whe-panel__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.whe-panel__background--preview {
	opacity: 1;
	transition:
		opacity var(--whe-duration) var(--whe-ease),
		transform var(--whe-duration) var(--whe-ease);
}

.whe-panel__background--full {
	opacity: 0;
	transform: scale(1.001);
	transition:
		opacity var(--whe-duration) var(--whe-ease),
		transform var(--whe-duration) var(--whe-ease);
}

.whe-panel.is-active .whe-panel__background--preview {
	opacity: 0;
	transform: scale(1.08);
}

.whe-panel.is-active .whe-panel__background--full {
	opacity: 1;
	transform: scale(var(--whe-zoom-scale));
	transition:
		opacity var(--whe-duration) var(--whe-ease),
		transform var(--whe-zoom-duration) ease-out;
}

.whe-panel__overlay {
	z-index: -1;
	background: rgba(0, 0, 0, 0.38);
	opacity: 0;
	transition: opacity var(--whe-duration) var(--whe-ease);
}

.whe-panel.is-active .whe-panel__overlay {
	opacity: var(--whe-overlay-opacity);
}

.whe-panel__content {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(32px, 8vw, 150px);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-28px);
	visibility: hidden;
	transition:
		opacity var(--whe-duration) var(--whe-ease),
		transform var(--whe-duration) var(--whe-ease),
		visibility 0s linear var(--whe-duration);
}

.whe-panel.is-active .whe-panel__content {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
}

.whe-panel__text {
	width: min(100%, 520px);
	line-height: 1.45;
}

.whe-panel--positioned-text .whe-panel__content {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
}

.whe-panel--positioned-text .whe-panel__text {
	--whe-text-width: 38%;
	--whe-text-x: 18%;
	--whe-text-y: 13%;
	position: absolute;
	top: var(--whe-text-y);
	left: var(--whe-text-x);
	width: var(--whe-text-width);
	max-width: none;
	font-size: var(--whe-text-size, 18px);
	line-height: 1.28;
}

.whe-panel[data-whe-index="2"] .whe-panel__text {
	--whe-text-width: 40%;
	--whe-text-x: 11%;
	--whe-text-y: 18%;
}

.whe-panel[data-whe-index="3"] .whe-panel__text {
	--whe-text-width: 42%;
	--whe-text-x: 54.5%;
	--whe-text-y: 40.5%;
}

.whe-panel__traits,
.whe-panel__name {
	color: #dfad58;
	font-weight: 700;
}

.whe-panel[data-whe-index="2"] .whe-panel__traits,
.whe-panel[data-whe-index="2"] .whe-panel__name {
	color: #435086;
}

.whe-panel__description,
.whe-panel__role {
	margin-top: 4px;
}

.whe-panel__name {
	margin-top: 18px;
}

.whe-panel__text > :first-child {
	margin-top: 0;
}

.whe-panel__text > :last-child {
	margin-bottom: 0;
}

.whe-panel:focus-visible {
	box-shadow: inset 0 0 0 3px currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.whe-hero:not(.has-active-panel) .whe-panel .whe-panel__background--preview {
		transition:
			opacity var(--whe-duration) var(--whe-ease),
			transform 350ms var(--whe-ease);
	}

	.whe-hero:not(.has-active-panel) .whe-panel:hover .whe-panel__background--preview {
		transform: scale(1.025);
	}
}

@media (max-width: 767px) and (orientation: portrait),
	(orientation: portrait) and (min-width: 600px) and (max-width: 1366px) and (any-pointer: coarse) {
	.whe-hero {
		flex-direction: column;
		height: calc(100vh - var(--whe-header-height, var(--whe-header-fallback)));
		height: calc(100dvh - var(--whe-header-height, var(--whe-header-fallback)));
		overflow: hidden;
	}

	.whe-intro__brand {
		padding: 22px;
	}

	.whe-panel {
		width: 100%;
		max-width: 100%;
		min-height: 0;
		max-height: 100%;
		transition:
			flex-grow var(--whe-duration) var(--whe-ease),
			max-height var(--whe-duration) var(--whe-ease),
			opacity var(--whe-duration) var(--whe-ease);
	}

	.whe-hero.has-active-panel .whe-panel {
		flex-grow: 0;
		max-height: 0;
		min-height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.whe-hero.has-active-panel .whe-panel.is-active {
		flex-grow: 1;
		max-height: 100%;
		min-height: 0;
		opacity: 1;
		pointer-events: auto;
	}

	.whe-panel__content {
		align-items: flex-start;
		padding: 72px 28px 32px;
	}

	.whe-panel--positioned-text .whe-panel__content {
		padding: 0;
	}

	.whe-panel--positioned-text .whe-panel__text {
		--whe-text-width: 84%;
		--whe-text-x: 8%;
		--whe-text-y: 9%;
		font-size: var(--whe-text-size, 14px);
	}
}

@media (orientation: landscape) and (max-height: 540px) {
	.whe-intro__brand {
		padding: 12px;
	}

	.whe-intro__mark {
		width: min(var(--whe-logo-width, 180px), 22dvh, 18vw);
	}

	.whe-intro__title {
		font-size: clamp(1.35rem, 4.2vw, 2rem);
	}

	.whe-intro__tagline {
		font-size: clamp(0.78rem, 2.2vw, 1.05rem);
	}

	.whe-intro__background .whe-responsive-picture > .whe-intro__background-image {
		object-position: var(--whe-intro-landscape-x, 50%) var(--whe-intro-landscape-y, 20%);
	}

	.whe-panel__background--preview .whe-responsive-picture > .whe-panel__background-image {
		object-position: var(--whe-preview-landscape-x, 50%) var(--whe-preview-landscape-y, 28%);
	}

	.whe-panel__background--full .whe-responsive-picture > .whe-panel__background-image {
		object-position: var(--whe-full-landscape-x, 50%) var(--whe-full-landscape-y, 18%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.whe-intro,
	.whe-intro__background,
	.whe-intro__half,
	.whe-intro__title,
	.whe-intro__tagline,
	.whe-panel,
	.whe-panel__stage,
	.whe-panel__background,
	.whe-panel__overlay,
	.whe-panel__content {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}
}