/**
 * BRO Electrical — Services landing page (page-services.php).
 * Premium editorial hub page: large service numbering, hairline
 * dividers, alternating asymmetric rows, restrained scroll movement.
 * No icon grid, no boxed cards.
 */

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

/* ---- Hero / page introduction ---- */

.bro-services-hero {
	background: var(--bro-offwhite);
}

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

.bro-services-hero__media {
	flex: 1 1 480px;
}

.bro-services-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 960 / 716;
	object-fit: cover;
	background: var(--bro-white);
}

.bro-services-hero__body {
	flex: 1 1 420px;
	max-width: 36rem;
}

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

.bro-services-hero__intro {
	font-size: var(--bro-text-lg);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 52ch;
	margin: 0 0 1.75rem;
}

.bro-services-hero__trust {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bro-text-on-light);
}

.bro-services-hero__trust li {
	display: flex;
	align-items: center;
}

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

.bro-services-hero__media.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-services-hero__eyebrow.bro-reveal-fade {
	transition-delay: 80ms;
}

.bro-services-hero__heading.bro-reveal-fade {
	transition-delay: 160ms;
}

.bro-services-hero__intro.bro-reveal-fade {
	transition-delay: 240ms;
}

.bro-services-hero__trust.bro-reveal-fade {
	transition-delay: 320ms;
}

@media (max-width: 900px) {
	.bro-services-hero__media {
		max-width: 100%;
	}
}

/* ---- Featured services (01-03) — large alternating rows ---- */

.bro-services-featured {
	background: var(--bro-white);
}

.bro-service-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bro-service-feature {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-service-feature-list > .bro-service-feature:last-child {
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-service-feature:nth-child(even) {
	flex-direction: row-reverse;
}

.bro-service-feature__media {
	flex: 0 0 54%;
	aspect-ratio: var(--bro-feature-ratio, 4 / 3);
	overflow: hidden;
	background: var(--bro-offwhite);
}

.bro-service-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--bro-ease);
}

.bro-service-feature__body {
	flex: 1 1 auto;
}

.bro-service-feature__index {
	display: block;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-h2);
	font-weight: 700;
	color: var(--bro-border-on-light);
	line-height: 1;
	margin: 0 0 1.25rem;
}

.bro-service-feature__title {
	font-size: var(--bro-text-h2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bro-text-on-light);
	margin: 0 0 1rem;
}

.bro-service-feature__text {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 42ch;
	margin: 0 0 1.75rem;
}

.bro-service-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	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;
}

.bro-service-feature__link .bro-icon-arrow {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	transition: transform var(--bro-transition-base);
}

.bro-service-feature__link:focus-visible {
	color: var(--bro-orange);
}

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

.bro-service-feature__secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1rem;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--bro-text-muted-on-light);
	text-decoration: none;
	border-bottom: 1px solid var(--bro-border-on-light);
	padding-bottom: 0.2em;
	transition: color var(--bro-transition-base), border-color var(--bro-transition-base);
}

.bro-service-feature__secondary .bro-icon-arrow {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	transition: transform var(--bro-transition-base);
}

.bro-service-feature__secondary:focus-visible,
.bro-service-feature__secondary:hover {
	color: var(--bro-orange);
	border-color: var(--bro-orange);
}

@media (hover: hover) and (pointer: fine) {
	.bro-service-feature__media img {
		transform: scale(1);
	}

	.bro-service-feature:hover .bro-service-feature__media img,
	.bro-service-feature:focus-within .bro-service-feature__media img {
		transform: scale(1.045);
	}

	.bro-service-feature:hover .bro-service-feature__link,
	.bro-service-feature:focus-within .bro-service-feature__link {
		color: var(--bro-orange);
	}

	.bro-service-feature:hover .bro-service-feature__link .bro-icon-arrow,
	.bro-service-feature:focus-within .bro-service-feature__link .bro-icon-arrow {
		transform: translateX(4px);
	}

	.bro-service-feature__secondary:hover .bro-icon-arrow {
		transform: translateX(3px);
	}
}

.bro-service-feature__media.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-service-feature__index.bro-reveal-fade {
	transition-delay: 80ms;
}

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

.bro-service-feature__text.bro-reveal-fade {
	transition-delay: 200ms;
}

.bro-service-feature__link.bro-reveal-fade {
	transition-delay: 260ms;
}

.bro-service-feature__secondary.bro-reveal-fade {
	transition-delay: 300ms;
}

@media (max-width: 900px) {
	.bro-service-feature,
	.bro-service-feature:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
		gap: 1.75rem;
	}

	.bro-service-feature__media {
		flex-basis: auto;
		max-height: 70vh;
	}

	.bro-service-feature__index,
	.bro-service-feature__title {
		font-size: var(--bro-text-h3);
	}
}

/* ---- Services directory (04-08) — numbered editorial list ---- */

.bro-services-directory {
	background: var(--bro-offwhite);
}

.bro-services-directory__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-services-directory__item {
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--bro-border-on-light);
	border-right: 1px solid var(--bro-border-on-light);
	transition: background-color var(--bro-transition-base);
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(2n) {
	border-right: none;
}

/* The final item in the list is always rightmost-in-its-row (it never has
   a neighbour to its right, at 1/2/3-column widths alike), so it should
   never carry a dangling right-hand divider. */
.bro-services-directory__item:last-child {
	border-right: none;
}

.bro-services-directory__item:first-child,
.bro-services-directory__item:nth-child(2) {
	padding-top: 0;
}

