/**
 * Homepage Concept C (W8, approved direction; Figma 970:50488 / 973:46100 / 973:46763 / 973:47419).
 *
 * Applies only inside the homepage group "hydro-home hydro-home--c" (patterns/page-home-c.php), after
 * home.css, so the W3 homepage and every other page are unchanged. Derived from the owner-reviewed
 * local preview (tests/browser/home-v2-preview/home-v2.css, Concepts B + C) with the parts the owner
 * removed or that are not authorised left out: no editorial list (Concept A), no Areas we serve, no
 * before / after tiles (photo pairs unconfirmed: "Our work" shows single project photos). The Why
 * choose section is WHY-CHOOSE-03 (bento cards, no photos), styled at the end of this file.
 *
 * Brand kept: navy / cobalt / cyan / light-blue bands, Poppins, 2 px buttons, 4 px card corners, the
 * approved tokens (base.css). Motion respects prefers-reduced-motion.
 */

/* ================================================================== shared tokens and rhythm */
.hydro-home--c {
	--hc-section: clamp(4.5rem, 8vw, 7.5rem);
	--hc-section-tight: clamp(4rem, 7vw, 6rem);
	--hc-h2: clamp(2rem, 1.45rem + 1.9vw, 3.125rem);
	--hc-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
	--hc-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	--hc-measure: 36rem;
	--hc-card-shadow: 0 1px 2px rgb(6 26 64 / 0.1), 0 24px 40px -24px rgb(6 26 64 / 0.5);
	--hc-ring: 3px solid var(--ocean);
}

.hydro-home--c :is(.svcs, .pwork, .reviews, .faq, .estimate) {
	padding-block: var(--hc-section);
}

.hydro-home--c :is(.sister, .process) {
	padding-block: var(--hc-section-tight);
}

.hydro-home--c :is(.svcs, .pwork, .reviews, .faq, .process, .estimate) h2 {
	font-size: var(--hc-h2);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

/* Lighter divider between the white and light-blue bands: a hairline instead of a hard edge. */

.hydro-home--c :is(.sister, .pwork) {
	box-shadow: inset 0 1px 0 var(--line);
}

/* Section intros read at one measure and one weight. */

.hydro-home--c :is(.svcs__head p, .faq__head p) {
	max-width: var(--hc-measure);
	font-size: var(--hc-lead);
	line-height: 1.65;
	color: var(--muted);
}

/* Arrow links: one weight, underline only on hover, a steadier baseline. */

.hydro-home--c .is-style-arrow-link a {
	gap: 0.55rem;
	font-weight: 600;
	text-decoration: none;
}

.hydro-home--c .is-style-arrow-link a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Buttons: a touch taller, 600 weight, the 2 px corners of the brand. */

.hydro-home--c .wp-block-button__link {
	min-height: 3.25rem;
	padding: 0.85rem 1.6rem;
	font-weight: 600;
	letter-spacing: 0;
}

.hydro-home--c .wp-block-button.btn--lg .wp-block-button__link {
	min-height: 3.5rem;
	padding: 0.95rem 1.9rem;
	font-size: 1.0625rem;
}

/* Focus: the cobalt ring everywhere on light surfaces; white on navy (the W3 rule, widened). */

.hydro-home--c :is(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--hc-ring);
	outline-offset: 3px;
}

.hydro-home--c :is(.hero__copy, .process, .estimate__copy) :focus-visible {
	outline-color: #fff;
}

/* ================================================================== 1. hero */
.hydro-home--c .wp-block-cover.hero {
	align-items: center;
	min-height: clamp(36rem, 84vh, 47rem);
	padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}

.hydro-home--c .wp-block-cover.hero .wp-block-cover__image-background {
	object-position: 72% 55%;
}

/* The scrim: deep navy behind the copy, a light top band under the header and a gentle foot. CP-01
   (2026-10-30): the shading stays as dark as before behind the text column (CP-01's white shirt sits
   there: headline >= 3:1, other text >= 4.5:1, measured on the photo) and falls off faster beyond it,
   so the cleaning scene reads beside the card. */

.hydro-home--c .wp-block-cover.hero .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background:
	linear-gradient(180deg, rgb(var(--shade-rgb) / 0.5) 0, rgb(var(--shade-rgb) / 0) 10rem),
	linear-gradient(0deg, rgb(var(--shade-rgb) / 0.42) 0, rgb(var(--shade-rgb) / 0) 11rem),
	linear-gradient(90deg, rgb(var(--shade-rgb) / 0.95) 0%, rgb(var(--shade-rgb) / 0.88) 28%, rgb(var(--shade-rgb) / 0.6) min(52%, 46rem), rgb(var(--shade-rgb) / 0.14) min(66%, 58rem), rgb(var(--shade-rgb) / 0.08) 100%);
}

.hydro-home--c .hero__in {
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(3rem, 6vw, 6.5rem);
	align-items: center;
}

.hydro-home--c .hero__kicker {
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	font: 600 0.8125rem/1.4 var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-dark);
}

.hydro-home--c .hero__kicker::before {
	width: 2.25rem;
}

