.journey-page {
	--journey-copy-width: 50rem;
	overflow: hidden;
}

.journey-hero {
	position: relative;
	padding-block: 4rem 0;
	background: var(--section-light);
}

.journey-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(18rem, 0.86fr) minmax(0, 1.14fr);
	align-items: center;
	gap: clamp(3rem, 8vw, 8rem);
}

.journey-hero__media {
	position: relative;
	z-index: 1;
	align-self: end;
	margin: 0;
	width: clamp(18rem, 41vw, 42rem);
	transform: translateX(calc(-1 * max(2rem, (100vw - var(--container-default)) / 2)));
	border-radius: 0;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.journey-hero__media img {
	width: 100%;
	height: auto;
}

.journey-hero__content {
	position: relative;
	z-index: 2;
	max-width: 40rem;
}

.journey-eyebrow {
	margin-bottom: 1.25rem;
	color: var(--color-olive);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.journey-hero__divider {
	margin-inline: auto;
}

.journey-hero h1 {
	max-width: 38rem;
	margin-bottom: 1.7rem;
	font-size: clamp(2.6rem, 4vw, 3.8rem);
}

.journey-lead,
.journey-story__copy p {
	font-size: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
	line-height: 1.78;
}

.journey-lead {
	max-width: 37rem;
	margin-bottom: 0;
}

.journey-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13rem;
	height: 1.5rem;
	margin: 0 0 1.5rem;
	color: var(--color-olive);
}

.journey-divider::before,
.journey-divider::after {
	width: 5.5rem;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0.28;
}

.journey-divider::after { order: 2; }

.journey-divider::before { margin-right: 1.15rem; }
.journey-divider::after { margin-left: 1.15rem; }

.journey-divider::marker { display: none; }

.journey-divider__leaf {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.15rem;
	height: 1.7rem;
	overflow: visible;
	background: url("../icons/leaf.svg") center / 0.98rem auto no-repeat;
	filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(500%) hue-rotate(35deg) brightness(90%) contrast(85%);
	opacity: 0.72;
	transform: translate(-50%, -50%);
}

.journey-hero__botanical {
	position: absolute;
	right: calc((100% - 100vw) / 2);
	bottom: -5rem;
	width: clamp(12.6rem, 21vw, 21rem);
	color: var(--color-olive);
	opacity: 0.13;
	transform: rotate(-15deg);
}

.journey-story {
	position: relative;
	padding: 4rem 1rem 3rem;
	background: var(--color-background);
}

.journey-story__botanical {
	position: absolute;
	top: 50%;
	left: calc((100% - 100vw) / 2);
	z-index: 0;
	width: clamp(12.6rem, 21vw, 21rem);
	color: var(--color-olive);
	opacity: 0.1;
	transform: translateY(-50%) scaleX(-1);
}

.journey-story__copy {
	position: relative;
	z-index: 1;
	width: min(100%, var(--journey-copy-width));
	margin-inline: auto;
}

.journey-story__copy p {
	margin-bottom: 2rem;
}

.journey-story__copy > p:last-child {
	margin-bottom: 0;
}

.journey-quote {
	position: relative;
	margin: clamp(3rem, 6vw, 5rem) calc(50% - 50vw) clamp(3rem, 6vw, 5rem);
	padding: 0 max(1rem, calc((100vw - var(--journey-copy-width)) / 2));
	text-align: center;
}

.journey-quote__mark {
	color: var(--color-olive);
	font-family: var(--font-heading);
	font-size: 1.45em;
	font-style: italic;
	font-weight: 600;
	line-height: 0;
	opacity: 0.5;
	vertical-align: -0.08em;
}

.journey-quote p {
	margin: 0;
	color: var(--color-olive);
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3.25vw, 3.25rem);
	font-weight: 500;
	line-height: 1.12;
}

.journey-quote .journey-divider {
	margin: 2rem auto 0;
}

.journey-cta {
	position: relative;
	min-height: 23rem;
	display: grid;
	place-items: center;
	padding: 4rem 1rem 6rem;
	background: var(--section-warm);
	text-align: center;
}

.journey-cta__inner { position: relative; z-index: 1; }
.journey-cta .journey-divider { margin: 0 auto 1rem; }
.journey-cta h2 { margin-bottom: 2rem; font-size: clamp(2.6rem, 4vw, 3.8rem); }
.journey-cta .button,
.journey-cta .button:hover {
	gap: 0.45rem;
	min-height: 2.95rem;
	min-width: 15rem;
	margin-top: 20px;
	padding: 0.85rem 1.85rem;
	background: var(--color-primary);
	border-color: var(--color-primary);
	border-radius: 999px;
	color: var(--color-white);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.journey-cta .button:hover {
	background: color-mix(in srgb, var(--color-primary) 84%, var(--color-text));
	border-color: color-mix(in srgb, var(--color-primary) 84%, var(--color-text));
	color: var(--color-white);
}
.journey-cta__candle { position: absolute; right: clamp(1rem, 9vw, 10rem); bottom: 0; width: clamp(28rem, 52vw, 48rem); opacity: 0.78; }

@media (max-width: 780px) {
	.journey-hero { padding-block: 2.5rem 4.5rem; }
	.journey-hero__inner { grid-template-columns: 1fr; gap: 2.75rem; }
	.journey-hero__media {
		order: 0;
		width: calc(100% + 2rem);
		transform: none;
		margin-left: -2rem;
	}
	.journey-hero__content { order: 1; }
	.journey-hero__divider { display: none; }
	.journey-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
	.journey-hero__botanical { right: 0; bottom: -3rem; width: 9rem; opacity: 0.09; }
	.journey-story__botanical { left: 0; width: 9rem; opacity: 0.07; }
	.journey-story { padding-block: 2.5rem 3rem; }
	.journey-story { padding-inline: 2rem; }
	.journey-story__copy p { font-size: 1rem; }
	.journey-quote { margin: 3rem 0; padding-inline: 0; }
	.journey-quote p { font-size: clamp(1.85rem, 8.2vw, 2.7rem); }
	.journey-quote__break { display: none; }
	.journey-cta {
		min-height: 0;
		padding: 1.5rem 2rem 3rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
	}
	.journey-cta__inner { display: contents; }
	.journey-cta .journey-divider { grid-row: 1; }
	.journey-cta h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
	.journey-cta h2 { margin-bottom: 0.75rem; }
	.journey-cta h2 { grid-row: 2; }
	.journey-cta__candle {
		position: relative;
		right: auto;
		bottom: auto;
		grid-row: 3;
		justify-self: center;
		width: min(100%, 14rem);
		margin-top: -2rem;
		margin-bottom: -0.75rem;
		opacity: 0.62;
		transform: translateX(-22%);
	}
	.journey-cta .button {
		grid-row: 4;
		width: 100%;
		margin-top: 1rem;
	}
}

@media (max-width: 560px) {
	.journey-hero__media {
		width: calc(100% + (100vw - 100%));
		margin-left: calc((100% - 100vw) / 2);
	}

	.journey-cta__candle {
		margin-bottom: 0.25rem;
	}
}
