/* /about-us/ — builds on agency.css (hero, sections, closing panel). Mobile first; 768 / 1024 / 1440. */

/* Numbers: gold hairline above each figure */
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin: 0; }
.ab-stat { display: flex; flex-direction: column-reverse; gap: 6px; padding-top: 16px; border-top: 1px solid var(--g-gold); }
.ab-stat__num { margin: 0; font-size: clamp(34px, 9vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ab-stat__label { font-size: 15px; color: var(--g-muted); }

@media (min-width: 768px) {
	.ab-stats { gap: 36px 32px; }
}

@media (min-width: 1024px) {
	.ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ab-stat__num { font-size: clamp(40px, 3.6vw, 56px); }
}

/* Our story: label + gold hairline, then the statement across the container.
   From 1024 the same 5/7 split as the hero: label left, statement right. */
.ab-story { padding-top: 20px; border-top: 1px solid var(--g-gold); }
.ab-story__label { margin-bottom: 16px; }
.ab-story .ab-statement { max-width: 30ch; line-height: 1.3; }

@media (min-width: 1024px) {
	.ab-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; padding-top: 28px; }
	.ab-story__label { margin: 8px 0 0; }
	.ab-story .ab-statement { max-width: none; font-size: clamp(30px, 2.6vw, 40px); }
}