/**
 * BRO Electrical — Consumer Unit Upgrades (page-consumer-unit-upgrades.php).
 * New page. More technical/editorial and less photography-led than
 * Kitchen Electrics — exactly two genuine photographs on the whole page
 * (hero background + one section-4 photo), everything else carried by
 * typography, large numbering and fine rules.
 */

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

/* ---- Hero ----
   Source photo (fuseboard.jpeg) is a 1051x1051 square with genuine black
   letterbox bars baked into the top and bottom (109px/10.4% each side);
   the real content only occupies the middle 79.2% of the frame. Plain
   object-fit:cover already excludes the bars on any landscape/wide box
   (desktop), but on a portrait box (tablet/mobile) cover-fit shows the
   FULL image height (bars included) and only crops left/right — so a
   separate, non-animated "crop fix" wrapper (.bro-cu-hero__crop) applies
   a static zoom exactly when the viewport aspect ratio would otherwise
   reveal the bars. This is deliberately a SEPARATE element from the
   <img> itself so it never conflicts with the shared .bro-reveal-zoom
   hero motion (scale 0.96->1), which continues to animate the <img>
   completely independently — the two transforms compose visually
   without needing to be combined into one value. */

.bro-cu-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-cu-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.bro-cu-hero__crop {
	position: absolute;
	inset: 0;
}

.bro-cu-hero__crop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	display: block;
}

/* Portrait/near-square viewports: plain cover-fit shows the image's full
   height (both black bars included) since the box is narrower than the
   image is tall. 1051/832 (image-width / content-only-height) = 1.263 is
   the exact ratio above which the bars are already excluded automatically
   — matched here with a small safety margin, and a flat 1.35 zoom, which
   is more than enough for any ratio at or below the threshold (the
   required zoom never exceeds ~1.263 for this source photo). */
@media (max-aspect-ratio: 6/5) {
	.bro-cu-hero__crop {
		transform: scale(1.35);
	}

	.bro-cu-hero__crop img {
		/* Full height is always shown once portrait; bias right so the
		   SPD and main switch (toward the right of the frame) stay in
		   the narrower crop alongside the RCBO row, rather than being
		   pushed out in favour of the empty spare ways on the left. */
		object-position: 62% 50%;
	}
}

.bro-cu-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 23, 26, 0.78) 0%, rgba(20, 23, 26, 0.4) 46%, rgba(20, 23, 26, 0.12) 78%),
		linear-gradient(0deg, rgba(20, 23, 26, 0.86) 0%, rgba(20, 23, 26, 0.3) 42%, rgba(20, 23, 26, 0.08) 65%);
}

.bro-cu-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-cu-hero__heading {
	font-size: var(--bro-text-hero);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 0 0 1.5rem;
}

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

.bro-cu-hero__body p {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-dark);
	max-width: 58ch;
	margin: 0;
}

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

.bro-cu-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-cu-hero__actions .bro-btn--ghost:hover,
	.bro-cu-hero__actions .bro-btn--ghost:focus-visible {
		color: var(--bro-white);
	}
}

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

	.bro-cu-hero__overlay {
		background:
			linear-gradient(0deg, rgba(20, 23, 26, 0.92) 0%, rgba(20, 23, 26, 0.52) 32%, rgba(20, 23, 26, 0.14) 60%),
			linear-gradient(180deg, rgba(20, 23, 26, 0.3) 0%, rgba(20, 23, 26, 0) 25%);
	}

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

	.bro-cu-hero__body p {
		max-width: none;
	}

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

	.bro-cu-hero__actions .bro-btn {
		width: 100%;
	}
}

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

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

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

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

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

/* ---- Not just a new box ---- */

.bro-cu-intro {
	background: var(--bro-offwhite);
}

.bro-cu-intro__inner {
	max-width: 50rem;
}

.bro-cu-intro__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-cu-intro__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.25rem;
}

.bro-cu-intro__note {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 600;
	color: var(--bro-text-on-light);
	max-width: 54ch;
	margin: 1.75rem 0 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--bro-orange);
}

/* ---- What changes — editorial benefit list (no icon cards) ---- */

.bro-cu-benefits {
	background: var(--bro-white);
}

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

.bro-cu-benefits__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-cu-benefits__list {
	border-top: 1px solid var(--bro-border-on-light);
}

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

.bro-cu-benefit__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-cu-benefit__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-cu-benefit__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-cu-benefit {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* ---- Modern circuit protection — the fuseboard-new.jpeg section ---- */

.bro-cu-protection {
	background: var(--bro-offwhite);
}

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

.bro-cu-protection__media {
	flex: 1 1 460px;
}

.bro-cu-protection__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	/* Matches bro-consumer-unit.jpeg's own native ratio exactly (updated
	   2026-08-29, was 1905/880 for the previous bro-fuseboard.jpg), so
	   nothing is ever cropped at any breakpoint. */
	aspect-ratio: 903 / 848;
	background: var(--bro-white);
	border: 1px solid var(--bro-border-on-light);
	border-radius: var(--bro-radius-sm);
}

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

.bro-cu-protection__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.75rem;
}

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

.bro-cu-device {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-cu-device__label {
	display: inline-block;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bro-white);
	background: var(--bro-charcoal);
	padding: 0.25em 0.6em;
	border-radius: var(--bro-radius-sm);
	margin: 0 0 0.6rem;
}

