/**
 * Service pages, V3 "Modern Conversion" (W8, 2026-10-28): the eight main service pages and the three
 * Jeffersonville service pages, built by inc/service-v3-sections.php inside the page group "v3".
 *
 * References: V3 master 944:46100 / 949:46108 and the page frames on the Stage-Design board 1092:56300
 * (main services 1092:56303; Jeffersonville 956:46510 / 944:46100 / 958:46100 and their 768 / 390 / 320
 * frames). Mobile first: the base rules are the 390 frames, then tablet (768–1099) and desktop (≥ 1100).
 * The sections V3 keeps from Layout 01 (overview, what we clean, gallery, FAQ, estimate, sister band)
 * keep their assets/css/service-layout.css rules; this file only sets the V3 bands, spacing and the new
 * parts (split hero, trust bar, inline actions, service cards, before / after compare).
 *
 * Contrast: white on navy 14.9:1, #e3f1ff (on-dark) on navy 12.6:1, muted on white 7.3:1, cobalt on
 * white 11.4:1, the star colour only beside text that states the rating.
 */

.v3 {
	--sl-gap: var(--hydro-section);
}

.v3 :is(.v3-trust, .v3-over, .v3-svc, .v3-what, .v3-sister, .v3-compare) > .wrap,
.v3 :is(.sl-gal, .sl-faq, .estimate--l01) > .wrap {
	width: min(80rem, 100% - 2 * var(--hydro-gutter));
}

/* Kicker: no rule line before it (owner rule, 2026-10-27). */
.v3 .v3-kicker {
	margin: 0;
	font: 600 var(--hydro-kicker) / 1.5 var(--sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ocean);
}

/* ------------------------------------------------------------------ actions (button + phone line) */
.v3 .v3-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
}

.v3 .v3-actions .wp-block-buttons {
	width: 100%;
}

.v3 .v3-actions .wp-block-button {
	width: 100%;
}

.v3 .v3-actions .wp-block-button__link {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.9375rem 1.75rem;
	font: 700 var(--hydro-button) / 1.4 var(--sans);
}

.v3 .v3-actions__call {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 0.3em;
	min-height: 2.75rem;
	margin: 0;
	font: 400 var(--hydro-small) / 1.6 var(--sans);
	color: var(--muted);
}

.v3 .v3-actions__call a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.v3 .v3-actions__call a:hover {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ hero (split; photo band on top below 1100) */
.v3 .v3-hero {
	display: flex;
	flex-direction: column;
	background: var(--navy);
}

.v3 .v3-hero__photo {
	order: -1;
	margin: 0;
	height: 15.625rem;
	overflow: hidden;
	background: var(--navy-2);
}

.v3 .v3-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v3 .v3-hero__in {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: min(40rem, 100%);
	margin-inline: auto;
	padding: 2rem var(--hydro-gutter) 2.75rem;
}

.v3 .v3-hero .hydro-crumbs {
	margin: 0;
	font: 500 var(--hydro-breadcrumb) / 1.8 var(--sans);
}

.v3 .v3-hero .hydro-crumbs li {
	min-width: 0;
	overflow-wrap: anywhere;
}

.v3 .v3-hero .hydro-crumbs li + li::before {
	margin: 0 0.375rem;
}

/* A four-step trail (the Jeffersonville service pages) fits one line in the fallback font but wraps to
   two once Poppins has loaded, which pushed the whole hero down by one line (layout shift 0.15 at 390).
   Phones reserve the two lines from the start (R1.7). */
@media (max-width: 767px) {
	.v3 .v3-hero .hydro-crumbs:has(li:nth-child(4)) {
		min-height: calc(2 * 1.8 * var(--hydro-breadcrumb));
	}
}

.v3 .v3-hero .hydro-crumbs [aria-current="page"] {
	color: #fff;
}

.v3 .v3-hero__title {
	margin: 0;
	font: 600 2.5rem / 1.04 var(--display);
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.v3 .v3-hero__title .sl-amp {
	font-weight: inherit;
	color: var(--teal);
}

.v3 .v3-hero__lead {
	margin: 0;
	font: 400 1.125rem / 1.65 var(--sans);
	color: var(--on-dark);
	text-wrap: pretty;
}

.v3 .v3-hero__actions {
	padding-top: 0.75rem;
}

.v3 .v3-hero .v3-actions__call {
	color: var(--on-dark-muted);
}

.v3 .v3-hero .v3-actions__call a {
	color: #fff;
}

.v3 .v3-hero .v3-actions__call a:focus-visible,
.v3 .v3-hero .hydro-crumbs a:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 2px;
}

.v3 .v3-hero .wp-block-shortcode:has(.v3-hero__badge),
.v3 .v3-hero p:has(> .v3-hero__badge) {
	margin: 0;
}

.v3 .v3-hero__badge {
	align-self: flex-start;
}

/* ------------------------------------------------------------------ trust bar */
.v3 .v3-trust {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--line-cool);
	background: #fff;
}

