/*
 * Cyrus Services theme styles.
 *
 * Mobile first: base rules target phones (320px up); enhancements at
 * 48rem (768px), 64rem (1024px), and 80rem (1280px).
 * Colors, type sizes, and spacing come from theme.json presets.
 */

:root {
	--cs-radius-s: 6px;
	--cs-radius-m: 10px;
	--cs-target: 44px;
	--cs-line: var(--wp--preset--color--line);
	--cs-line-strong: var(--wp--preset--color--line-strong);
	--cs-focus: var(--wp--preset--color--blue-ink);
	--cs-mobile-bar-height: 4.25rem;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: 1rem;
	scroll-padding-bottom: calc(var(--cs-mobile-bar-height) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--cs-focus);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Dark surfaces: navy groups and photo heroes (Cover blocks with a navy overlay).
 * Headings, links, focus, and outline buttons switch to the on-dark roles. Kept at low
 * specificity with :where() so white components inside (the chooser card) can reset them.
 */
:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) a:not(.wp-element-button) {
	color: var(--wp--preset--color--white);
}

:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) {
	--cs-focus: var(--wp--preset--color--sky);
}

/*
 * Secondary text on navy: mist (8.35:1), never the light-surface muted grey (2.19:1).
 * :is() (not :where) so it outranks the light-surface `.cs-section-head p` rule further down.
 */
:is(.has-navy-background-color, .has-navy-deep-background-color) :is(.cs-note, .cs-section-head p:not(.has-lead-font-size)) {
	color: var(--wp--preset--color--mist);
}

/*
 * Text over photos: #dce6f0 keeps at least 5:1 even where the 80% navy overlay sits on a
 * white area of the photo (worst case); plain white is at least 6.6:1.
 */
.wp-block-cover:not(.is-light) :is(.cs-lead, .cs-hero__note, .cs-hero__call, .cs-eyebrow, p) {
	color: #dce6f0;
}

/* White cards inside a dark hero go back to the light-surface roles */
.wp-block-cover .cs-chooser {
	--cs-focus: var(--wp--preset--color--blue-ink);
	color: var(--wp--preset--color--ink);
}

.wp-block-cover .cs-chooser h2 {
	color: var(--wp--preset--color--navy);
}

/* ---------- Buttons ---------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cs-target);
	text-align: center;
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgb(255 255 255 / 0.1);
}

/* ---------- Utility bar (768px and up) ---------- */

.cs-utility {
	display: none;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
}

.cs-utility__inner {
	min-height: 2.75rem;
	gap: 0.25rem 1.5rem;
}

.cs-utility p {
	margin: 0;
}

.cs-utility a {
	display: inline-flex;
	align-items: center;
	min-height: var(--cs-target);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.cs-utility__links a + a {
	margin-left: 1.5rem;
}

.cs-utility :focus-visible {
	outline-color: var(--wp--preset--color--sky);
}

@media (min-width: 48rem) {
	.cs-utility {
		display: block;
	}
}

/* ---------- Header ---------- */

.site-header {
	position: relative;
	z-index: 50;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--cs-line);
}

.cs-header__inner {
	min-height: 4rem;
	gap: 0.75rem;
}

.cs-header__logo {
	margin: 0;
	flex: none;
}

.cs-header__logo img {
	display: block;
	width: clamp(150px, 44vw, 200px) !important;
	height: auto;
	aspect-ratio: 440 / 164;
}

.cs-header__logo a {
	display: block;
}

/* Specificity beats core's `body .is-layout-flex { display: flex }` */
.site-header .cs-header__cta {
	display: none;
}

@media (min-width: 48rem) {
	body:not(.editor-styles-wrapper) .site-header {
		position: sticky;
		top: 0;
	}

	html {
		scroll-padding-top: 5.5rem;
		scroll-padding-bottom: 1rem;
	}

	.cs-header__inner {
		min-height: 4.5rem;
	}

	.site-header .cs-header__cta {
		display: flex;
		flex: none;
	}
}

/* ---------- Navigation ---------- */

/* Push the menu (and the estimate button after it) to the right; beats core's flex-child margin reset */
.cs-header__inner > .cs-nav {
	margin-left: auto;
}

/* Menu button: a labelled "Menu" button, not an icon */
.cs-nav .wp-block-navigation__responsive-container-open,
.cs-nav .wp-block-navigation__responsive-container-close {
	min-height: var(--cs-target);
	padding: 0 1rem;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--cs-radius-s);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	font-size: 1rem;
	align-items: center;
}

/* Keep the menu collapsed until 1280px (core collapses only below 600px) */
@media (min-width: 600px) and (max-width: 79.99rem) {
	.cs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Full-screen menu overlay (phones and tablets): left-aligned, large targets */
.cs-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	padding: 1rem clamp(1rem, 0.5rem + 2.5vw, 2rem) 2rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	text-align: left;
}

.cs-nav .is-menu-open .wp-block-navigation-item,
.cs-nav .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
}

.cs-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1rem;
	right: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

.cs-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	gap: 0;
	align-items: stretch;
}

.cs-nav .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
}

.cs-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--cs-line);
}

.cs-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	font-size: 1.1875rem;
	font-weight: 700;
	text-decoration: none;
}

.cs-nav .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.5rem 1rem !important;
	gap: 0;
}

.cs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.cs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: var(--cs-target);
	font-size: 1.0625rem;
	font-weight: 600;
}

/* Estimate and call buttons appear only inside the open overlay */
.cs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .cs-nav__cta {
	display: none;
}