/* Desktop — 3 columns. Since "General Electrical Work" was removed
   (2026-08-29) the directory is now 4 items, so the final row is a
   single item (EICRs & Electrical Testing) rather than a paired row —
   this is expected, not a layout bug; the grid rules below are generic
   and need no change for any item count. */
@media (min-width: 901px) {
	.bro-services-directory__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.bro-services-directory__list > .bro-services-directory__item:nth-child(2n) {
		border-right: 1px solid var(--bro-border-on-light);
	}

	.bro-services-directory__list > .bro-services-directory__item:nth-child(3n) {
		border-right: none;
	}

	.bro-services-directory__item:first-child,
	.bro-services-directory__item:nth-child(2),
	.bro-services-directory__item:nth-child(3) {
		padding-top: 0;
	}
}

.bro-services-directory__index {
	display: block;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bro-orange);
	margin: 0 0 1rem;
}

/* Consumer Unit Upgrades only — the one directory entry with a genuine
   project photograph, given slightly more visual emphasis than its
   text-only siblings. Grid footprint/column span is unchanged so the
   rest of the directory grid is never affected. */
.bro-services-directory__media {
	aspect-ratio: 1 / 1;
	max-width: 11rem;
	overflow: hidden;
	margin: 0 0 1.5rem;
	background: var(--bro-offwhite);
}

.bro-services-directory__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bro-services-directory__title {
	font-size: var(--bro-text-h3);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bro-text-on-light);
	margin: 0 0 0.75rem;
}

.bro-services-directory__text {
	font-size: var(--bro-text-sm);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 40ch;
	margin: 0 0 1.25rem;
}

.bro-services-directory__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	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;
}

.bro-services-directory__link .bro-icon-arrow {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	transition: transform var(--bro-transition-base);
}

.bro-services-directory__link:focus-visible {
	color: var(--bro-orange);
}

@media (hover: hover) and (pointer: fine) {
	.bro-services-directory__item:hover {
		background: rgba(255, 90, 31, 0.04);
	}

	.bro-services-directory__item:hover .bro-services-directory__link,
	.bro-services-directory__item:focus-within .bro-services-directory__link {
		color: var(--bro-orange);
	}

	.bro-services-directory__item:hover .bro-services-directory__link .bro-icon-arrow,
	.bro-services-directory__item:focus-within .bro-services-directory__link .bro-icon-arrow {
		transform: translateX(4px);
	}
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(1).bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(2).bro-reveal-fade {
	transition-delay: 80ms;
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(3).bro-reveal-fade {
	transition-delay: 160ms;
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(4).bro-reveal-fade {
	transition-delay: 240ms;
}

.bro-services-directory__list > .bro-services-directory__item:nth-child(5).bro-reveal-fade {
	transition-delay: 320ms;
}

@media (max-width: 700px) {
	.bro-services-directory__list {
		grid-template-columns: 1fr;
	}

	.bro-services-directory__item {
		border-right: none;
	}

	.bro-services-directory__item:first-child,
	.bro-services-directory__item:nth-child(2) {
		padding-top: clamp(2rem, 4vw, 3rem);
	}

	.bro-services-directory__item:first-child {
		padding-top: 0;
	}
}

/* ---- Larger projects — dark charcoal break ---- */

.bro-services-larger {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-services-larger__inner {
	max-width: 46rem;
	margin: 0 auto;
}

.bro-services-larger__eyebrow {
	justify-content: center;
}

.bro-services-larger__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-services-larger__text {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	max-width: 52ch;
	margin: 0 auto 2.25rem;
}

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

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

.bro-services-larger__eyebrow.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-services-larger__heading.bro-reveal-fade {
	transition-delay: 90ms;
}

.bro-services-larger__text.bro-reveal-fade {
	transition-delay: 180ms;
}

.bro-services-larger__cta.bro-reveal-fade {
	transition-delay: 260ms;
}

/* ---- Rewire estimator link ---- */

.bro-services-estimator {
	background: var(--bro-white);
	text-align: center;
}

.bro-services-estimator__inner {
	max-width: 42rem;
	margin: 0 auto;
}

.bro-services-estimator__eyebrow {
	justify-content: center;
}

.bro-services-estimator__heading {
	font-size: var(--bro-text-h2);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	margin: 0 0 1.1rem;
}

.bro-services-estimator__text {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 44ch;
	margin: 0 auto 1.75rem;
}

.bro-services-estimator__note {
	font-size: var(--bro-text-sm);
	color: var(--bro-text-muted-on-light);
	max-width: 46ch;
	margin: 1.5rem auto 0;
}

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

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

.bro-services-estimator__eyebrow.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-services-estimator__heading.bro-reveal-fade {
	transition-delay: 90ms;
}

.bro-services-estimator__text.bro-reveal-fade {
	transition-delay: 180ms;
}

.bro-services-estimator__cta.bro-reveal-fade {
	transition-delay: 260ms;
}

.bro-services-estimator__note.bro-reveal-fade {
	transition-delay: 320ms;
}

/* ---- Quality / trust section ---- */

.bro-services-trust {
	background: var(--bro-offwhite);
}

.bro-services-trust__inner {
	max-width: 46rem;
}

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

.bro-services-trust__text {
	font-size: var(--bro-text-lg);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 58ch;
	margin: 0 0 2.5rem;
}

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

.bro-services-trust__stat {
	flex: 1 1 200px;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--bro-border-on-light);
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--bro-text-on-light);
}

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

.bro-services-trust__heading.bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-services-trust__text.bro-reveal-fade {
	transition-delay: 90ms;
}

.bro-services-trust__stats.bro-reveal-fade {
	transition-delay: 180ms;
}

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

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