/**
 * BRO Electrical — Builders & Developers (page-builders-developers.php).
 * Positions BRO as an electrical contractor capability page for
 * construction professionals, not a domestic landing page. Restructured
 * 2026-08-30 around what the builder/developer gains from working with
 * BRO, rather than a feature list — see the PHP file's own header
 * comment for the full section-by-section rationale. Now includes a
 * genuine builder testimonial (Mark Nelson, Fairway Construction) —
 * the first of its kind on the site.
 */

.bro-bd-page section {
	padding: var(--bro-section-spacing) 0;
}

/* ---- Hero ---- */

.bro-bd-hero {
	position: relative;
	min-height: calc(100svh - var(--bro-header-height));
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--bro-charcoal);
	padding: 0;
}

.bro-bd-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bro-bd-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	display: block;
}

.bro-bd-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 23, 26, 0.76) 0%, rgba(20, 23, 26, 0.36) 48%, rgba(20, 23, 26, 0.12) 78%),
		linear-gradient(0deg, rgba(20, 23, 26, 0.84) 0%, rgba(20, 23, 26, 0.26) 42%, rgba(20, 23, 26, 0.08) 65%);
}

.bro-bd-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--bro-max-width);
	margin: 0 auto;
	padding: calc(var(--bro-section-spacing) * 0.6) var(--bro-gutter) var(--bro-section-spacing);
}

.bro-bd-hero__heading {
	font-size: var(--bro-text-hero);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 0 0 1.5rem;
	max-width: 20ch;
}

.bro-bd-hero__lead {
	font-size: var(--bro-text-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--bro-white);
	max-width: 48ch;
	margin: 0 0 1rem;
}

.bro-bd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

.bro-bd-hero__actions .bro-btn--ghost {
	color: var(--bro-text-muted-on-dark);
	border-color: rgba(245, 242, 236, 0.35);
}

@media (hover: hover) and (pointer: fine) {
	.bro-bd-hero__actions .bro-btn--ghost:hover,
	.bro-bd-hero__actions .bro-btn--ghost:focus-visible {
		color: var(--bro-white);
	}
}

