/* =========================================================
   Complete Layered Hero block
   ========================================================= */

.layered-hero {
	width: 100%;
	max-width: none;

	margin: 0;
	padding: 0;
}

.layered-hero.alignfull {
	width: 100vw;
	max-width: none;

	margin-right:
		calc(50% - 50vw);
	margin-left:
		calc(50% - 50vw);
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
	--hero-transition-duration: 900ms;
	--hero-slide-duration: 6500ms;
	--hero-overlay-opacity: 1;
	--hero-min-height: 848px;
	--hero-workers-width: 82%;
	--hero-workers-shift: 0%;

	position: relative;
	isolation: isolate;

	width: 100%;
	max-width: none;

	min-height:
		clamp(
			42rem,
			78vw,
			var(--hero-min-height)
		);

	margin: 0;

	overflow: hidden;

	background-color:
		var(--color-primary, #231f20);
}

/* =========================================================
   Slides
   ========================================================= */

.hero__slides {
	position: absolute;
	inset: 0;

	min-height: inherit;
}

.hero__slide {
	position: absolute;
	inset: 0;

	min-height: inherit;

	visibility: hidden;
	opacity: 0;

	pointer-events: none;

	transition:
		opacity
			var(--hero-transition-duration)
			ease,
		visibility 0s linear
			var(--hero-transition-duration),
		filter
			var(--hero-transition-duration)
			ease,
		transform
			var(--hero-transition-duration)
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}

.hero__slide:first-child,
.hero__slide.is-active {
	visibility: visible;
	opacity: 1;

	pointer-events: auto;

	transition-delay: 0s;
}

.hero.is-enhanced
	.hero__slide:first-child:not(.is-active) {
	visibility: hidden;
	opacity: 0;

	pointer-events: none;
}

.hero__slide.is-leaving {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
   Transition styles
   ========================================================= */

.hero--transition-dissolve
	.hero__slide {
	filter:
		blur(8px)
		saturate(0.88);
}

.hero--transition-dissolve
	.hero__slide:first-child,
.hero--transition-dissolve
	.hero__slide.is-active {
	filter:
		blur(0)
		saturate(1);
}

.hero--transition-dissolve
	.hero__slide.is-leaving {
	filter:
		blur(8px)
		saturate(0.9);
}

.hero--transition-fade-scale
	.hero__slide {
	transform: scale(1.018);
}

.hero--transition-fade-scale
	.hero__slide:first-child,
.hero--transition-fade-scale
	.hero__slide.is-active {
	transform: scale(1);
}

.hero--transition-fade-scale
	.hero__slide.is-leaving {
	transform: scale(0.992);
}

/* =========================================================
   Background and overlay
   ========================================================= */

.hero__background,
.hero__overlay {
	position: absolute;
	inset: 0;
}

.hero__background {
	z-index: 0;

	overflow: hidden;

	background-color: #494344;
}

.hero__background-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transform: scale(1.01);
	transform-origin: center;

	will-change: transform;
}

.hero__overlay {
	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(15, 10, 7, 0.05) 0%,
			rgba(20, 14, 10, 0.1) 40%,
			rgba(35, 31, 32, 0.68) 78%,
			var(
				--color-primary,
				#231f20
			)
			100%
		),
		linear-gradient(
			90deg,
			rgba(10, 7, 5, 0.22) 0%,
			rgba(10, 7, 5, 0.02) 52%,
			rgba(10, 7, 5, 0.14) 100%
		);

	opacity:
		var(--hero-overlay-opacity);

	pointer-events: none;
}

/* =========================================================
   Background movement
   ========================================================= */

.hero.is-enhanced.hero--motion-zoom-in
	.hero__slide.is-active
	.hero__background-image {
	animation:
		hero-background-zoom-in
		var(--hero-slide-duration)
		linear both;
}

.hero.is-enhanced.hero--motion-zoom-out
	.hero__slide.is-active
	.hero__background-image {
	animation:
		hero-background-zoom-out
		var(--hero-slide-duration)
		linear both;
}

.hero.is-enhanced.hero--motion-pan
	.hero__slide.is-active
	.hero__background-image {
	animation:
		hero-background-pan
		var(--hero-slide-duration)
		linear both;
}

.hero--motion-none
	.hero__background-image {
	animation: none;
	transform: scale(1.01);
}

@keyframes hero-background-zoom-in {
	from {
		transform: scale(1.015);
	}

	to {
		transform: scale(1.12);
	}
}