.hydro-home--c .hero .hero__title {
	max-width: 16ch;
	font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.4rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.hydro-home--c .hero__lead {
	max-width: 30rem;
	margin-top: 1.5rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.6;
	color: var(--on-dark);
}

.hydro-home--c .hero__actions {
	gap: 0.75rem 1.5rem;
	margin-top: 2.25rem;
}

.hydro-home--c .hero__phone {
	gap: 0.4rem;
	padding-top: 0;
	font-size: 1rem;
	color: var(--on-dark-muted);
}

.hydro-home--c .hero__phone a {
	font-size: 1.0625rem;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.hydro-home--c .hero__phone a:hover {
	text-decoration-color: #fff;
}

/* Trust badge: the same Google rating as a quiet strip that belongs to the copy column. */

.hydro-home--c .hero__copy > .gbadge,
.hydro-home--c .hero__copy > p:has(> .gbadge) {
	margin-top: 2.5rem;
}

.hydro-home--c .hydro-greviews.gbadge {
	gap: 0.85rem;
	padding: 0.55rem 1rem 0.55rem 0.65rem;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 1px 2px rgb(6 26 64 / 0.2);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hydro-home--c .hydro-greviews.gbadge:hover {
	box-shadow: 0 6px 18px -8px rgb(6 26 64 / 0.6);
}

.hydro-home--c .gbadge .hydro-greviews__logo {
	width: 5.5rem;
}

.hydro-home--c .gbadge .hydro-greviews__rating {
	font-size: 1.5rem;
	font-weight: 600;
}

.hydro-home--c .gbadge .hydro-greviews__stars {
	font-size: 0.8125rem;
}

.hydro-home--c .gbadge .hydro-greviews__meta {
	font-size: 0.8125rem;
	font-weight: 500;
}

/* Quick estimate card: a cyan rule on top (the estimate card below has the same), a crisper, lighter
   lift than the original 70 px blur, and even inner spacing. */

.hydro-home--c .quick {
	padding: clamp(1.5rem, 2.4vw, 2rem);
	border-top: 4px solid var(--teal);
	border-radius: var(--radius-lg);
	box-shadow: var(--hc-card-shadow);
}

.hydro-home--c .quick .quick__title {
	font-size: 1.4375rem;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.hydro-home--c .quick__sub {
	margin: 0.5rem 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.hydro-home--c .quick__group {
	margin-bottom: 1.125rem;
}

.hydro-home--c .quick__group legend,
.hydro-home--c .quick__label {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

.hydro-home--c .quick__seg {
	gap: 0;
	padding: 0.25rem;
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.hydro-home--c .quick__seg label + label {
	border-left: 0;
}

.hydro-home--c .quick__seg span {
	min-height: 2.75rem;
	border-radius: 2px;
	font-weight: 600;
	color: var(--ink);
}

.hydro-home--c .quick__seg input:checked + span {
	background: var(--navy);
	color: #fff;
}

.hydro-home--c .quick__seg input:focus-visible + span {
	outline: var(--hc-ring);
	outline-offset: 1px;
}

.hydro-home--c .quick__input {
	min-height: 3.125rem;
	margin-bottom: 1.125rem;
	padding: 0.7rem 0.9rem;
	border-radius: 2px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hydro-home--c .quick__input:focus {
	border-color: var(--ocean);
	box-shadow: 0 0 0 1px var(--ocean);
	outline: none;
}

.hydro-home--c .quick__submit {
	min-height: 3.25rem;
	margin-top: 0.25rem;
	border-radius: 2px;
	font-weight: 600;
}

/* ================================================================== 3. services: section head */
.hydro-home--c .svcs__head {
	gap: 1rem clamp(2.5rem, 7vw, 7rem);
}

.hydro-home--c .svcs__body {
	gap: clamp(2.5rem, 6vw, 6rem);
	margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
}

.hydro-home--c .svcs__list {
	border-bottom: 1px solid var(--line-cool);
}

/* ================================================================== 4. services: photo cards */
.hydro-home--c .svcs__body {
	display: block;
}

.hydro-home--c .svcs__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem clamp(1.25rem, 2.2vw, 2rem);
	border-bottom: 0;
}

.hydro-home--c .svc {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	border-top: 0;
}

.hydro-home--c .svc::before {
	display: none;
}

.hydro-home--c .svc__media {
	position: relative;
	margin: 0 0 0.5rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background: var(--paper-2);
}

.hydro-home--c .svc__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	transition: transform 0.7s var(--ease);
}

.hydro-home--c .svc__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}

.hydro-home--c .svc__text {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.hydro-home--c .svc__text h3 {
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	transition: color 0.2s ease;
	transform: none;
}

.hydro-home--c .svc__text p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.hydro-home--c .svc__link {
	margin-top: auto;
}

/* Inline, so a label that wraps keeps its arrow on the last word instead of at the card's edge. */

.hydro-home--c .svc__link a {
	display: inline;
	min-height: 0;
	padding: 0.5rem 0 0.25rem;
	font: 600 0.9375rem/1.6 var(--sans);
}

.hydro-home--c .svc__link a::after {
	display: inline-block;
	margin-left: 0.4rem;
	vertical-align: -0.2em;
}

@media (hover: hover) {
	.hydro-home--c .svc:hover .svc__media img,
	.hydro-home--c .svc:focus-within .svc__media img {
		transform: scale(1.04);
	}

	.hydro-home--c .svc:hover .svc__media::after,
	.hydro-home--c .svc:focus-within .svc__media::after {
		transform: scaleX(1);
	}

	.hydro-home--c .svc:hover .svc__text h3,
	.hydro-home--c .svc:focus-within .svc__text h3 {
		color: var(--ocean-ink);
	}

	.hydro-home--c .svc:hover .svc__link a::after {
		transform: translateX(4px);
	}
}

/* ================================================================== 5. sister company */
.hydro-home--c .sister__in {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
}

.hydro-home--c .sister__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.hydro-home--c .sister .is-style-kicker {
	font: 600 0.8125rem/1.4 var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ocean-ink);
}


.hydro-home--c .sister .sister__title {
	margin-top: 1.125rem;
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.hydro-home--c .sister__text {
	max-width: 28rem;
	margin-top: 1.125rem;
	font-size: var(--hc-lead);
	line-height: 1.65;
}

.hydro-home--c .sister .wp-block-buttons {
	margin-top: 1.75rem;
}

/* ================================================================== 6. how it works */
.hydro-home--c .process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Optional kicker (Services Overview, city pages: "Our approach"; the homepage has none): cyan,
   uppercase, no rule line (HYDRO / How It Works / Shared, Show kicker). Cyan on navy 5.0:1. */
.hydro-home--c .process__kicker {
	margin: 0 0 0.5rem;
	font: 600 0.8125rem / 1.25rem var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal);
}

.hydro-home--c .process__head > h2 {
	margin-top: 0;
}

.hydro-home--c .process__steps {
	gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 4.25rem;
}

.hydro-home--c .process__steps::before {
	opacity: 0.55;
}

.hydro-home--c .process__n {
	top: -4.25rem;
	width: 2.75rem;
	height: 2.75rem;
	border-color: var(--teal);
	background: var(--navy);
	font: 600 0.9375rem/1 var(--sans);
	color: var(--teal);
	box-shadow: 0 0 0 6px var(--navy);
}

.hydro-home--c .process__step {
	padding-right: 1rem;
}

.hydro-home--c .process__steps h3 {
	font-size: var(--hc-h3);
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hydro-home--c .process__steps p:not(.process__n) {
	margin-top: 0.6rem;
	max-width: 18rem;
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* ================================================================== 7. our work (project photos)
 * Figma 971:46294 (R1.3 1118:67081): kicker, heading and lead in a row, three by two tiles (4:3, caption
 * row with the market on the right) and a link to Our Work. Four tiles are before / after comparisons of
 * owner-confirmed pairs (.pwork__cmp, the shared .cmp--tile in service-v3.css); two are photos. */
.hydro-home--c .pwork {
	background: var(--paper);
}

.hydro-home--c .pwork__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.hydro-home--c .pwork__kicker {
	margin: 0;
	font: 600 0.8125rem/1.4 var(--sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ocean-ink);
}

.hydro-home--c .pwork__kicker + h2 {
	margin-top: 1rem;
}

.hydro-home--c .pwork__lead {
	max-width: 28rem;
	margin: 0;
	font-size: var(--hc-lead);
	line-height: 1.65;
	color: var(--muted);
}

.hydro-home--c .pwork__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 2rem;
	margin-top: 3.5rem;
}

.hydro-home--c .pwork__tile {
	margin: 0;
}

.hydro-home--c .pwork__tile img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	border-radius: var(--radius-lg);
	background: var(--paper-2);
}

.hydro-home--c .pwork__tile.is-pos-50-40 {
	--pos: 50% 40%;
}

.hydro-home--c .pwork__tile .wp-element-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	margin: 0.75rem 0 0;
	text-align: left;
}

.hydro-home--c .pwork__cap {
	flex: 1 1 0;
	min-width: 0;
	font: 500 0.9375rem/1.5 var(--sans);
	color: var(--ink);
}

.hydro-home--c .pwork__tag {
	flex: none;
	font: 400 0.8125rem/1.5 var(--sans);
	color: var(--muted);
}

.hydro-home--c .pwork__more {
	margin: 3.5rem 0 0;
}

/* ================================================================== 8. reviews */
.hydro-home--c .reviews__in {
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

/* The rating summary as a panel: 5.0, stars, count and the Google mark, under the heading. */

.hydro-home--c .hydro-greviews.score {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.25rem 1rem;
	align-items: center;
	margin-top: 2rem;
	padding: 1.5rem 1.5rem 1.375rem;
	border: 1px solid var(--line-cool);
	border-top: 4px solid var(--teal);
	border-radius: var(--radius-lg);
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hydro-home--c .hydro-greviews.score:hover {
	border-color: var(--line);
	box-shadow: var(--hc-card-shadow);
}

.hydro-home--c .score .hydro-greviews__rating {
	font: 600 clamp(3.25rem, 2.6rem + 2vw, 4.25rem)/0.95 var(--sans);
	letter-spacing: -0.04em;
}

.hydro-home--c .score .hydro-greviews__body {
	gap: 0.15rem;
}

.hydro-home--c .score .hydro-greviews__stars {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
}

.hydro-home--c .score .hydro-greviews__meta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ocean-ink);
}

.hydro-home--c .score .hydro-greviews__logo {
	grid-column: 1 / -1;
	margin-top: 1rem;
	padding-top: 1rem;
	width: 5.75rem;
	border-top: 1px solid var(--line-cool);
	box-sizing: content-box;
}

/* The featured quote: larger, with a cyan quote mark and a left rule; the reviewer below. */

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card figure {
	gap: 1.25rem;
	padding: 0.25rem 0 0 clamp(1.25rem, 2.5vw, 2.25rem);
	border-left: 3px solid var(--teal);
}

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text,
.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__note {
	font: 400 clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem)/1.5 var(--sans);
	letter-spacing: -0.015em;
}

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text::before {
	height: 2.25rem;
	margin-bottom: 0.25rem;
	font: 700 4.5rem/2.25rem var(--sans);
}

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text.is-clamped {
	max-height: calc(2.5rem + 1.5em * 5);
}

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__stars {
	font-size: 1rem;
	line-height: 1.5;
}

.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__head {
	margin-top: 0.25rem;
}

.hydro-home--c .hydro-review-card__avatar {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--paper);
	font: 600 1rem var(--sans);
	color: var(--ocean-ink);
}

.hydro-home--c .hydro-review-card__name {
	font-size: 1rem;
	font-weight: 600;
}

.hydro-home--c .hydro-review-card__date,
.hydro-home--c .hydro-review-card__source {
	font-size: 0.8125rem;
	font-weight: 500;
}

.hydro-home--c .hydro-rv-more {
	font-weight: 600;
}

/* Controls: arrows, counter and the two links on one calm row. */

.hydro-home--c .hydro-rv__nav {
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-cool);
}

.hydro-home--c .hydro-rv__status {
	min-width: 7.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
}

.hydro-home--c .hydro-rv__more {
	margin-top: 1.5rem;
}

.hydro-home--c .hydro-rv__all {
	min-height: 3rem;
	padding: 0.7rem 1.4rem;
	border: 1.5px solid var(--navy);
	border-radius: 2px;
	font-weight: 600;
	color: var(--navy);
}

.hydro-home--c .reviews__cta {
	margin-top: 1.25rem;
}

@media (min-width: 1100px) {
	.hydro-home--c .reviews__main {
		display: grid;
		grid-template-columns: auto auto 1fr;
		gap: 0 1.5rem;
		align-items: center;
	}

	.hydro-home--c .reviews__main > .hydro-rv {
		display: contents;
	}

	.hydro-home--c .reviews__main :is(.hydro-rv__viewport, .hydro-rv__nav) {
		grid-column: 1 / -1;
	}

	.hydro-home--c .reviews__main .hydro-rv__more {
		grid-column: 1;
		margin: 1.5rem 0 0;
	}

	.hydro-home--c .reviews__main .reviews__cta {
		grid-column: 2;
		margin: 1.5rem 0 0;
	}

	.hydro-home--c .reviews__main:not(:has(.hydro-rv__more:not([hidden]))) .reviews__cta {
		grid-column: 1 / -1;
	}
}

/* ================================================================== 10. FAQ (one indicator at every width) */
.hydro-home--c .faq__in {
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
}

.hydro-home--c .faq__list summary {
	gap: 1.5rem;
	min-height: 3.75rem;
	padding: 1.125rem 0;
	font: 500 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.4 var(--sans);
	letter-spacing: -0.01em;
	color: var(--ink);
}

.hydro-home--c .faq__list details[open] summary {
	color: var(--ocean-ink);
}




.hydro-home--c .faq__list details p {
	max-width: 38rem;
	margin: 0;
	padding: 0 3.75rem 1.5rem 0;
	font-size: 1rem;
	line-height: 1.7;
}

/* ================================================================== 11. estimate */
.hydro-home--c .estimate__in {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.hydro-home--c .estimate h2 {
	font-size: clamp(2rem, 1.45rem + 1.9vw, 3.125rem);
}

.hydro-home--c .estimate__copy > p {
	max-width: 28rem;
	margin-top: 1.25rem;
	font-size: var(--hc-lead);
	line-height: 1.65;
}

.hydro-home--c .estimate__points {
	margin: 2rem 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.hydro-home--c .estimate__points li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font: 500 1rem/1.5 var(--sans);
}

.hydro-home--c .estimate__points li::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--teal);
	-webkit-mask: var(--i-check-circle) center / contain no-repeat;
	mask: var(--i-check-circle) center / contain no-repeat;
}

