/**
 * Plumber Hero — frontend styles
 *
 * Colours, sizes, overlay, height, fonts and the background image are supplied
 * per-instance as CSS custom properties on the .plumber-hero element (render()).
 * Layout is set with a modifier class: --left (default), --center, --right.
 */

.plumber-hero {
	--ph-bg: #0a2540;
	--ph-overlay-color: #040c18;
	--ph-overlay: 0.6;
	--ph-height: 100;
	--ph-content-width: 1180px;
	--ph-heading-maxwidth: none;

	--ph-eyebrow-color: #ffffff;
	--ph-eyebrow-line: #e07a3f;
	--ph-heading-color: #ffffff;
	--ph-sub-color: #e8edf3;
	--ph-feature-color: #ffffff;

	--ph-check-bg: #e07a3f;
	--ph-check-color: #ffffff;

	--ph-pbtn-bg: #e07a3f;
	--ph-pbtn-text: #ffffff;
	--ph-pbtn-bg-hover: #f0915a;
	--ph-pbtn-text-hover: #ffffff;

	--ph-sbtn-bg: #13314f;
	--ph-sbtn-text: #ffffff;
	--ph-sbtn-border: #ffffff;
	--ph-sbtn-bg-hover: #ffffff;
	--ph-sbtn-text-hover: #0a2540;
	--ph-sbtn-border-hover: #ffffff;

	--ph-scroll-color: #ffffff;

	--ph-eyebrow-size: 13px;
	--ph-heading-size: 64px;
	--ph-sub-size: 20px;
	--ph-button-size: 16px;
	--ph-feature-size: 16px;

	--ph-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: calc(var(--ph-height) * 1vh);
	margin: 0;
	overflow: hidden;
	background-color: var(--ph-bg);
	background-image: var(--ph-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;
}

@supports (min-height: 1svh) {
	.plumber-hero {
		min-height: calc(var(--ph-height) * 1svh);
	}
}

/* Full-bleed break-out for the shortcode-in-content case. */
.plumber-hero--breakout {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* --- Overlay ---------------------------------------------------------- */
.plumber-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ph-overlay-image,
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--ph-overlay-color) 72%, transparent) 0%,
			color-mix(in srgb, var(--ph-overlay-color) 34%, transparent) 45%,
			color-mix(in srgb, var(--ph-overlay-color) 78%, transparent) 100%
		),
		color-mix(in srgb, var(--ph-overlay-color) calc(var(--ph-overlay) * 100%), transparent)
	);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.plumber-hero__overlay {
		background: var(--ph-overlay-color);
		opacity: var(--ph-overlay);
	}
}

.plumber-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ph-content-width, 1180px);
	margin: auto;
	padding: clamp(7rem, 14vh, 11rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
	color: #fff;
	transform: translateY(var(--ph-pt-d, 0px));
}

/* Custom code block, pinned under everything at the bottom of the hero.
 * It carries the same top-spacing offset as the inner content (--ph-pt-d /
 * --ph-pt-m) so the whole stack moves together, plus its own fine offset. */
.plumber-hero__custom {
	position: relative;
	z-index: 2;
	width: 100%;
	color: #fff;
	padding: var(--ph-custom-pt, 0px) clamp(1.25rem, 5vw, 4rem) var(--ph-custom-pb, clamp(2rem, 5vh, 3.5rem));
	transform: translateY(calc(var(--ph-custom-offset, 0px) + var(--ph-pt-d, 0px)));
}
.plumber-hero__custom-inner {
	max-width: var(--ph-content-width, 1180px);
	margin: 0 auto;
}
.plumber-hero--code-full .plumber-hero__custom { padding-left: 0; padding-right: 0; }
.plumber-hero--code-full .plumber-hero__custom-inner { max-width: none; }
.plumber-hero--code-custom .plumber-hero__custom-inner { max-width: var(--ph-custom-max, 800px); }
.plumber-hero--code-percent .plumber-hero__custom-inner { max-width: var(--ph-custom-pct, 60%); }

/* Optional phone-only width override for the custom code block. */
@media (max-width: 782px) {
	.plumber-hero--mcode-content .plumber-hero__custom,
	.plumber-hero--mcode-custom .plumber-hero__custom,
	.plumber-hero--mcode-percent .plumber-hero__custom {
		padding-left: clamp(1.25rem, 5vw, 4rem);
		padding-right: clamp(1.25rem, 5vw, 4rem);
	}
	.plumber-hero--mcode-content .plumber-hero__custom-inner { max-width: var(--ph-content-width, 1180px); }
	.plumber-hero--mcode-full .plumber-hero__custom { padding-left: 0; padding-right: 0; }
	.plumber-hero--mcode-full .plumber-hero__custom-inner { max-width: none; }
	.plumber-hero--mcode-custom .plumber-hero__custom-inner { max-width: var(--ph-mcustom-max, 600px); }
	.plumber-hero--mcode-percent .plumber-hero__custom-inner { max-width: var(--ph-mcustom-pct, 90%); }
}

/* --- Eyebrow ---------------------------------------------------------- */
.plumber-hero__eyebrow {
	display: inline-flex;
	align-items: center; /* keeps any accent line centred with the text */
	gap: 0.7em;
	margin: 0 0 1.1rem;
	font-family: var(--ph-font-eyebrow), var(--ph-fallback);
	font-size: var(--ph-eyebrow-size, 13px);
	font-weight: 700;
	letter-spacing: var(--ph-eyebrow-ls, 0.18em);
	text-transform: uppercase;
	color: var(--ph-eyebrow-color);
	line-height: 1.3;
}
.plumber-hero__eyebrow-text { display: inline-block; }

/* Accent line(s): a centred horizontal rule before, or on both sides */
.ph-eb--line::before,
.ph-eb--lines::before,
.ph-eb--lines::after {
	content: "";
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2px;
	background: var(--ph-eyebrow-line);
	border-radius: 2px;
}

/* Dot before the text */
.ph-eb--dot::before {
	content: "";
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--ph-eyebrow-line);
}

/* Short accent bars either side of the text */
.ph-eb--brackets::before,
.ph-eb--brackets::after {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 1.15em;
	background: var(--ph-eyebrow-line);
	border-radius: 2px;
}

/* Filled pill / badge */
.ph-eb--pill .plumber-hero__eyebrow-text {
	background: var(--ph-eyebrow-line);
	color: var(--ph-eyebrow-color);
	padding: 0.5em 1.05em;
	border-radius: 999px;
}

/* Outlined pill */
.ph-eb--outline .plumber-hero__eyebrow-text {
	border: 1.5px solid var(--ph-eyebrow-line);
	padding: 0.45em 1.05em;
	border-radius: 999px;
}