.v3 .v3-trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.v3 .v3-trust__fact {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.v3 .v3-trust__key {
	font: 600 1.1875rem / 1.25 var(--display);
	color: var(--ink);
}

.v3 .v3-trust__sub {
	font: 400 0.8125rem / 1.5 var(--sans);
	color: var(--muted);
}

.v3 .v3-trust__stars {
	margin-right: 0.3em;
	letter-spacing: 0.04em;
	color: var(--c-star);
}

/* Short labels below 1100 px, long labels on desktop. */
.v3 .v3-trust__l {
	display: none;
}

/* ------------------------------------------------------------------ overview (Layout 01 section + actions) */
.v3 .v3-over {
	padding-block: 3rem 3.5rem;
	background: var(--page);
}

.v3 .v3-over .sl-over > * + * {
	margin-top: 1.25rem;
}

.v3 .v3-over h2 {
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.v3 .v3-over .sl-over__lede {
	font-size: 1.0625rem;
}

.v3 .v3-over .sl-over > p:not(.sl-over__lede) {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.v3 .v3-over__actions {
	margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ service cards */
.v3 .v3-svc {
	padding-block: 3.5rem;
	background: var(--paper);
}

.v3 .v3-svc__in {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.v3 .v3-svc__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-align: center;
}

.v3 .v3-svc__head h2 {
	margin: 0;
	font: 600 var(--hydro-h2) / 1.15 var(--display);
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: balance;
}

.v3 .v3-svc__sub {
	margin: 0;
	font: 400 var(--hydro-body) / 1.6 var(--sans);
	color: var(--muted);
	text-wrap: pretty;
}

.v3 .v3-cards {
	display: grid;
	gap: 0.625rem;
}

/* Phone: name and line beside the arrow; the whole card is the link (the title's link covers it). */
.v3 .v3-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.25rem;
	margin: 0;
	padding: 1.125rem 1rem 1.125rem 1.25rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color 0.15s var(--ease);
}

.v3 .v3-card:hover {
	border-color: var(--ocean);
}

.v3 .v3-card::after {
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--ocean);
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.v3 .v3-card__title {
	grid-column: 1;
	margin: 0;
	font: 600 1.1875rem / 1.25 var(--sans);
	letter-spacing: -0.01em;
	color: var(--ocean);
}

.v3 .v3-card__title a {
	color: inherit;
	text-decoration: none;
}

.v3 .v3-card__title a::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--radius);
}

.v3 .v3-card__title a:focus-visible {
	outline: none;
}

.v3 .v3-card__title a:focus-visible::before {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

.v3 .v3-card__text {
	grid-column: 1;
	margin: 0;
	font: 400 var(--hydro-body) / 1.6 var(--sans);
	color: var(--muted);
}

/* The current service (navy card, as in the frames). */
.v3 .v3-card--current {
	border-color: var(--navy);
	background: var(--navy);
}

.v3 .v3-card--current .v3-card__title {
	color: #fff;
}

.v3 .v3-card--current .v3-card__text {
	color: var(--on-dark);
}

.v3 .v3-card--current::after {
	background: var(--teal);
}

.v3 .v3-card--current .v3-card__title a:focus-visible::before {
	outline-color: var(--teal);
}

.v3 .v3-svc__note {
	margin: 0;
	font: 400 var(--hydro-small) / 1.6 var(--sans);
	color: var(--muted);
	text-align: center;
}

/* ------------------------------------------------------------------ what we clean / what we seal */
.v3 .v3-what {
	padding-block: 3rem 3.5rem;
	background: var(--page);
}

.v3 .v3-what .sl-what {
	margin-top: 0;
}

.v3 .v3-what .sl-what__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Item text as the shared row (Figma R / What We Clean Item 733:55): 16 / 1.65 on phones and tablets;
   17 / 1.7 from 1100 (below). */
.v3 .v3-what .sl-what__item p {
	font-size: 1rem;
	line-height: 1.65;
}

/* ------------------------------------------------------------------ sister band (Concrete Sealing) */
.v3 .v3-sister {
	background: var(--page);
}

.v3 .v3-sister .sister--inset {
	margin-top: 0;
}

/* ------------------------------------------------------------------ gallery, FAQ, estimate (Layout 01 sections) */
.v3 .sl-faq {
	padding-bottom: var(--sl-gap);
}

/* ------------------------------------------------------------------ before / after (owner-confirmed pairs only, inc/photo-pairs.php)
 * The service-page slider (.cmp-gal, Figma R1 1118:85379 / 85657 / 85758 / 85859): navy band, one
 * comparison at a time and the gallery viewer's pair thumbnails (assets/js/service.js). Phones and
 * tablets: the caption under the photo and the thumbnails alone; desktop: a 2 : 1 photo with the caption
 * chip inside, the thumbnails between the two Gallery Arrows. The tiles (.cmp--tile, homepage and Our
 * Work): a 4 : 3 comparison with the project tiles' caption row. */
.v3-compare {
	padding-block: var(--hydro-section);
	background: var(--navy);
	color: #fff;
}

.v3-compare h2 {
	font: 600 var(--hydro-h2) / 1.15 var(--display);
	letter-spacing: -0.03em;
	color: #fff;
}

.v3-compare__lead {
	margin-top: 0.75rem;
	color: var(--on-dark);
}

.cmp-gal__items {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.js .cmp-gal__items > .cmp:not(:first-child),
.js .cmp-gal.is-ready .cmp-gal__items > .cmp:not(.is-current) {
	display: none;
}

.js .cmp-gal.is-ready .cmp-gal__items > .cmp.is-current {
	display: block;
}

.cmp {
	margin: 0;
}

.cmp__frame {
	--cut: 50%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	background: var(--navy-2);
}

.cmp__frame :is(.cmp__after, .cmp__before) {
	position: absolute;
	inset: 0;
	margin: 0;
}

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

.cmp__before {
	clip-path: inset(0 calc(100% - var(--cut)) 0 0);
}

.cmp__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cut);
	width: 3px;
	margin-left: -1.5px;
	background: var(--teal);
	pointer-events: none;
}

/* HYDRO / Compare Handle (Figma R1.1 1131:101361): a 48 px white circle with a 3 px cyan ring, two navy
   chevrons and a soft shadow, centred on the divider. Focus (the range input has it): cobalt ring and
   a 3 px cobalt halo. */
.cmp__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3rem;
	height: 3rem;
	box-sizing: border-box;
	border: 3px solid var(--teal);
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7 4.5 12l5 5M14.5 7l5 5-5 5' fill='none' stroke='%2309265C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
	box-shadow: 0 6px 16px rgb(9 38 92 / 0.24);
	transform: translate(-50%, -50%);
}

