/**
 * Service pages, approved Layout 01 (W2, 2026-10-25): the eight /services/<slug>/ pages built by
 * inc/service-sections.php (class prefix sl-; the 2026-10-20 svc-* classes stay in service.css until
 * every page is rebuilt).
 *
 * References: desktop frames 321:2 (Driveway & Patio, pilot) … 328:2; responsive page 07 section 13
 * (768 / 390 / 320) and the kit (R / Hero, R / Browse Services, R / Where We Work, R / What We Clean
 * Item, R / Gallery, R / FAQ Item, R / Service Card, R / Estimate). Mobile first: the base rules are
 * the 390 frames, sized with the W1 tokens (base.css), then tablet (768–1099) and desktop (≥ 1100)
 * use the approved frame values.
 *
 * Contrast on the page background: ink 14.5:1, muted 7.3:1, cobalt 11.4:1; cyan is used only for
 * decoration (bars, dots, the selected-thumbnail frame, the "&" at heading size).
 */

/* ------------------------------------------------------------------ shared */
:root {
	/* Chevron pointing up (mask): rotated for down, left and right. */
	--i-chevron: 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='2' stroke-linecap='round' stroke-linejoin='round' d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}

:is(.sl-hero, .sl-body, .sl-gal, .sl-faq, .sl-rel, .estimate--l01) {
	--sl-gap: var(--hydro-section);
}

:is(.sl-hero, .sl-body, .sl-gal, .sl-faq, .sl-rel, .estimate--l01) > .wrap {
	width: min(80rem, 100% - 2 * var(--hydro-gutter));
}

:is(.sl-over, .sl-what__head, .sl-gal, .sl-faq, .sl-rel) > h2,
:is(.sl-gal__in, .sl-faq__in, .sl-rel__in) > h2 {
	font-size: var(--hydro-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--ink);
	text-wrap: balance;
}

.sl-body,
.sl-faq,
.sl-rel {
	background: var(--page);
}

/* Approved crops (Figma image transforms) for photos shown cropped. */
.focal-y-0 img { object-position: 50% 0%; }
.focal-y-11 img { object-position: 50% 11%; }
.focal-y-15 img { object-position: 50% 15%; }
.focal-y-19 img { object-position: 50% 19%; }
.focal-y-20 img { object-position: 50% 20%; }
.focal-y-60 img { object-position: 50% 60%; }
.focal-y-61 img { object-position: 50% 61%; }
.focal-y-63 img { object-position: 50% 63%; }
.focal-y-80 img { object-position: 50% 80%; }
.focal-y-84 img { object-position: 50% 84%; }
.focal-y-90 img { object-position: 50% 90%; }
.focal-y-97 img { object-position: 50% 97%; }
.focal-y-100 img { object-position: 50% 100%; }

/* ------------------------------------------------------------------ hero (R / Hero) */
.sl-hero {
	padding-block: var(--hydro-hero-top) var(--hydro-section-tight);
	background: var(--page);
}

.sl-hero__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.sl-hero__in > * {
	max-width: 40rem;
}

.sl-hero .hydro-crumbs {
	margin: 0;
}

.sl-hero .hydro-crumbs ol {
	justify-content: center;
	text-align: center;
}

.sl-hero .sl-hero__title {
	font-size: var(--hydro-h1);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--ink);
}

/* Below 1100 px the title wraps naturally, balanced (R / Hero); the approved desktop line breaks
   (the .sl-hero__line spans) apply from 1100 px. */
.sl-hero .sl-hero__title {
	text-wrap: balance;
}

.sl-amp {
	font-weight: 500;
	color: var(--teal-deep);
}

.sl-hero .sl-hero__lead {
	font-size: var(--hydro-lead);
	line-height: 1.65;
	color: var(--muted);
	text-wrap: pretty;
}

.sl-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	padding-top: 0.75rem;
}

.sl-hero__actions .wp-block-buttons {
	justify-content: center;
	width: 100%;
}

.sl-hero__actions .wp-block-button {
	width: 100%;
	max-width: 26.25rem;
}

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

.sl-hero .sl-hero__call {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 0.3em;
	min-height: 2.75rem;
	font-size: var(--hydro-small);
	line-height: 1.7;
	color: var(--muted);
}