@keyframes hero-background-zoom-out {
	from {
		transform: scale(1.12);
	}

	to {
		transform: scale(1.015);
	}
}

@keyframes hero-background-pan {
	from {
		transform:
			scale(1.09)
			translateX(-1.5%);
	}

	to {
		transform:
			scale(1.09)
			translateX(1.5%);
	}
}

/* =========================================================
   Hero content
   ========================================================= */

.hero__inner {
	position: relative;
	z-index: 2;

	display: block;

	min-height: inherit;

	padding-top:
		clamp(2.75rem, 6vw, 4.5rem);

	padding-bottom: 0;
}

.hero__stage {
	position: relative;
	min-height: inherit;
}

.hero__eyebrow {
	position: absolute;
	z-index: 5;

	top:
		clamp(0.4rem, 1vw, 1rem);
	left: 0;

	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-family:
		var(
			--font-display,
			"Libre Baskerville",
			Georgia,
			serif
		);

	font-size:
		clamp(1.65rem, 3.5vw, 2.65rem);

	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.hero__future {
	position: absolute;
	z-index: 2;

	top:
		clamp(3.3rem, 7vw, 5rem);
	left: 0;

	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-family:
		var(
			--font-display,
			"Libre Baskerville",
			Georgia,
			serif
		);

	font-size:
		clamp(7rem, 18vw, 12rem);

	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.065em;

	white-space: nowrap;
}

.hero__workers {
	--hero-workers-shift: 0%;

	position: absolute;
	z-index: 3;

	left:
		clamp(1rem, 6vw, 5rem);
	bottom: 0;

	display: block;

	width: min(75rem, 100%);

	max-width: none;
	height: auto;

	transform:
		translateX(
			var(--hero-workers-shift)
		)
		scale(1);

	transform-origin:
		center bottom;

	pointer-events: none;
	user-select: none;

	transition:
		opacity
			var(--hero-transition-duration)
			ease,
		transform 700ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);

	will-change:
		opacity,
		transform;
}

