.yugen-hero,
.yugen-hero *,
.yugen-hero *::before,
.yugen-hero *::after {
	box-sizing: border-box;
}

.yugen-hero {
	--yugen-hero-ink: #f4f1e9;
	--yugen-hero-dark: #0b100c;
	--yugen-hero-green: #87a78e;
	--yugen-hero-accent: #c36b51;
	--yugen-hero-paper: #f0ede5;
	position: relative;
	isolation: isolate;
	display: block;
	width: 100vw;
	max-width: 100vw;
	min-height: var(--yugen-hero-desktop-height, 88vh);
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: var(--yugen-hero-dark);
	color: var(--yugen-hero-ink);
	font-family: inherit;
}

.yugen-hero::before,
.yugen-hero::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
}

.yugen-hero::before {
	z-index: -1;
}

.yugen-hero::after {
	z-index: 3;
	opacity: 0.1;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.28'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}

.yugen-hero__media,
.yugen-hero__media img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
}

.yugen-hero__media img {
	object-fit: cover;
	animation: yugen-hero-settle 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.yugen-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	width: min(100% - 64px, 1440px);
	min-height: inherit;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) 0;
	font-family: inherit;
	animation: yugen-hero-rise 850ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.yugen-hero__copy,
.yugen-hero__eyebrow,
.yugen-hero__title,
.yugen-hero__body,
.yugen-hero__actions,
.yugen-hero__primary,
.yugen-hero__secondary {
	font-family: inherit;
}