/* Underline accent beneath the text */
.ph-eb--underline { gap: 0; }
.ph-eb--underline .plumber-hero__eyebrow-text {
	position: relative;
	padding-bottom: 0.55em;
}
.ph-eb--underline .plumber-hero__eyebrow-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.4rem;
	height: 2px;
	background: var(--ph-eyebrow-line);
	border-radius: 2px;
}

/* Star rating: modern masked stars with a proportional fill, plus the text */
.ph-eb--rating {
	gap: 0.6em;
	text-transform: none;
	letter-spacing: 0.01em;
}
.plumber-hero__stars {
	--ph-star-size: 22px;
	--ph-rating: 5;
	flex: 0 0 auto;
	display: inline-block;
	width: calc(var(--ph-star-size) * 5.05);
	height: var(--ph-star-size);
	background: linear-gradient(
		90deg,
		var(--ph-star-color, #f5a623) calc(var(--ph-rating) / 5 * 100%),
		var(--ph-star-empty, rgba(255, 255, 255, 0.32)) calc(var(--ph-rating) / 5 * 100%)
	);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5L14.94 7.95 22.94 8.45 16.76 13.55 18.76 21.3 12 17 5.24 21.3 7.24 13.55 1.06 8.45 9.06 7.95Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5L14.94 7.95 22.94 8.45 16.76 13.55 18.76 21.3 12 17 5.24 21.3 7.24 13.55 1.06 8.45 9.06 7.95Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: space;
	mask-repeat: space;
	-webkit-mask-size: var(--ph-star-size) var(--ph-star-size);
	mask-size: var(--ph-star-size) var(--ph-star-size);
	-webkit-mask-position: left center;
	mask-position: left center;
}

/* Optional divider under the rating eyebrow. */
.plumber-hero__eyebrow.ph-eb--has-divider {
	margin-bottom: 0.6rem;
}
.plumber-hero__eyebrow-divider {
	display: block;
	margin: 0 0 1.1rem;
}
.ph-ebdiv--short {
	width: 2.75rem;
	height: 3px;
	border-radius: 3px;
	background: var(--ph-ebdiv-color, var(--ph-eyebrow-line));
}
.ph-ebdiv--long {
	width: 100%;
	max-width: 16rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ph-ebdiv-color, var(--ph-eyebrow-line));
}
.ph-ebdiv--dotted {
	width: 100%;
	max-width: 16rem;
	height: 0;
	border-top: 3px dotted var(--ph-ebdiv-color, var(--ph-eyebrow-line));
}
.plumber-hero--center .plumber-hero__eyebrow-divider {
	margin-left: auto;
	margin-right: auto;
}
.plumber-hero--right .plumber-hero__eyebrow-divider {
	margin-left: auto;
	margin-right: 0;
}

/* Centered layout: keep everything horizontally centred */
.plumber-hero--center .plumber-hero__eyebrow {
	justify-content: center;
}
.plumber-hero--center .ph-eb--underline .plumber-hero__eyebrow-text::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Accent off: strip every decoration back to plain text */
.plumber-hero--no-rule .plumber-hero__eyebrow::before,
.plumber-hero--no-rule .plumber-hero__eyebrow::after,
.plumber-hero--no-rule .plumber-hero__eyebrow-text::after {
	display: none;
}
.plumber-hero--no-rule .plumber-hero__eyebrow { gap: 0; }
.plumber-hero--no-rule .plumber-hero__eyebrow-text {
	background: none;
	border: 0;
	padding: 0;
}

/* --- Headline --------------------------------------------------------- */
.plumber-hero__title {
	margin: 0 0 1.1rem;
	max-width: var(--ph-heading-maxwidth, none);
	font-family: var(--ph-font-heading), var(--ph-fallback);
	font-size: clamp(1.9rem, 6vw, var(--ph-heading-size, 64px));
	font-weight: 800;
	line-height: var(--ph-heading-lh, 1.04);
	letter-spacing: var(--ph-heading-ls, -0.02em);
	color: var(--ph-heading-color);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.plumber-hero__subtitle {
	margin: 0 0 2rem;
	max-width: var(--ph-sub-maxwidth, 56ch);
	font-family: var(--ph-font-body), var(--ph-fallback);
	font-size: clamp(1rem, 2.2vw, var(--ph-sub-size, 20px));
	line-height: var(--ph-sub-lh, 1.55);
	letter-spacing: var(--ph-sub-ls, normal);
	color: var(--ph-sub-color);
}

/* --- Buttons ---------------------------------------------------------- */
.plumber-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 2.25rem;
}

.plumber-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc(3rem * var(--ph-btn-scale, 1));
	padding: 0.95em 1.9em;
	border-radius: 10px;
	font-family: var(--ph-font-button), var(--ph-fallback);
	font-size: calc(clamp(0.9rem, 1.3vw, var(--ph-button-size, 16px)) * var(--ph-btn-scale, 1));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	will-change: transform;
}

.plumber-hero__btn,
.plumber-hero__btn:link,
.plumber-hero__btn:visited,
.plumber-hero__btn:hover,
.plumber-hero__btn:focus,
.plumber-hero__btn:active {
	text-decoration: none !important;
}

.plumber-hero__btn--primary {
	background: var(--ph-pbtn-bg);
	color: var(--ph-pbtn-text);
	border-style: solid;
	border-width: var(--ph-pbtn-bw, 1.5px);
	border-color: var(--ph-pbtn-border, var(--ph-pbtn-bg));
	box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ph-pbtn-bg) 70%, transparent);
}

.plumber-hero__btn--primary:hover,
.plumber-hero__btn--primary:focus-visible {
	transform: translateY(-2px);
	background: var(--ph-pbtn-bg-hover);
	color: var(--ph-pbtn-text-hover);
	border-width: var(--ph-pbtn-bw-hover, var(--ph-pbtn-bw, 1.5px));
	border-color: var(--ph-pbtn-border-hover, var(--ph-pbtn-bg-hover));
	box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--ph-pbtn-bg-hover) 80%, transparent);
}

.plumber-hero__btn--secondary {
	background: var(--ph-sbtn-bg);
	color: var(--ph-sbtn-text);
	border-style: solid;
	border-width: var(--ph-sbtn-bw, 1.5px);
	border-color: var(--ph-sbtn-border);
}

.plumber-hero__btn--secondary:hover,
.plumber-hero__btn--secondary:focus-visible {
	transform: translateY(-2px);
	background: var(--ph-sbtn-bg-hover);
	color: var(--ph-sbtn-text-hover);
	border-width: var(--ph-sbtn-bw-hover, var(--ph-sbtn-bw, 1.5px));
	border-color: var(--ph-sbtn-border-hover);
}