.hydro-home--c .estimate__copy .estimate__phone-k {
	font-size: 0.9375rem;
}

.hydro-home--c .estimate__phone-v a {
	font: 600 clamp(1.5rem, 1.3rem + 0.8vw, 2rem)/1.15 var(--sans);
	letter-spacing: -0.02em;
}

.hydro-home--c .estimate__card {
	border-top: 4px solid var(--teal);
	border-radius: var(--radius-lg);
	box-shadow: var(--hc-card-shadow);
}

/* ================================================================== tablet and phone (< 1100) */
@media (max-width: 1099px) {
	.hydro-home--c :is(.svcs, .pwork, .reviews, .faq, .estimate) {
		padding-block: var(--hydro-section);
	}

	.hydro-home--c :is(.sister, .process) {
		padding-block: var(--hydro-section-tight);
	}

	.hydro-home--c :is(.svcs, .pwork, .reviews, .faq, .process, .estimate) h2 {
		font-size: var(--hydro-h2);
		line-height: 1.12;
	}

	.hydro-home--c :is(.svcs__head p, .faq__head p) {
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	/* The desktop grids above outrank sections.css's single-column reset: restate it here. */

	.hydro-home--c :is(.hero__in, .svcs__head, .reviews__in, .faq__in, .estimate__in, .sister__in),
	.hydro-home--c .svcs__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* hero */

	.hydro-home--c .wp-block-cover.hero {
		align-items: flex-start;
		min-height: 0;
		padding: var(--hydro-hero-top) 0 var(--hydro-section);
	}

	/* CP-01: the worker in frame, under a lighter scrim (measured: every hero text >= 4.86:1). */
	.hydro-home--c .wp-block-cover.hero .wp-block-cover__image-background {
		object-position: 38% 50%;
	}

	.hydro-home--c .wp-block-cover.hero .wp-block-cover__background.has-background-dim.has-background-dim-0 {
		background: linear-gradient(180deg, rgb(var(--shade-rgb) / 0.85) 0%, rgb(var(--shade-rgb) / 0.75) 55%, rgb(var(--shade-rgb) / 0.86) 100%);
	}

	.hydro-home--c .hero__in {
		gap: 2rem;
	}

	.hydro-home--c .hero__copy {
		gap: 1.125rem;
	}

	.hydro-home--c .hero__kicker {
		margin: 0;
		padding: 0;
		font-size: var(--hydro-kicker);
		letter-spacing: 0.1em;
	}

	.hydro-home--c .hero__kicker::before {
		width: 1.75rem;
	}

	.hydro-home--c .hero .hero__title {
		max-width: none;
		font-size: var(--hydro-h1-home);
		line-height: 1.06;
		letter-spacing: -0.035em;
	}

	.hydro-home--c .hero__lead {
		max-width: 34rem;
		margin: 0;
		font-size: var(--hydro-lead);
	}

	.hydro-home--c .hero__actions {
		gap: 0.5rem;
		margin: 0;
		padding-top: 0.375rem;
	}

	.hydro-home--c .hero__actions .wp-block-button__link {
		min-height: 3.25rem;
	}

	.hydro-home--c .hero__phone {
		padding: 0;
		font-size: var(--hydro-small);
	}

	.hydro-home--c .hero__phone a {
		font-size: var(--hydro-body);
	}

	.hydro-home--c .hero__copy > .gbadge {
		max-width: 22rem;
		margin: 0.25rem 0 0;
	}

	.hydro-home--c .quick {
		padding: var(--hydro-card-pad);
	}

	/* services: photo cards */

	.hydro-home--c .svcs__body {
		margin-top: 1.5rem;
	}

	.hydro-home--c .svcs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.25rem;
	}

	.hydro-home--c .svc__text h3 {
		font-size: var(--hydro-row-title);
	}

	.hydro-home--c .svc__text p {
		font-size: var(--hydro-small);
	}

	.hydro-home--c .svc__link a {
		font-size: var(--hydro-small);
	}

	/* sister */

	.hydro-home--c .sister .is-style-kicker {
		font-size: var(--hydro-kicker);
	}

	.hydro-home--c .sister .sister__title {
		font-size: var(--hydro-h2);
	}

	.hydro-home--c .sister__text {
		max-width: none;
		font-size: var(--hydro-body);
	}

	/* process */

	.hydro-home--c .process__kicker {
		margin-bottom: 0.375rem;
	}

	.hydro-home--c .process__steps {
		margin-top: 1.5rem;
		padding-top: 0;
	}

	.hydro-home--c .process__step {
		padding: 1.125rem 0 0;
		border-top: 1px solid rgb(255 255 255 / 0.16);
	}

	.hydro-home--c .process__n {
		box-shadow: none;
		font-size: var(--hydro-small);
	}

	.hydro-home--c .process__steps p:not(.process__n) {
		max-width: none;
		font-size: var(--hydro-small);
	}

	/* reviews */

	.hydro-home--c .hydro-greviews.score {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0.25rem 1rem;
		margin: 0;
		padding: 1.25rem 1.25rem 1.125rem;
		border: 1px solid var(--line-cool);
		border-top: 4px solid var(--teal);
	}

	.hydro-home--c .score .hydro-greviews__rating {
		font-size: var(--hydro-h1);
	}

	.hydro-home--c .score .hydro-greviews__logo {
		order: 0;
		grid-column: 1 / -1;
		margin-top: 0.75rem;
		padding-top: 0.75rem;
		width: 5.5rem;
	}

	.hydro-home--c .hydro-review-card {
		padding: var(--hydro-card-pad);
		border: 1px solid var(--line-cool);
		border-radius: var(--radius-lg);
		background: #fff;
	}

	.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card figure {
		gap: 1rem;
		padding: 0;
		border-left: 0;
	}

	.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text,
	.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__note {
		font-size: var(--hydro-lead);
		line-height: 1.55;
	}

	.hydro-home--c .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text::before {
		height: 1.5rem;
		margin-bottom: 0.75rem;
		font: 700 3rem/1.5rem var(--sans);
	}

	.hydro-home--c .hydro-rv__nav {
		justify-content: center;
		margin-top: 1.5rem;
		padding-top: 0;
		border-top: 0;
	}

	.hydro-home--c .hydro-rv__status {
		min-width: 0;
	}

	.hydro-home--c .hydro-rv__all {
		width: 100%;
		font-size: var(--hydro-small);
	}

	.hydro-home--c .reviews__cta a {
		font-weight: 600;
		text-decoration: none;
	}

	.hydro-home--c .reviews__cta a:hover {
		text-decoration: underline;
	}

	/* FAQ */

	.hydro-home--c .faq__list summary {
		gap: 1rem;
		font-size: var(--hydro-faq-q);
	}



	.hydro-home--c .faq__list details p {
		padding: 0 0.5rem 1.25rem 0;
		font-size: var(--hydro-body);
	}

	/* estimate */

	.hydro-home--c .estimate h2 {
		font-size: var(--hydro-h2-estimate);
	}

	.hydro-home--c .estimate__copy > p {
		max-width: none;
		font-size: var(--hydro-body);
	}

	.hydro-home--c .estimate__points li {
		padding: 0.75rem 0;
		font: 600 var(--hydro-small)/1.5 var(--sans);
	}
}

