/**
 * BRO Electrical — homepage "About BRO" section.
 * Concise intro, team photo as the dominant visual, understated proof
 * points instead of stat cards.
 */

.bro-about {
	background: var(--bro-white);
	padding: var(--bro-section-spacing) 0;
}

.bro-about__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
}

.bro-about__media {
	flex: 1 1 480px;
}

.bro-about__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2048 / 1482;
	object-fit: cover;
	background: var(--bro-offwhite);
}

.bro-about__body {
	flex: 1 1 400px;
	max-width: 34rem;
}

.bro-about__heading {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 0 0 1.5rem;
}

.bro-about__body p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 54ch;
	margin: 0 0 1.25rem;
}

.bro-about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	margin: 2rem 0 2.25rem;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-about__stat {
	flex: 1 1 140px;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--bro-border-on-light);
}

.bro-about__stat:first-child {
	padding-left: 0;
	border-left: none;
}

.bro-about__stat-figure {
	display: block;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-lg);
	font-weight: 800;
	color: var(--bro-orange);
	margin: 0 0 0.4rem;
}

.bro-about__stat-label {
	display: block;
	font-size: var(--bro-text-xs);
	line-height: 1.4;
	color: var(--bro-text-muted-on-light);
	max-width: 20ch;
}

.bro-about__cta .bro-icon-arrow {
	width: 14px;
	height: 14px;
	transition: transform var(--bro-transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.bro-about__cta:hover .bro-icon-arrow,
	.bro-about__cta:focus-visible .bro-icon-arrow {
		transform: translateX(4px);
	}
}

.bro-about__cta:focus-visible .bro-icon-arrow {
	transform: translateX(4px);
}

/* Reveal stagger, reusing the existing generic .bro-reveal-fade mechanism. */
.bro-about__media.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-about__eyebrow.bro-reveal-fade {
	transition-delay: 60ms;
}

.bro-about__heading.bro-reveal-fade {
	transition-delay: 140ms;
}

.bro-about__body p:nth-of-type(1).bro-reveal-fade {
	transition-delay: 220ms;
}

.bro-about__body p:nth-of-type(2).bro-reveal-fade {
	transition-delay: 280ms;
}

.bro-about__body p:nth-of-type(3).bro-reveal-fade {
	transition-delay: 340ms;
}

.bro-about__body p:nth-of-type(4).bro-reveal-fade {
	transition-delay: 400ms;
}

.bro-about__stats.bro-reveal-fade {
	transition-delay: 460ms;
}

.bro-about__cta.bro-reveal-fade {
	transition-delay: 520ms;
}

@media (max-width: 600px) {
	.bro-about__stats {
		flex-direction: column;
		gap: 1.25rem;
	}

	.bro-about__stat,
	.bro-about__stat:first-child {
		flex-basis: auto;
		padding-left: 0;
		border-left: none;
	}
}