.plumber-hero__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Touch feedback (hover never fires on mobile). */
.plumber-hero__btn:active {
	transform: translateY(0) scale(0.985);
}

/* Optional icon to the left or right of the button label. */
.plumber-hero__btn--has-icon {
	gap: 0.6em;
}
.plumber-hero__btn-icon {
	font-size: 1em;
	line-height: 1;
	color: var(--ph-btn-icon, currentColor);
	pointer-events: none; /* keep hover targeted on the button, not the glyph */
}
.plumber-hero__btn:hover .plumber-hero__btn-icon,
.plumber-hero__btn:focus-visible .plumber-hero__btn-icon {
	color: var(--ph-btn-icon-hover, var(--ph-btn-icon, currentColor));
}
.plumber-hero__btn-label {
	line-height: 1;
}

/* --- Trust points ----------------------------------------------------- */
.plumber-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: clamp(0.75rem, 2.5vh, 1.75rem) auto;
	padding: 0;
	padding-top: var(--ph-feat-pt, 0px);
	padding-bottom: var(--ph-feat-pb, 0px);
	max-width: var(--ph-feat-maxw, none);
	list-style: none;
}

.plumber-hero__features li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--ph-font-feature), var(--ph-fallback);
	font-size: clamp(0.85rem, 1.3vw, var(--ph-feature-size, 16px));
	font-weight: 600;
	letter-spacing: var(--ph-feat-ls, 0px);
	color: var(--ph-feature-color);
}

.plumber-hero__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--ph-feat-isize, 1.4rem);
	height: var(--ph-feat-isize, 1.4rem);
	border-radius: 50%;
	background: var(--ph-feat-icon-bg-color, var(--ph-check-bg));
}

.plumber-hero__check svg {
	display: block;
	width: calc(var(--ph-feat-isize, 1.4rem) * 0.58);
	height: calc(var(--ph-feat-isize, 1.4rem) * 0.58);
	fill: none;
	stroke: var(--ph-feat-icon-color, var(--ph-check-color));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Layouts ---------------------------------------------------------- */
.plumber-hero--center .plumber-hero__inner {
	text-align: center;
}
.plumber-hero--center .plumber-hero__title,
.plumber-hero--center .plumber-hero__subtitle {
	margin-left: auto;
	margin-right: auto;
}
.plumber-hero--center .plumber-hero__actions,
.plumber-hero--center .plumber-hero__features {
	justify-content: center;
}

.plumber-hero--right .plumber-hero__inner {
	text-align: right;
}
.plumber-hero--right .plumber-hero__title,
.plumber-hero--right .plumber-hero__subtitle {
	margin-left: auto;
	margin-right: 0;
}
.plumber-hero--right .plumber-hero__actions,
.plumber-hero--right .plumber-hero__features {
	justify-content: flex-end;
}

/* --- Scroll cue ------------------------------------------------------- */
.plumber-hero__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
}

.plumber-hero__scroll span {
	display: block;
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--ph-scroll-color);
	border-bottom: 2px solid var(--ph-scroll-color);
	transform: rotate(45deg);
	animation: plumber-hero-bounce 1.8s ease-in-out infinite;
}

@keyframes plumber-hero-bounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
	50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* --- Entrance animation (only when enabled) --------------------------- */
