/**
 * Homepage, W3 (2026-10-26): Design 03 with the V2.1 copy and client photos, and the approved
 * responsive frames (Figma 828:40215 tablet 768, 828:40893 phone 390, 828:41571 small 320; desktop 42:2).
 *
 * Every rule is scoped to .hydro-home, the group that wraps the ten homepage sections in the page
 * content (patterns/page-home.php, inc/home.php). sections.css keeps the Design 03 base styles; this
 * file adds the R / kit layouts below 1100 px and the few desktop changes of W3. Sizes use the W1
 * responsive tokens (base.css: --hydro-*): ≤ 380 Small · 381–767 Mobile · 768–1099 Tablet.
 */

/* ------------------------------------------------------------------ desktop changes (all widths) */

/* Hero: CP-19 is a client photo of a house and driveway; keep the house in view. */
.hydro-home .wp-block-cover.hero .wp-block-cover__image-background {
	object-position: 70% 55%;
}

/* Services: the static CP-111 figure beside the list (the earlier preview frame was built by JS). */
.hydro-home .svcs__body {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.hydro-home .svcs__figure {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hydro-sticky-h) + 1.5rem);
	align-self: start;
	margin: 0;
}

.hydro-home .svcs__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: var(--radius);
	background: var(--paper-2);
}

.hydro-home .svcs__figure .wp-element-caption {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.9rem 0 0;
	font: 600 0.9375rem var(--sans);
	color: var(--muted);
	text-align: left;
}

.hydro-home .svcs__figure .wp-element-caption::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--teal);
}

/* Why: CP-30 is portrait and CP-15 landscape; keep each subject inside its frame. */
.hydro-home .why__wide img {
	object-position: 50% 30%;
}

.hydro-home .why__tall img {
	object-position: 40% 50%;
}

/* Surfaces we clean: crop positions of the client photos. */
.hydro-home .work__grid .is-pos-50-30 { --pos: 50% 30%; }
.hydro-home .work__grid .is-pos-50-60 { --pos: 50% 60%; }
.hydro-home .work__grid .is-pos-50-15 { --pos: 50% 15%; }

/* Focus on the dark sections: the default cobalt ring (base.css) is nearly invisible on navy, so the
   controls on the hero photo, the process band and the estimate copy get a white ring. The white quick
   card and form card keep their own focus styles. */
.hydro-home :is(.hero__copy, .process, .estimate__copy) :focus-visible {
	outline-color: #fff;
}

/* Target sizes (WCAG 2.5.8): the hero phone link is a 44 px row; a filter is at least 24 px wide. */
.hydro-home .hero__phone a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.hydro-home .work .filter {
	min-width: 1.5rem;
}

/* Areas: towns with a published city page are links (inc/navigation.php). The 1 px block padding
   lifts the inline link's target to ≥ 24 px on phones without moving the text (W6, 2026-10-26). */