.sl-hero__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;
}

.sl-hero__call a:hover {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ body: overview, sidebar, what we clean */
.sl-body {
	padding-block: 0.5rem var(--sl-gap);
}

.sl-body__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

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

.sl-over .sl-over__lede {
	font-size: var(--hydro-lead);
	line-height: 1.6;
	color: var(--ink);
}

.sl-over__figure {
	margin-inline: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	background: var(--paper-2);
}

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

.sl-over > p:not(.sl-over__lede) {
	font-size: var(--hydro-body);
	line-height: 1.7;
	color: var(--muted);
}

:is(.sl-over, .sl-faq) p a {
	font-weight: 500;
	color: var(--ocean);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:is(.sl-over, .sl-faq) p a:hover {
	text-decoration-thickness: 2px;
}

/* Sidebar (R / Browse Services, R / Where We Work): after the overview, stacked on phones. */
.sl-side {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
}

.sl-side__card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.sl-side .sl-side__title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font: 600 var(--hydro-small) / 1.4 var(--sans);
	color: var(--ink);
}

.sl-side .sl-side__title::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--teal);
}

/* The heading names the list for every visitor; below 1100 px the disclosure button shows it. */
.js .sl-svcnav .sl-side__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sl-svcnav__toggle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "dot label chev" "dot hint chev";
	align-items: center;
	column-gap: 0.625rem;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 0.875rem 0.875rem 1rem;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
}

.sl-svcnav__toggle[hidden] {
	display: none;
}

.sl-svcnav__toggle::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--teal);
}

.sl-svcnav__label {
	flex: 1;
	font: 600 var(--hydro-small) / 1.4 var(--sans);
}

.sl-svcnav__hint {
	display: block;
	font: 400 var(--hydro-caption) / 1.4 var(--sans);
	color: var(--muted);
}

.sl-svcnav__toggle::before {
	grid-area: dot;
}

.sl-svcnav__label {
	grid-area: label;
}

.sl-svcnav__hint {
	grid-area: hint;
}

.sl-svcnav__chev {
	grid-area: chev;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--ink);
	-webkit-mask: var(--i-chevron) center / contain no-repeat;
	mask: var(--i-chevron) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.sl-svcnav__toggle[aria-expanded="false"] .sl-svcnav__chev {
	transform: rotate(180deg);
}

.sl-svcnav__toggle:focus-visible {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

.sl-svcnav__list {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 0 0.75rem 0.75rem;
	list-style: none;
}

.sl-svcnav__list[hidden] {
	display: none;
}

/* Without JavaScript the list is open and titled by the visible heading. */
html:not(.js) .sl-svcnav {
	padding: 1rem 0.75rem 0.75rem;
}

html:not(.js) .sl-svcnav .sl-side__title {
	margin: 0 0.25rem 0.75rem;
}

html:not(.js) .sl-svcnav__list {
	padding: 0;
}

.sl-svcnav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius);
	font: 500 var(--hydro-small) / 1.45 var(--sans);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sl-svcnav__list a::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background: var(--ocean);
	-webkit-mask: var(--i-arrow-up-right) center / contain no-repeat;
	mask: var(--i-arrow-up-right) center / contain no-repeat;
}

.sl-svcnav__list a:hover {
	border-color: var(--navy);
}

.sl-svcnav__list a[aria-current="page"] {
	border-color: var(--navy);
	background: var(--navy);
	font-weight: 600;
	color: #fff;
}

.sl-svcnav__list a[aria-current="page"]::after {
	background: var(--teal);
}