/* ================================================================== our work below desktop: heading stacked */
@media (max-width: 1099px) {
	.hydro-home--c .pwork__head {
		display: block;
	}

	.hydro-home--c .pwork__kicker + h2 {
		margin-top: 0.5rem;
	}

	.hydro-home--c .pwork__lead {
		max-width: none;
		margin-top: 0.5rem;
		font-size: var(--hydro-body);
	}

	.hydro-home--c .pwork__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
		margin-top: 1.5rem;
	}

	.hydro-home--c .pwork__more {
		margin-top: 1.5rem;
	}
}

@media (max-width: 767px) {
	.hydro-home--c .pwork__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* ================================================================== phones (< 768) */
@media (max-width: 767px) {
	.hydro-home--c .wp-block-cover.hero {
		padding-top: 2.5rem;
	}

	/* Photo cards on phones: compact photo rows (the card photo as an 88 px square beside the text), so
		   the eight services take the height of a list, not of eight stacked cards. */

	.hydro-home--c .svcs__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-bottom: 1px solid var(--line-cool);
	}

	.hydro-home--c .svc {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 0.125rem 1rem;
		align-items: start;
		padding: 1rem 0;
		border-top: 1px solid var(--line-cool);
	}

	.hydro-home--c .svc__media {
		grid-row: 1 / 3;
		width: 5.5rem;
		aspect-ratio: 1;
		margin: 0;
	}

	.hydro-home--c .svc__media::after {
		display: none;
	}

	.hydro-home--c .svc__text {
		grid-column: 2;
		gap: 0.25rem;
	}

	.hydro-home--c .svc__text h3 {
		font-size: var(--hydro-row-title);
	}

	.hydro-home--c .svc__link {
		grid-column: 2;
		margin: 0;
	}

	.hydro-home--c .svc__link a {
		padding-top: 0.25rem;
		min-height: 2.5rem;
	}
}