.cmp__frame:has(.cmp__range:focus-visible) .cmp__handle::after {
	border-color: var(--ocean);
	box-shadow: 0 0 0 3px var(--ocean), 0 6px 16px rgb(9 38 92 / 0.24);
}

.cmp__label {
	position: absolute;
	top: 0.75rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius);
	background: rgb(var(--shade-rgb) / 0.82);
	font: 600 var(--hydro-caption) / 1.4 var(--sans);
	color: #fff;
	pointer-events: none;
}

.cmp__label--before {
	left: 0.75rem;
}

.cmp__label--after {
	right: 0.75rem;
}

/* The native range covers the frame: drag, tap and the arrow keys move the split. */
.cmp__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.cmp__frame:has(.cmp__range:focus-visible) {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

.cmp__caption {
	margin-top: 0.625rem;
	font: 600 var(--hydro-small) / 1.5 var(--sans);
	color: var(--on-dark);
}

/* Slider controls (the gallery viewer's): below desktop only the pair thumbnails, three to a row; the
   status stays for screen readers. */
.cmp-gal .sl-gal__controls {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "thumbs";
	margin-top: 1rem;
}

.cmp-gal .sl-gal__nav {
	display: none;
}

.cmp-gal .sl-gal__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cmp-gal .sl-gal__thumbs {
	gap: 0.875rem;
}

.cmp-gal .sl-gal__thumb {
	flex: 0 0 calc((100% - 2 * 0.875rem) / 3);
	width: auto;
	height: auto;
	aspect-ratio: 225 / 140;
	background: var(--navy-2);
}

/* A pair thumbnail: the after photo with the before photo over its left half, split by a white line. */
.sl-gal__thumb--cmp img {
	position: absolute;
	inset: 0;
}

.sl-gal__thumb--cmp img + img {
	clip-path: inset(0 50% 0 0);
}

.sl-gal__thumb--cmp::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
	background: #fff;
}