.plumber-hero--animate .plumber-hero__eyebrow,
.plumber-hero--animate .plumber-hero__title,
.plumber-hero--animate .plumber-hero__subtitle,
.plumber-hero--animate .plumber-hero__actions,
.plumber-hero--animate .plumber-hero__features {
	opacity: 0;
	transform: translateY(18px);
	animation: plumber-hero-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

.plumber-hero--animate .plumber-hero__title      { animation-delay: 0.08s; }
.plumber-hero--animate .plumber-hero__subtitle   { animation-delay: 0.16s; }
.plumber-hero--animate .plumber-hero__actions    { animation-delay: 0.24s; }
.plumber-hero--animate .plumber-hero__features    { animation-delay: 0.32s; }

/* Bottom bar and badges animate each item in, staggered. */
.plumber-hero--animate.plumber-hero--feat-bar .plumber-hero__features,
.plumber-hero--animate.plumber-hero--feat-badges .plumber-hero__features {
	animation: none;
	opacity: 1;
	transform: none;
}
.plumber-hero--animate.plumber-hero--feat-bar .plumber-hero__features li,
.plumber-hero--animate.plumber-hero--feat-badges .plumber-hero__features li {
	opacity: 0;
	transform: translateY(14px);
	animation: plumber-hero-rise 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
	animation-delay: calc(0.34s + var(--ph-i, 0) * 0.09s);
}

@keyframes plumber-hero-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------
 * Review-avatars eyebrow entrance.
 *
 * When the badge's "animate in" toggle is on, it assembles in sequence:
 * the reviewer photos stack and fade in one after another (the count pill
 * lands last, since it is the final item in the row), then the stars and
 * rating text rise into place, and finally the divider line draws in
 * beneath the whole block. The start state lives on each element so there
 * is no flash during the animation-delay, mirroring the trust-point
 * stagger above.
 * ------------------------------------------------------------------- */
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar {
	opacity: 0;
	transform: translateX(-12px) scale(0.6);
	animation: ph-avatar-stack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(1) { animation-delay: 0.12s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(2) { animation-delay: 0.19s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(3) { animation-delay: 0.26s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(4) { animation-delay: 0.33s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(5) { animation-delay: 0.40s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(6) { animation-delay: 0.47s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(7) { animation-delay: 0.54s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(8) { animation-delay: 0.61s; }
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar:nth-child(9) { animation-delay: 0.68s; }

/* The rating block (stars + text) and any separator rise in once the
   photos have finished landing. */
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-sep,
.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-meta {
	opacity: 0;
	transform: translateY(7px);
	animation: ph-avatar-meta 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
	animation-delay: 0.80s;
}

/* The divider draws in last, growing from the hero's text edge. */
.plumber-hero--ebavatar-anim .ph-eb--avatars + .plumber-hero__eyebrow-divider {
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	animation: ph-avatar-line 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
	animation-delay: 1.02s;
}
.plumber-hero--center.plumber-hero--ebavatar-anim .ph-eb--avatars + .plumber-hero__eyebrow-divider {
	transform-origin: center;
}
.plumber-hero--right.plumber-hero--ebavatar-anim .ph-eb--avatars + .plumber-hero__eyebrow-divider {
	transform-origin: right center;
}

@keyframes ph-avatar-stack {
	60%  { opacity: 1; }
	to   { opacity: 1; transform: none; }
}
@keyframes ph-avatar-meta {
	to { opacity: 1; transform: none; }
}
@keyframes ph-avatar-line {
	to { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-avatar,
	.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-sep,
	.plumber-hero--ebavatar-anim .ph-eb--avatars .plumber-hero__social-meta,
	.plumber-hero--ebavatar-anim .ph-eb--avatars + .plumber-hero__eyebrow-divider {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Mobile ----------------------------------------------------------- */
/*
 * On phones the hero is recomposed: content is anchored toward the lower
 * part of the screen so the photo breathes up top and the call-to-action
 * buttons land in the thumb zone. The top padding still clears Astra's
 * transparent header whenever the content grows tall.
 */
@media (max-width: 782px) {
	.plumber-hero {
		align-items: stretch;
	}
	.plumber-hero__inner {
		/*
		 * Flow from the top so the hero grows to fit every card. (Bottom-
		 * anchoring with margin-top:auto clips tall content on iOS Safari.)
		 * The top padding clears the transparent header; --ph-pt-m nudges the
		 * content up/down; --ph-pb-m sets the space below the content.
		 */
		padding: clamp(6.5rem, 18vw, 9.5rem) 1.5rem var(--ph-pb-m, 3rem);
		transform: translateY(var(--ph-pt-m, 0px));
	}
	/* Keep the code block moving in step with the content on mobile. */
	.plumber-hero__custom {
		transform: translateY(calc(var(--ph-custom-offset, 0px) + var(--ph-pt-m, 0px)));
	}
	/* The split layout stacks image-on-top, so keep it flowing from the top. */
	.plumber-hero__inner--split {
		margin-top: 0;
		margin-bottom: 0;
	}
	.plumber-hero__title {
		max-width: 100%;
		font-size: clamp(2rem, 7.6vw, 2.9rem);
		line-height: var(--ph-heading-lh, 1.06);
		margin-bottom: 1rem;
	}
	.plumber-hero__subtitle {
		max-width: 100%;
		font-size: clamp(1.0625rem, 4vw, 1.25rem);
		margin-bottom: 1.75rem;
	}
	.plumber-hero__eyebrow {
		margin-bottom: 0.85rem;
	}
	/* The scroll cue overlaps bottom-anchored content and adds clutter. */
	.plumber-hero__scroll {
		display: none;
	}
}

@media (max-width: 600px) {
	.plumber-hero__eyebrow {
		letter-spacing: var(--ph-eyebrow-ls, 0.14em);
	}
	.plumber-hero__eyebrow::before {
		width: 1.8rem;
	}
	.plumber-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.65rem;
		margin-bottom: 1.85rem;
	}
	.plumber-hero__btn {
		width: 100%;
		min-height: 3.25rem;
		padding: 0.8em 1.4em;
	}
	/* Tighter, crisper shadow so it never blooms onto a dark photo. */
	.plumber-hero__btn--primary {
		box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ph-pbtn-bg) 55%, transparent);
	}
	.plumber-hero__features {
		flex-direction: column;
		gap: 0.65rem;
		padding-top: var(--ph-feat-pt-m, 0px);
		padding-bottom: var(--ph-feat-pb-m, 0px);
	}
	.plumber-hero--center .plumber-hero__features,
	.plumber-hero--right .plumber-hero__features {
		align-items: center;
	}
}

@media (max-width: 380px) {
	.plumber-hero__inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.plumber-hero__title {
		line-height: 1.1;
	}
}

@media (max-height: 620px) {
	.plumber-hero__scroll {
		display: none;
	}
	.plumber-hero__inner {
		/* On short screens, flow from the top so tall content never tucks under the header. */
		margin-top: 0;
		padding-top: clamp(5.5rem, 14vw, 7rem);
		padding-bottom: 2rem;
	}
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.plumber-hero__eyebrow,
	.plumber-hero__title,
	.plumber-hero__subtitle,
	.plumber-hero__actions,
	.plumber-hero__features,
	.plumber-hero__features li,
	.plumber-hero__scroll span,
	.plumber-hero__btn {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ===================================================================== */
/* Background layers: slideshow (zoom & fade) and video                   */
/* ===================================================================== */
.plumber-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.plumber-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	will-change: opacity, transform;
	animation-name: plumber-hero-ken;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.plumber-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.plumber-hero__slide { animation: none !important; transform: none !important; opacity: 0; }
	.plumber-hero__slide:first-child { opacity: 1; }
	.plumber-hero__video { display: none; }
}

/* ===================================================================== */
/* Foreground image beside the text — balanced 50 / 50                    */
/* ===================================================================== */
.plumber-hero__inner--split {
	display: grid;
	grid-template-columns: 1fr minmax(0, var(--ph-media-width, 50%));
	gap: clamp(2rem, 4vw, 3.75rem);
	align-items: stretch;
}
.plumber-hero__inner--media-left.plumber-hero__inner--split {
	grid-template-columns: minmax(0, var(--ph-media-width, 50%)) 1fr;
}
.plumber-hero__content { min-width: 0; align-self: center; }
.plumber-hero__inner--media-left .plumber-hero__content { order: 2; }

/* Image fills its whole half, top to bottom, with modern asymmetric corners. */
.plumber-hero__media {
	position: relative;
	margin: 0;
	min-width: 0;
	align-self: stretch;
	min-height: clamp(360px, 56vh, 660px);
	border-radius: clamp(12px, 1.4vw, 16px) clamp(40px, 6vw, 96px) clamp(12px, 1.4vw, 16px) clamp(40px, 6vw, 96px);
}
.plumber-hero__inner--media-left .plumber-hero__media {
	border-radius: clamp(40px, 6vw, 96px) clamp(12px, 1.4vw, 16px) clamp(40px, 6vw, 96px) clamp(12px, 1.4vw, 16px);
}
.plumber-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	box-shadow: 0 30px 65px -32px rgba(8, 15, 30, .6);
}
/* Crisp light edge so the photo reads as an intentional panel. */
.plumber-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	pointer-events: none;
}

/* Image shape options (the default "designed" look is the asymmetric radius above) */
.plumber-hero--imgshape-rounded .plumber-hero__media,
.plumber-hero--imgshape-rounded .plumber-hero__inner--media-left .plumber-hero__media {
	border-radius: clamp(14px, 1.6vw, 22px);
}
.plumber-hero--imgshape-square .plumber-hero__media,
.plumber-hero--imgshape-square .plumber-hero__inner--media-left .plumber-hero__media {
	border-radius: 0;
}

/* "Show the whole image": box hugs the image, sized by the Image size control,
   top-aligned so it lines up with the text beside it. */
.plumber-hero--imgfit-contain .plumber-hero__inner--split {
	grid-template-columns: 1fr minmax(0, var(--ph-media-scale, 60%));
	align-items: start;
}
.plumber-hero--imgfit-contain .plumber-hero__inner--media-left.plumber-hero__inner--split {
	grid-template-columns: minmax(0, var(--ph-media-scale, 60%)) 1fr;
}
.plumber-hero--imgfit-contain .plumber-hero__content {
	align-self: start;
}
.plumber-hero--imgfit-contain .plumber-hero__media {
	align-self: start;
	min-height: 0;
	height: auto;
}
.plumber-hero--imgfit-contain .plumber-hero__media img {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	object-fit: contain;
	box-shadow: none;
}
.plumber-hero--imgfit-contain .plumber-hero__media::after {
	display: none;
}

/* Frames around the shown-in-full image */
.plumber-hero--imgfit-contain.plumber-hero--mframe-solid .plumber-hero__media img {
	border: var(--ph-mframe-width, 10px) solid var(--ph-mframe-color, #fff);
}
.plumber-hero--imgfit-contain.plumber-hero--mframe-inset .plumber-hero__media img {
	outline: 2px solid var(--ph-mframe-color, #fff);
	outline-offset: calc(-1 * (var(--ph-mframe-width, 10px) + 4px));
}
.plumber-hero--imgfit-contain.plumber-hero--mframe-matte .plumber-hero__media {
	background: var(--ph-mframe-color, #fff);
	padding: var(--ph-mframe-width, 10px);
}
.plumber-hero--imgfit-contain.plumber-hero--mframe-matte .plumber-hero__media img {
	border-radius: 6px;
}

/* Shadow sits behind the image / card */
.plumber-hero--imgfit-contain.plumber-hero--mshadow-soft .plumber-hero__media {
	box-shadow: 0 14px 32px -18px rgba(8, 15, 30, .5);
}
.plumber-hero--imgfit-contain.plumber-hero--mshadow-medium .plumber-hero__media {
	box-shadow: 0 24px 50px -22px rgba(8, 15, 30, .55);
}
.plumber-hero--imgfit-contain.plumber-hero--mshadow-strong .plumber-hero__media {
	box-shadow: 0 38px 72px -26px rgba(8, 15, 30, .62);
}
.plumber-hero--imgfit-contain.plumber-hero--mshadow-glow .plumber-hero__media {
	box-shadow: 0 26px 60px -22px var(--ph-mframe-glow, rgba(255, 255, 255, .55));
}

/* Subtle 3D bend that straightens on hover.
   Note: no transform-style: preserve-3d here. The media has no 3D-positioned
   children, so a flat composite looks identical and is far less likely to hit
   the browser bug that drops the image's colour profile (grey flicker). */
.plumber-hero--imgfit-contain.plumber-hero--mbend-left .plumber-hero__media,
.plumber-hero--imgfit-contain.plumber-hero--mbend-right .plumber-hero__media {
	transition: transform .5s ease;
}
.plumber-hero--imgfit-contain.plumber-hero--mbend-left .plumber-hero__media {
	transform: perspective(1500px) rotateY(7deg) rotateX(2deg);
}
.plumber-hero--imgfit-contain.plumber-hero--mbend-right .plumber-hero__media {
	transform: perspective(1500px) rotateY(-7deg) rotateX(2deg);
}
.plumber-hero--imgfit-contain.plumber-hero--mbend-left .plumber-hero__media:hover,
.plumber-hero--imgfit-contain.plumber-hero--mbend-right .plumber-hero__media:hover {
	transform: perspective(1500px) rotateY(0) rotateX(0);
}
/* Hover effect disabled: keep the tilt fixed in place. */
.plumber-hero--mbend-nohover.plumber-hero--mbend-left .plumber-hero__media,
.plumber-hero--mbend-nohover.plumber-hero--mbend-left .plumber-hero__media:hover {
	transform: perspective(1500px) rotateY(7deg) rotateX(2deg);
}
.plumber-hero--mbend-nohover.plumber-hero--mbend-right .plumber-hero__media,
.plumber-hero--mbend-nohover.plumber-hero--mbend-right .plumber-hero__media:hover {
	transform: perspective(1500px) rotateY(-7deg) rotateX(2deg);
}
.plumber-hero--mbend-nohover .plumber-hero__media { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.plumber-hero--imgfit-contain .plumber-hero__media { transition: none; }
}

/* Optional fixed image height: shorter, vertically centred (not full stretch). */
.plumber-hero--media-fixed .plumber-hero__media {
	align-self: center;
	min-height: 0;
	height: var(--ph-media-height, 60vh);
}

/* Trust points anchored to the bottom-right for a balanced layout. */
.plumber-hero--feat-br .plumber-hero__features { justify-content: flex-end; }
.plumber-hero--feat-br .plumber-hero__inner--split .plumber-hero__content {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
.plumber-hero--feat-br .plumber-hero__inner--split .plumber-hero__features {
	margin-top: auto;
	padding-top: clamp(1.5rem, 4vh, 3rem);
}

/* Trust points as a full-width bar along the bottom, under the image. */
.plumber-hero--feat-bar .plumber-hero__features {
	justify-content: center;
	gap: clamp(1rem, 4vw, 3rem);
	margin-top: clamp(1.75rem, 4vh, 3rem);
	padding-top: clamp(1.4rem, 3vh, 2.25rem);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

/* Centered glass badges along the bottom. */
.plumber-hero--feat-badges .plumber-hero__features {
	justify-content: center;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	margin-top: clamp(1.75rem, 4vh, 3rem);
}
.plumber-hero--feat-badges .plumber-hero__features li {
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(14px) saturate(125%);
	backdrop-filter: blur(14px) saturate(125%);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: 0.7em 1.3em;
	box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.plumber-hero--feat-badges .plumber-hero__features li { background: rgba(255, 255, 255, .14); }
}

/* Bottom bar and badges both span a full-width row beneath the two columns. */
.plumber-hero--feat-bar .plumber-hero__inner--split,
.plumber-hero--feat-badges .plumber-hero__inner--split {
	grid-template-areas: "content media" "feat feat";
}
.plumber-hero--feat-bar .plumber-hero__inner--media-left.plumber-hero__inner--split,
.plumber-hero--feat-badges .plumber-hero__inner--media-left.plumber-hero__inner--split {
	grid-template-areas: "media content" "feat feat";
}
.plumber-hero--feat-bar .plumber-hero__inner--split .plumber-hero__content,
.plumber-hero--feat-badges .plumber-hero__inner--split .plumber-hero__content { grid-area: content; }
.plumber-hero--feat-bar .plumber-hero__inner--split .plumber-hero__media,
.plumber-hero--feat-badges .plumber-hero__inner--split .plumber-hero__media { grid-area: media; }
.plumber-hero--feat-bar .plumber-hero__inner--split .plumber-hero__features,
.plumber-hero--feat-badges .plumber-hero__inner--split .plumber-hero__features { grid-area: feat; }

/* Disable the primary button glow. */
.plumber-hero--pbtn-flat .plumber-hero__btn--primary,
.plumber-hero--pbtn-flat .plumber-hero__btn--primary:hover,
.plumber-hero--pbtn-flat .plumber-hero__btn--primary:focus-visible {
	box-shadow: none;
}

/* Custom trust-point icon (your own image instead of the check). */
.plumber-hero__check--img {
	background: none;
	width: auto;
	height: auto;
}
.plumber-hero__check--img img {
	display: block;
	width: var(--ph-feat-isize, 1.4em);
	height: var(--ph-feat-isize, 1.4em);
	object-fit: contain;
}
/* Font Awesome trust-point icon. */
.plumber-hero__check--fa {
	background: none;
	width: auto;
	height: auto;
	color: var(--ph-feat-icon-color, var(--ph-check-bg));
	font-size: var(--ph-feat-isize, 1.15em);
}
.plumber-hero__check--fa i { display: block; line-height: 1; }

/* Round background disc behind Font Awesome / image icons (opt-in). The
   default tick already sits on its own disc. */
.plumber-hero--feat-iconbg .plumber-hero__check--fa,
.plumber-hero--feat-iconbg .plumber-hero__check--img {
	width: calc(var(--ph-feat-isize, 1.4rem) * 1.9);
	height: calc(var(--ph-feat-isize, 1.4rem) * 1.9);
	border-radius: 50%;
	background: var(--ph-feat-icon-bg-color, var(--ph-check-bg));
}
.plumber-hero--feat-iconbg .plumber-hero__check--img img {
	width: var(--ph-feat-isize, 1.4rem);
	height: var(--ph-feat-isize, 1.4rem);
}

/* --- Trust-point designs (per-item chrome) --------------------------- */
/* Pill: each point sits in a soft translucent capsule. */
.plumber-hero--feat-design-pill .plumber-hero__features li {
	padding: 0.4em 0.95em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* Card: bordered panel with a faint fill. */
.plumber-hero--feat-design-card .plumber-hero__features li {
	padding: 0.6em 0.9em;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Outline: thin outline, no fill. */
.plumber-hero--feat-design-outline .plumber-hero__features li {
	padding: 0.45em 0.9em;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.32);
}
/* Stacked: icon centred above the label. */
.plumber-hero--feat-design-stacked .plumber-hero__features li {
	flex-direction: column;
	text-align: center;
	gap: 0.45rem;
}

/* Title + optional description stacked together. */
.plumber-hero__feature-body {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	min-width: 0;
}
.plumber-hero__feature-desc {
	font-weight: 400;
	font-size: 0.86em;
	line-height: 1.35;
	opacity: 0.85;
	letter-spacing: 0;
}

/* Coloured cards: solid colour blocks with a title and a short description.
   Everything scales from a single --ph-cc-scale so small/medium/large (and the
   tighter mobile sizes) shrink padding, icon and text together. */
.plumber-hero--feat-design-colorcard .plumber-hero__features {
	gap: calc(1rem * var(--ph-cc-scale, 1));
	align-items: stretch;
	justify-content: flex-start;
}
.plumber-hero--feat-design-colorcard .plumber-hero__features li {
	flex: 1 1 220px;
	align-items: center;
	gap: calc(0.9rem * var(--ph-cc-scale, 1));
	padding: calc(1.1rem * var(--ph-cc-scale, 1)) calc(1.25rem * var(--ph-cc-scale, 1));
	border-radius: calc(16px * var(--ph-cc-scale, 1));
	background: var(--ph-feat-card-bg, #2b6cb0);
	color: #fff;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.plumber-hero--feat-design-colorcard .plumber-hero__feature-body {
	align-items: flex-start;
	text-align: left;
}
.plumber-hero--feat-design-colorcard .plumber-hero__feature-text {
	font-size: calc(1.0625rem * var(--ph-cc-scale, 1));
	font-weight: 700;
	line-height: 1.25;
}
.plumber-hero--feat-design-colorcard .plumber-hero__feature-desc {
	font-size: calc(0.9375rem * var(--ph-cc-scale, 1));
	line-height: 1.35;
	opacity: 0.9;
}
/* Icons on coloured cards: white glyph, no disc, scaled with the card. */
.plumber-hero--feat-design-colorcard .plumber-hero__check {
	background: none;
	width: auto;
	height: auto;
	color: var(--ph-feat-icon-color, #fff);
	flex: 0 0 auto;
}
.plumber-hero--feat-design-colorcard .plumber-hero__check--fa {
	font-size: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1));
	color: var(--ph-feat-icon-color, #fff);
}
.plumber-hero--feat-design-colorcard .plumber-hero__check svg {
	width: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1));
	height: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1));
	stroke: var(--ph-feat-icon-color, #fff);
}
.plumber-hero--feat-design-colorcard .plumber-hero__check--img img {
	width: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1));
	height: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1));
}
/* A round disc still works on cards if it is switched on. */
.plumber-hero--feat-design-colorcard.plumber-hero--feat-iconbg .plumber-hero__check--fa,
.plumber-hero--feat-design-colorcard.plumber-hero--feat-iconbg .plumber-hero__check--img {
	width: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1) * 1.7);
	height: calc(var(--ph-feat-isize, 1.9rem) * var(--ph-cc-scale, 1) * 1.7);
	background: var(--ph-feat-icon-bg-color, rgba(255, 255, 255, 0.18));
}

/* Coloured card size presets. */
.plumber-hero--feat-cardsize-small { --ph-cc-scale: 0.8; }
.plumber-hero--feat-cardsize-medium { --ph-cc-scale: 1; }
.plumber-hero--feat-cardsize-large { --ph-cc-scale: 1.18; }

/* In the mobile column each card must hug its own content. The desktop row
   uses flex-grow to share width; in a column that same grow would stretch the
   cards to fill the whole hero height, so switch it off here. */
@media (max-width: 782px) {
	.plumber-hero--feat-design-colorcard .plumber-hero__features {
		align-items: stretch;
	}
	.plumber-hero--feat-design-colorcard .plumber-hero__features li {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Lighten the card shadow on small screens; keep the size at the chosen scale
   so the text and icons stay readable. */
@media (max-width: 600px) {
	.plumber-hero--feat-design-colorcard .plumber-hero__features li {
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
	}
}

/* Cross-fading side images. */
.plumber-hero__media--slides { overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }.plumber-hero__slideimg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	opacity: 0;
	will-change: opacity;
	animation-name: plumber-hero-xfade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* Masked side video: poster paints first, spinner until ready, then video. */
.plumber-hero__media--video { overflow: hidden; background: rgba(8, 15, 30, .35); }
.plumber-hero__media-poster,
.plumber-hero__media-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.plumber-hero__media-poster { z-index: 1; transition: opacity 0.5s ease; }
.plumber-hero__media-video { z-index: 2; opacity: 0; transition: opacity 0.6s ease; }
.plumber-hero__media--video.is-ready .plumber-hero__media-video { opacity: 1; }
.plumber-hero__media--video.is-ready .plumber-hero__media-poster { opacity: 0; }
.plumber-hero__media--video.is-static .plumber-hero__media-video { display: none; }

/* The loading spinner is just a spinning ring. */
.plumber-hero__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	z-index: 3;
	animation: plumber-hero-spin 0.8s linear infinite;
	transition: opacity 0.3s ease;
}
@keyframes plumber-hero-spin { to { transform: rotate(360deg); } }
.plumber-hero__media--video.is-ready .plumber-hero__spinner,
.plumber-hero__media--video.is-static .plumber-hero__spinner { opacity: 0; visibility: hidden; }

/* Optional tint over the side media (image, slides or video). */
.plumber-hero__media-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	pointer-events: none;
}

/* --- Talking video controls (audio mode) ----------------------------- */
.plumber-hero__media--talking { cursor: pointer; }
.plumber-hero__media-play,
.plumber-hero__media-mute {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
/* The frosted disc sits behind the icon so the blur reads as glass. */
.plumber-hero__media-glass {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}
.plumber-hero__media-play svg,
.plumber-hero__media-mute svg {
	position: relative;
	fill: currentColor;
	filter: drop-shadow( 0 2px 6px rgba(0, 0, 0, 0.35) );
}

/* Big round play / pause button, centred, with a larger icon. */
.plumber-hero__media-play {
	top: 50%;
	left: 50%;
	width: 6.25rem;
	height: 6.25rem;
	margin: -3.125rem 0 0 -3.125rem;
}
.plumber-hero__media-play:hover,
.plumber-hero__media-play:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.7);
	transform: scale(1.06);
}
.plumber-hero__media-play svg { width: 3rem; height: 3rem; }
.plumber-hero__media-play .ph-ico-play { margin-left: 4px; }
.plumber-hero__media-play .ph-ico-pause { display: none; }

/* Small round mute / sound button, bottom-right. */
.plumber-hero__media-mute {
	right: 1rem;
	bottom: 1rem;
	width: 3rem;
	height: 3rem;
}
.plumber-hero__media-mute:hover,
.plumber-hero__media-mute:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.7);
	transform: scale(1.06);
}
.plumber-hero__media-mute svg { width: 1.5rem; height: 1.5rem; }

.plumber-hero__media-play:focus-visible,
.plumber-hero__media-mute:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@supports not ( ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) ) {
	.plumber-hero__media-play,
	.plumber-hero__media-mute { background: rgba(16, 22, 38, 0.6); }
}

/* Reveal once the video is visible (or, with reduced motion, on the poster). */
.plumber-hero__media--talking.is-ready .plumber-hero__media-play,
.plumber-hero__media--talking.is-static .plumber-hero__media-play {
	opacity: 1;
	pointer-events: auto;
}
/* While playing with sound the big control eases out, returning on hover. */
.plumber-hero__media--talking.is-sound .plumber-hero__media-play { opacity: 0; }
.plumber-hero__media--talking.is-sound:hover .plumber-hero__media-play,
.plumber-hero__media--talking.is-sound:focus-within .plumber-hero__media-play {
	opacity: 1;
	pointer-events: auto;
}
/* Play / pause icon swap. */
.plumber-hero__media--talking.is-sound .plumber-hero__media-play .ph-ico-play { display: none; }
.plumber-hero__media--talking.is-sound .plumber-hero__media-play .ph-ico-pause { display: block; }

/* The mute icon only shows during the silent background preview. */
.plumber-hero__media--talking.is-bg.is-ready .plumber-hero__media-mute,
.plumber-hero__media--talking.is-bg.is-static .plumber-hero__media-mute {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.plumber-hero__spinner { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.plumber-hero__slideimg { animation: none !important; opacity: 0; }
	.plumber-hero__slideimg:first-child { opacity: 1; }
}

@media (max-width: 900px) {
	.plumber-hero__inner--split { grid-template-columns: 1fr; gap: 2.25rem; }
	/* Image sits on top of the text on mobile. */
	.plumber-hero__inner--split .plumber-hero__media { order: -1; }
	.plumber-hero__inner--split .plumber-hero__content { order: 0; }
	.plumber-hero__media {
		max-width: 560px;
		width: 100%;
		margin: 0 auto;
		align-self: start;   /* height stays auto so the aspect-ratio is honoured */
		justify-self: center;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.plumber-hero--media-fixed .plumber-hero__media { height: auto; }
	/* "Show the whole image": let the box hug the photo instead of the 4:3 slot. */
	.plumber-hero--imgfit-contain .plumber-hero__media {
		aspect-ratio: auto;
		min-height: 0;
		height: auto;
	}
	.plumber-hero--feat-br .plumber-hero__features { justify-content: flex-start; }
	.plumber-hero--feat-br .plumber-hero__inner--split .plumber-hero__features { margin-top: 0; padding-top: 0; }
	.plumber-hero--feat-bar .plumber-hero__inner--split,
	.plumber-hero--feat-bar .plumber-hero__inner--media-left.plumber-hero__inner--split,
	.plumber-hero--feat-badges .plumber-hero__inner--split,
	.plumber-hero--feat-badges .plumber-hero__inner--media-left.plumber-hero__inner--split {
		grid-template-areas: "media" "content" "feat";
		grid-template-columns: 1fr;
	}
	.plumber-hero--feat-bar .plumber-hero__features { justify-content: flex-start; flex-wrap: wrap; }
	.plumber-hero--feat-badges .plumber-hero__features { justify-content: center; }
}

/* --------------------------------------------------------------------- *
 * Page-load progress ring (fixed, bottom-right). Fills as the page's
 * assets load, then fades out. A pure-CSS fallback fills and hides it even
 * if the script never runs; hero.js adds .is-js to take over with the real
 * load progress.
 * --------------------------------------------------------------------- */
.plumber-hero__preloader {
	position: absolute;          /* anchored to the hero, not the viewport */
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	width: var(--ph-pl-size, 56px);
	height: var(--ph-pl-size, 56px);
	z-index: 99999;
	pointer-events: none;
	opacity: 0;                  /* hidden until the load proves slow enough to need it */
	transition: opacity .4s ease, transform .5s ease;
	animation: ph-preloader-blip 4.5s ease forwards; /* no-JS fallback: show, then hide */
}
.plumber-hero__preloader.is-js { animation: none; }          /* JS owns the lifecycle */
.plumber-hero__preloader.is-js.is-visible { opacity: 1; }    /* JS reveals only on a slow load */
.plumber-hero__preloader.is-done { opacity: 0; transform: scale(.85); }

.plumber-hero__preloader-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);  /* begin the fill at 12 o'clock */
	overflow: visible;
	filter: drop-shadow(0 2px 6px rgba(8, 15, 30, .22));
}
.plumber-hero__preloader-track,
.plumber-hero__preloader-fill {
	fill: none;
	stroke-width: 8;
	stroke-linecap: round;
}
.plumber-hero__preloader-track { stroke: var(--ph-pl-track, #dfe4ea); }
.plumber-hero__preloader-fill {
	stroke: var(--ph-pl-color, #e07a3f);
	stroke-dasharray: 283;       /* ~ 2 * pi * 45 */
	stroke-dashoffset: 283;      /* start empty */
	transition: stroke-dashoffset .35s ease;
	animation: ph-preloader-fill 2.8s ease forwards; /* no-JS fallback */
}
.plumber-hero__preloader.is-js .plumber-hero__preloader-fill { animation: none; }

@keyframes ph-preloader-fill {
	from { stroke-dashoffset: 283; }
	to   { stroke-dashoffset: 0; }
}
@keyframes ph-preloader-blip {
	0%, 7%  { opacity: 0; }
	14%     { opacity: 1; }
	82%     { opacity: 1; }
	100%    { opacity: 0; transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
	.plumber-hero__preloader,
	.plumber-hero__preloader-fill { transition: none; }
}

/* Review avatars eyebrow style: overlapping reviewer photos + count pill,
   stars and a rating line. Reuses the eyebrow colour/size/font vars. */
.ph-eb--avatars {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
}
.plumber-hero__social-avatars {
	display: flex;
	align-items: center;
}
.plumber-hero__social-avatar {
	width: var(--phs-size, 44px);
	height: var(--phs-size, 44px);
	border-radius: 50%;
	flex: 0 0 auto;
	background-color: rgba(255, 255, 255, 0.15);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 var(--phs-border-w, 3px) var(--phs-border, #fff), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.plumber-hero__social-avatar + .plumber-hero__social-avatar {
	margin-left: calc(var(--phs-overlap, 14px) * -1);
}
.plumber-hero__social-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--phs-pill-bg, #f5a623);
	color: var(--phs-pill-color, #16293a);
	font-weight: 800;
	font-size: calc(var(--phs-size, 44px) * 0.3);
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: none;
	padding: 0 2px;
}
.plumber-hero__social-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	line-height: 1.1;
}
.plumber-hero--center .ph-eb--avatars .plumber-hero__social-meta {
	align-items: center;
}
.plumber-hero--right .ph-eb--avatars .plumber-hero__social-meta {
	align-items: flex-end;
}
.ph-eb--avatars .plumber-hero__social-text {
	display: inline-block;
	color: var(--ph-eyebrow-color);
	font-size: var(--ph-eyebrow-size, 15px);
	line-height: 1.15;
	text-transform: none;
	letter-spacing: normal;
}

.plumber-hero__social-sep {
	flex: 0 0 auto;
	align-self: center;
	background: var(--phs-sep, rgba(255, 255, 255, 0.35));
}
.ph-sep--short {
	width: 2px;
	height: calc(var(--phs-size, 44px) * 0.6);
	border-radius: 2px;
}
.ph-sep--long {
	width: 2px;
	align-self: stretch;
	border-radius: 2px;
}
.ph-sep--dotted {
	width: 0;
	height: calc(var(--phs-size, 44px) * 0.72);
	background: none;
	border-left: 2px dotted var(--phs-sep, rgba(255, 255, 255, 0.45));
}
.ph-sep--dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

/* Review avatars: equal, slightly roomier spacing above and below the
   divider, so the review block sits clearly apart from the headline. */
.plumber-hero__eyebrow.ph-eb--avatars.ph-eb--has-divider {
	margin-bottom: 1.3rem;
}
.ph-eb--avatars + .plumber-hero__eyebrow-divider {
	margin-top: 0;
	margin-bottom: 1.3rem;
}

/* Review avatars eyebrow on phones: scale the photos down proportionally
   (respecting the configured size) so the stack and rating sit comfortably,
   then stack vertically on very narrow screens so neither line runs off the
   edge or wraps with an orphaned separator. */
@media (max-width: 600px) {
	.ph-eb--avatars {
		gap: 12px;
	}
	.ph-eb--avatars .plumber-hero__social-avatar {
		width: calc(var(--phs-size, 44px) * 0.84);
		height: calc(var(--phs-size, 44px) * 0.84);
	}
	.ph-eb--avatars .plumber-hero__social-avatar + .plumber-hero__social-avatar {
		margin-left: calc(var(--phs-overlap, 14px) * -0.84);
	}
	.ph-eb--avatars .plumber-hero__social-pill {
		font-size: calc(var(--phs-size, 44px) * 0.25);
	}
	.ph-eb--avatars .plumber-hero__social-text {
		font-size: calc(var(--ph-eyebrow-size, 15px) - 1px);
	}
}

@media (max-width: 420px) {
	/* Stack the avatar row above the rating, following the hero's alignment. */
	.ph-eb--avatars {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.plumber-hero--center .ph-eb--avatars { align-items: center; }
	.plumber-hero--right .ph-eb--avatars { align-items: flex-end; }
	/* A vertical divider no longer reads correctly once the row stacks. */
	.ph-eb--avatars .ph-sep--short,
	.ph-eb--avatars .ph-sep--long,
	.ph-eb--avatars .ph-sep--dotted {
		display: none;
	}
	.ph-eb--avatars .ph-sep--dot {
		align-self: center;
	}
}