/* ================================================================== tablets (768–1099) */
@media (min-width: 768px) and (max-width: 1099px) {
	.hydro-home--c .hero__copy {
		max-width: 40rem;
	}

	.hydro-home--c .hero__actions {
		gap: 1rem 1.5rem;
	}

	.hydro-home--c .quick {
		max-width: 32.5rem;
	}

	.hydro-home--c .svcs__list {
		gap: 2rem 1.5rem;
	}

	.hydro-home--c .sister__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hydro-home--c .hydro-greviews.score {
		margin: 0;
	}

	.hydro-home--c .reviews__side {
		align-items: center;
	}
}

/* ================================================================== small phones (≤ 380) */
@media (max-width: 380px) {
	.hydro-home--c .svc {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: 0.125rem 0.75rem;
	}

	.hydro-home--c .svc__media {
		width: 4.5rem;
	}
}

/* ================================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hydro-home--c .svc__text h3,
	.hydro-home--c .svc__media img {
		transform: none;
		transition: none;
	}
}

/* ================================================================== no kicker lines
 * The kicker labels keep their text but lose the rule line before them (owner, 2026-10-27). */
.hydro-home--c .hero__kicker::before,
.hydro-home--c .sister .is-style-kicker::before {
	display: none;
}

.hydro-home--c .hero__kicker,
.hydro-home--c .sister .is-style-kicker {
	gap: 0;
}