/* Tiles (Figma "C / Before-After Tile"): 4 : 3, solid navy labels, the caption row of the project tiles. */
.cmp--tile .cmp__frame {
	border-radius: var(--radius-lg);
}

.cmp--tile .cmp__label {
	background: var(--navy);
}

.cmp--tile .cmp__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	margin: 0.75rem 0 0;
	font: 500 0.9375rem / 1.5 var(--sans);
	color: var(--ink);
}

.cmp__cap {
	flex: 1 1 0;
	min-width: 0;
}

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

/* ------------------------------------------------------------------ small phones (≤ 359) */
@media (max-width: 359px) {
	.v3 .v3-hero__photo {
		height: 13.75rem;
	}

	.v3 .v3-hero__title {
		font-size: 2.125rem;
	}

	.v3 .v3-hero__lead {
		font-size: 1.0625rem;
	}

	/* Google badge on one line, as in the 320 frames (it wrapped into three rows). */
	.v3 .hydro-greviews.v3-hero__badge {
		flex-wrap: nowrap;
		gap: 0.625rem;
		padding: 0.5rem 0.75rem 0.5rem 0.5rem;
	}

	.v3 .v3-hero__badge .hydro-greviews__logo {
		width: 4.75rem;
	}

	.v3 .v3-hero__badge .hydro-greviews__rating {
		padding-left: 0.625rem;
		font-size: 1.375rem;
	}

	.v3 .v3-hero__badge .hydro-greviews__meta {
		font-size: 0.8125rem;
	}

	.v3 .v3-trust__key {
		font-size: 1.0625rem;
	}

	.v3 .v3-over h2 {
		font-size: 1.625rem;
	}

	.v3 .v3-card__title {
		font-size: 1.125rem;
	}
}

/* ------------------------------------------------------------------ tablet (768–1099) */
@media (min-width: 768px) and (max-width: 1099px) {
	.cmp-gal .cmp__frame {
		aspect-ratio: 704 / 436;
	}

	.v3 .v3-hero__photo {
		height: 23.75rem;
	}

	.v3 .v3-hero__in {
		padding: 3.5rem 2rem;
	}

	.v3 .v3-hero__title {
		font-size: 3.5rem;
	}

	.v3 .v3-hero__lead {
		font-size: 1.25rem;
	}

	.v3 .v3-hero__actions {
		align-items: flex-start;
	}

	.v3 .v3-actions .wp-block-buttons,
	.v3 .v3-actions .wp-block-button,
	.v3 .v3-actions .wp-block-button__link {
		width: auto;
	}

	.v3 .v3-actions {
		align-items: flex-start;
	}

	.v3 .v3-actions__call {
		justify-content: flex-start;
	}

	.v3 .v3-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.v3 .v3-over {
		padding-block: 4.5rem 5rem;
	}

	.v3 .v3-over h2 {
		font-size: 2.125rem;
	}

	.v3 .v3-over .sl-over__lede {
		max-width: 40rem;
		font-size: 1.125rem;
	}

	.v3 .v3-over .sl-over__figure {
		aspect-ratio: 704 / 395;
	}

	.v3 .v3-svc {
		padding-block: 5rem;
	}

	.v3 .v3-svc__head {
		max-width: 40rem;
		align-self: center;
	}

	.v3 .v3-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 1rem;
	}

	.v3 .v3-card {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		align-items: start;
		row-gap: 0.75rem;
		padding: 1.75rem;
	}

	.v3 .v3-card::before {
		content: "";
		width: 2.5rem;
		height: 3px;
		background: var(--teal);
	}

	.v3 .v3-card::after {
		grid-column: 1;
		grid-row: auto;
		width: 1.25rem;
		height: 1.25rem;
	}

	.v3 .v3-card__title {
		font-size: 1.25rem;
	}

	.v3 .v3-card__text {
		font-size: 1.0625rem;
	}

	.v3 .v3-svc__actions {
		align-self: center;
		align-items: center;
	}

	.v3 .v3-what {
		padding-block: 4.5rem 5rem;
	}

}

