.about-values {
	padding-block: clamp(6rem, 12vw, 11rem);
	overflow: hidden;
	background: #111;
	color: #fff;
}

.about-values__header {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin-bottom: clamp(5rem, 9vw, 8rem);
}

.about-values__eyebrow {
	grid-column: 1 / span 3;
	margin: 0;
	padding-top: 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.about-values__eyebrow::before {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.7rem;
	border-radius: 0.12rem;
	background: var(--color-accent, #d52b22);
	content: "";
}

.about-values__title {
	grid-column: 4 / -1;
	max-width: 14ch;
	margin: 0;
	color: #fff;
	font-size: clamp(3rem, 6vw, 7rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.055em;
	text-wrap: balance;
}

.about-values__list {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.about-values__item {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	gap: var(--grid-gap);
	min-height: clamp(8rem, 12vw, 12rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.about-values__item::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0.25rem;
	background: var(--color-accent, #d52b22);
	content: "";
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 350ms ease;
}

.about-values__number {
	grid-column: 1 / span 2;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.55);
}

.about-values__item-title {
	grid-column: 3 / span 4;
	margin: 0;
	color: #fff;
	font-size: clamp(2.5rem, 5vw, 6rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.05em;
	transition:
		color 300ms ease,
		transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-values__description {
	grid-column: 8 / -1;
	max-width: 32rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	line-height: 1.6;
	transition: color 300ms ease;
}

@media (hover: hover) {
	.about-values__item:hover::before {
		transform: scaleY(1);
	}

	.about-values__item:hover .about-values__item-title {
		color: var(--color-accent, #d52b22);
		transform: translateX(1rem);
	}

	.about-values__item:hover .about-values__description {
		color: #fff;
	}
}

@media (max-width: 767px) {
	.about-values__header {
		display: block;
	}

	.about-values__title {
		margin-top: 2rem;
	}

	.about-values__item {
		grid-template-columns: 3rem 1fr;
		padding-block: 2rem;
	}

	.about-values__number {
		grid-column: 1;
		align-self: start;
		padding-top: 0.5rem;
	}

	.about-values__item-title,
	.about-values__description {
		grid-column: 2;
	}

	.about-values__description {
		margin-top: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-values__eyebrow,
	.about-values__title-word,
	.about-values__number,
	.about-values__item-title,
	.about-values__description {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.about-values__title-word {
	display: inline-block;
	will-change: transform, opacity;
}