.cs-nav .is-menu-open .cs-nav__cta {
	display: grid;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1.5rem;
}

.cs-nav .is-menu-open .cs-nav__cta .wp-block-button,
.cs-nav .is-menu-open .cs-nav__cta .wp-block-button__link {
	width: 100%;
}

/* Desktop menu (1280px and up) */
@media (min-width: 80rem) {
	.cs-nav .wp-block-navigation__container {
		gap: 0.25rem;
	}

	.cs-nav .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: var(--cs-target);
		padding: 0 0.625rem;
		border-radius: var(--cs-radius-s);
		color: var(--wp--preset--color--navy);
		text-decoration: none;
		white-space: nowrap;
	}

	.cs-nav .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--paper);
	}

	.cs-nav .wp-block-navigation__submenu-container {
		min-width: 15rem !important;
		padding: 0.5rem !important;
		border: 1px solid var(--cs-line-strong) !important;
		border-radius: var(--cs-radius-m);
		box-shadow: var(--wp--preset--shadow--raise);
	}

	.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: 100%;
		padding: 0.5rem 0.75rem;
	}
}

/* 1280–1439px: eight menu items (Home to Careers, D35) stay on one line with tighter spacing */
@media (min-width: 80rem) and (max-width: 89.99rem) {
	.cs-nav .wp-block-navigation__container {
		gap: 0.125rem;
	}

	.cs-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0 0.4375rem;
		font-size: 0.9375rem;
	}
}

/* Submenu toggle arrow: at least 24×24px (WCAG 2.2 target size, 2.5.8) */
.cs-nav .wp-block-navigation__submenu-icon {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: 0;
	padding: 0;
	border-radius: var(--cs-radius-s);
}

.cs-nav .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
}

/* Division emblems on the Services submenu items */
.cs-nav :is(.cs-nav-emblem-cleaning, .cs-nav-emblem-maintenance) > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.45rem;
	margin-right: 0.625rem;
	background: center / contain no-repeat;
}

.cs-nav .cs-nav-emblem-cleaning > .wp-block-navigation-item__content::before {
	background-image: url(../images/emblem-cleaning.png);
}

.cs-nav .cs-nav-emblem-maintenance > .wp-block-navigation-item__content::before {
	background-image: url(../images/emblem-maintenance.png);
}

/* ---------- Sections ---------- */

/* Phones: tighter rhythm keeps the long homepage scannable; full spacing from 768px */
.cs-section {
	padding-block: 2.5rem;
}

@media (min-width: 48rem) {
	.cs-section {
		padding-block: var(--wp--preset--spacing--90);
	}
}

/*
 * Full-width sections sit flush against each other; their own padding provides the rhythm.
 * Without this, core's block gap leaves a white strip between two coloured sections.
 */
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Two plain white sections in a row: the first one's bottom padding is enough separation */
.cs-section:not(.has-background) + .cs-section:not(.has-background) {
	padding-top: 0;
}

/*
 * Section headings stay left-aligned with the content below them. Core's constrained layout
 * centers any direct child that has its own max-width, so the reading-width limit goes on the
 * heading group's children, never on the heading or group itself.
 */
.cs-section > h2 {
	margin-bottom: var(--wp--preset--spacing--60);
}

.cs-section-head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.cs-section-head > * {
	max-width: 45rem;
	margin-block: 0;
}

.cs-section-head > * + * {
	margin-top: 1rem;
}

.cs-section-head p:not(.has-lead-font-size) {
	color: var(--wp--preset--color--muted);
}