/* ------------------------------------------------------------------ desktop (≥ 1100) */
@media (min-width: 1100px) {
	.v3 {
		--sl-gap: 7rem;
	}

	.v3 :is(.v3-trust, .v3-over, .v3-svc, .v3-what, .v3-sister, .v3-compare) > .wrap,
	.v3 :is(.sl-gal, .sl-faq, .estimate--l01) > .wrap {
		width: min(80rem, 100% - 2 * var(--gutter));
	}

	/* Hero: navy panel (left half) and the job photo (right half), 710 tall in the frames. */
	.v3 .v3-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 44.375rem;
	}

	/* The photo fills its half at the panel's height: positioned, so a portrait photo (Drone Washing,
	   CV-02) cannot stretch the row. */
	.v3 .v3-hero__photo {
		position: relative;
		order: 0;
		height: auto;
	}

	.v3 .v3-hero__photo img {
		position: absolute;
		inset: 0;
	}

	.v3 .v3-hero__panel {
		display: flex;
		align-items: center;
	}

	/* The text starts on the same left edge as the 1280 content column of the sections below. */
	.v3 .v3-hero__in {
		gap: 1.75rem;
		width: auto;
		margin: 0;
		padding: 6rem 3.5rem 5.5rem max(var(--gutter), (100vw - 80rem) / 2);
	}

	.v3 .v3-hero__in > * {
		max-width: 36.5rem;
	}

	.v3 .v3-hero .hydro-crumbs {
		font-size: 0.9375rem;
	}

	.v3 .v3-hero__title {
		font-size: 4.6rem;
		line-height: 1;
		letter-spacing: -0.0475em;
	}

	.v3 .v3-hero__title--long {
		font-size: 4rem;
	}

	.v3 .v3-hero__lead {
		font-size: 1.25rem;
	}

	.v3 .v3-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.75rem;
	}

	.v3 .v3-actions .wp-block-buttons,
	.v3 .v3-actions .wp-block-button,
	.v3 .v3-actions .wp-block-button__link {
		width: auto;
	}

	.v3 .v3-actions .wp-block-button__link {
		min-height: 3.625rem;
		padding: 0.9rem 1.9rem;
		font-size: 1.0625rem;
	}

	.v3 .v3-actions__call {
		justify-content: flex-start;
		font-size: 0.9375rem;
	}

	.v3 .v3-hero__badge {
		margin-top: 1rem;
	}

	/* Trust bar: four facts, hairline dividers between them. */
	.v3 .v3-trust {
		padding-block: 2.25rem;
	}

	.v3 .v3-trust__list {
		grid-template-columns: 18.4375rem repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.v3 .v3-trust__fact + .v3-trust__fact {
		padding-left: 2rem;
		border-left: 1px solid var(--line);
	}

	.v3 .v3-trust__key {
		font-size: 1.625rem;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}

	.v3 .v3-trust__sub {
		font-size: 0.875rem;
	}

	.v3 .v3-trust__l {
		display: inline;
	}

	.v3 .v3-trust__s {
		display: none;
	}

	.v3 .v3-trust__fact--rating .v3-trust__key {
		display: grid;
	}

	.v3 .v3-trust__fact--rating .v3-trust__stars {
		font: 400 1rem / 1.2 var(--sans);
	}

	/* Overview: text (600) beside the photo (600 × 580), 80 apart. */
	.v3 .v3-over {
		padding-block: 7rem;
	}

	.v3 .v3-over .sl-over {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 5rem;
		align-items: start;
	}

	.v3 .v3-over .sl-over > * {
		grid-column: 1;
	}

	.v3 .v3-over .sl-over > .sl-over__figure {
		grid-column: 2;
		grid-row: 1 / span 6;
		margin-top: 0;
		aspect-ratio: 600 / 580;
	}

	.v3 .v3-over h2 {
		font-size: 2.5rem;
		line-height: 1.12;
		letter-spacing: -0.035em;
	}

	.v3 .v3-over .sl-over__lede {
		font-size: 1.3125rem;
	}

	.v3 .v3-over .sl-over > p:not(.sl-over__lede) + p {
		margin-top: 1rem;
	}

	.v3 .v3-over .sl-over__lede + p {
		margin-top: 2.5rem;
	}

	.v3 .v3-over__actions {
		margin-top: 2.25rem;
	}

	/* Service cards: heading (left), four columns, the actions under them. */
	.v3 .v3-svc {
		padding-block: 7rem;
	}

	.v3 .v3-svc__in {
		gap: 2.5rem;
	}

	.v3 .v3-svc__head {
		max-width: 53.75rem;
		text-align: left;
	}

	.v3 .v3-svc__head h2 {
		font-size: 2.5rem;
		letter-spacing: -0.035em;
	}

	.v3 .v3-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 2.5rem 1.5rem;
	}

	.v3 .v3-card {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		align-items: start;
		row-gap: 0.875rem;
		padding: 2rem 2rem 1.75rem;
	}

	.v3 .v3-card::before {
		content: "";
		width: 3rem;
		height: 3px;
		background: var(--teal);
	}

	.v3 .v3-card::after {
		grid-column: 1;
		grid-row: auto;
		width: 1.5rem;
		height: 1.5rem;
	}

	.v3 .v3-card__title {
		font-size: 1.375rem;
	}

	.v3 .v3-card__text {
		font-size: 1rem;
		line-height: 1.65;
	}

	.v3 .v3-svc__note {
		text-align: left;
		font-size: 0.9375rem;
	}

	/* What we clean: heading block (400) beside the list (784), as Layout 01. */
	.v3 .v3-what {
		padding-block: 7rem 7.5rem;
	}

	.v3 .v3-what .sl-what {
		display: grid;
		grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
		column-gap: 6rem;
		align-items: start;
	}

	.v3 .v3-what .sl-what__item p {
		font-size: 1.0625rem;
		line-height: 1.7;
	}

	/* Concrete Coating Bros band (Figma R1 1118:86527): its own white band, 96 above and below the
	   inset card; the heading on one line (34 px, -1.19 tracking), the kicker in sentence case. */
	.v3 .v3-sister {
		padding-block: 6rem;
	}

	.v3 .v3-sister .sister--inset .is-style-kicker {
		font-size: 0.9375rem;
		letter-spacing: 0;
		text-transform: none;
	}

	.v3 .v3-sister .sister--inset .sister__title {
		letter-spacing: -0.035em;
	}

	.v3 .v3-sister .sister--inset .wp-block-button__link {
		font: 700 1rem / 1.2 var(--sans);
		padding: 0.75rem 1.35rem;
	}

	/* FAQ: heading (440) beside the list (705), 135 apart. */
	.v3 .sl-faq {
		padding-block: 7rem 7.5rem;
	}

	.v3 .sl-faq__in {
		grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr);
		column-gap: 8.4375rem;
	}

	.v3 .sl-faq__in > h2 {
		padding-top: 1.375rem;
	}

	.v3 .sl-faq__list summary {
		min-height: 5.5rem;
	}

	.v3 .estimate.estimate--l01 {
		padding-block: 6.5rem;
	}

	.v3-compare h2 {
		font-size: 2.5rem;
	}

	.cmp-gal__items {
		margin-top: 2rem;
	}

	.cmp-gal--narrow .cmp-gal__items {
		max-width: 60rem;
		margin-inline: auto;
	}

	.cmp-gal .cmp {
		position: relative;
	}

	.cmp-gal .cmp__frame {
		aspect-ratio: 2 / 1;
	}

	.cmp-gal .cmp__label {
		top: 1rem;
	}

	.cmp-gal .cmp__label--before {
		left: 1rem;
	}

	.cmp-gal .cmp__label--after {
		right: 1rem;
	}

	/* The caption chip of the gallery (no dash), inside the photo; it never takes the drag. */
	.cmp-gal .cmp__caption {
		position: absolute;
		bottom: 1rem;
		left: 1rem;
		max-width: calc(100% - 2rem);
		margin: 0;
		padding: 0.4375rem 0.75rem;
		border-radius: var(--radius);
		background: #fff;
		font-size: 0.8125rem;
		line-height: 1.3;
		color: var(--ink);
		pointer-events: none;
	}

	.cmp-gal .sl-gal__controls {
		grid-template-columns: 3rem auto 3rem;
		grid-template-areas: "prev thumbs next";
		justify-content: center;
		gap: 1rem;
		margin-top: 2rem;
	}

	.cmp-gal .sl-gal__nav {
		display: grid;
	}

	.cmp-gal .sl-gal__thumbs {
		gap: 1rem;
	}

	.cmp-gal .sl-gal__thumb {
		flex: none;
		width: 12.5rem;
		height: 8rem;
		aspect-ratio: auto;
	}
}