.hero__tagline {
	position: absolute;
	z-index: 4;

	top:
		clamp(12.5rem, 24vw, 17rem);
	right:
		clamp(0rem, 3vw, 2.5rem);

	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-family:
		var(
			--font-display,
			"Libre Baskerville",
			Georgia,
			serif
		);

	font-size:
		clamp(1.7rem, 3.5vw, 2.8rem);

	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.hero__content {
	position: absolute;
	z-index: 4;

	left: 0;
	bottom:
		clamp(4rem, 8vw, 6.5rem);

	width: min(24rem, 42%);

	margin: 0;
}

.hero__summary,
.hero__content p {
	margin: 0 0 2rem;

	color:
		var(--color-white, #ffffff);

	font-size:
		clamp(0.95rem, 1.4vw, 1.2rem);

	font-weight: 600;
	line-height: 1.16;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

/* =========================================================
   Hero entrance transitions
   ========================================================= */

.hero.is-enhanced
	.hero__slide
	.hero__eyebrow,
.hero.is-enhanced
	.hero__slide
	.hero__future,
.hero.is-enhanced
	.hero__slide
	.hero__tagline,
.hero.is-enhanced
	.hero__slide
	.hero__content {
	opacity: 0;
	transform: translateY(18px);

	transition:
		opacity 500ms ease,
		transform 650ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}

.hero.is-enhanced
	.hero__slide
	.hero__workers {
	opacity: 0;

	transform:
		translateX(
			var(--hero-workers-shift)
		)
		scale(0.975);
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__eyebrow,
.hero.is-enhanced
	.hero__slide.is-active
	.hero__future,
.hero.is-enhanced
	.hero__slide.is-active
	.hero__tagline,
.hero.is-enhanced
	.hero__slide.is-active
	.hero__content {
	opacity: 1;
	transform: translateY(0);
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__workers {
	opacity: 1;

	transform:
		translateX(
			var(--hero-workers-shift)
		)
		scale(1);
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__eyebrow {
	transition-delay: 120ms;
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__future {
	transition-delay: 180ms;
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__workers {
	transition-delay: 160ms;
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__tagline {
	transition-delay: 250ms;
}

.hero.is-enhanced
	.hero__slide.is-active
	.hero__content {
	transition-delay: 310ms;
}

.hero.is-enhanced
	.hero__slide.is-leaving
	.hero__eyebrow,
.hero.is-enhanced
	.hero__slide.is-leaving
	.hero__future,
.hero.is-enhanced
	.hero__slide.is-leaving
	.hero__tagline,
.hero.is-enhanced
	.hero__slide.is-leaving
	.hero__content,
.hero.is-enhanced
	.hero__slide.is-leaving
	.hero__workers {
	opacity: 0;
	transition-delay: 0ms;
}

.hero:hover
	.hero__slide.is-active
	.hero__workers {
	transform:
		translateX(
			var(--hero-workers-shift)
		)
		scale(1.012);
}

/* =========================================================
   Navigation
   ========================================================= */

.hero__controls {
	position: absolute;
	z-index: 10;

	right: 0;
	bottom: 2rem;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem;

	pointer-events: none;
}

.hero__control,
.hero__dot {
	pointer-events: auto;
}

.hero__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	padding: 0;

	border:
		1px solid
		rgba(255, 255, 255, 0.55);

	border-radius: 50%;

	color: #ffffff;

	background:
		rgba(35, 31, 32, 0.25);

	font-size: 1.1rem;

	cursor: pointer;

	-webkit-backdrop-filter:
		blur(7px);

	backdrop-filter:
		blur(7px);

	transition:
		color 200ms ease,
		border-color 200ms ease,
		background-color 200ms ease,
		transform 200ms ease;
}

.hero__control:hover,
.hero__control:focus-visible {
	border-color: #ffffff;

	color: #231f20;
	background-color: #ffffff;

	transform: scale(1.06);
}

.hero__control:focus-visible,
.hero__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.hero__dots {
	display: flex;
	align-items: center;
	gap: 0.55rem;

	padding: 0.65rem 0.8rem;

	border-radius: 999px;

	background:
		rgba(35, 31, 32, 0.25);

	-webkit-backdrop-filter:
		blur(7px);

	backdrop-filter:
		blur(7px);

	pointer-events: auto;
}

.hero__dot {
	width: 8px;
	height: 8px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 999px;

	background:
		rgba(255, 255, 255, 0.5);

	cursor: pointer;

	transition:
		width 260ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		background-color 200ms ease;
}

.hero__dot.is-active {
	width: 28px;
	background-color: #ffffff;
}

/* =========================================================
   Hero-to-About gradient
   ========================================================= */

.layered-hero .gradient-bg {
	position: relative;
	z-index: 2;

	width: 100%;
	

	margin: 0;

	background:
		linear-gradient(
			180deg,
			rgba(35, 31, 32, 0) 0%,
			rgba(35, 31, 32, 0.19) 14.42%,
			rgba(35, 31, 32, 0.37) 27.4%,
			rgba(35, 31, 32, 0.68) 50.96%,
			rgba(35, 31, 32, 0.82) 65.38%,
			#231f20 100%
		);
}

/* =========================================================
   About introduction
   ========================================================= */

.layered-hero .about {
	position: relative;

	margin: 0;

	padding-block:
		clamp(2.5rem, 6vw, 4.75rem);

	color:
		var(--color-white, #ffffff);

	background:
		var(--color-primary, #231f20);
}



.layered-hero .about__title {
	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-family:
		var(
			--font-display,
			"Libre Baskerville",
			Georgia,
			serif
		);

	font-size:
		clamp(1.45rem, 3vw, 2.15rem);

	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.03em;
}

.layered-hero .about__copy {
	display: grid;

	grid-template-columns:
		clamp(3.5rem, 8vw, 6.5rem)
		minmax(0, 1fr);

	align-items: start;

	gap:
		clamp(1.5rem, 4vw, 3.25rem);

	padding-top: 1.5rem;
}

.layered-hero .about__rule {
	display: block;

	width: 100%;
	height: 2px;

	margin-top: 0.3rem;

	background:
		rgba(255, 255, 255, 0.58);
}

.layered-hero .about__text {
	margin: 0;

	color:
		var(--color-white, #ffffff);

	font-size:
		clamp(0.93rem, 1.55vw, 1.12rem);

	line-height: 1.4;
}

/* =========================================================
   About reveal animation
   ========================================================= */

.layered-hero
	.about__heading,
.layered-hero
	.about__copy {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity 650ms ease,
		transform 750ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}

.layered-hero
	.about__rule {
	transform: scaleX(1);
	transform-origin: left center;

	transition:
		transform 750ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			)
			180ms;
}

.layered-hero
	.about.has-reveal-animation
	.about__heading,
.layered-hero
	.about.has-reveal-animation
	.about__copy {
	opacity: 0;
	transform: translateY(26px);
}

.layered-hero
	.about.has-reveal-animation
	.about__rule {
	transform: scaleX(0);
}

.layered-hero
	.about.has-reveal-animation.is-visible
	.about__heading,
.layered-hero
	.about.has-reveal-animation.is-visible
	.about__copy {
	opacity: 1;
	transform: translateY(0);
}

.layered-hero
	.about.has-reveal-animation.is-visible
	.about__rule {
	transform: scaleX(1);
}

.layered-hero
	.about.has-reveal-animation
	.about__copy {
	transition-delay: 100ms;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 62rem) {
	.hero {
		min-height: 49rem;
	}

	.hero__future {
		top: 4.25rem;

		font-size:
			clamp(6rem, 21vw, 9rem);
	}

	.hero__workers {
		--hero-workers-shift: -50%;

		left: 50%;

		width:
			min(
				54rem,
				var(
					--hero-workers-width,
					96%
				)
			);
	}

	.hero__tagline {
		top:
			clamp(13rem, 27vw, 17rem);

		right: 0;

		font-size:
			clamp(1.45rem, 3.7vw, 2.3rem);
	}

	.hero__content {
		bottom: 3.75rem;
		width: min(22rem, 55%);
	}
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 47.99rem) {
	.hero {
		min-height: 45rem;
	}

	.hero__inner {
		padding-top: 2.1rem;
	}

	.hero__eyebrow {
		position: static;

		max-width: 15rem;

		margin-bottom: 0.65rem;

		font-size:
			clamp(1.5rem, 6vw, 2.1rem);
	}

	.hero__future {
		position: relative;

		top: auto;
		left: auto;

		margin: 0;

		font-size:
			clamp(4.9rem, 23vw, 7.2rem);

		line-height: 0.88;
		white-space: normal;
	}

	.hero__workers {
		--hero-workers-shift: -50%;

		left: 50%;
		bottom: 10.75rem;

		width:
			min(
				31rem,
				var(
					--hero-workers-width,
					122%
				)
			);
	}

	.hero__tagline {
		top: auto;
		right: 0;
		bottom: 15.4rem;

		width: min(12rem, 47%);

		font-size:
			clamp(1.2rem, 5vw, 1.75rem);
	}

	.hero__content {
		left: 0;
		bottom: 2.5rem;

		width: min(100%, 25rem);
	}

	.hero__summary,
	.hero__content p {
		max-width: 18rem;
		margin-bottom: 1.4rem;
	}

	.hero__actions {
		align-items: stretch;
	}

	.hero__actions .button {
		flex: 1 1 11rem;
	}

	.hero__controls {
		top: 1.25rem;
		right:
			var(
				--site-container-gutter,
				1.25rem
			);

		bottom: auto;
		left: auto;

		width: auto;
		padding: 0;
	}

	.hero__control {
		display: none;
	}


	.layered-hero .about__copy {
		grid-template-columns:
			4rem minmax(0, 1fr);

		gap: 1.25rem;
		padding-top: 0;
	}
}

@media (max-width: 30rem) {
	.hero {
		min-height: 44rem;
	}

	.hero__future {
		font-size:
			clamp(4.1rem, 22vw, 5.8rem);
	}

	.hero__workers {
		bottom: 13rem;

		width:
			min(
				28rem,
				var(
					--hero-workers-width,
					132%
				)
			);
	}

	.hero__tagline {
		bottom: 20.4rem;
		width: 10.5rem;
	}

	.hero__content {
		bottom: 4rem;
	}

	.hero__actions {
		flex-direction: column;
	}

	.hero__actions .button {
		width: 100%;
		flex: initial;
	}

	.layered-hero .about__copy {
		grid-template-columns: 1fr;
	}

	.layered-hero .about__rule {
		width: 4.5rem;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.hero *,
	.hero *::before,
	.hero *::after,
	.layered-hero .about *,
	.layered-hero .about *::before,
	.layered-hero .about *::after {
		animation: none !important;

		transition-duration:
			0.01ms !important;

		transition-delay:
			0ms !important;
	}

	.hero__background-image {
		transform: none !important;
	}

	.hero__slide.is-active
		.hero__workers {
		transform:
			translateX(
				var(--hero-workers-shift)
			)
			scale(1) !important;
	}

	.layered-hero
		.about__heading,
	.layered-hero
		.about__copy,
	.layered-hero
		.about__rule {
		opacity: 1 !important;
		transform: none !important;
	}
}