.sl-svcnav__list a:focus-visible {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

.sl-area {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem 1.125rem;
}

.sl-area p {
	font-size: var(--hydro-small);
	line-height: 1.65;
	color: var(--muted);
}

.sl-area .sl-area__call {
	display: flex;
	flex-direction: column;
	padding-top: 0.625rem;
	border-top: 1px solid var(--line-cool);
	line-height: 1.4;
}

.sl-area__call span {
	font-size: var(--hydro-caption);
}

.sl-area__call a {
	font: 600 var(--hydro-phone-display) / 1.2 var(--display);
	font-variant-numeric: lining-nums;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.sl-area__call a:focus-visible {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

/* What we clean (R / What We Clean Item). */
.sl-what {
	margin-top: var(--sl-gap);
}

.sl-what__head > * + * {
	margin-top: 0.75rem;
}

.sl-what .sl-what__intro {
	font-size: var(--hydro-body);
	line-height: 1.7;
	color: var(--muted);
}

.sl-what__list {
	margin-top: 1.25rem;
	border-bottom: 1px solid var(--line-cool);
}

.sl-what__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: 1rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--line-cool);
}

.sl-what__item::before {
	content: "";
	grid-row: 1 / span 2;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius);
	background: var(--wwc-icon, none) center / 1.6528rem no-repeat, var(--paper);
}

.sl-what__item > * {
	grid-column: 2;
}

.sl-what__item h3 {
	font-size: var(--hydro-h3);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
}

.sl-what__item p {
	margin-top: 0.375rem;
	font-size: var(--hydro-body);
	line-height: 1.65;
	color: var(--muted);
}

.sl-ico--driveway { --wwc-icon: url("../images/icons/wwc-driveway.svg"); }
.sl-ico--patio { --wwc-icon: url("../images/icons/wwc-patio.svg"); }
.sl-ico--walkway { --wwc-icon: url("../images/icons/wwc-walkway.svg"); }
.sl-ico--siding { --wwc-icon: url("../images/icons/wwc-siding.svg"); }
.sl-ico--brick { --wwc-icon: url("../images/icons/wwc-brick.svg"); }
.sl-ico--trim { --wwc-icon: url("../images/icons/wwc-trim.svg"); }
.sl-ico--concrete-other { --wwc-icon: url("../images/icons/wwc-concrete-other.svg"); }
.sl-ico--deck { --wwc-icon: url("../images/icons/wwc-deck.svg"); }
.sl-ico--fence { --wwc-icon: url("../images/icons/wwc-fence.svg"); }
.sl-ico--wood { --wwc-icon: url("../images/icons/wwc-wood.svg"); }
.sl-ico--restaurant { --wwc-icon: url("../images/icons/wwc-restaurant.svg"); }
.sl-ico--storefront { --wwc-icon: url("../images/icons/wwc-storefront.svg"); }
.sl-ico--building { --wwc-icon: url("../images/icons/wwc-building.svg"); }
.sl-ico--window-interior { --wwc-icon: url("../images/icons/wwc-window-interior.svg"); }
.sl-ico--window { --wwc-icon: url("../images/icons/wwc-window.svg"); }
.sl-ico--house-shop { --wwc-icon: url("../images/icons/wwc-house-shop.svg"); }
.sl-ico--exterior-wash { --wwc-icon: url("../images/icons/wwc-exterior-wash.svg"); }
.sl-ico--interior { --wwc-icon: url("../images/icons/wwc-interior.svg"); }
.sl-ico--hard-to-reach { --wwc-icon: url("../images/icons/wwc-hard-to-reach.svg"); }

/* Sister company band (Concrete Sealing; R / Sister Band, desktop 323:245): the approved homepage
   section, identical copy and photo. Phones and tablets: a full-width band straight above the gallery
   (photo, then copy; side by side on tablets); desktop: an inset card in the page body. */
.sister--inset {
	margin: var(--sl-gap) calc(-1 * var(--hydro-gutter)) 0;
	padding: var(--hydro-section) var(--hydro-gutter);
}

.sl-body:has(.sister--inset) {
	padding-bottom: 0;
}

.sister--inset .sister__in {
	width: auto;
	gap: 1.75rem;
}

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

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

.sister--inset .sister__copy > * + * {
	margin-top: 0.875rem;
}

.sister--inset .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);
}

.sister--inset .is-style-kicker::before {
	width: 1.75rem;
}

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

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

.sister--inset .wp-block-buttons {
	margin-top: 1.25rem;
}

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

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

/* ------------------------------------------------------------------ gallery (R / Gallery) */
.sl-gal {
	padding-block: var(--sl-gap);
	background: var(--paper);
}

.sl-gal__items {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.sl-gal__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--paper-2);
}