.cs-section-head .has-lead-font-size {
	color: var(--wp--preset--color--ink);
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .cs-section-head p {
	color: var(--wp--preset--color--mist);
}

.cs-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Photo heroes (Cover blocks: home and inner pages) ---------- */

/*
 * Core gives covers a 430px minimum and 1em padding; heroes size to their content instead.
 * Phones: an even 80% navy overlay behind full-width text. From 1024px the overlay becomes a
 * gradient, solid behind the text column and lighter on the right, so the photo shows.
 */
.wp-block-cover:is(.cs-hero, .cs-page-hero) {
	min-height: 0;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	align-items: center;
}

@media (min-width: 64rem) {
	.wp-block-cover:is(.cs-hero, .cs-page-hero.has-photo) > .wp-block-cover__background {
		opacity: 1 !important;
		background: linear-gradient(90deg, rgb(2 43 78 / 0.96) 0%, rgb(2 43 78 / 0.9) 45%, rgb(2 43 78 / 0.45) 100%) !important;
	}
}

.wp-block-cover.cs-hero {
	padding-block: 1.5rem 2rem;
}

.cs-hero .cs-chooser {
	box-shadow: 0 18px 40px -18px rgb(1 31 57 / 0.55);
}

.cs-hero__grid {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

.cs-hero__grid > *,
.cs-hero__text > * {
	margin-block: 0;
}

.cs-hero__text > * + * {
	margin-top: 1rem;
}

.cs-eyebrow {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	font-size: 0.9375rem;
}

.cs-hero h1 {
	line-height: 1.06;
	letter-spacing: -0.015em;
	max-width: 16ch;
}

.cs-lead {
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.cs-hero__call {
	color: var(--wp--preset--color--muted);
}

/* Phones: the sticky bar carries Call + Estimate, so the three client buttons fit on the first screen */
@media (max-width: 47.99rem) {
	.cs-hero__actions,
	.cs-hero__call {
		display: none !important;
	}

	.wp-block-cover.cs-hero {
		padding-block: 1.25rem 1.5rem;
	}

	.cs-hero__grid {
		gap: 1.25rem;
	}

	.cs-hero__text > * + * {
		margin-top: 0.75rem;
	}

	.cs-eyebrow {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.cs-hero h1 {
		font-size: clamp(1.875rem, 1.3rem + 2.9vw, 2.125rem) !important;
	}

	.cs-chooser {
		padding: 0.875rem;
	}

	.cs-chooser h2 {
		margin-bottom: 0.5rem;
		font-size: 1.1875rem !important;
	}

	.is-style-chooser a {
		min-height: 3.25rem;
		padding-block: 0.5rem;
	}
}

@media (min-width: 48rem) {
	.wp-block-cover.cs-hero {
		padding-block: var(--wp--preset--spacing--80);
	}

	.cs-hero__grid {
		gap: 2rem;
	}

	.cs-hero__text > .cs-hero__actions {
		margin-top: 2rem;
	}
}

@media (min-width: 64rem) {
	.cs-hero__grid {
		grid-template-columns: 7fr 5fr;
		gap: 3rem;
	}
}

/* ---------- Client-type chooser ---------- */

.cs-chooser {
	padding: 1rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
}

.cs-chooser > * {
	margin-block: 0;
}

.cs-chooser h2 {
	margin-bottom: 0.75rem;
}

.is-style-chooser {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-chooser a {
	position: relative;
	display: block;
	min-height: 3.5rem;
	padding: 0.625rem 2.75rem 0.625rem 1rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-s);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	text-decoration: none;
}

.is-style-chooser a:hover {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--paper);
}

.is-style-chooser strong {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: 1.0625rem;
}

.is-style-chooser br {
	display: none;
}

.is-style-chooser a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2.5px solid var(--wp--preset--color--navy);
	border-right: 2.5px solid var(--wp--preset--color--navy);
	transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 48rem) {
	.cs-chooser {
		padding: 1.5rem;
		box-shadow: var(--wp--preset--shadow--raise);
	}

	.is-style-chooser {
		gap: 0.75rem;
	}

	.is-style-chooser a {
		min-height: 4.5rem;
		padding-block: 0.875rem;
		font-size: 0.9375rem;
	}

	.is-style-chooser strong {
		font-size: 1.1875rem;
	}
}

/* ---------- Trust strip ---------- */

.cs-trust {
	border-block: 1px solid var(--cs-line);
	padding-block: 0.5rem;
}

.is-style-trust {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.is-style-trust li {
	padding: 0.875rem 0;
	border-top: 1px solid var(--cs-line);
}

.is-style-trust li:first-child {
	border-top: 0;
}

.is-style-trust strong {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
}

.is-style-trust br {
	display: none;
}

/* Dark trust band under the hero: white titles, mist details, a teal check on each point */
.cs-trust.has-background {
	border-block: 0;
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .is-style-trust {
	color: var(--wp--preset--color--mist);
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .is-style-trust strong {
	color: var(--wp--preset--color--white);
}

:where(.has-navy-background-color, .has-navy-deep-background-color) .is-style-trust li {
	border-color: rgb(255 255 255 / 0.14);
}

.cs-trust .is-style-trust li {
	position: relative;
	padding-left: 2rem;
}

.cs-trust .is-style-trust li::before {
	content: "";
	position: absolute;
	top: 1.2rem;
	left: 0.2rem;
	width: 0.5rem;
	height: 0.95rem;
	border-right: 3px solid var(--wp--preset--color--teal);
	border-bottom: 3px solid var(--wp--preset--color--teal);
	transform: rotate(45deg);
}

/* One row of however many points there are, from 768px */
@media (min-width: 48rem) {
	.cs-trust {
		padding-block: 1.25rem;
	}

	.is-style-trust {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.is-style-trust li {
		padding: 0.25rem 1.5rem;
		border-top: 0;
		border-left: 1px solid var(--cs-line);
	}

	.is-style-trust li:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.cs-trust {
		padding-block: 1.5rem;
	}

	.cs-trust .is-style-trust li {
		padding-left: 3.25rem;
	}

	.cs-trust .is-style-trust li::before {
		top: 0.4rem;
		left: 1.6rem;
	}

	.cs-trust .is-style-trust li:first-child {
		padding-left: 1.75rem;
	}

	.cs-trust .is-style-trust li:first-child::before {
		left: 0.2rem;
	}

	.cs-trust.has-background .is-style-trust li {
		border-left-color: rgb(255 255 255 / 0.14);
	}
}

/* ---------- Checklists: what's included, room by room (D46) ---------- */

.cs-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-checklist li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.75rem;
}

/* The same teal tick as the trust strip; decorative, the text carries the meaning */
.cs-checklist li::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: 0.35rem;
	width: 0.4rem;
	height: 0.8rem;
	border-right: 3px solid var(--wp--preset--color--teal-ink);
	border-bottom: 3px solid var(--wp--preset--color--teal-ink);
	transform: rotate(45deg);
}

.cs-checklist-grid {
	margin-bottom: 1.5rem;
}

/* Reviews next to a service (D46): only rendered when a matching collection exists */
.cs-service-reviews__label {
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

/* Footer credentials line (D46): underlined, as links inside a sentence (outranks ".cs-footer a") */
.cs-footer .cs-footer__credentials a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Grids and cards ---------- */

.cs-grid-3 {
	display: grid;
	gap: 1.25rem;
}

.cs-grid-3 > * {
	margin-block: 0;
}

@media (min-width: 48rem) {
	.cs-mechanisms {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.cs-grid-3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
}

.wp-block-group.is-style-card > * {
	margin-block: 0;
}

@media (min-width: 48rem) {
	.wp-block-group.is-style-card {
		padding: 1.5rem;
	}
}

.is-style-card :is(h2, h3) a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.is-style-card :is(h2, h3) a:hover {
	text-decoration: underline;
}

/* Tile: a card whose only link is its title. The title link covers the whole card, so the
   card is one large target, and the focus ring outlines the card (D39). */
.wp-block-group.cs-card-link {
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-card-link :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-block-group.cs-card-link:hover {
	border-color: var(--wp--preset--color--blue);
	box-shadow: var(--wp--preset--shadow--raise);
}

.cs-card-link:has(:is(h2, h3) a:focus-visible) {
	outline: 3px solid var(--cs-focus);
	outline-offset: 2px;
}

.cs-card-link :is(h2, h3) a:focus-visible {
	outline: none;
}

@supports not selector(:has(a)) {
	.cs-card-link :is(h2, h3) a:focus-visible {
		outline: 3px solid var(--cs-focus);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.cs-card-link {
		transition: none;
	}
}

/* A tile whose page isn't published yet shows no link (D44), so it mustn't look clickable */
.wp-block-group.cs-card-link:not(:has(a)):hover {
	border-color: var(--cs-line-strong);
	box-shadow: none;
}

.cs-grid-2 {
	display: grid;
	gap: 1.25rem;
}

.cs-grid-2 > * {
	margin-block: 0;
}

@media (min-width: 48rem) {
	.cs-grid-2,
	.cs-grid-3--pairs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 64rem) {
	.cs-grid-3--pairs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Titled points in two columns (Our Standard, team, records) */
.cs-points {
	row-gap: 1.75rem;
}

@media (min-width: 64rem) {
	.cs-points {
		column-gap: 3rem;
	}
}

/* Card lists: bullets inside cards, and plain lists in scope sheets */
.is-style-card ul:not([class*="is-style-"]),
.is-style-card ol:not([class*="is-style-"]) {
	margin: 0;
	padding-left: 1.25rem;
}

.is-style-card li + li {
	margin-top: 0.375rem;
}

.is-style-card .is-style-links li + li {
	margin-top: 0;
}

/* Client cards (D24): navy header with the client label, then the photo, then that client's services */
.wp-block-group.is-style-card.cs-client {
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-color: var(--cs-line);
	box-shadow: var(--wp--preset--shadow--raise);
}

.cs-client__head {
	padding: 1.125rem 1.25rem 1.25rem;
}

.cs-client__head > * {
	margin-block: 0;
}

.cs-client__title {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.cs-client__head .cs-client__title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: var(--cs-target);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.cs-client__head .cs-client__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Chevron: the whole label is the link to that client's page */
.cs-client__title a::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	margin-right: 0.35rem;
	border-top: 3px solid var(--wp--preset--color--teal);
	border-right: 3px solid var(--wp--preset--color--teal);
	transform: rotate(45deg);
}

.cs-client__head .cs-client__for {
	color: var(--wp--preset--color--mist);
	font-weight: 500;
}

.cs-client > .wp-block-image img {
	border-radius: 0;
}

.cs-client__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.cs-client__body > * {
	margin-block: 0;
}

.cs-client__body h4:not(:first-child) {
	margin-top: 0.75rem;
}

.cs-client__cta {
	margin-top: auto !important;
	padding-top: 0.75rem;
}

.cs-client__cta .wp-block-button,
.cs-client__cta .wp-block-button__link {
	width: 100%;
}

@media (min-width: 48rem) {
	.cs-client__head {
		padding: 1.25rem 1.5rem 1.375rem;
	}

	.cs-client__body {
		padding: 1.5rem;
	}
}

.cs-mechanism {
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--navy);
}

.cs-mechanism > * {
	margin-block: 0;
}

.cs-mechanism > * + * {
	margin-top: 0.375rem;
}

.cs-mechanism p {
	color: var(--wp--preset--color--muted);
}

/* ---------- Lists ---------- */

.is-style-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-links li {
	display: flex;
	align-items: center;
	min-height: var(--cs-target);
	border-bottom: 1px solid var(--cs-line);
}

/* Plain-text rows aren't tap targets, so they can be tighter (shorter cards on phones) */
.is-style-links li:not(:has(a)) {
	min-height: 2.25rem;
	padding: 0.375rem 0;
}

.is-style-links li a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--cs-target);
	font-weight: 600;
}

.is-style-columns {
	columns: 4 8rem;
	column-gap: 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.is-style-columns li {
	break-inside: avoid;
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--cs-line);
}

/* Numbered steps: stacked on phones, a row of five from 1024px */
.is-style-steps {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cs-step;
	color: var(--wp--preset--color--muted);
}

.is-style-steps li {
	position: relative;
	min-height: 2.25rem;
	padding-left: 3.25rem;
	counter-increment: cs-step;
}

.is-style-steps li::before {
	content: counter(cs-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.is-style-steps strong {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: 1.0625rem;
}

.is-style-steps br {
	display: none;
}

/* One row of however many steps there are; stacked-only lists (narrow request pages) opt out */
@media (min-width: 64rem) {
	.is-style-steps:not(.cs-steps-stacked) {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.is-style-steps:not(.cs-steps-stacked) li {
		padding: 3.25rem 0 0;
	}
}

/* ---------- Comparison (labelled pairs, no sideways scrolling) ---------- */

.cs-compare {
	display: grid;
	gap: 0.75rem;
}

.cs-compare > * {
	margin-block: 0;
}

.cs-compare__row {
	display: grid;
	gap: 0.625rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
}

.cs-compare__row > * {
	margin-block: 0;
}

.cs-compare__them,
.cs-compare__us {
	line-height: 1.45;
}

.cs-compare__them {
	color: var(--wp--preset--color--muted);
}

.cs-compare__them strong,
.cs-compare__us strong {
	display: block;
	margin-bottom: 0.125rem;
	font-size: var(--wp--preset--font-size--small);
}

.cs-compare__us strong {
	color: var(--wp--preset--color--navy);
}

.cs-compare br {
	display: none;
}

@media (min-width: 64rem) {
	.cs-compare__row {
		grid-template-columns: 1fr 1.4fr 1.4fr;
		gap: 2rem;
		align-items: start;
	}
}

/* ---------- FAQ (native details, no JavaScript) ---------- */

.cs-faq .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--cs-line-strong);
}

.cs-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--cs-line-strong);
}

.cs-faq .wp-block-details summary {
	position: relative;
	display: block;
	min-height: var(--cs-target);
	padding: 1rem 2.5rem 1rem 0;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.cs-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.cs-faq .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 1.35rem;
	right: 0.5rem;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
}

.cs-faq .wp-block-details[open] summary::after {
	transform: rotate(-135deg);
	top: 1.6rem;
}

.cs-faq .wp-block-details > p {
	margin: 0;
	padding-bottom: 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Final call to action ---------- */

.cs-cta-band .wp-block-buttons {
	gap: 0.75rem;
}

@media (max-width: 29.99rem) {
	.cs-cta-band .wp-block-button,
	.cs-cta-band .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Emblem headings (block styles) ---------- */

:is(.is-style-emblem-cleaning, .is-style-emblem-maintenance, .is-style-emblem-company) {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

:is(.is-style-emblem-cleaning, .is-style-emblem-maintenance, .is-style-emblem-company)::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.65em;
	background: center / contain no-repeat;
}

.is-style-emblem-cleaning::before {
	background-image: url(../images/emblem-cleaning.png);
}

.is-style-emblem-maintenance::before {
	background-image: url(../images/emblem-maintenance.png);
}

.is-style-emblem-company::before {
	background-image: url(../images/emblem-services.png);
}

:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) .is-style-emblem-cleaning::before {
	background-image: url(../images/emblem-cleaning-silver.png);
}

:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) .is-style-emblem-maintenance::before {
	background-image: url(../images/emblem-maintenance-silver.png);
}

:where(.has-navy-background-color, .has-navy-deep-background-color, .wp-block-cover:not(.is-light)) .is-style-emblem-company::before {
	background-image: url(../images/emblem-services-silver.png);
}

/* ---------- Page head and breadcrumbs ---------- */

.cs-page-head {
	padding-block: 1.25rem 0.5rem;
}

.cs-page-head > * {
	margin-block: 0;
}

.cs-page-head > * + * {
	margin-top: 0.75rem;
}

/* Hero-led pages: only the breadcrumbs sit above the hero */
.cs-page-head--crumbs {
	padding-block: 0.875rem;
}

/* ---------- Page hero (client, service, hub, and company pages): photo Cover, text on the left ---------- */

.wp-block-cover.cs-page-hero {
	padding-block: 2rem 2.25rem;
}

.cs-page-hero__text > * {
	margin-block: 0;
}

.cs-page-hero__text > * + * {
	margin-top: 1rem;
}

/* Reading widths live on the children: core's constrained layout would centre a narrower group */
.cs-page-hero h1 {
	max-width: 22ch;
	letter-spacing: -0.01em;
}

.cs-page-hero__text > p {
	max-width: 46ch;
}

.cs-hero__note {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 47.99rem) {
	.cs-page-hero h1 {
		font-size: clamp(1.75rem, 1.2rem + 2.75vw, 2.125rem) !important;
	}

	.cs-page-hero__text > * + * {
		margin-top: 0.75rem;
	}
}

@media (min-width: 48rem) {
	.wp-block-cover.cs-page-hero {
		padding-block: var(--wp--preset--spacing--80);
	}

	.cs-page-hero__text > .cs-hero__actions {
		margin-top: 1.75rem;
	}
}

@media (min-width: 64rem) {
	.wp-block-cover.cs-page-hero.has-photo {
		min-height: 28rem;
	}
}

/* ---------- Photos (Image block styles; placeholders keep the same crop as real photos) ---------- */

.wp-block-image:is(.is-style-photo, .is-style-photo-wide) {
	margin: 0;
}

.wp-block-image:is(.is-style-photo, .is-style-photo-wide) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--cs-radius-m);
	background: var(--wp--preset--color--paper);
}

.wp-block-image.is-style-photo-wide img {
	aspect-ratio: 16 / 9;
}

.is-style-card > .wp-block-image:first-child img {
	border-radius: var(--cs-radius-s);
}

/* Gallery: one column per client type, photos stacked under a navy label (D38) */
.cs-gallery__col,
.cs-gallery__photos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cs-gallery__photos {
	gap: 1.25rem;
}

.cs-gallery__col > *,
.cs-gallery__photos > *,
.cs-gallery__head > * {
	margin-block: 0;
}

.wp-block-group.cs-gallery__head {
	padding: 1rem 1.25rem 1.125rem;
	border-radius: var(--cs-radius-s);
}

.cs-gallery__title {
	font-size: var(--wp--preset--font-size--title-md);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.cs-gallery__head .cs-gallery__for {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.cs-gallery .wp-element-caption {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-align: start;
}

/* From 768px the three columns sit side by side (other 3-up grids wait until 1024px);
   the labels share one row height so the photos line up even when a label wraps */
@media (min-width: 48rem) {
	.cs-grid-3.cs-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1rem;
	}

	@supports (grid-template-rows: subgrid) {
		.cs-gallery__col {
			display: grid;
			grid-row: span 2;
			grid-template-rows: subgrid;
			row-gap: 1rem;
		}
	}
}

@media (min-width: 64rem) {
	.cs-grid-3.cs-gallery {
		column-gap: 1.5rem;
	}
}

/* Text beside a photo: stacked on phones (text first), side by side from 1024px */
.cs-split {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

.cs-split > *,
.cs-split .cs-section-head {
	margin-block: 0;
}

.cs-split__text > * {
	margin-block: 0;
}

.cs-split__text > * + * {
	margin-top: 1.25rem;
}

@media (min-width: 64rem) {
	.cs-split {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

/* ---------- Google reviews (D27): rating card, then the review plugin's grid ---------- */

.cs-reviews__head {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

.cs-reviews__head > *,
.cs-reviews__head .cs-section-head {
	margin-block: 0;
}

@media (min-width: 64rem) {
	.cs-reviews__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
		gap: 3rem;
	}
}

.cs-rating {
	padding: 1.25rem 1.5rem 1.5rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
	background: var(--wp--preset--color--white);
}

.cs-rating > * {
	margin-block: 0;
}

.cs-rating > * + * {
	margin-top: 0.5rem;
}

.cs-rating__score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
}

.cs-rating__score strong {
	color: var(--wp--preset--color--navy);
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Decorative stars: the rating is already in the text ("5.0 out of 5") */
.cs-rating__score::before {
	content: "★★★★★";
	content: "★★★★★" / "";
	flex-basis: 100%;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--gold);
	font-size: 1.5rem;
	letter-spacing: 0.12em;
	line-height: 1;
}

.cs-rating__count {
	color: var(--wp--preset--color--muted);
}

.cs-rating__actions {
	gap: 0.75rem;
	padding-top: 0.5rem;
}

/* Navy band (homepage) */
.cs-reviews.has-navy-background-color .cs-rating {
	border-color: rgb(255 255 255 / 0.18);
	background: rgb(255 255 255 / 0.06);
}

.cs-reviews.has-navy-background-color .cs-rating__score strong {
	color: var(--wp--preset--color--white);
}

.cs-reviews.has-navy-background-color :is(.cs-rating__score, .cs-rating__count) {
	color: var(--wp--preset--color--mist);
}

@media (max-width: 29.99rem) {
	.cs-rating__actions .wp-block-button,
	.cs-rating__actions .wp-block-button__link {
		width: 100%;
	}
}

/*
 * The review plugin's Grid widget (Rich Showcase for Google Reviews 7.1.1), restyled to the
 * site's cards. The plugin marks most of its rules !important, so colors go through its own
 * custom properties and the few layout overrides carry !important with a longer selector.
 * Its header repeats the rating card, so only the "powered by Google" attribution is kept,
 * moved under the grid.
 */
.cs-reviews .wp-gr {
	--rev-color: var(--wp--preset--color--white);
	--text-color: var(--wp--preset--color--ink);
	/* Gold alone is under 3:1 on white; the gold/gold-ink blend is about 3.5:1 */
	--rpi-star-color: var(--wp--preset--color--gold-ink);
	--rpi-star-color: color-mix(in srgb, var(--wp--preset--color--gold), var(--wp--preset--color--gold-ink));
	--powered-color: var(--wp--preset--color--muted);
	--img-size: 44px;
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--60) !important;
	font-family: inherit;
}

.cs-reviews.has-navy-background-color .wp-gr {
	--powered-color: var(--wp--preset--color--mist);
}

.cs-reviews .wp-gr .grw-header {
	order: 2;
}

.cs-reviews .wp-gr .grw-header .grw-header-inner {
	margin: 0 !important;
	padding: 0 !important;
}

.cs-reviews .wp-gr .grw-header :is(.grw-img-wrap, .wp-google-name, .rpi-stars, .wp-google-based, .wp-google-wr) {
	display: none !important;
}

.cs-reviews .wp-gr .grw-header .wp-google-powered {
	font-size: var(--wp--preset--font-size--small);
}

.cs-reviews .wp-gr .grw-content {
	flex: none !important;
	width: 100% !important;
}

.cs-reviews .wp-gr .grw-reviews {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.cs-reviews .wp-gr .grw-review {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	align-items: stretch !important;
}

/* How many show at once: 3 on phones, 4 on tablets, 6 on desktop; the rest are on Google */
.cs-reviews .wp-gr .grw-review:nth-child(n+4) {
	display: none;
}

@media (min-width: 48rem) {
	.cs-reviews .wp-gr .grw-reviews {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.cs-reviews .wp-gr .grw-review:nth-child(4) {
		display: block;
	}
}

@media (min-width: 64rem) {
	.cs-reviews .wp-gr .grw-reviews {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.cs-reviews .wp-gr .grw-review:is(:nth-child(5), :nth-child(6)) {
		display: block;
	}
}

.cs-reviews .wp-gr .grw-review .grw-review-inner {
	--cs-focus: var(--wp--preset--color--blue-ink);
	gap: 0.75rem;
	margin: 0 !important;
	padding: 1.25rem !important;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-m) !important;
	color: var(--wp--preset--color--ink);
}

.cs-reviews .wp-gr .grw-review .grw-review-inner > svg {
	top: 1.25rem !important;
	right: 1.25rem !important;
}

.cs-reviews .wp-gr .grw-review a.wp-google-name {
	padding-right: 1.5rem;
	color: var(--wp--preset--color--navy) !important;
	font-weight: 700;
}

.cs-reviews .wp-gr .grw-review a.wp-google-name:hover {
	text-decoration: underline !important;
}

.cs-reviews .wp-gr .grw-review a.wp-google-name:focus-visible {
	outline: 2px solid var(--cs-focus);
	outline-offset: 2px;
}

.cs-reviews .wp-gr .grw-review .wp-google-time {
	color: var(--wp--preset--color--muted) !important;
	font-size: 0.8125rem !important;
}

/* Long reviews: seven lines on the card instead of a scrolling box; the full text is on Google */
.cs-reviews .wp-gr .grw-review .wp-google-feedback {
	height: auto !important;
	overflow: visible !important;
}

.cs-reviews .wp-gr .grw-review .wp-google-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

/* ---------- Facts still needed (unpublished pages only; the release scan fails on "[[") ---------- */

.is-style-fact-needed {
	padding: 0.875rem 1rem;
	border: 2px dashed var(--wp--preset--color--gold-ink);
	border-radius: var(--cs-radius-s);
	background: #fff6df;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.is-style-fact-needed strong {
	color: var(--wp--preset--color--gold-ink);
	overflow-wrap: anywhere;
}

/* ---------- Services hub: client-type buttons in a row from 768px ---------- */

@media (min-width: 48rem) {
	.cs-client-strip .is-style-chooser {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Service areas: ZIP codes ---------- */

.cs-zip-details {
	margin-bottom: 1.5rem;
	border-block: 1px solid var(--cs-line-strong);
}

.cs-zip-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cs-target);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.cs-zip-details summary::-webkit-details-marker {
	display: none;
}

/* Same open/closed chevron as the FAQ */
.cs-zip-details summary::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 0.5rem 0.25rem 0;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
}

.cs-zip-details[open] summary::after {
	margin: 0.25rem 0.5rem 0 0;
	transform: rotate(-135deg);
}

.cs-zips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.cs-zips li {
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-s);
}

/* ZIP code checker on Service Areas (D36); shown only when its script runs */
.cs-zip-checker {
	max-width: 36rem;
	margin-block: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
	background: var(--wp--preset--color--white);
}

.cs-zip-checker[hidden] {
	display: none;
}

.cs-zip-checker label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 700;
}

.cs-zip-checker__row {
	display: flex;
	gap: 0.5rem;
}

.cs-zip-checker input {
	flex: 1 1 8rem;
	min-width: 0;
	min-height: var(--cs-target);
	padding: 0 0.875rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-s);
	font: inherit;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.cs-zip-checker input:focus-visible {
	outline: 3px solid var(--cs-focus);
	outline-offset: 1px;
}

.cs-zip-checker input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--gold-ink);
}

.cs-zip-checker button {
	flex: none;
	min-height: var(--cs-target);
	padding-inline: 1.5rem;
	cursor: pointer;
}

.cs-zip-checker__result {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin: 0.875rem 0 0;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

.cs-zip-checker__result:empty {
	display: none;
}

.cs-zip-checker__result::before {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
}

.cs-zip-checker__result.is-served {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.cs-zip-checker__result.is-served::before {
	content: "✓" / "";
	background: var(--wp--preset--color--teal-ink);
}

.cs-zip-checker__result.is-unlisted::before {
	content: "i" / "";
	background: var(--wp--preset--color--muted);
	font-family: Georgia, serif;
	font-style: italic;
}

.cs-zip-checker__result.is-invalid::before {
	content: "!" / "";
	background: var(--wp--preset--color--gold-ink);
}

/* City pages (D34): a heading directly above the ZIP list */
.wp-block-heading + .cs-zips {
	margin-top: 0.75rem;
}

/* ---------- Request, thank-you, and legal pages (reading width) ---------- */

:is(.cs-conversion, .cs-legal) .wp-block-post-content > :is(h2, .wp-block-heading) {
	margin-top: 2.5rem;
}

:is(.cs-conversion, .cs-legal) .wp-block-post-content {
	padding-bottom: var(--wp--preset--spacing--80);
}

.cs-walkthrough-note {
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--blue);
}

.cs-form-fallback {
	font-size: var(--wp--preset--font-size--small);
}

/* Jobber injects its form here; reserve space so the page doesn't jump while it loads */
.cs-jobber-form {
	min-height: 36rem;
}

.cs-form-slot {
	padding: 1.25rem;
	border: 1px solid var(--cs-line-strong);
	border-radius: var(--cs-radius-m);
	background: var(--wp--preset--color--paper);
}

.cs-form-slot > * {
	margin-block: 0;
}

.cs-form-slot > * + * {
	margin-top: 1rem;
}

/* ---------- Search results ---------- */

.cs-search-results .wp-block-post-template {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.cs-search-results .wp-block-post {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--cs-line);
}

.cs-search-results .wp-block-post-title a {
	color: var(--wp--preset--color--navy);
}

.cs-search-results .wp-block-post-excerpt {
	overflow-wrap: anywhere;
}

.wp-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---------- Footer ---------- */

/*
 * Three tiers (D34): brand and request buttons; five link columns; copyright, license, and
 * legal links. Links are plain until hovered or focused, like a site map, not body text.
 */
.cs-footer {
	padding-block: 3rem 1.5rem;
	font-size: 0.9375rem;
}

.cs-footer :where(.cs-footer__top, .cs-footer__grid, .cs-footer__col, .cs-footer__brand) > * {
	margin-block: 0;
}

.cs-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.cs-footer a:hover,
.cs-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Tier 1: brand and the two request buttons */
.cs-footer__top {
	display: grid;
	gap: 1.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.cs-footer__brand {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.cs-footer__logo img {
	display: block;
	width: 104px !important;
	height: auto;
	aspect-ratio: 268 / 240;
}

.cs-footer__about {
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.55;
}

.cs-footer .wp-block-buttons.cs-footer__actions {
	display: grid;
	gap: 0.75rem;
}

.cs-footer__actions .wp-block-button,
.cs-footer__actions .wp-block-button__link {
	width: 100%;
	text-decoration: none;
}

.cs-footer__actions .is-style-outline .wp-block-button__link {
	border-color: rgb(255 255 255 / 0.7);
	color: var(--wp--preset--color--white);
}

/* Tier 2: link columns (two across on phones) */
.cs-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.25rem;
	padding-block: 2rem;
}

/* Same height with or without a division emblem, so column headings line up */
.cs-footer__col h2 {
	display: flex;
	align-items: center;
	min-height: 1.75rem;
	margin-bottom: 0.625rem;
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	font-weight: 700;
}

.cs-footer__col h2.cs-footer__subhead {
	margin-top: 1.75rem;
}

.cs-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-footer__links a {
	display: inline-block;
	padding-block: 0.3125rem;
	color: var(--wp--preset--color--mist);
	line-height: 1.35;
}

.cs-footer__links a:hover,
.cs-footer__links a:focus-visible {
	color: var(--wp--preset--color--white);
}

.cs-footer__contact {
	grid-column: 1 / -1;
}

.cs-footer__contact p + p {
	margin-top: 0.25rem;
}

.cs-footer__contact p a {
	display: inline-block;
	padding-block: 0.3125rem;
}

.cs-footer__phone {
	font-size: 1.25rem;
	font-weight: 700;
}

.cs-footer__hours {
	color: var(--wp--preset--color--mist);
}

.cs-footer__social {
	margin-top: 1rem !important;
	gap: 0.25rem !important;
}

.cs-footer__social .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cs-target);
	min-height: var(--cs-target);
	padding: 0 !important;
}

.cs-footer__social .wp-social-link svg {
	width: 1.375rem;
	height: 1.375rem;
}

.cs-footer__social .wp-social-link:hover {
	transform: none;
	opacity: 0.8;
}

/* Tier 3: copyright, license, and legal links */
.cs-footer__legal {
	padding-top: 1rem;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.25rem 1.5rem;
}

.cs-footer__legal p {
	margin: 0;
}

.cs-footer__license {
	display: block;
	margin-top: 0.25rem;
}

.cs-footer__legal-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--cs-target);
	margin-right: 1.25rem;
	color: var(--wp--preset--color--mist);
}

.cs-footer__legal-links a:last-child {
	margin-right: 0;
}

@media (min-width: 48rem) {
	.cs-footer__top {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 2rem;
	}

	.cs-footer .wp-block-buttons.cs-footer__actions {
		grid-auto-flow: column;
	}

	.cs-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cs-footer__contact {
		grid-column: auto;
	}

	.cs-footer__license {
		display: inline-block;
		margin: 0 0 0 0.75rem;
		padding-left: 0.75rem;
		border-left: 1px solid rgb(255 255 255 / 0.3);
	}
}

@media (min-width: 64rem) {
	.cs-footer {
		padding-block: 4rem 1.5rem;
	}

	.cs-footer__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2.5rem;
		padding-block: 2.5rem;
	}
}