/* ------------------------------------------------------------------ R1 section order (owner, 2026-10-29)
 * Overview, What we clean, gallery, (before / after), service cards (hydro_v3_page_markup()).
 * Tablet and phones: What we clean follows the overview on the same background, so the overview's
 * bottom padding is the only gap (Figma R1 768 / 390 / 320: top padding 0). Two light-blue sections
 * next to each other (the gallery, then the service cards) get the 1 px divider the design uses
 * between same-coloured bands. */
.v3 .sl-gal + .v3-svc {
	border-top: 1px solid var(--line-cool);
}

@media (max-width: 1099px) {
	.v3 .v3-over + .v3-what {
		padding-top: 0;
	}

	/* Concrete Sealing: the full-width sister band and the gallery are both light blue below 1100. */
	.v3 .v3-sister + .sl-gal {
		border-top: 1px solid var(--line-cool);
	}
}

/* ------------------------------------------------------------------ V3 hero on other pages (R1.1)
 * Services Overview and the six city pages: the same split hero in a "v3" group
 * (hydro_v3_page_hero()). The six cities share one height and a 60 px desktop H1, so every city name
 * sits on the second line (Figma R1.1 1127:101531–101726, desktop min height 683). */
@media (min-width: 1100px) {
	.v3-page-hero--city .v3-hero {
		min-height: 42.6875rem;
	}

	/* The longest leads (Louisville, New Albany) fit inside the shared 683 px height. */
	.v3-page-hero--city .v3-hero__in {
		padding-block: 5.75rem 5.25rem;
	}

	.v3-page-hero--city .v3-hero__title,
	.v3-page-hero--city .v3-hero__title--long {
		font-size: 3.75rem;
	}

	/* Desktop line breaks as in the frames: "Pressure Washing in / <City>, ST" and "Pressure Washing /
	   & Exterior Cleaning / Services" (balanced wrapping would move "in" and "Cleaning"). */
	.v3-page-hero .v3-hero__title {
		text-wrap: wrap;
	}
}