@media (max-width: 640px) {
	.bro-bd-hero {
		min-height: 100svh;
	}

	.bro-bd-hero__media img {
		object-position: 50% 38%;
	}

	.bro-bd-hero__overlay {
		background:
			linear-gradient(0deg, rgba(20, 23, 26, 0.9) 0%, rgba(20, 23, 26, 0.5) 32%, rgba(20, 23, 26, 0.12) 60%),
			linear-gradient(180deg, rgba(20, 23, 26, 0.3) 0%, rgba(20, 23, 26, 0) 25%);
	}

	.bro-bd-hero__content {
		padding: 2rem var(--bro-gutter) 2.75rem;
	}

	.bro-bd-hero__heading {
		max-width: none;
	}

	.bro-bd-hero__actions {
		flex-direction: column;
	}

	.bro-bd-hero__actions .bro-btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* ---- Shared reveal stagger ---- */

.bro-bd-page .bro-eyebrow.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-bd-page h2.bro-reveal-fade {
	transition-delay: 90ms;
}

.bro-bd-page .bro-reveal-fade[data-reveal="body"] {
	transition-delay: 170ms;
}

.bro-bd-page .bro-reveal-fade[data-reveal="extra"] {
	transition-delay: 240ms;
}

/* ---- Projects we support — editorial numbered list, not cards ---- */

.bro-bd-projects {
	background: var(--bro-white);
}

.bro-bd-projects__intro {
	max-width: 46rem;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

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

.bro-bd-projects__list {
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-bd-project {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-bd-project__index {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-h2);
	font-weight: 700;
	line-height: 1;
	color: var(--bro-border-on-light);
}

.bro-bd-project__title {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-orange-burnt);
	margin: 0.35rem 0 0.65rem;
}

.bro-bd-project__text {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 56ch;
	margin: 0;
}

@media (max-width: 620px) {
	.bro-bd-project {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* Construction-in-progress / finished photo carousel, sitting below the
   numbered list — reinforces that BRO works during the build, not just
   once a project is finished. Houses the shared .bro-cs-carousel
   component (see project-case-study.css); this wrapper only provides
   the same top spacing the original static photo used. */
.bro-bd-projects__photo {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

/* ---- Shared editorial image + text grid (major-visual sections) ---- */

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

.bro-bd-grid--reverse {
	flex-direction: row-reverse;
}

.bro-bd-grid__media {
	flex: 1 1 460px;
}

.bro-bd-grid__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--bro-white);
}

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

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

.bro-bd-grid__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;
}

@media (max-width: 900px) {
	/* Below 900px, media and text simply stack — switched from
	   flex-direction: column to a plain block layout entirely, rather
	   than trying to keep this a flex container. flex-basis is a
	   row-direction (width) concept; reinterpreted as a column-direction
	   (height) value it either under-sizes a tall photo/the comparison
	   slider (fixed at the old 460px height regardless of content) or,
	   with align-items: stretch and flex-basis: auto/none, collapses the
	   item to 0 height in this engine — an aspect-ratio-in-a-flex-column
	   sizing quirk, not something worth chasing further. Plain block
	   stacking has no such ambiguity: each child is simply full width,
	   sized to its own content, in source order (the --reverse row
	   ordering is a row-direction-only concept and was already being
	   discarded at this breakpoint by the old flex-direction: column
	   rule, so this is not a behaviour change). */
	.bro-bd-grid,
	.bro-bd-grid--reverse {
		display: block;
	}

	.bro-bd-grid__media {
		width: 100%;
		max-width: 100%;
		margin: 0 0 clamp(2rem, 4vw, 2.5rem);
	}

	.bro-bd-grid__body {
		max-width: 100%;
	}
}

/* ---- Electrical work that fits around the build (first-fix photo) ---- */

.bro-bd-site {
	background: var(--bro-offwhite);
}

.bro-bd-site__media img {
	aspect-ratio: 3 / 4;
}

.bro-bd-site__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	gap: 0.5rem 1.5rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 600;
	color: var(--bro-text-on-light);
}

.bro-bd-site__list li {
	display: flex;
	align-items: center;
}

.bro-bd-site__list li:not(:last-child)::after {
	content: '\00b7';
	color: var(--bro-orange);
	margin: 0 0 0 1.5rem;
	font-weight: 700;
}

/* ---- Working from your plans — document/drawing visual ---- */

.bro-bd-plans {
	background: var(--bro-white);
}

.bro-bd-plans__intro {
	max-width: 52rem;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

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

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

.bro-bd-plans__list {
	list-style: none;
	margin: 1.5rem 0 1.75rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 600;
	color: var(--bro-text-on-light);
}

.bro-bd-plans__list li {
	display: flex;
	align-items: center;
}

.bro-bd-plans__list li:not(:last-child)::after {
	content: '\00b7';
	color: var(--bro-orange);
	margin: 0 0 0 1.5rem;
	font-weight: 700;
}

.bro-bd-plans__note {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-h3);
	font-weight: 700;
	line-height: 1.35;
	color: var(--bro-text-on-light);
	max-width: 42ch;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	padding-left: 1.25rem;
	border-left: 3px solid var(--bro-orange);
}

/* Document/drawing panel — presented like a piece of paper, not a
   normal project photograph. Reuses the horizontally-scrollable,
   pinned-min-width technique proven earlier in this project for the
   same wide (2.44:1) source drawing, so mobile never shrinks it to
   illegibility. */
.bro-bd-plans__drawing {
	background: var(--bro-offwhite);
	border: 1px solid var(--bro-border-on-light);
	border-radius: var(--bro-radius-sm);
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

.bro-bd-plans__frame {
	overflow-x: auto;
	background: var(--bro-white);
	border: 1px solid var(--bro-border-on-light);
}

.bro-bd-plans__frame img {
	display: block;
	width: 100%;
	min-width: 640px;
	height: auto;
}

.bro-bd-plans__caption {
	font-size: var(--bro-text-xs);
	line-height: 1.5;
	color: var(--bro-text-muted-on-light);
	margin: 0.85rem 0 0;
}

@media (max-width: 640px) {
	.bro-bd-plans__frame img {
		min-width: 780px;
	}
}

/* ---- Projects change. Surprises on the invoice shouldn't. ---- */

.bro-bd-changes {
	background: var(--bro-offwhite);
}

.bro-bd-changes__inner {
	max-width: 50rem;
}

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

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

.bro-bd-changes__examples {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 600;
	color: var(--bro-text-on-light);
}

.bro-bd-changes__examples li {
	display: flex;
	align-items: center;
}

.bro-bd-changes__examples li:not(:last-child)::after {
	content: '\00b7';
	color: var(--bro-orange);
	margin: 0 0.6em;
	font-weight: 700;
}

/* ---- Keeping the project moving ---- */

.bro-bd-comms {
	background: var(--bro-charcoal);
}

.bro-bd-comms__inner {
	max-width: 50rem;
}

.bro-bd-comms__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 1rem 0 1.5rem;
}

.bro-bd-comms__inner > p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	max-width: 58ch;
	margin: 0 0 1.5rem;
}

.bro-bd-comms__list {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-dark);
}

.bro-bd-comms__list li {
	position: relative;
	padding-left: 1.2rem;
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-white);
	margin-bottom: 0.65rem;
}

.bro-bd-comms__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: var(--bro-orange);
}

/* ---- From first fix to finished home ---- */