.sl-gal__item img,
.sl-gal__item.sl-ph {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

/* Caption chip: names the photo (no CP number, no town). */
.sl-gal__item figcaption {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - 1.5rem);
	margin: 0;
	padding: 0.3125rem 0.625rem;
	border-radius: var(--radius);
	background: #fff;
	font: 600 var(--hydro-caption) / 1.5 var(--sans);
	color: var(--ink);
}

.sl-gal__item figcaption::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 2px;
	background: var(--navy);
}

/* Enhanced (assets/js/service.js): one photo at a time, thumbnails and previous / next. */
.js .sl-gal__items > .sl-gal__item:not(:first-child),
.js .sl-gal.is-ready .sl-gal__items > .sl-gal__item:not(.is-current) {
	display: none;
}

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

.sl-gal__controls {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3rem;
	grid-template-areas: "thumbs thumbs thumbs" "prev status next";
	align-items: center;
	gap: 1.25rem 0.75rem;
	margin-top: 1.25rem;
}

.sl-gal__thumbs {
	position: relative;
	grid-area: thumbs;
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding: 3px;
	margin: -3px;
}

.sl-gal__thumb {
	position: relative;
	flex: none;
	width: 8.25rem;
	height: 5.5rem;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius);
	background: var(--paper-2);
	cursor: pointer;
	scroll-snap-align: start;
}

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

.sl-gal__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.sl-gal__thumb[aria-pressed="true"]::after {
	box-shadow: inset 0 0 0 3px var(--teal);
}

.sl-gal__thumb:focus-visible {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

/* The button itself is the shared Gallery Arrow (assets/css/components.css). */
.sl-gal__nav::before {
	content: "";
	width: 1.375rem;
	height: 1.375rem;
	background: currentColor;
	-webkit-mask: var(--i-chevron) center / contain no-repeat;
	mask: var(--i-chevron) center / contain no-repeat;
	transform: rotate(-90deg);
}

.sl-gal__next::before {
	transform: rotate(90deg);
}

.sl-gal__prev {
	grid-area: prev;
}

.sl-gal__next {
	grid-area: next;
}

.sl-gal__status {
	grid-area: status;
	margin: 0;
	font: 500 var(--hydro-small) / 1.5 var(--sans);
	text-align: center;
	color: var(--ink);
}

/* Restricted photo (local previews only): the slot is kept, the photo is not shown. */
.sl-ph {
	display: grid;
	place-items: center;
	padding: 1rem;
	border: 2px dashed var(--field-border);
	text-align: center;
	color: var(--ink);
}

.sl-ph__label {
	font: 600 var(--hydro-small) / 1.4 var(--sans);
}

/* ------------------------------------------------------------------ common questions (R / FAQ) */
.sl-faq {
	padding-block: var(--sl-gap);
}

.sl-faq__list {
	margin-top: 1.25rem;
	border-bottom: 1px solid var(--line-cool);
}

.sl-faq__list .wp-block-details {
	border-top: 1px solid var(--line-cool);
}

.sl-faq__list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.75rem;
	padding-block: 1rem;
	font: 600 var(--hydro-faq-q) / 1.4 var(--display);
	color: var(--ink);
	list-style: none;
	cursor: pointer;
}

.sl-faq__list summary::-webkit-details-marker {
	display: none;
}


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


.sl-faq__list summary:hover {
	color: var(--ocean);
}

.sl-faq__list summary:focus-visible {
	outline: var(--hydro-focus);
	outline-offset: 2px;
}

.sl-faq__list details p {
	padding: 0 0.5rem 1.25rem 0;
	font-size: var(--hydro-body);
	line-height: 1.7;
	color: var(--muted);
}

/* ------------------------------------------------------------------ related services (R / Service Card) */
.sl-rel {
	padding-bottom: var(--sl-gap);
}

.sl-rel__list {
	display: grid;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.sl-rel__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	padding: 1.125rem 1rem 1.125rem 1.25rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color 0.2s ease;
}

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

.sl-rel__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;
	transition: transform 0.25s var(--ease);
}