/* ================================================================== why choose: WHY-CHOOSE-03
 * Figma 986:46314 (desktop) and the Concept C tablet / phone frames: centred heading and lead on the
 * light-blue band; a bento grid of white cards: the navy 20+ years card (figure beside the text and
 * the estimate button) and the Google rating card on the first row, three benefit cards with line
 * icons below. Desktop 115 / 80 padding, 56 below the heading, 24 between cards. */
.hydro-home--c {
	--hc-i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M4 20.5V9.5L12 4l8 5.5v11M4 20.5h16M9 20.5v-6h6v6M9.5 11h5'/%3E%3C/svg%3E");
	--hc-i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 4l8.5 4.5L12 13 3.5 8.5 12 4zM3.5 12.5L12 17l8.5-4.5M3.5 16.5L12 21l8.5-4.5'/%3E%3C/svg%3E");
	--hc-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M12 21s-6.5-6.1-6.5-11.2A6.5 6.5 0 0 1 12 3.3a6.5 6.5 0 0 1 6.5 6.5C18.5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4' fill='none' stroke='%23000' stroke-width='1.75'/%3E%3C/svg%3E");
	--hc-whyc-shadow: 0 1px 2px rgb(6 26 64 / 0.06), 0 12px 32px -16px rgb(6 26 64 / 0.22);
}

.hydro-home--c .whyc {
	padding-block: 7.1875rem;
	background: var(--paper);
}

.hydro-home--c .whyc__head {
	max-width: 51.25rem;
	margin-inline: auto;
	text-align: center;
}

.hydro-home--c .whyc__head h2 {
	font-size: var(--hc-h2);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.hydro-home--c .whyc__lead {
	margin-top: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--muted);
	text-wrap: balance;
}

.hydro-home--c .whyc__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 3.5rem;
}

.hydro-home--c .whyc__grid > * {
	margin: 0;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--hc-whyc-shadow);
}

/* The 20+ years card: navy, two thirds wide, the figure beside the text. */
.hydro-home--c .whyc__feature {
	display: grid;
	grid-column: span 2;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
	padding: 3rem;
	background: var(--navy);
	color: var(--on-dark);
}

.hydro-home--c .whyc__years {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: #fff;
}

.hydro-home--c .whyc__num {
	display: flex;
	align-items: flex-start;
	font: 600 6.875rem/1 var(--sans);
	letter-spacing: -0.05em;
}

.hydro-home--c .whyc__plus {
	margin-top: 0.875rem;
	font-size: 0.873em;
	line-height: 0.873;
	letter-spacing: 0;
	color: var(--teal);
}

.hydro-home--c .whyc__label {
	margin-top: 0.25rem;
	font: 600 1.125rem/1.33 var(--sans);
	letter-spacing: 0;
}

.hydro-home--c .whyc__feature-body p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--on-dark);
}

.hydro-home--c .whyc__feature-body .wp-block-buttons {
	margin-top: 1.5rem;
}

.hydro-home--c .whyc__feature :focus-visible {
	outline-color: #fff;
}

/* The rating card: 5.0 beside the stars and count, the Google link below. */
.hydro-home--c .whyc__rating {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	gap: 0 1rem;
	padding: 2.5rem 2.25rem;
}

.hydro-home--c .whyc__score {
	grid-row: span 2;
	font: 600 4.5rem/0.97 var(--sans);
	letter-spacing: -0.04em;
	color: var(--ink);
}

.hydro-home--c .whyc__stars {
	align-self: end;
	font-size: 1.125rem;
	line-height: 1.33;
	letter-spacing: 0.1em;
	color: var(--c-star);
}

.hydro-home--c .whyc__count {
	align-self: start;
	font: 600 0.9375rem/1.45 var(--sans);
	color: var(--ocean-ink);
}

.hydro-home--c .whyc__google {
	display: inline-flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	min-height: 1.5rem;
	margin-top: 1rem;
	font: 600 1rem/1.375 var(--sans);
	color: var(--ocean-ink);
	text-decoration: none;
}

.hydro-home--c .whyc__google::after {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--i-arrow-up-right) center / contain no-repeat;
	mask: var(--i-arrow-up-right) center / contain no-repeat;
}

.hydro-home--c .whyc__google:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* The three benefit cards: an icon in a light-blue square, the title and the line. */
.hydro-home--c .whyc__card {
	position: relative;
	padding: 2.25rem 2rem;
}

/* The light-blue icon box (::before) and the icon itself (::after, a masked cobalt square on top; a
   mask on the box would hide the box). */
.hydro-home--c .whyc__card::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 2.25rem;
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.hydro-home--c .whyc__card::after {
	content: "";
	position: absolute;
	top: 3.125rem;
	left: 2.875rem;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--ocean-ink);
	-webkit-mask: var(--hc-icon) center / contain no-repeat;
	mask: var(--hc-icon) center / contain no-repeat;
}

.hydro-home--c .whyc__card--building {
	--hc-icon: var(--hc-i-building);
}

.hydro-home--c .whyc__card--layers {
	--hc-icon: var(--hc-i-layers);
}

.hydro-home--c .whyc__card--pin {
	--hc-icon: var(--hc-i-pin);
}

.hydro-home--c .whyc__card h3 {
	margin: 0;
	font: 600 1.375rem/1.32 var(--sans);
	letter-spacing: -0.015em;
	color: var(--ink);
}

.hydro-home--c .whyc__card p {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.67;
	color: var(--muted);
}