.yugen-hero__eyebrow {
	margin: 0 0 22px;
	color: var(--yugen-hero-eyebrow-color, #c65a3d);
	font-family: var(--yugen-hero-eyebrow-font, "JetBrains Mono", monospace);
	font-size: var(--yugen-hero-eyebrow-size-desktop, 11.52px);
	font-weight: var(--yugen-hero-eyebrow-weight, 500);
	letter-spacing: 0.22em;
	line-height: var(--yugen-hero-eyebrow-line-height, 1.6);
	text-transform: uppercase;
}

.yugen-hero__title {
	max-width: 840px;
	margin: 0;
	color: var(--yugen-hero-headline-color, #f4f1e9);
	font-family: var(--yugen-hero-headline-font, "Playfair Display", serif);
	font-size: var(--yugen-hero-headline-size-desktop, 76.8px);
	font-style: normal;
	font-weight: var(--yugen-hero-headline-weight, 500);
	letter-spacing: -0.01em;
	line-height: var(--yugen-hero-headline-line-height, 1.08);
	text-wrap: balance;
}

.yugen-hero__title em {
	display: inline;
	padding-bottom: 0.08em;
	color: var(--yugen-hero-accent-color, #87a78e);
	font-family: var(--yugen-hero-accent-font, "Playfair Display", serif);
	font-size: var(--yugen-hero-accent-size-desktop, 76.8px);
	font-style: italic;
	font-weight: var(--yugen-hero-accent-weight, 500);
	line-height: var(--yugen-hero-accent-line-height, 1.08);
}

.yugen-hero__body {
	max-width: 560px;
	margin: 26px 0 0;
	color: var(--yugen-hero-body-color, #f4f1e9);
	font-family: var(--yugen-hero-body-font, "DM Sans", sans-serif);
	font-size: var(--yugen-hero-body-size-desktop, 19.2px);
	font-weight: var(--yugen-hero-body-weight, 300);
	line-height: var(--yugen-hero-body-line-height, 1.6);
	text-wrap: pretty;
}

.yugen-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 34px;
}

.yugen-hero__primary,
.yugen-hero__secondary {
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.yugen-hero__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid var(--yugen-hero-paper);
	background: var(--yugen-hero-paper);
	color: var(--yugen-hero-primary-color, #171a16);
	font-family: var(--yugen-hero-primary-font, "JetBrains Mono", monospace);
	font-size: var(--yugen-hero-primary-size-desktop, 12.16px);
	font-weight: var(--yugen-hero-primary-weight, 300);
	line-height: var(--yugen-hero-primary-line-height, 1.6);
	transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.yugen-hero__primary:hover,
.yugen-hero__primary:focus-visible {
	border-color: #285542;
	background: #285542;
	color: #f7f5ef;
}

.yugen-hero__secondary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0 7px;
	border-bottom: 1px solid currentColor;
	color: var(--yugen-hero-secondary-color, #f4f1e9);
	font-family: var(--yugen-hero-secondary-font, "JetBrains Mono", monospace);
	font-size: var(--yugen-hero-secondary-size-desktop, 12.16px);
	font-weight: var(--yugen-hero-secondary-weight, 300);
	line-height: var(--yugen-hero-secondary-line-height, 1.6);
	transition: opacity 220ms ease, transform 220ms ease;
}

.yugen-hero__secondary:hover,
.yugen-hero__secondary:focus-visible {
	opacity: 0.66;
}

.yugen-hero__primary:focus-visible,
.yugen-hero__secondary:focus-visible {
	outline: 2px solid var(--yugen-hero-paper);
	outline-offset: 4px;
}

.yugen-hero__primary:active,
.yugen-hero__secondary:active {
	transform: translateY(1px);
}

.yugen-hero--layout-1::before {
	background:
		linear-gradient(90deg, rgb(7 11 8 / 0.88) 0%, rgb(7 11 8 / 0.55) 44%, transparent 74%),
		linear-gradient(0deg, rgb(7 11 8 / 0.56), transparent 56%);
}

.yugen-hero--layout-1 .yugen-hero__media img {
	object-position: center 58%;
}

.yugen-hero--layout-1 .yugen-hero__inner {
	grid-template-columns: minmax(0, 760px) 1fr;
	align-items: center;
}

.yugen-hero--layout-2::before {
	background:
		linear-gradient(180deg, rgb(5 8 6 / 0.35), transparent 43%, rgb(5 8 6 / 0.84)),
		linear-gradient(90deg, rgb(5 8 6 / 0.2), transparent 65%);
}

.yugen-hero--layout-2 .yugen-hero__media img {
	object-position: center 54%;
}

.yugen-hero--layout-2 .yugen-hero__inner {
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
	align-items: end;
	gap: clamp(36px, 6vw, 88px);
}

.yugen-hero--layout-2 .yugen-hero__copy {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
	align-items: end;
	gap: clamp(36px, 6vw, 88px);
}

.yugen-hero--layout-2 .yugen-hero__eyebrow,
.yugen-hero--layout-2 .yugen-hero__title {
	grid-column: 1;
}

.yugen-hero--layout-2 .yugen-hero__eyebrow {
	align-self: end;
	margin-bottom: 18px;
}

.yugen-hero--layout-2 .yugen-hero__body,
.yugen-hero--layout-2 .yugen-hero__actions {
	grid-column: 2;
}

.yugen-hero--layout-2 .yugen-hero__body {
	grid-row: 1;
	align-self: end;
	margin: 0 0 24px;
}

.yugen-hero--layout-2 .yugen-hero__actions {
	grid-row: 2;
	align-self: end;
	margin-top: 0;
}

.yugen-hero--layout-3::before {
	background:
		linear-gradient(90deg, rgb(9 13 10 / 0.2), rgb(9 13 10 / 0.72) 62%, rgb(9 13 10 / 0.92)),
		linear-gradient(0deg, rgb(9 13 10 / 0.5), transparent 58%);
}

.yugen-hero--layout-3 .yugen-hero__media img {
	object-position: center 56%;
}

.yugen-hero--layout-3 .yugen-hero__inner {
	grid-template-columns: minmax(0, 1fr) minmax(460px, 0.72fr);
	align-items: center;
}

.yugen-hero--layout-3 .yugen-hero__copy {
	grid-column: 2;
	padding: clamp(38px, 4.5vw, 66px);
	border-left: 1px solid rgb(244 241 233 / 0.35);
	background: rgb(13 18 14 / 0.38);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.yugen-hero--no-image::before {
	background:
		radial-gradient(circle at 72% 55%, rgb(48 91 65 / 0.55), transparent 28%),
		linear-gradient(135deg, #101711, #060806);
}

@media (max-width: 1024px) {
	.yugen-hero__inner {
		width: min(100% - 48px, 960px);
	}

	.yugen-hero--layout-2 .yugen-hero__inner,
	.yugen-hero--layout-2 .yugen-hero__copy {
		grid-template-columns: minmax(0, 1.15fr) minmax(270px, 0.85fr);
		gap: 38px;
	}

	.yugen-hero--layout-3 .yugen-hero__inner {
		grid-template-columns: minmax(0, 0.85fr) minmax(430px, 1.15fr);
	}
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
	.yugen-hero {
		min-height: var(--yugen-hero-mobile-height, 82vh);
	}

	.yugen-hero::after {
		opacity: 0.07;
	}

	.yugen-hero__inner,
	.yugen-hero--layout-1 .yugen-hero__inner,
	.yugen-hero--layout-2 .yugen-hero__inner,
	.yugen-hero--layout-3 .yugen-hero__inner {
		display: flex;
		width: calc(100% - 36px);
		min-height: inherit;
		align-items: flex-end;
		padding: 58px 0 40px;
	}

	.yugen-hero__copy,
	.yugen-hero--layout-2 .yugen-hero__copy,
	.yugen-hero--layout-3 .yugen-hero__copy {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.yugen-hero__eyebrow,
	.yugen-hero--layout-2 .yugen-hero__eyebrow {
		margin: 0 0 16px;
		font-size: var(--yugen-hero-eyebrow-size-mobile, 11.52px);
		letter-spacing: 0.2em;
	}

	.yugen-hero__title,
	.yugen-hero--layout-2 .yugen-hero__title,
	.yugen-hero--layout-3 .yugen-hero__title {
		max-width: 100%;
		font-size: var(--yugen-hero-headline-size-mobile, 41.6px);
	}

	.yugen-hero__title em {
		font-size: var(--yugen-hero-accent-size-mobile, 41.6px);
	}

	.yugen-hero__body,
	.yugen-hero--layout-2 .yugen-hero__body {
		max-width: 35ch;
		margin: 20px 0 0;
		font-size: var(--yugen-hero-body-size-mobile, 16.8px);
	}

	.yugen-hero__actions,
	.yugen-hero--layout-2 .yugen-hero__actions {
		gap: 18px;
		margin-top: 26px;
	}

	.yugen-hero__primary {
		min-height: 48px;
		padding: 0 19px;
		font-size: var(--yugen-hero-primary-size-mobile, 12.16px);
	}

	.yugen-hero__secondary {
		min-height: 40px;
		font-size: var(--yugen-hero-secondary-size-mobile, 12.16px);
	}

	.yugen-hero--layout-1::before {
		background: linear-gradient(0deg, rgb(7 11 8 / 0.9), rgb(7 11 8 / 0.28) 76%);
	}

	.yugen-hero--layout-1 .yugen-hero__media img {
		object-position: center 50%;
	}

	.yugen-hero--layout-2::before {
		background: linear-gradient(0deg, rgb(5 8 6 / 0.93), transparent 77%);
	}

	.yugen-hero--layout-2 .yugen-hero__media img {
		object-position: center 48%;
	}

	.yugen-hero--layout-3::before {
		background: linear-gradient(0deg, rgb(9 13 10 / 0.94), rgb(9 13 10 / 0.14) 78%);
	}

	.yugen-hero--layout-3 .yugen-hero__media img {
		object-position: center 46%;
	}
}

@media (max-width: 420px) {
	.yugen-hero__actions {
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yugen-hero *,
	.yugen-hero *::before,
	.yugen-hero *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@keyframes yugen-hero-settle {
	from {
		opacity: 0;
		transform: scale(1.035);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes yugen-hero-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}