.sl-rel__card h3 {
	font-size: var(--hydro-h3);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* The whole card is the link; its title is the accessible name. */
.sl-rel__card h3 a {
	color: var(--ocean);
	text-decoration: none;
}

.sl-rel__card h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sl-rel__card h3 a:focus-visible {
	outline: none;
}

.sl-rel__card:has(a:focus-visible) {
	outline: 3px solid var(--navy-2);
	outline-offset: 2px;
}

.sl-rel__card:hover {
	border-color: var(--navy);
}

.sl-rel__card:hover::after {
	transform: translateX(4px);
}

.sl-rel__card p {
	margin-top: 0.25rem;
	font-size: var(--hydro-body);
	line-height: 1.6;
	color: var(--muted);
}

/* ------------------------------------------------------------------ estimate (R / Estimate) */
.estimate.estimate--l01 {
	padding-block: var(--sl-gap);
}

.estimate--l01 .estimate__in {
	gap: 1.75rem;
}

.estimate--l01 .estimate__copy {
	max-width: 40rem;
}

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

.estimate--l01 .estimate__copy > p {
	max-width: 40rem;
	margin-top: 0.875rem;
	font-size: var(--hydro-body);
	line-height: 1.7;
}

.estimate--l01 .estimate__contact {
	margin-top: 1.125rem;
}

.estimate--l01 .estimate__copy .estimate__phone-k {
	font-size: var(--hydro-small);
	line-height: 1.6;
}

.estimate--l01 .estimate__copy .estimate__phone-v {
	margin-top: 0;
}

.estimate--l01 .estimate__phone-v a {
	font: 600 var(--hydro-phone-display) / 1.3 var(--display);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.estimate--l01 .estimate__card {
	max-width: none;
	justify-self: stretch;
}

/* ------------------------------------------------------------------ tablet (768–1099) */
@media (min-width: 768px) and (max-width: 1099px) {
	.sl-hero__in > .sl-hero__lead {
		max-width: 36.25rem;
	}

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

	.sl-over > :is(h2, .sl-over__lede, p) {
		max-width: 40rem;
	}

	.sl-over__figure {
		aspect-ratio: 16 / 9;
	}

	.sl-side {
		grid-template-columns: minmax(0, 322fr) minmax(0, 358fr);
		align-items: start;
		gap: 1.5rem;
	}

	.sl-what__intro {
		max-width: 40rem;
	}

	/* R / Sister Band (774:7946): photo and copy side by side, 32 apart. */
	.sister--inset .sister__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem;
		align-items: center;
	}

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

	:is(.sl-gal__item img, .sl-gal__item.sl-ph) {
		aspect-ratio: 16 / 9;
	}

	.sl-gal__thumb {
		width: 9.375rem;
		height: 6.25rem;
	}

	.estimate--l01 .estimate__in {
		gap: 2.5rem;
	}

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

/* ------------------------------------------------------------------ desktop (≥ 1100): frames 321:2–328:2 */
@media (min-width: 1100px) {
	:is(.sl-hero, .sl-body, .sl-gal, .sl-faq, .sl-rel, .estimate--l01) {
		--sl-gap: 6.5rem;
	}

	:is(.sl-hero, .sl-body, .sl-gal, .sl-faq, .sl-rel, .estimate--l01) > .wrap {
		width: min(80rem, 100% - 2 * var(--gutter));
	}

	:is(.sl-over, .sl-what__head, .sl-gal__in, .sl-rel__in) > h2 {
		font-size: 2.5rem;
		line-height: 1.12;
		letter-spacing: -0.035em;
	}

	/* Hero */
	.sl-hero {
		padding-block: 5.5rem 3.5rem;
	}

	.sl-hero__in {
		gap: 1.5rem;
	}

	.sl-hero__in > * {
		max-width: 43.75rem;
	}

	.sl-hero__line {
		display: block;
	}

	.sl-hero .sl-hero__title {
		font-size: 4.6rem;
		line-height: 1;
		letter-spacing: -0.048em;
	}

	.sl-hero .sl-hero__lead {
		font-size: 1.18rem;
	}

	/* Frames 321:2–328:2: 60 from the lead to the button, the phone line 14 below it (46 tall). */
	.sl-hero__actions {
		gap: 0;
		padding-top: 2.25rem;
	}

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

	.sl-hero__actions .wp-block-button .wp-block-button__link {
		min-height: 3.6rem;
		padding: 0.9rem 1.9rem;
		font-size: 1.0625rem;
		line-height: 1.2;
	}

	.sl-hero .sl-hero__call {
		box-sizing: border-box;
		min-height: 2.875rem;
		padding-top: 0.875rem;
		font-size: 0.9375rem;
	}

	/* Body: sidebar (340) beside the overview (868), What we clean full width below. */
	.sl-body {
		padding-block: 5.5rem var(--sl-gap);
	}

	.sl-body__in {
		grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr);
		column-gap: 4.5rem;
		align-items: start;
	}

	.sl-over {
		grid-column: 2;
		grid-row: 1;
	}

	.sl-side {
		grid-column: 1;
		grid-row: 1;
		gap: 1.5rem;
		margin-top: 0;
	}

	.sl-body__in > :is(.sl-what, .sister--inset) {
		grid-column: 1 / -1;
	}

	.sl-over h2 {
		max-width: 35.5rem;
	}

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

	.sl-over .sl-over__figure {
		margin-top: 2.5rem;
		aspect-ratio: 16 / 10;
	}

	.sl-over > p:not(.sl-over__lede) {
		max-width: 44rem;
		font-size: 1.0625rem;
	}

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

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

	/* Sidebar: the list always open, titled by its heading. */
	.js .sl-svcnav .sl-side__title {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.sl-svcnav__toggle {
		display: none;
	}

	.sl-svcnav__list[hidden] {
		display: grid;
	}

	.sl-side__card,
	html:not(.js) .sl-svcnav {
		padding: 1.4375rem;
	}

	.sl-side .sl-side__title,
	html:not(.js) .sl-svcnav .sl-side__title {
		gap: 0.65rem;
		margin: 0;
		font-size: 1.1875rem;
		line-height: 1.65;
		letter-spacing: -0.015em;
	}

	.sl-side .sl-side__title::before {
		width: 0.55rem;
		height: 0.55rem;
	}

	.sl-svcnav__list,
	html:not(.js) .sl-svcnav__list {
		gap: 0.5rem;
		padding: 1rem 0 0;
	}

	.sl-svcnav__list a {
		min-height: 3.0469rem;
		padding: 0.6875rem 0.8125rem;
		font-size: 0.9375rem;
		line-height: 1.65;
	}

	.sl-area {
		gap: 0;
	}

	.sl-area p {
		margin-top: 0.875rem;
		font-size: 0.9375rem;
	}

	.sl-area .sl-area__call {
		padding-top: 0;
		border: 0;
	}

	.sl-area__call span {
		font-size: 0.875rem;
	}

	.sl-area__call a {
		font-size: 1.375rem;
		line-height: 1.4;
		text-decoration: none;
	}

	.sl-area__call a:hover {
		text-decoration: underline;
	}

	/* What we clean: heading block (400) beside the list (784), 104 below the taller of overview and
	   sidebar (frames 322:2, 325:2, 327:2; the other frames vary between 112 and 220). */
	.sl-body__in > .sl-what {
		display: grid;
		grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
		column-gap: 6rem;
		align-items: start;
		margin-top: var(--sl-gap);
	}

	.sl-what__head > * + * {
		margin-top: 1.125rem;
	}

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

	.sl-what__head::after {
		content: "";
		display: block;
		width: 4rem;
		height: 3px;
		margin-top: 1.125rem;
		background: var(--teal);
	}

	.sl-what__list {
		margin-top: 0;
	}

	.sl-what__item {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: 2rem;
		padding-block: 1.75rem;
	}

	.sl-what__item::before {
		width: 4.5rem;
		height: 4.5rem;
		background-size: 2.125rem, auto;
	}

	.sl-what__item h3 {
		font-size: 1.5rem;
		line-height: 1.25;
		letter-spacing: -0.02em;
	}

	.sl-what__item p {
		margin-top: 0.5rem;
		font-size: 1rem;
	}

	/* Sister band (frame 323:245): an inset card in the page body. */
	.sister--inset {
		margin-inline: 0;
		padding: 3.5rem;
		border-radius: var(--radius);
	}

	.sl-body:has(.sister--inset) {
		padding-bottom: var(--sl-gap);
	}

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

	.sister--inset .sister__in {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: 4.5rem;
		align-items: center;
	}

	.sister--inset .sister__media {
		aspect-ratio: 597.8 / 421.27;
	}

	.sister--inset .sister__title {
		font-size: 2.125rem;
	}

	/* Gallery: the lead photo (1280 × 520), then previous · thumbnails · next. */
	.sl-gal__items {
		margin-top: 2rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.js .sl-gal__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.js :is(.sl-gal__item img, .sl-gal__item.sl-ph) {
		aspect-ratio: 1280 / 520;
	}

	.sl-gal__item figcaption {
		bottom: 1rem;
		left: 1rem;
		padding: 0.4375rem 0.75rem;
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	.sl-gal__item figcaption::before {
		width: 0.875rem;
		background: var(--teal);
	}

	.sl-gal__controls {
		grid-template-areas: "prev thumbs next";
		gap: 1rem;
		margin-top: 2rem;
	}

	.sl-gal__thumbs {
		justify-content: center;
		gap: 1rem;
	}

	.sl-gal__thumb {
		width: 12.5rem;
		height: 8rem;
	}

	.sl-gal__thumb[aria-pressed="false"] img {
		opacity: 0.7;
		transition: opacity 0.2s ease;
	}

	.sl-gal__thumb:hover img {
		opacity: 1;
	}

	/* Desktop: the arrows sit at the two ends of the thumbnail row, vertically centred. */
	.sl-gal__nav {
		align-self: center;
	}

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

	/* Common questions: heading (503) beside the list (705). */
	.sl-faq__in {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 4.5rem;
		align-items: start;
	}

	.sl-faq {
		padding-bottom: 0;
	}

	.sl-faq__in > h2 {
		font-size: 2.125rem;
		line-height: 1.12;
		letter-spacing: -0.035em;
	}

	.sl-faq__list {
		margin-top: 0;
	}

	.sl-faq__list summary {
		min-height: 4.5rem;
		font-size: 1.1875rem;
	}

	.sl-faq__list details p {
		max-width: 40rem;
		padding: 0 3.5rem 1.6rem 0;
		font-size: 1.0625rem;
	}

	/* Related services: three cards. */
	.sl-rel {
		padding-block: var(--sl-gap);
	}

	.sl-rel__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
		margin-top: 2.5rem;
	}

	.sl-rel__card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
		padding: 2rem 2rem 1.75rem;
	}

	.sl-rel__card::before {
		content: "";
		order: -1;
		width: 3rem;
		height: 3px;
		background: var(--teal);
	}

	.sl-rel__card::after {
		width: 1.5rem;
		height: 1.5rem;
	}

	.sl-rel__card h3 {
		font-size: 1.375rem;
	}

	.sl-rel__card p {
		margin-top: 0;
	}

	/* Estimate: copy (503) beside the form card (640). */
	.estimate--l01 .estimate__in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4.5rem;
		align-items: center;
	}

	.estimate--l01 h2 {
		font-size: 3rem;
		letter-spacing: -0.035em;
	}

	.estimate--l01 .estimate__copy > p {
		max-width: 28rem;
		margin-top: 1.25rem;
		font-size: 1.0625rem;
	}

	.estimate--l01 .estimate__contact {
		max-width: 28rem;
		margin-top: 2rem;
		padding-top: 1.75rem;
		border-top: 1px solid rgb(255 255 255 / 0.18);
	}

	.estimate--l01 .estimate__copy .estimate__phone-k {
		font-size: 0.9375rem;
	}

	.estimate--l01 .estimate__phone-v a {
		font-size: 2rem;
		line-height: 1.2;
		text-decoration: none;
	}

	.estimate--l01 .estimate__phone-v a:hover {
		text-decoration: underline;
	}

	.estimate--l01 .estimate__card {
		max-width: 40rem;
		justify-self: end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-svcnav__chev,
	.sl-rel__card::after,
	.sl-gal__thumb img {
		transition: none;
	}
}