.hydro-home .areas__col li a {
	padding-block: 0.0625rem;
	color: var(--ocean-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.hydro-home .areas__col li a:hover {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ tablet and phone (< 1100) */
@media (max-width: 1099px) {
	.hydro-home .wrap {
		width: min(80rem, 100% - 2 * var(--hydro-gutter));
	}

	.hydro-home :is(.why, .svcs, .work, .reviews, .areas, .faq, .estimate) {
		padding-block: var(--hydro-section);
	}

	/* R / Section Heading: H2 34 / 28 / 26, 115 %, −3 %. */
	.hydro-home :is(.why, .svcs, .work, .reviews, .areas, .faq, .process, .estimate) h2 {
		font-size: var(--hydro-h2);
		line-height: 1.15;
		letter-spacing: -0.03em;
	}

	/* -------------------------------------------------------------- hero (R / Hero · Home) */
	.hydro-home .wp-block-cover.hero {
		padding: var(--hydro-hero-top) 0 var(--hydro-section);
	}

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

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

	.hydro-home .hero__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.hydro-home .hero__copy > * {
		margin: 0;
	}

	.hydro-home .hero__kicker {
		gap: 0.75rem;
		margin: 0;
		padding: 0.375rem 0.75rem;
		font: 600 0.875rem / 1.5 var(--sans);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-wrap: wrap;
		color: var(--on-dark);
	}

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

	.hydro-home .hero .hero__title {
		max-width: none;
		margin: 0;
		font-size: var(--hydro-h1-home);
		line-height: 1.08;
		letter-spacing: -0.035em;
		color: var(--on-dark);
		text-wrap: balance;
	}

	.hydro-home .hero__lead {
		max-width: none;
		margin: 0;
		font-size: var(--hydro-lead);
		line-height: 1.6;
		color: var(--on-dark-muted);
	}

	.hydro-home .hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		width: 100%;
		margin: 0;
		padding-top: 0.5rem;
	}

	.hydro-home .hero__actions .wp-block-button,
	.hydro-home .hero__actions .wp-block-button__link {
		width: 100%;
	}

	.hydro-home .hero__actions .wp-block-button__link {
		justify-content: center;
		min-height: 3.25rem;
		padding: 0.9375rem 1.75rem;
		font-size: var(--hydro-button);
		line-height: 1.4;
	}

	.hydro-home .hero__phone {
		align-self: flex-start;
		align-items: center;
		justify-content: center;
		gap: 0.3em;
		min-height: 2.75rem;
		padding: 0 0.75rem;
		font-size: var(--hydro-small);
		line-height: 1.7;
		color: var(--line-cool);
	}

	.hydro-home .hero__phone a {
		color: #fff;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	.hydro-home .hero__copy > .gbadge {
		width: 100%;
		max-width: 21.3125rem;
		margin: 0;
	}

	.hydro-home .quick {
		width: 100%;
		max-width: none;
		padding: 1.4rem;
	}

	/* -------------------------------------------------------------- why */
	.hydro-home .why__top {
		gap: 1.25rem;
	}

	.hydro-home .why__intro > * + * {
		margin-top: 1.25rem;
	}

	.hydro-home .why__lede {
		margin-top: 1.25rem;
		font: 400 var(--hydro-lead) / 1.55 var(--sans);
		color: var(--ink);
	}

	.hydro-home .why__intro > p:not(.why__lede, .is-style-arrow-link) {
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	.hydro-home .why__intro .is-style-arrow-link {
		margin-top: 1.25rem;
	}

	/* R / Arrow Link: 15 / 14 SemiBold, no underline until hover. */
	.hydro-home .why__intro .is-style-arrow-link a {
		font: 600 0.9375rem / 1.5 var(--sans);
		text-decoration: none;
	}

	.hydro-home .why__intro .is-style-arrow-link a:hover {
		text-decoration: underline;
	}

	.hydro-home .why__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		border-bottom: 0;
	}

	.hydro-home .why__list > .why__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.375rem;
		padding: 1.125rem 0;
	}

	.hydro-home .why__list h3 {
		font-size: var(--hydro-body);
		line-height: 1.45;
		letter-spacing: 0;
	}

	.hydro-home .why__list p {
		font-size: var(--hydro-small);
		line-height: 1.65;
	}

	/* Figure: the main photo, then "20+" beside the small photo (phones); side by side on tablets. */
	.hydro-home .why__media {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 1rem;
		margin-top: 2rem;
	}

	.hydro-home .why__wide {
		grid-column: 1 / -1;
		grid-row: 1;
		aspect-ratio: 358 / 269;
	}

	.hydro-home .why__wide img {
		object-position: 50% 60%;
	}

	.hydro-home .why__media .wp-block-image img {
		border-radius: var(--radius);
	}

	.hydro-home .why__figure {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		padding: 0;
		font: 500 var(--hydro-small) / 1.5 var(--sans);
		color: var(--muted);
	}

	.hydro-home .why__figure strong {
		margin: 0;
		font: 600 var(--hydro-h1) / 1.05 var(--sans);
		letter-spacing: -0.04em;
		color: var(--ink);
	}

	.hydro-home .why__tall {
		display: block;
		grid-column: 2;
		grid-row: 2;
		width: 8.125rem;
		height: 10rem;
		margin: 0 !important;
		aspect-ratio: auto;
	}

	/* -------------------------------------------------------------- services (R / Service Item) */
	.hydro-home .svcs__head {
		gap: 0.75rem;
	}

	.hydro-home .svcs__head p {
		max-width: none;
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	.hydro-home .svcs__body {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		margin-top: 1.25rem;
	}

	.hydro-home .svcs__figure {
		position: static;
	}

	.hydro-home .svcs__figure img {
		aspect-ratio: 3 / 2;
		object-position: 50% 55%;
	}

	.hydro-home .svcs__figure .wp-element-caption {
		margin-top: 0.5rem;
		font: 400 var(--hydro-caption) / 1.5 var(--sans);
	}

	.hydro-home .svcs__figure .wp-element-caption::before {
		display: none;
	}

	.hydro-home .svcs__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		border-bottom: 0;
	}

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

	.hydro-home .svc__text h3 {
		font-size: 1.25rem;
		line-height: 1.3;
		letter-spacing: 0;
	}

	.hydro-home .svc__text p {
		margin-top: 0.25rem;
		font-size: var(--hydro-small);
		line-height: 1.65;
	}

	.hydro-home .svc__link {
		justify-self: stretch;
	}

	.hydro-home .svc__link a {
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0 0.125rem;
		font: 600 var(--hydro-small) / 1.5 var(--sans);
		overflow-wrap: anywhere;
	}

	.hydro-home .svc__link a::after {
		flex: none;
		width: 1.125rem;
		height: 1.125rem;
	}

	/* -------------------------------------------------------------- sister company (R / Sister Band) */
	.hydro-home .sister {
		padding-block: var(--hydro-section);
	}

	.hydro-home .sister__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.hydro-home .sister__media {
		margin: 0;
		overflow: hidden;
		aspect-ratio: 598 / 421;
		border-radius: var(--radius);
	}

	.hydro-home .sister__media img {
		display: block;
		height: 100%;
		object-fit: cover;
	}

	.hydro-home .sister__copy > * + * {
		margin-top: 0.875rem;
	}

	.hydro-home .sister .is-style-kicker {
		gap: 0.75rem;
		font: 600 var(--hydro-kicker) / 1.5 var(--sans);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ocean);
	}


	.hydro-home .sister .sister__title {
		font-size: var(--hydro-h2);
		line-height: 1.15;
		letter-spacing: -0.03em;
	}

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

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

	.hydro-home .sister .wp-block-button {
		width: 100%;
		max-width: 26.25rem;
	}

	.hydro-home .sister .wp-block-button__link {
		justify-content: center;
		width: 100%;
		min-height: 3rem;
		padding: 0.75rem 1.25rem;
		font: 600 var(--hydro-small) / 1.4 var(--sans);
	}

	/* -------------------------------------------------------------- how it works (R / Process) */
	.hydro-home .process {
		padding-block: var(--hydro-section-tight);
	}

	.hydro-home .process__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 1.5rem;
		padding: 0;
	}

	.hydro-home .process__step {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0.125rem 0.875rem;
		align-content: start;
		padding: 1rem 0;
		border-top: 1px solid rgb(255 255 255 / 0.18);
	}

	.hydro-home .process__n {
		position: static;
		display: block;
		grid-row: 1 / 3;
		width: auto;
		height: auto;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font: 600 var(--hydro-small) / 1.6 var(--sans);
		color: var(--teal);
	}

	/* "01" … "04" on phones and tablets (the approved desktop circles show "1" … "4"). */
	.hydro-home .process__n::before {
		content: "0" / "";
	}

	.hydro-home .process__step > :not(.process__n) {
		grid-column: 2;
	}

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

	.hydro-home .process__steps p:not(.process__n) {
		margin-top: 0;
		font-size: var(--hydro-small);
		line-height: 1.6;
		color: var(--on-dark);
	}

	/* -------------------------------------------------------------- surfaces we clean (R / Project Tile · Surface) */
	.hydro-home .work {
		background: var(--page);
	}

	.hydro-home .work .filters {
		gap: 0.5rem;
		margin-top: 1.25rem;
		border-bottom: 0;
	}

	.hydro-home .work .filter {
		min-height: 2.5rem;
		margin: 0;
		padding: 0 1rem;
		border: 1px solid var(--line);
		background: #fff;
		font: 600 var(--hydro-small) / 1.4 var(--sans);
		color: var(--ink);
	}

	.hydro-home .work .filter[aria-pressed="true"] {
		border-color: var(--navy);
		background: var(--navy);
		color: #fff;
	}

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

	.hydro-home .work__grid > .wp-block-image > a {
		border-radius: var(--radius);
	}

	/* R / Project Tile · Surface: a 48 px meta row 10 px below the photo, the tag 72 px wide beside the
	   caption. The frame's row is 197 px wide and clips the third line of the longer captions
	   ("Storefront window cleaning", "Restaurant patio cleaning"); 256 px keeps every caption on two
	   lines, fully visible, with the same tile height. */
	.hydro-home .work__grid .wp-element-caption {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0.5rem;
		max-width: 16rem;
		min-height: 3rem;
		margin-top: 0.625rem;
		padding-top: 0;
		font: 600 var(--hydro-small) / 1.5 var(--sans);
	}

	.hydro-home .work__grid .wp-element-caption em {
		flex: none;
		width: 4.5rem;
		min-width: min-content; /* never split a word ("Commercial" is a little wider than 72 px) */
		overflow-wrap: normal;
		font: normal 400 var(--hydro-caption) / 1.5 var(--sans);
		text-align: right;
	}

	/* -------------------------------------------------------------- reviews (R / Reviews) */
	.hydro-home .reviews__in {
		gap: 1.5rem;
	}

	.hydro-home .reviews__side {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.hydro-home .reviews h2 {
		line-height: 1.1;
	}

	.hydro-home .hydro-greviews.score {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 0.75rem;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.hydro-home .score .hydro-greviews__rating {
		font: 600 var(--hydro-h1) / 1 var(--sans);
		letter-spacing: -0.03em;
		color: var(--ink);
	}

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

	.hydro-home .score .hydro-greviews__stars {
		font-size: var(--hydro-body);
		line-height: 1.2;
	}

	.hydro-home .score .hydro-greviews__meta {
		font: 500 var(--hydro-small) / 1.5 var(--sans);
		color: var(--ocean);
	}

	.hydro-home .score .hydro-greviews__logo {
		order: 3;
		width: 6.25rem;
	}

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

	.hydro-home .hydro-rv.is-spot:not(.is-all) .hydro-review-card figure {
		gap: 0.875rem;
	}

	.hydro-home .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text,
	.hydro-home .hydro-rv.is-spot:not(.is-all) .hydro-review-card__note {
		font: 400 var(--hydro-lead) / 1.6 var(--sans);
	}

	.hydro-home .hydro-rv.is-spot:not(.is-all) .hydro-review-card__text::before {
		height: 1.25rem;
		margin-bottom: 0.875rem;
		font: 700 var(--hydro-h2) / 1.25rem var(--sans);
	}

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

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

	.hydro-home .hydro-review-card__who {
		line-height: 1.45;
	}

	.hydro-home .hydro-review-card__source {
		line-height: 1.5;
	}

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

	.hydro-home .hydro-review-card__name {
		font-size: var(--hydro-small);
		font-weight: 600;
	}

	.hydro-home .hydro-review-card__source {
		font-weight: 400;
	}

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

	.hydro-home .hydro-rv__status {
		min-width: 0;
		font: 500 var(--hydro-small) / 1.5 var(--sans);
		color: var(--ink);
	}

	.hydro-home .hydro-rv__more {
		justify-content: center;
		margin-top: 1.5rem;
	}

	.hydro-home .hydro-rv__all {
		width: 100%;
		min-height: 3rem;
		padding: 0.75rem 1.25rem;
		border-width: 1.5px;
		font: 600 var(--hydro-small) / 1.5 var(--sans);
	}

	.hydro-home .reviews__cta {
		display: flex;
		justify-content: center;
		margin-top: 0.5rem;
	}

	.hydro-home .reviews__cta a {
		min-height: 2.75rem;
		font: 600 var(--hydro-small) / 1.5 var(--sans);
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	/* -------------------------------------------------------------- areas */
	.hydro-home .areas__in {
		gap: 1.25rem;
	}

	.hydro-home .areas__intro p {
		margin-top: 0.75rem;
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	.hydro-home .areas__intro .areas__note {
		margin-top: 1.25rem;
		font-size: var(--hydro-small);
		line-height: 1.6;
	}

	.hydro-home .areas__note a {
		font-weight: 500;
		color: var(--ocean);
		text-decoration: underline;
	}

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

	.hydro-home .areas__river {
		display: none;
	}

	.hydro-home .areas__col {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		padding-top: 0.875rem;
		border-top: 1px solid var(--line);
	}

	.hydro-home .areas__col h3 {
		margin: 0;
		font: 600 var(--hydro-small) / 1.5 var(--sans);
		color: var(--ink);
	}

	.hydro-home .areas__col ul {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
		margin: 0;
		padding: 0;
	}

	.hydro-home .areas__col li {
		padding: 0;
		border: 0;
		font: 400 var(--hydro-body) / 1.6 var(--sans);
		color: var(--ink);
	}

	.hydro-home .areas__col li a {
		font-weight: 500;
	}

	/* -------------------------------------------------------------- FAQ (R / FAQ Item · Home) */
	.hydro-home .faq__in {
		gap: 1.25rem;
	}

	.hydro-home .faq__head p {
		margin-top: 1.25rem;
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	.hydro-home .faq__head a {
		font-weight: 500;
		color: var(--ocean);
	}

	.hydro-home .faq__list summary {
		gap: 1rem;
		min-height: 3.75rem;
		padding: 1rem 0;
		font: 600 var(--hydro-faq-q) / 1.4 var(--sans);
		color: var(--ink);
	}

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


	.hydro-home .faq__list details p {
		max-width: none;
		margin: 0;
		padding: 0 0.5rem 1.25rem 0;
		font-size: var(--hydro-body);
		line-height: 1.7;
	}

	/* -------------------------------------------------------------- estimate (R / Estimate, homepage points) */
	.hydro-home .estimate__in {
		justify-items: center;
		gap: 1.75rem;
	}

	.hydro-home .estimate__copy {
		width: 100%;
		max-width: 40rem;
	}

	.hydro-home .estimate__copy > * + * {
		margin-top: 0.875rem;
	}

	.hydro-home .estimate h2 {
		font-size: var(--hydro-h2-estimate);
		line-height: 1.12;
		letter-spacing: -0.03em;
	}

	.hydro-home .estimate__copy > p {
		max-width: none;
		font-size: var(--hydro-body);
		line-height: 1.7;
		color: var(--on-dark);
	}

	.hydro-home .estimate__points {
		margin: 0.875rem 0 0;
	}

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

	.hydro-home .estimate__copy .estimate__phone-k {
		margin-top: 1.125rem;
		font-size: var(--hydro-small);
		line-height: 1.6;
	}

	.hydro-home .estimate__copy .estimate__phone-v {
		margin-top: 0;
	}

	.hydro-home .estimate__phone-v a {
		font: 600 var(--hydro-phone-display) / 1.3 var(--sans);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
	}

	.hydro-home .estimate__card {
		width: 100%;
		max-width: 40rem;
		justify-self: center;
	}
}

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

	/* Surfaces: one swipeable rail (scroll-snap); the filters and the photo viewer also navigate. */
	.hydro-home .work__grid {
		display: flex;
		gap: 0.75rem;
		margin-right: calc(-1 * var(--hydro-gutter));
		padding-right: var(--hydro-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}

	.hydro-home .work__grid > :nth-child(n),
	.hydro-home .work__grid:has(> [hidden]) > :nth-child(n) {
		flex: 0 0 min(17rem, 81%);
		scroll-snap-align: start;
	}

	.hydro-home .work__grid > :nth-child(n) > a {
		flex: none;
		aspect-ratio: 358 / 269;
		min-height: 0;
	}

	.hydro-home .work__hint {
		display: block;
		margin-top: 1.25rem;
		font: 500 var(--hydro-small) / 1.5 var(--sans);
	}
}

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

	.hydro-home .hero__in {
		gap: 2.5rem;
	}

	.hydro-home .hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.25rem;
	}

	.hydro-home .hero__actions .wp-block-button,
	.hydro-home .hero__actions .wp-block-button__link {
		width: auto;
	}

	.hydro-home .hero__phone {
		align-self: auto;
	}

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

	.hydro-home .why__lede,
	.hydro-home .why__intro > p:not(.why__lede, .is-style-arrow-link) {
		max-width: 40rem;
	}

	.hydro-home .why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.hydro-home .why__list > .why__item {
		padding: 1.125rem 0 0.5rem;
	}

	.hydro-home .why__media {
		grid-template-columns: minmax(0, 1fr) 13.75rem;
		grid-template-rows: auto 1fr;
		align-items: end;
		gap: 1rem;
	}

	.hydro-home .why__wide {
		grid-column: 1;
		grid-row: 1 / 3;
		aspect-ratio: 4 / 3;
	}

	.hydro-home .why__figure {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}

	.hydro-home .why__tall {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		height: 17.5rem;
	}

	.hydro-home .svcs__figure img {
		aspect-ratio: 16 / 9;
	}

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

	.hydro-home .sister__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		align-items: center;
	}

	.hydro-home .sister .wp-block-button {
		width: auto;
	}

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

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

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

	.hydro-home .work__grid > :nth-child(n),
	.hydro-home .work__grid:has(> [hidden]) > :nth-child(n) {
		grid-column: span 1;
		grid-row: auto;
	}

	.hydro-home .work__grid > :nth-child(n) > a {
		flex: none;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.hydro-home .reviews__side {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}

	.hydro-home .reviews__side h2 {
		flex: 1;
	}

	.hydro-home .hydro-greviews.score {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.hydro-home .hydro-rv__more {
		align-items: center;
		gap: 1.5rem;
	}

	.hydro-home .hydro-rv__all {
		width: auto;
	}

	/* "Show all" and "Read all reviews on Google" share one centred row (R / Reviews, tablet); the
	   widget's wrapper steps aside (display: contents) so its controls join the section's grid. */
	.hydro-home .reviews__main {
		display: grid;
		grid-template-columns: 1fr auto auto 1fr;
		gap: 1.5rem;
		align-items: center;
	}

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

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

	.hydro-home .reviews__main .hydro-rv__more {
		grid-column: 2;
		margin: 0;
	}

	.hydro-home .reviews__main .reviews__cta {
		grid-column: 3;
		margin: 0;
	}

	/* Without the spotlight (no JavaScript, or every review shown) the link sits centred below. */
	.hydro-home .reviews__main:not(:has(.hydro-rv__more:not([hidden]))) .reviews__cta {
		grid-column: 1 / -1;
	}

	.hydro-home .areas__map {
		gap: 2rem;
	}

	.hydro-home .estimate__copy .estimate__phone-k {
		display: inline-block;
		margin-right: 0.75rem;
	}

	.hydro-home .estimate__copy .estimate__phone-v {
		display: inline-block;
		margin-top: 0.875rem;
	}
}

/* ------------------------------------------------------------------ small phones (≤ 380) */
@media (max-width: 380px) {
	.hydro-home .why__intro .is-style-arrow-link a {
		font-size: 0.875rem;
	}

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

	.hydro-home .why__tall {
		width: 6.875rem;
		height: 8.75rem;
	}
}