/* ------------------------------------------------------------------ trust bar · R1.3 (owner-approved 2026-10-29)
 * HYDRO / Trust Bar / V3 (Figma 1147:46192): four facts in equal cells, each group (headline and second
 * line, plus the stars) centered horizontally and vertically in its own cell, with short dividers
 * centered between the cells. Phones: a 2 × 2 grid with a divider between the columns and one between
 * the rows. Tablet: four cells in a row. Desktop: four equal cells (the Google cell is no longer
 * narrower). Same type, colours and words as before. */
.v3 .v3-trust__list {
	gap: 0;
}

.v3 .v3-trust__fact {
	position: relative;
	justify-content: center;
	align-items: center;
	padding: 0 0.5rem;
	text-align: center;
}

.v3 .v3-trust__fact:nth-child(-n + 2) {
	padding-bottom: 1rem;
}

.v3 .v3-trust__fact:nth-child(n + 3) {
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* Column divider (phones): 32 px, centered on the content of its row. */
.v3 .v3-trust__fact:nth-child(even)::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 0.5rem);
	width: 1px;
	height: 2rem;
	background: var(--line);
	transform: translateY(-50%);
}

.v3 .v3-trust__fact:nth-child(4)::before {
	top: calc(50% + 0.5rem);
}

@media (min-width: 768px) {
	.v3 .v3-trust__fact,
	.v3 .v3-trust__fact:nth-child(-n + 2),
	.v3 .v3-trust__fact:nth-child(n + 3) {
		padding: 0 0.75rem;
		border-top: 0;
	}

	.v3 .v3-trust__fact + .v3-trust__fact::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 2.25rem;
		background: var(--line);
		transform: translateY(-50%);
	}
}

@media (min-width: 1100px) {
	.v3 .v3-trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.v3 .v3-trust__fact + .v3-trust__fact {
		padding-left: 0.75rem;
		border-left: 0;
	}

	.v3 .v3-trust__fact + .v3-trust__fact::before {
		height: 3rem;
	}

	.v3 .v3-trust__fact--rating .v3-trust__key {
		justify-items: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.v3 .v3-card {
		transition: none;
	}
}