/* Why property managers call us back — README §1.4 */

/* Horizontal gutter comes from the nested .container. */
.value-cards {
	position: relative;
	overflow: hidden;
	padding-block: 100px;
}
.value-cards__swoosh {
	width: 560px;
	left: -120px;
	top: -100px;
	transform: rotate(12deg);
	fill: var(--color-primary);
	opacity: 0.12;
}
.value-cards h2 {
	position: relative;
	max-width: 24ch;
	margin-bottom: 48px;
}
.value-cards__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-24);
}
.value-card {
	background: var(--color-card-dark);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-top: 3px solid var(--color-primary);
	padding: 30px 26px;
}
.value-card h3 { color: var(--color-white); margin-bottom: var(--space-12); }
.value-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #B9B9B9;
}
.value-card .placeholder-inline { color: var(--color-primary); }

@media (max-width: 1279px) {
	/* Every other homepage grid steps down at this tier (tiles, process,
	   projects) — value-cards was the one outlier still forcing 4 narrow,
	   tall columns. */
	.value-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.value-cards { padding-block: 56px; }
	.value-cards__grid { grid-template-columns: 1fr; gap: 14px; }
}