/**
 * 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;
}

/* 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;
	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: 1.5px solid 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-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: 1.5px solid 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-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);
}

/* --- Trust points ----------------------------------------------------- */
.plumber-hero__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 0;
	padding: 0;
	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;
	color: var(--ph-feature-color);
}

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

.plumber-hero__check svg {
	display: block;
	width: 0.82rem;
	height: 0.82rem;
	fill: none;
	stroke: 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;
}

/* Bottom-left editorial: text anchored to the lower-left. */
.plumber-hero--bottom {
	align-items: flex-end;
}
.plumber-hero--bottom .plumber-hero__inner {
	padding-top: clamp(8rem, 22vh, 16rem);
	padding-bottom: clamp(2.5rem, 7vh, 5rem);
}

/* Glass card: the text sits in a frosted, rounded panel. */
.plumber-hero--card .plumber-hero__inner {
	max-width: min(640px, 100%);
	margin-left: clamp(1rem, 6vw, 5rem);
	margin-right: auto;
	padding: clamp(2.25rem, 4vw, 3.25rem);
	background: color-mix(in srgb, var(--ph-overlay-color) 52%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(115%);
	backdrop-filter: blur(16px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 24px;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65);
}
@supports not (background: color-mix(in srgb, red, blue)) {
	.plumber-hero--card .plumber-hero__inner { background: rgba(8, 15, 30, .55); }
}

/* Split panel: a tinted full-height column holds the text; the image shows
   on the other side. The global overlay is replaced by the panel tint. */
.plumber-hero--panel {
	align-items: stretch;
}
.plumber-hero--panel .plumber-hero__overlay { display: none; }
.plumber-hero--panel .plumber-hero__inner {
	max-width: none;
	width: clamp(340px, 46%, 760px);
	margin: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 7vh, 7rem) clamp(2rem, 4vw, 4.5rem);
	background: var(--ph-panel-bg, color-mix(in srgb, var(--ph-overlay-color) 92%, transparent));
}
@supports not (background: color-mix(in srgb, red, blue)) {
	.plumber-hero--panel .plumber-hero__inner { background: var(--ph-overlay-color); }
}
@media (max-width: 768px) {
	.plumber-hero--panel { align-items: center; }
	.plumber-hero--panel .plumber-hero__inner { width: 100%; }
}

/* --- 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); }
}

/* --- 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 {
		/*
		 * Anchor the content toward the lower part of the screen (thumb zone)
		 * so it drops well clear of the transparent header. margin-top:auto
		 * pushes it down; the top padding still guarantees a gap below the
		 * header whenever the content grows tall enough to reach the top.
		 * --ph-pt-m nudges the content up (negative) or down (positive).
		 */
		margin-top: auto;
		margin-bottom: 0;
		padding: clamp(6.5rem, 18vw, 9.5rem) 1.5rem clamp(2.75rem, 8vh, 4rem);
		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;
	}
	.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 */
.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;
	transform-style: preserve-3d;
}
.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: 1.4em;
	height: 1.4em;
	object-fit: contain;
}
/* Font Awesome trust-point icon. */
.plumber-hero__check--fa {
	background: none;
	width: auto;
	height: auto;
	color: var(--ph-check-bg);
	font-size: 1.15em;
}
.plumber-hero__check--fa i { display: block; line-height: 1; }

/* 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; }
}