/* Tablets (768–1099): 80 / 32 padding, the feature card full width, then rows of two. */
@media (max-width: 1099px) {
	.hydro-home--c .whyc {
		padding-block: 5rem;
	}

	.hydro-home--c .whyc__head h2 {
		font-size: 2.125rem;
		line-height: 1.12;
	}

	.hydro-home--c .whyc__lead {
		margin-top: 1rem;
		font-size: var(--hydro-lead);
	}

	.hydro-home--c .whyc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 2.5rem;
	}

	.hydro-home--c .whyc__feature {
		grid-column: 1 / -1;
		gap: 2rem;
		padding: 2.5rem;
	}

	.hydro-home--c .whyc__num {
		font-size: 6.25rem;
	}

	.hydro-home--c .whyc__plus {
		margin-top: 0.75rem;
		font-size: 0.6em;
		line-height: 1;
	}

	.hydro-home--c .whyc__rating,
	.hydro-home--c .whyc__card {
		padding: 2.5rem;
	}

	.hydro-home--c .whyc__card::before {
		width: 3.25rem;
		height: 3.25rem;
		margin-bottom: 0.875rem;
	}

	.hydro-home--c .whyc__card::after {
		top: 3.25rem;
		left: 3.25rem;
		width: 1.625rem;
		height: 1.625rem;
	}

	.hydro-home--c .whyc__card h3 {
		font-size: var(--hydro-row-title);
		line-height: 1.35;
	}

	.hydro-home--c .whyc__card p {
		margin-top: 0.875rem;
	}
}

/* Phones (< 768): 56 / 16 padding, the cards stacked. */
@media (max-width: 767px) {
	.hydro-home--c .whyc {
		padding-block: 3.5rem;
	}

	.hydro-home--c .whyc__head h2 {
		font-size: 1.75rem;
	}

	.hydro-home--c .whyc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		margin-top: 2rem;
	}

	.hydro-home--c .whyc__feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		padding: 1.75rem;
	}

	.hydro-home--c .whyc__num {
		font-size: 5.5rem;
		line-height: 0.92;
	}

	.hydro-home--c .whyc__plus {
		margin-top: 0.625rem;
	}

	.hydro-home--c .whyc__feature-body p {
		font-size: 0.9375rem;
		line-height: 1.667;
	}

	.hydro-home--c .whyc__feature-body .wp-block-buttons {
		margin-top: 1.25rem;
	}

	.hydro-home--c .whyc__feature-body :is(.wp-block-button, .wp-block-button__link) {
		width: 100%;
		justify-content: center;
	}

	.hydro-home--c .whyc__card h3 {
		font-size: 1.1875rem;
		line-height: 1.316;
		letter-spacing: -0.3px;
	}

	.hydro-home--c .whyc__card p {
		font-size: 0.875rem;
		line-height: 1.643;
	}

	.hydro-home--c .whyc__rating,
	.hydro-home--c .whyc__card {
		padding: 1.75rem;
	}

	.hydro-home--c .whyc__score {
		font-size: 3.75rem;
	}

	.hydro-home--c .whyc__card::before {
		width: 3rem;
		height: 3rem;
		margin-bottom: 0.875rem;
	}

	.hydro-home--c .whyc__card::after {
		top: 2.5rem;
		left: 2.5rem;
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* Small phones (≤ 359). */
@media (max-width: 359px) {
	.hydro-home--c .whyc__head h2 {
		font-size: 1.625rem;
	}

	.hydro-home--c .whyc__feature {
		padding: 1.5rem;
	}

	.hydro-home--c .whyc__num {
		font-size: 4.75rem;
	}

	.hydro-home--c .whyc__score {
		font-size: 3.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hydro-home--c .svc__media img {
		transition: none;
	}
}

/* ================================================================== hero L5 + video (theme 1.21.0)
 * Owner-approved local preview (2026-10-30, tests/browser/home-hero-video-preview): the hero video on
 * the left (desktop, from 1280 px) or on top (tablet, phone), never cropped below 95 % of its frame and
 * never under text; the copy beside it (desktop) or under it; one button "Explore our services" (the
 * approved cyan large button) with "or call" and the small "Pause video" control under it (WCAG 2.2.2;
 * no button on the video); the Google badge; the cyan brush marking under "Pressure washing" (drawn in
 * on load, static under reduced motion). Video behaviour: assets/js/hero-video.js. The former cover
 * hero styles above are unused by this pattern and kept for rollback.
 */

.hydro-home--c .hero-l5 {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
	align-items: stretch;
	overflow: hidden;
	background: #fff;
	color: var(--navy);
}

.hydro-home--c .hero-l5__media {
	position: relative;
	margin: 0;
	background: var(--paper, #e4f7ff);
}

/* At least the video's own 16:9 height (padding is relative to the column width); the row grows to the
   copy when the copy is taller, and the figure stretches with it, so there is never a white gap. */
.hydro-home--c .hero-l5__media::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.hydro-home--c .hero-l5__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 50%;
}

/* Only the copy side feathers into white (the last ~5 %); top and foot meet the header and the next section. */
.hydro-home--c .hero-l5__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to left, #fff 0, rgb(255 255 255 / 0) 5%);
}

/* The copy column: close to the video, its right edge on the header's (.wrap). */
.hydro-home--c .hero-l5__in.wrap {
	align-self: center;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0.75rem max(var(--gutter, 1.5rem), calc((100vw - 80rem) / 2)) 0.75rem clamp(2rem, 3vw, 3rem);
}

.hydro-home--c .hero-l5__copy {
	max-width: 34rem;
}

.hydro-home--c .hero-l5__kicker {
	margin: 0 0 0.5rem;
	font: 600 0.8125rem / 1.5 var(--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy-2);
}

.hydro-home--c .hero-l5 .hero-l5__title {
	margin: 0 0 0.625rem;
	font: 600 clamp(2rem, 2.3vw, 2.75rem) / 1.1 var(--display);
	letter-spacing: -0.01em;
	color: var(--navy);
}

.hydro-home--c .hero-l5__lead {
	margin: 0 0 1rem;
	font: 400 clamp(1rem, 1.1vw, 1.125rem) / 1.55 var(--sans);
	color: var(--muted);
}

/* One button (owner, 2026-10-30): the approved cyan large "Explore our services", as on the live hero;
   full width on phones. Under it, on every screen: the phone line with the pause control, then the badge. */
.hydro-home--c .hero-l5__buttons {
	display: grid;
	grid-template-columns: max-content;
	margin: 0;
}

.hydro-home--c .hero-l5__buttons .wp-block-button {
	margin: 0;
}

.hydro-home--c .hero-l5__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin-top: 0.75rem;
}

