/** About: normal-flow editorial grid. No cards, borders, or decorative badges. */
.ba-about {
	--ba-about-background: var(--ba-color-neutral, #f8f7f5);
	--ba-about-heading: var(--ba-color-secondary, #121212);
	--ba-about-paragraph: var(--ba-color-secondary, #121212);
	--ba-about-number: var(--ba-color-secondary, #121212);
	--ba-about-label: var(--ba-color-secondary, #121212);
	--ba-about-cta-bg: var(--ba-color-primary, #e84a10);
	--ba-about-cta-text: var(--ba-color-secondary, #121212);
	--ba-about-cta-hover: var(--ba-color-primary-hover, #d6400a);
	--ba-about-cta-hover-text: var(--ba-color-white, #fff);
	--ba-about-content-width: var(--ba-container-max, 1280px);
	--ba-about-column-gap: 64px;
	--ba-about-padding-y: 112px;
	--ba-about-padding-y-tablet: 80px;
	--ba-about-padding-y-mobile: 56px;
	padding-block: var(--ba-about-padding-y);
	background: var(--ba-about-background);
	font-family: var(--ba-font-body, "Plus Jakarta Sans", Arial, sans-serif);
	color: var(--ba-about-paragraph);
}
.ba-about, .ba-about * { box-sizing: border-box; }
.ba-about .ba-about-container {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	grid-template-areas: "content media" "counters media";
	grid-template-rows: 1fr auto;
	gap: 64px var(--ba-about-column-gap);
	width: min(calc(100% - var(--ba-gutter, 48px) * 2), var(--ba-about-content-width));
	margin-inline: auto;
}
.ba-about .ba-about-content { grid-area: content; align-self: start; min-width: 0; }
.ba-about .ba-about-heading { max-width: 720px; margin: 0 0 28px; color: var(--ba-about-heading); font: 600 clamp(32px, 3.4vw, 52px)/1.1 var(--ba-font-heading, "Space Grotesk", Arial, sans-serif); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ba-about .ba-about-paragraph { max-width: 540px; margin: 0 0 32px; font: 400 17px/1.75 var(--ba-font-body, "Plus Jakarta Sans", Arial, sans-serif); color: var(--ba-about-paragraph); overflow-wrap: anywhere; }
/* Same square-cornered CTA dimensions/tokens as Hero, with normal-text hover contrast. */
.ba-about .ba-about-cta { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 54px; padding: 16px 24px; border: 1px solid transparent; border-radius: 0; background: var(--ba-about-cta-bg); color: var(--ba-about-cta-text); font: var(--ba-about-cta-weight, 500) 19px/1.4 var(--ba-font-body, "Plus Jakarta Sans", Arial, sans-serif); text-decoration: none; text-align: center; overflow-wrap: anywhere; transition: background-color 180ms ease, color 180ms ease; }
.ba-about .ba-about-cta:hover { background: var(--ba-about-cta-hover); color: var(--ba-about-cta-hover-text); }
.ba-about .ba-about-cta:focus-visible { outline: 2px solid var(--ba-color-secondary, #121212); outline-offset: 4px; }
.ba-about .ba-about-media { grid-area: media; position: relative; width: 100%; min-width: 0; min-height: 460px; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden; }
.ba-about .ba-about-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ba-about-focal-x, 50%) var(--ba-about-focal-y, 50%); border-radius: 0; }
.ba-about .ba-about-counters { grid-area: counters; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.ba-about .ba-about-counter { min-width: 0; }
.ba-about .ba-about-counter-visual { display: block; font: 500 clamp(40px, 4.5vw, 64px)/1.1 var(--ba-font-heading, "Space Grotesk", Arial, sans-serif); color: var(--ba-about-number); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ba-about .ba-about-counter-label { display: block; margin-top: 12px; font: 400 15px/1.6 var(--ba-font-body, "Plus Jakarta Sans", Arial, sans-serif); color: var(--ba-about-label); overflow-wrap: anywhere; }
.ba-about .ba-about-counter-reading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ba-about.ba-about-no-image .ba-about-container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "counters"; }
.ba-about .ba-about-image-notice { margin: 0; font-size: 14px; }
.ba-about.ba-about-no-counters .ba-about-container { grid-template-areas: "content media"; grid-template-rows: auto; }
.ba-about.ba-about-no-image.ba-about-no-counters .ba-about-container { grid-template-areas: "content"; }
@media (max-width: 1024px) {
	.ba-about { padding-block: var(--ba-about-padding-y-tablet); }
	.ba-about .ba-about-container { column-gap: min(var(--ba-about-column-gap), 32px); row-gap: 40px; }
	.ba-about .ba-about-media { min-height: 420px; }
	.ba-about .ba-about-heading { font-size: clamp(28px, 3.4vw, 38px); }
	.ba-about .ba-about-image { object-position: var(--ba-about-focal-x-tablet, var(--ba-about-focal-x, 50%)) var(--ba-about-focal-y-tablet, var(--ba-about-focal-y, 50%)); }
}
@media (max-width: 767px) {
	.ba-about { padding-block: var(--ba-about-padding-y-mobile); }
	.ba-about .ba-about-container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "media" "counters"; gap: 40px; width: calc(100% - clamp(24px, 6vw, 36px) * 2); }
	.ba-about .ba-about-heading { font-size: clamp(28px, 6.5vw, 36px); margin-bottom: 24px; }
	.ba-about .ba-about-paragraph { font-size: 16px; margin-bottom: 28px; }
	.ba-about .ba-about-media { aspect-ratio: 4 / 3; min-height: 0; }
	.ba-about .ba-about-cta { width: 100%; }
	.ba-about .ba-about-image { object-position: var(--ba-about-focal-x-mobile, var(--ba-about-focal-x-tablet, var(--ba-about-focal-x, 50%))) var(--ba-about-focal-y-mobile, var(--ba-about-focal-y-tablet, var(--ba-about-focal-y, 50%))); }
	.ba-about.ba-about-no-counters .ba-about-container { grid-template-areas: "content" "media"; }
}
@media (max-width: 359px) { .ba-about .ba-about-counters { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ba-about .ba-about-cta { transition: none; } }