/* ==========================================================================
   Homepage why
   Block: .home-why
   ========================================================================== */

.home-why {
	padding-block: 5.5rem 5.75rem; /* 88px 92px */
}

.home-why__layout {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}

.home-why__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 1.884rem; /* 30px */
	aspect-ratio: 627 / 827;
}

.home-why__photo {
	position: absolute;
	top: -1.27%;
	left: -30.14%;
	width: 136.64%;
	height: 111.28%;
	max-width: none;
}

.home-why__quote {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1;
	width: 10.425rem; /* 167px */
	height: 9.375rem; /* 150px */
	margin: 0;
}

.home-why__quote p {
	margin: 1.5rem 0 0 1.125rem;
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 1.381625rem; /* 22px */
	font-weight: var(--font-weight-regular);
	line-height: 1.2727; /* 28px */
}

.home-why__quote span {
	color: var(--color-accent);
}

.home-why__quote-mark {
	position: absolute;
	display: block;
}

.home-why__quote-mark--open {
	top: 0;
	left: 0;
}

.home-why__quote-mark--close {
	right: 0.9rem;
	bottom: 0;
	transform: rotate(180deg);
}

.home-why__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5625rem; /* 25px */
}

.home-why__intro {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px */
	width: 100%;
}

.home-why__heading {
	display: flex;
	flex-direction: column;
	gap: 1rem; /* 16px */
}

.home-why .section-kicker {
	margin-bottom: 0;
	color: #0a0d12;
	font-weight: var(--font-weight-bold);
}

.home-why__kicker-brand {
	text-transform: none;
}

.home-why__heading-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.home-why__rule {
	display: none;
}

.home-why .section-heading {
	max-width: 23.125rem; /* 370px */
	color: #1c1b1b;
}

.home-why__brand {
	color: var(--color-primary);
}

.home-why__lede {
	margin: 0;
	max-width: 22rem;
	color: rgb(1 1 1 / 0.6);
	font-size: 1.25rem; /* 20px */
	font-weight: var(--font-weight-medium);
	line-height: 1.3; /* 26px */
}

.home-why__lede strong {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.home-why__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e5e7eb;
}

.home-why__list li {
	display: flex;
	gap: 1.5rem; /* 24px */
	align-items: flex-start;
	padding: 1rem 0 1.0625rem; /* 16px 17px */
	border-bottom: 1px solid #e5e7eb;
}

.home-why__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 4rem; /* 64px */
	height: 4rem;
	border-radius: 0.75rem; /* 12px */
	background: #f3f4f6;
}

.home-why__icon img {
	display: block;
	width: 2rem;
	height: 2rem;
}

.home-why__item-body {
	min-width: 0;
}

.home-why__item-head {
	display: flex;
	align-items: center;
	gap: 0.75rem; /* 12px */
}

.home-why__num {
	flex-shrink: 0;
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.446; /* 20.25px */
}

.home-why__list h3 {
	margin: 0;
	color: #010101;
	font-family: var(--font-grotesk);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.6875; /* 27px */
}

.home-why__list p {
	margin: 0;
	padding-left: 2rem; /* 32px */
	color: rgb(1 1 1 / 0.6);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.446; /* 20.25px */
}

.home-why__cta.button {
	gap: 0.75rem;
	padding: 1rem 1.75rem; /* 16px 28px */
	min-height: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0;
	line-height: 1.339; /* 18.75px */
	text-transform: capitalize;
}

.home-why__cta .button__icon {
	width: 0.9375rem; /* 15px */
	height: 0.625rem; /* 10px */
	border-radius: 0;
	background: transparent;
}

.home-why__cta .button__icon svg {
	display: block;
	width: 0.9375rem;
	height: 0.625rem;
}

@media (min-width: 64rem) {
	.home-why__layout {
		grid-template-columns: minmax(0, 627fr) minmax(0, 623fr);
		gap: 3.125rem; /* 50px */
	}

	.home-why__media {
		height: 51.6875rem; /* 827px */
		aspect-ratio: auto;
	}

	.home-why__heading-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0;
	}

	.home-why__rule {
		display: block;
		flex-shrink: 0;
		width: 1px;
		height: 15rem; /* 240px */
		background: #e5e7eb;
	}

	.home-why__lede {
		width: 11.6875rem; /* 187px */
		max-width: 11.6875rem;
		padding-left: 1rem;
	}
}