.hydro-home--c .hero-l5__phone {
	margin: 0;
	font: 400 1rem / 1.5 var(--sans);
	color: var(--muted);
}

.hydro-home--c .hero-l5__phone a {
	font-weight: 600;
	color: var(--navy-2);
	text-decoration: underline;
	text-decoration-color: rgb(9 38 92 / 0.35);
	text-underline-offset: 0.2em;
}

.hydro-home--c .hero-l5 .gbadge {
	margin-top: 1rem;
	box-shadow: inset 0 0 0 1px var(--line);
}

/* "Pause video": a small text control (24 px target). */
.hydro-home--c .hero-l5__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	font: 500 0.875rem / 1.5 var(--sans);
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: rgb(61 88 120 / 0.4);
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.hydro-home--c .hero-l5__toggle:hover {
	color: var(--navy-2);
}

.hydro-home--c .hero-l5__toggle:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 2px;
}

.hydro-home--c .hero-l5__toggle svg {
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
}

.hydro-home--c .hero-l5__toggle .is-play,
.hydro-home--c .hero-l5__toggle[data-state="paused"] .is-pause {
	display: none;
}

.hydro-home--c .hero-l5__toggle[data-state="paused"] .is-play {
	display: block;
}

/* 1280 to 1365: a slightly smaller headline keeps the copy within the video's height (97 % of the frame
   shows at 1280; the whole frame from 1366). */
@media (min-width: 1280px) and (max-width: 1365px) {
	.hydro-home--c .hero-l5 .hero-l5__title {
		font-size: 1.875rem;
	}

}

/* ------------------------------------------------------------------ below 1280: video, then the copy */
@media (max-width: 1279px) {
	.hydro-home--c .hero-l5 {
		display: block;
		padding-bottom: 3.5rem;
	}

	/* The full frame, edge to edge; only the foot feathers into white. */
	.hydro-home--c .hero-l5__media::after {
		background: linear-gradient(to top, #fff 0, rgb(255 255 255 / 0) 6%);
	}

	.hydro-home--c .hero-l5__in.wrap {
		width: auto;
		max-width: var(--wp--style--global--content-size, 80rem);
		margin: 0 auto;
		padding: 1.75rem var(--gutter, 1.5rem) 0;
	}

	.hydro-home--c .hero-l5__copy {
		max-width: 40rem;
	}

	.hydro-home--c .hero-l5 .hero-l5__title {
		font-size: 2.5rem;
	}

}

@media (max-width: 767px) {
	.hydro-home--c .hero-l5__in.wrap {
		padding-top: 1.25rem;
	}

	.hydro-home--c .hero-l5 .hero-l5__title {
		font-size: 2rem;
	}

	.hydro-home--c .hero-l5__buttons {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 359px) {
	.hydro-home--c .hero-l5 .hero-l5__title {
		font-size: 1.75rem;
	}
}

/* ------------------------------------------------------------------ "Pressure washing" marking
 * A hand-painted cyan brush band behind the lower half of the first words of the headline, like a
 * swipe of water across the page: irregular edges, a dry-brush tail, the brand cyan fading in from the
 * left and deepening to the right, with faint bristle streaks. It paints itself in from the left once
 * the page shows (1 s), and is simply there for visitors who ask for less motion. Decorative only: a
 * background on the words' own span, so the heading's text and its accessible name are unchanged, and
 * box-decoration-break gives every line its own stroke if the words ever wrap (large text, zoom). The
 * band is translucent, so the navy letters keep well over 4.5:1 where they sit on it. */
.hydro-home--c .hero-l5__mark {
	--mark-h: 0.56em;
	position: relative;
	padding: 0 0.06em 0.02em;
	margin: 0 -0.06em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%235CC4F8' stop-opacity='.55'/%3E%3Cstop offset='.25' stop-color='%2312A1F3' stop-opacity='.62'/%3E%3Cstop offset='.85' stop-color='%2312A1F3' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%230E8FD9' stop-opacity='.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url%28%23g%29' d='M7 13.5C58 9.6 132 8.4 214 8.8c66 .3 124-.6 172 1.6 5 .2 8.6 2.4 8.8 4.6.2 2-1.6 3.2-1.4 4.8.2 1.8 2.6 2.8 2.4 4.9-.2 2.3-3 3.6-6.2 3.9-46 4-118 4.8-196 5.6C134 34.5 72 35.6 13 36.4c-5 .1-9.4-2.4-9.8-5.6-.3-2.6 1.8-4 1.6-6.1-.2-2.3-2.9-3.6-2.6-6.2.3-2.6 2.2-4.8 4.8-5z'/%3E%3Cpath fill='%230E8FD9' fill-opacity='.38' d='M300 27.8c30-.9 62-1.8 90-3.2-28 3.4-58 4.4-90 5.1z'/%3E%3Cpath fill='%23fff' fill-opacity='.28' d='M24 17.6c88-3.4 196-4.2 330-3.2-130 .9-238 2.4-330 4.6z'/%3E%3Cpath fill='%23fff' fill-opacity='.18' d='M60 28.4c80-1.8 170-2.2 270-1.6-96 1-186 1.9-270 3.1z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% var(--mark-h);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	animation: hero-l5-mark 1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}

@keyframes hero-l5-mark {
	from {
		background-size: 0% var(--mark-h);
	}

	to {
		background-size: 100% var(--mark-h);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hydro-home--c .hero-l5__mark {
		animation: none;
	}
}