.bro-bd-finished {
	background: var(--bro-white);
}

.bro-bd-finished__media img {
	aspect-ratio: 1126 / 2000;
}

.bro-bd-finished__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	gap: 0.5rem 1.5rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 600;
	color: var(--bro-text-on-light);
}

.bro-bd-finished__list li {
	display: flex;
	align-items: center;
}

.bro-bd-finished__list li:not(:last-child)::after {
	content: '\00b7';
	color: var(--bro-orange);
	margin: 0 0 0 1.5rem;
	font-weight: 700;
}

/* ---- Quality, compliance & completion ---- */

.bro-bd-quality {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-bd-quality__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.bro-bd-quality__eyebrow {
	justify-content: center;
}

.bro-bd-quality__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 0 0 1rem;
}

.bro-bd-quality__lead {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	max-width: 46ch;
	margin: 0 auto 1.75rem;
}

.bro-bd-quality__list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-dark);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 600;
	color: var(--bro-white);
}

.bro-bd-quality__list li {
	display: flex;
	align-items: center;
}

.bro-bd-quality__list li:not(:last-child)::after {
	content: '\00b7';
	color: var(--bro-orange);
	margin: 0 0 0 1.5rem;
	font-weight: 700;
}

.bro-bd-quality__badge-row {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bro-border-on-dark);
}

.bro-bd-quality__badge-row img {
	height: 56px;
	width: auto;
	background: var(--bro-white);
	padding: 7px 10px;
	border-radius: var(--bro-radius-sm);
	flex: 0 0 auto;
}

.bro-bd-quality__badge-text {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bro-white);
	text-align: left;
}

@media (max-width: 420px) {
	.bro-bd-quality__badge-row {
		flex-direction: column;
	}
}

/* ---- Builder testimonial — Fairway Construction. Deliberately built
   as a major, high-weight section (large pull-quote treatment, giant
   orange quote mark) rather than a small generic testimonial card, per
   instruction. Self-contained here rather than reusing testimonials.css
   classes, since that stylesheet isn't linked from this page's static
   preview. ---- */

.bro-bd-testimonial {
	background: var(--bro-white);
}

.bro-bd-testimonial__inner {
	max-width: 54rem;
}

.bro-bd-testimonial__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 1rem 0 clamp(2.5rem, 5vw, 3.5rem);
}

.bro-bd-testimonial__quote {
	position: relative;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.bro-bd-testimonial__quote::before {
	content: '\201C';
	display: block;
	font-family: var(--bro-font-display);
	font-size: clamp(5rem, 10vw, 8rem);
	line-height: 1;
	color: var(--bro-orange);
	opacity: 0.35;
	margin: 0 0 -0.75rem;
}

.bro-bd-testimonial__quote p {
	font-size: var(--bro-text-lg);
	font-weight: 600;
	line-height: 1.55;
	color: var(--bro-text-on-light);
	max-width: 50ch;
	margin: 0 0 1.25rem;
}

.bro-bd-testimonial__quote p:last-child {
	margin-bottom: 0;
}

/* Closing quote mark, styled consistently with the opening one (same
   colour/opacity/font) but sized and placed inline at the end of the
   final sentence rather than as its own oversized block -- the
   opening mark's clamp(5rem, 10vw, 8rem) block treatment would break
   the text flow and overlap the attribution if reused verbatim here.
   Em-based sizing means it scales with the paragraph's own font-size
   automatically at every breakpoint, no separate media queries needed. */
.bro-bd-testimonial__quote p:last-child::after {
	content: '\201D';
	display: inline-block;
	font-family: var(--bro-font-display);
	color: var(--bro-orange);
	opacity: 0.35;
	font-size: 1.8em;
	line-height: 0;
	vertical-align: -0.32em;
	margin-left: 0.15em;
}

.bro-bd-testimonial__attribution {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-bd-testimonial__logo-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	transition: opacity var(--bro-transition-base);
}

.bro-bd-testimonial__logo-link img {
	display: block;
	height: 46px;
	width: auto;
}

@media (hover: hover) and (pointer: fine) {
	.bro-bd-testimonial__logo-link:hover,
	.bro-bd-testimonial__logo-link:focus-visible {
		opacity: 0.75;
	}
}

.bro-bd-testimonial__name-block {
	border-left: 1px solid var(--bro-border-on-light);
	padding-left: 1.75rem;
}

.bro-bd-testimonial__name {
	font-family: var(--bro-font-display);
	font-weight: 700;
	color: var(--bro-text-on-light);
	margin: 0;
}

.bro-bd-testimonial__company {
	font-size: var(--bro-text-sm);
	color: var(--bro-text-muted-on-light);
	margin: 0.15rem 0 0;
}

/* The company name itself is now also a link to the Fairway Construction
   website (in addition to the logo and the "Visit..." link below) --
   underlined rather than coloured by default so it doesn't compete with
   the orange "Visit Fairway Construction" link for attention; both
   pick up the same orange hover/focus treatment. */
.bro-bd-testimonial__company a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--bro-border-on-light);
	text-underline-offset: 0.2em;
	transition: color var(--bro-transition-base), text-decoration-color var(--bro-transition-base);
}

