/* =====================================================================
   pages/about.css — About page sections only.
   Order mirrors the design, top to bottom.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Our story / Our commitment (shared two-column media + copy)
   --------------------------------------------------------------- */
.story-section,
.expertise-section {
	background-color: var(--background-color);
}

.commitment-section {
	background-color: var(--background-color);
	padding-top: 0;
}

/* The image-with-badge and checklist are shared components —
   see assets/css/components/media-badge.css */
/* The stats band is a shared component —
   see assets/css/components/stats-band.css */
/* ---------------------------------------------------------------
   3. Our values
   --------------------------------------------------------------- */
.values-section {
	background-color: var(--background-alt);
}

.value-card {
	padding: 2.25rem 2rem 2.5rem;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: transform .3s ease, box-shadow .3s ease;
}

.value-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.value-card .icon-tile {
	margin-bottom: 2.25rem;
}

.value-card__title {
	margin-bottom: .75rem;
	font-size: var(--h4-size);
}

.value-card__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-color);
}

/* ---------------------------------------------------------------
   4. Our expertise (horizontal icon + copy cards)
   --------------------------------------------------------------- */
.expertise-card {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.75rem;
	background: var(--surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.expertise-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 158, 69, .45);
	box-shadow: var(--shadow-sm);
}

.expertise-card__body {
	display: block;
}

.expertise-card__title {
	margin-bottom: .375rem;
	font-size: 1.1875rem;
}

.expertise-card__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--text-color);
}
/* The closing CTA band is a shared component —
   see assets/css/components/cta-band.css */