/**
 * Section 8: Why Choose Us — Deepak Sales.
 *
 * Mobile-first. Depends on tokens.css + base.css. Static value-proposition
 * cards (no links, no counts) — visually related to categories.css's card
 * but intentionally quieter (no hover-lift on the cards themselves, since
 * they aren't clickable); the single closing CTA carries the interaction.
 */

.ds-why {
	padding-block: var(--ds-section-y);
	background-color: var(--ds-paper-2);
}

.ds-why__head {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.ds-why__eyebrow {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-oxblood);
}

.ds-why__title {
	margin-bottom: var(--ds-space-md);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-section);
	line-height: var(--ds-lh-snug);
	letter-spacing: -0.02em;
	color: var(--ds-heading);
}

.ds-why__lead {
	font-size: var(--ds-fs-lead);
	line-height: var(--ds-lh-body);
	color: var(--ds-muted);
}

.ds-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
	margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}

.ds-why__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 1.75rem;
	border: 1px solid var(--ds-border-brand);
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-surface);
	box-shadow: var(--ds-shadow-sm);
	transition: border-color var(--ds-dur) var(--ds-ease);
}

.ds-why__card:hover {
	border-color: rgba(185, 138, 60, 0.3);
}

.ds-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--ds-space-md);
	border-radius: var(--ds-radius-md);
	background: var(--ds-gold-tint);
	color: var(--ds-oxblood);
}

.ds-why__name {
	margin-bottom: var(--ds-space-xs);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h3);
	font-weight: 600;
	line-height: var(--ds-lh-snug);
	color: var(--ds-ink);
}

.ds-why__desc {
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-body);
	color: var(--ds-muted);
}

.ds-why__cta-wrap {
	display: flex;
	justify-content: center;
}

@media (min-width: 40em) {
	.ds-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 62em (992px) -- the theme's formal desktop tier (see header.css/hero.css), replacing the previous 64em guess. */
@media (min-width: 62em) {
	.ds-why__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}