.bro-bd-testimonial__company a:hover,
.bro-bd-testimonial__company a:focus-visible {
	color: var(--bro-orange);
	text-decoration-color: currentColor;
}

/* Small, deliberately understated text link -- same visual language as
   the homepage "Read More Reviews" link (reviews.css), just one size
   down (--bro-text-xs) so the external link is obvious without
   competing with the testimonial itself for visual weight. */
.bro-bd-testimonial__visit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.6rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	text-decoration: none;
	padding-bottom: 0.3em;
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-bd-testimonial__visit-link .bro-icon-arrow {
	width: 12px;
	height: 12px;
	transition: transform var(--bro-transition-base);
}

.bro-bd-testimonial__visit-link:focus-visible {
	color: var(--bro-orange);
	border-color: var(--bro-orange);
}

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

@media (hover: hover) and (pointer: fine) {
	.bro-bd-testimonial__visit-link:hover {
		color: var(--bro-orange);
		border-color: var(--bro-orange);
	}

	.bro-bd-testimonial__visit-link:hover .bro-icon-arrow {
		transform: translateX(4px);
	}
}

@media (max-width: 480px) {
	.bro-bd-testimonial__attribution {
		gap: 1rem;
	}

	.bro-bd-testimonial__name-block {
		border-left: none;
		padding-left: 0;
	}
}

/* ---- More than a one-off electrical quote ---- */

.bro-bd-relationships {
	background: var(--bro-offwhite);
}

.bro-bd-relationships__inner {
	max-width: 50rem;
}

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

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

.bro-bd-relationships__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

@media (max-width: 480px) {
	.bro-bd-relationships__actions {
		flex-direction: column;
	}

	.bro-bd-relationships__actions .bro-btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* ---- Trade partners — shared carousel (partner-logos.css) ---- */

.bro-bd-partners {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-bd-partners__inner {
	max-width: 50rem;
	margin: 0 auto;
}

.bro-bd-partners .bro-eyebrow {
	justify-content: center;
}

.bro-bd-partners__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 1rem 0 clamp(2.5rem, 5vw, 3.5rem);
}

/* .bro-partner-logos (partner-logos.css) is the shared carousel itself;
   this modifier only centres it within the section's own max-width and
   restores the standard hover border colour, since .bro-partner-logos__card's
   default border is tuned for a light background elsewhere. */
.bro-bd-partners__logos {
	max-width: 100%;
}

.bro-bd-partners__logos .bro-partner-logos__card {
	border-color: transparent;
}

/* ---- Builder FAQs ---- */

.bro-bd-faq {
	background: var(--bro-white);
}

.bro-bd-faq__inner {
	max-width: 52rem;
}

.bro-bd-faq__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 1rem 0 clamp(2rem, 4vw, 3rem);
}

.bro-bd-faq__list {
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-bd-faq__item {
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-bd-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 700;
	color: var(--bro-text-on-light);
	cursor: pointer;
	list-style: none;
}

.bro-bd-faq__item summary::-webkit-details-marker {
	display: none;
}

.bro-bd-faq__item summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--bro-orange);
	line-height: 1;
	transition: transform var(--bro-transition-base);
}

.bro-bd-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.bro-bd-faq__item summary:focus-visible {
	outline: 2px solid var(--bro-orange);
	outline-offset: 3px;
}

.bro-bd-faq__answer {
	margin: 0 0 1.75rem;
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 58ch;
}

/* ---- Final CTA ---- */

.bro-bd-cta {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-bd-cta__inner {
	max-width: 46rem;
	margin: 0 auto;
}

.bro-bd-cta__eyebrow {
	justify-content: center;
}

.bro-bd-cta__heading {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 0 0 1.5rem;
}

.bro-bd-cta__text {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	max-width: 54ch;
	margin: 0 auto 2.25rem;
}

.bro-bd-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
}

.bro-bd-cta__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 1.75rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bro-white);
	text-decoration: none;
}

.bro-bd-cta__phone svg {
	width: 18px;
	height: 18px;
}

.bro-bd-cta__phone:hover,
.bro-bd-cta__phone:focus-visible {
	color: var(--bro-orange);
}

@media (max-width: 480px) {
	.bro-bd-cta__actions {
		flex-direction: column;
	}

	.bro-bd-cta__actions .bro-btn {
		width: 100%;
	}
}