.bro-cu-device__text {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	margin: 0;
}

/* Below 900px, media and text simply stack. Previously used
   flex-direction: column, which left .bro-cu-protection__media's
   flex-basis: 460px (written for the row-direction desktop layout,
   where the main axis is horizontal/width) being read as a fixed
   HEIGHT once the main axis turns vertical -- combined with the
   container's own align-items: center (a cross-axis/width rule in row
   mode, sizing the item to fit-content once column), the media column
   collapsed to a near-zero width (previously measured ~2px). Switched
   to plain block stacking, which needs no flex axis-reinterpretation
   at all -- proven fix, same technique used for the equivalent bug on
   the Builders & Developers page. */
@media (max-width: 900px) {
	.bro-cu-protection__grid {
		display: block;
	}

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

	.bro-cu-protection__body {
		max-width: 100%;
	}
}

/* ---- Does it need replacing — trust section ---- */

.bro-cu-assess {
	background: var(--bro-white);
}

.bro-cu-assess__inner {
	max-width: 50rem;
}

.bro-cu-assess__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-cu-assess__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-cu-assess__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-cu-assess__list li {
	position: relative;
	padding-left: 1.2rem;
	font-size: var(--bro-text-base);
	line-height: 1.55;
	color: var(--bro-text-on-light);
	margin-bottom: 0.65rem;
}

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

@media (max-width: 480px) {
	.bro-cu-assess .bro-btn {
		display: flex;
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* ---- Before we replace it ---- */

.bro-cu-existing {
	background: var(--bro-offwhite);
}

.bro-cu-existing__inner {
	max-width: 50rem;
}

.bro-cu-existing__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-cu-existing__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.25rem;
}

.bro-cu-existing__note {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 600;
	color: var(--bro-text-on-light);
	max-width: 56ch;
	margin: 1.75rem 0 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--bro-orange);
	line-height: 1.55;
}

/* ---- Process (text-only, no photos) ---- */

.bro-cu-process {
	background: var(--bro-white);
}

.bro-cu-process__intro {
	max-width: 40rem;
	margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.bro-cu-process__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-cu-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bro-cu-process__step {
	padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-cu-process__list > .bro-cu-process__step:last-child {
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-cu-process__step-inner {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.bro-cu-process__index {
	flex: 0 0 auto;
	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-cu-process__body {
	flex: 1 1 auto;
	max-width: 34rem;
}

.bro-cu-process__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-text-on-light);
	margin: 0 0 0.65rem;
}

.bro-cu-process__text {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	margin: 0;
}

@media (max-width: 780px) {
	.bro-cu-process__step-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

/* ---- Renovating or changing your home ---- */

.bro-cu-ahead {
	background: var(--bro-charcoal);
}

.bro-cu-ahead__inner {
	max-width: 52rem;
}

.bro-cu-ahead__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-cu-ahead__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.25rem;
}

.bro-cu-ahead__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-dark);
}

.bro-cu-ahead__links a {
	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-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(245, 242, 236, 0.35);
	padding-bottom: 0.2em;
	transition: color var(--bro-transition-base), border-color var(--bro-transition-base);
}

.bro-cu-ahead__links a:hover,
.bro-cu-ahead__links a:focus-visible {
	color: var(--bro-orange);
	border-color: var(--bro-orange);
}

/* ---- Testing, certification & notification ---- */

.bro-cu-certification {
	background: var(--bro-offwhite);
	text-align: center;
}

.bro-cu-certification__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.bro-cu-certification__eyebrow {
	justify-content: center;
}

.bro-cu-certification__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-text-on-light);
	margin: 0 0 1.25rem;
}

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

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

.bro-cu-certification__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-cu-certification__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-text-on-light);
	text-align: left;
}

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

/* ---- Reviews ---- */

.bro-cu-reviews {
	background: var(--bro-white);
}

.bro-cu-reviews__intro {
	max-width: 44rem;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.bro-cu-reviews__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-cu-reviews__pair {
	margin-top: 2.5rem;
}

.bro-cu-reviews__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.bro-cu-reviews__cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	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-text-on-light);
	text-decoration: none;
}

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

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

.bro-cu-reviews__cta a:hover,
.bro-cu-reviews__cta a:focus-visible {
	color: var(--bro-orange);
}

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

.bro-cu-faq {
	background: var(--bro-offwhite);
}

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

.bro-cu-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-cu-faq__list {
	border-top: 1px solid var(--bro-border-on-light);
}

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

.bro-cu-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-cu-faq__item summary::-webkit-details-marker {
	display: none;
}

.bro-cu-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-cu-faq__item[open] summary::after {
	transform: rotate(45deg);
}

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

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

.bro-cu-faq__answer a {
	color: var(--bro-text-on-light);
	text-decoration: underline;
	text-decoration-color: var(--bro-border-on-light);
	text-underline-offset: 3px;
}

.bro-cu-faq__answer a:hover,
.bro-cu-faq__answer a:focus-visible {
	color: var(--bro-orange);
	text-decoration-color: var(--bro-orange);
}

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

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

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

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

.bro-cu-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-cu-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-cu-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

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

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

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

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