/* ---------- Sticky mobile bar (phones only) ---------- */

body:not(.editor-styles-wrapper) .site-mobile-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
}

.cs-mobile-bar {
	margin: 0;
	padding: 0.5rem clamp(1rem, 0.5rem + 2.5vw, 2rem) calc(0.5rem + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--cs-line-strong);
	box-shadow: 0 -6px 18px rgb(2 43 78 / 0.08);
}

.site-mobile-bar .cs-mobile-bar__buttons {
	display: grid;
	grid-template-columns: 1fr 1.7fr;
	gap: 0.5rem;
	margin: 0;
}

.cs-mobile-bar__buttons .wp-block-button,
.cs-mobile-bar__buttons .wp-block-button__link {
	width: 100%;
}

/*
 * The property management bar's longer label ("Property Management Request") sits on two
 * lines on narrow phones: Call shrinks to its word, and the page reserves a taller bar.
 */
.site-mobile-bar .cs-mobile-bar--long .cs-mobile-bar__buttons {
	grid-template-columns: auto 1fr;
}

.cs-mobile-bar--long .wp-block-button__link {
	padding-inline: 0.875rem;
	line-height: 1.2;
}

:root:has(.cs-mobile-bar--long) {
	--cs-mobile-bar-height: 5.25rem;
}

/* Room for the bar, only on pages that have one (request pages don't) */
body:not(.editor-styles-wrapper):has(.site-mobile-bar) {
	padding-bottom: calc(var(--cs-mobile-bar-height) + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
	.site-mobile-bar {
		display: none;
	}

	body:not(.editor-styles-wrapper):has(.site-mobile-bar) {
		padding-bottom: 0;
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}