/*
 * RRU Kit front-end styles.
 *
 * Every color comes from a palette preset (the engine writes the client's
 * brand into those presets as global styles), and every font from the
 * heading/body aliases, so this file never names a brand value. Structure
 * follows the AUDT-04d section stack; the one decorative flourish is the
 * sun in the hero, built from the palette's accent.
 */

:root {
	--rru-primary: var(--wp--preset--color--primary);
	--rru-accent: var(--wp--preset--color--accent);
	--rru-on-accent: var(--wp--preset--color--on-accent);
	/* D-07: the text on an accent fill, and the accent as text on a light surface.
	   The newer roles fall back to an older one: a site's saved global styles
	   predate a role until the next publish, and the theme must read meanwhile (WR-05). */
	--rru-on-accent-fill: var(--wp--preset--color--on-accent-fill, var(--wp--preset--color--on-accent));
	--rru-accent-text: var(--wp--preset--color--accent-text, var(--wp--preset--color--accent));
	/* the accent button's hover fill: a step away from its label so the label keeps AA (WR-04) */
	--rru-accent-hover: var(--wp--preset--color--accent-hover, var(--wp--preset--color--accent));
	--rru-deep: var(--wp--preset--color--deep, var(--wp--preset--color--primary));
	--rru-bright: var(--wp--preset--color--bright, var(--wp--preset--color--primary));
	--rru-base: var(--wp--preset--color--base);
	--rru-ink: var(--wp--preset--color--contrast);
	--rru-surface: var(--wp--preset--color--surface);
	--rru-footer: var(--wp--preset--color--footer);
	--rru-white: var(--wp--preset--color--white);
	/* the lead form's errors: one fixed red for every brand (review 01 IN-01 of 05.2),
	   falling back to the body text on a site whose palette predates the role */
	--rru-error: var(--wp--preset--color--error, var(--wp--preset--color--contrast));
	--rru-heading-font: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--calistoga));
	--rru-body-font: var(--wp--preset--font-family--body, var(--wp--preset--font-family--poppins));
	--rru-gutter: clamp(20px, 4vw, 48px);
	/* section padding, top and bottom: trimmed 2026-10-19 (Jon asked for less
	   white space between sections; two stacked sections showed ~208px) */
	--rru-section-y: clamp(40px, 3.6vw, 52px);
	--rru-radius: 14px;
	/* Square buttons and chips (261002-dr1, Bo's look review): one radius for
	   every button-like shape, in place of the rounded pill. theme.json's
	   element button carries the same value. */
	--rru-button-radius: 4px;
	--rru-line: color-mix(in srgb, var(--rru-ink) 12%, transparent);
	--rru-shadow: 0 1px 2px color-mix(in srgb, var(--rru-ink) 8%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--rru-ink) 22%, transparent);
	--rru-icon-check: url("../icons/check.svg");
	--rru-icon-phone: url("../icons/phone.svg");
	--rru-icon-sparkle: url("../icons/sparkle.svg");
	--rru-icon-home: url("../icons/home.svg");
	--rru-icon-pin: url("../icons/map-pin.svg");
	--rru-icon-google: url("../icons/google.svg");
	--rru-icon-arrow: url("../icons/arrow-right.svg");
	--rru-icon-calendar: url("../icons/calendar.svg");
	--rru-icon-star: url("../icons/star.svg");
	--rru-icon-message: url("../icons/message.svg");
	--rru-icon-spray: url("../icons/spray.svg");
	--rru-icon-key: url("../icons/key.svg");
	--rru-icon-box: url("../icons/box.svg");
	--rru-icon-bed: url("../icons/bed.svg");
	--rru-icon-building: url("../icons/building.svg");
	/* About 65 to 70 characters a line. Not in ch: ch is the width of "0",
	   which in DM Sans is about 0.69em while an average letter is about
	   0.47em, so 68ch let a line run to about 100 characters. */
	--rru-measure: 31em;
}

body {
	background: var(--rru-base);
	color: var(--rru-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.rru-main { margin-block-start: 0; }
.rru-main > .wp-block-post-content > * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

:where(.rru-main) a:focus-visible,
:where(.rru-site-header, .rru-site-footer) a:focus-visible,
.wp-element-button:focus-visible,
.rru-faq-item summary:focus-visible {
	outline: 3px solid var(--rru-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Section rhythm ------------------------------------------------------- */

.rru-main .rru-section {
	position: relative;
	padding-block: var(--rru-section-y);
	padding-inline: var(--rru-gutter);
	margin-block: 0;
}

.rru-main .rru-section > * { max-width: 1200px; }

.rru-section h2 { margin-block: 0 16px; }
.rru-section p { margin-block: 0; }

/* Reading measure: no running paragraph wider than about 70 characters
   (--rru-measure, in em). Quote card paragraphs stay full width. */
.rru-main .rru-section p { max-width: var(--rru-measure); }
.rru-main .rru-section p.has-text-align-center { margin-inline: auto; }
.rru-main .rru-quote-card p { max-width: none; }
.rru-section p + p { margin-block-start: 14px; }

.has-primary-background-color :is(h1, h2, h3, h4),
.has-footer-background-color :is(h1, h2, h3, h4) {
	color: inherit;
}

/* A heading that takes two or three lines splits them evenly (Bo,
   2026-10-22: "Careers in Palm Springs, / CA"); the render keeps
   "City, ST" together with non-breaking spaces (wp_render
   _keep_places_together). Zero specificity, so any heading rule wins. */
:where(h1, h2, h3) { text-wrap: balance; }

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

.wp-block-button__link {
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	border: 2px solid transparent;
	border-radius: var(--rru-button-radius);
}

.wp-block-button__link.has-accent-background-color:hover {
	background-color: var(--rru-accent-hover) !important;
}

.is-style-rru-ghost .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--rru-accent);
	color: var(--rru-accent-text);
}

.is-style-rru-ghost .wp-block-button__link:hover {
	background: var(--rru-accent);
	color: var(--rru-on-accent-fill);
}

.rru-ghost-button--light .wp-block-button__link {
	border-color: color-mix(in srgb, var(--rru-on-accent) 70%, transparent);
	color: var(--rru-on-accent);
}

.rru-ghost-button--light .wp-block-button__link:hover {
	background: var(--rru-on-accent);
	border-color: var(--rru-on-accent);
	color: var(--rru-primary);
}

/* Phone buttons (rru/phone-button) */
.rru-phone-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: var(--rru-button-radius);
	background: var(--rru-accent);
	color: var(--rru-on-accent-fill) !important;
	font-family: var(--rru-body-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.rru-phone-button::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--rru-icon-phone) center / contain no-repeat;
	mask: var(--rru-icon-phone) center / contain no-repeat;
}

.rru-phone-button:hover { background: var(--rru-accent-hover); }

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

.rru-site-header {
	background: var(--rru-white);
	border-bottom: 1px solid var(--rru-line);
	padding-inline: var(--rru-gutter);
	position: relative;
	z-index: 20;
}

/* The header stays in view while the page scrolls (261007-jfb, Jon): the
   template part sticks under the WordPress admin bar when one shows (the bar
   scrolls away below 600px, so there it sticks at 0). It sits above the page
   and below the phone's floating call bar (z-index 50). */
.rru-header-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

body.admin-bar .rru-header-part { top: var(--wp-admin--admin-bar--height, 32px); }

@media (max-width: 600px) {
	body.admin-bar .rru-header-part { top: 0; }
}

/* Once the page moves, a soft shadow lifts the header off the content
   (scroll-driven; without support the hairline border carries it). */
@supports (animation-timeline: scroll()) {
	.rru-site-header {
		animation: rru-header-lift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 64px;
	}
	/* --rru-header-scrolled-bg lets a look fill a transparent header as the
	   page scrolls (the template look's overlay header); the kit's own header
	   is white throughout. */
	@keyframes rru-header-lift {
		to {
			background-color: var(--rru-header-scrolled-bg, var(--rru-white));
			box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--rru-ink) 45%, transparent);
		}
	}
}

/* An anchor jump (#quote) or a focused field lands clear of the sticky
   header: its 84px (68px on a phone) and some air. The floating call bar's
   scroll-padding-bottom (261007-kfx) stays as it is. */
html { scroll-padding-top: 100px; }
html:has(body.admin-bar) { scroll-padding-top: calc(100px + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 781px) {
	html, html:has(body.admin-bar) { scroll-padding-top: 84px; }
}

/* The template look's taller header part (166px, 99px on a phone). */
html:has(.rru-site-header--tall) { scroll-padding-top: 182px; }
@media (max-width: 781px) {
	html:has(.rru-site-header--tall) { scroll-padding-top: 115px; }
}

.rru-site-header-inner {
	max-width: 1200px;
	margin-inline: auto;
	min-height: 84px;
	gap: 24px;
}

/* The brand group may shrink (261007-kfx): with a wide logo and a long name it
   ran 19px past a 390px phone and pushed the menu button off screen. min-width
   0 lets the logo and the title give way; the menu button never shrinks. */
.rru-brand { gap: 12px; flex: 0 1 auto; min-width: 0; margin: 0 !important; }

.rru-site-logo { flex: 0 1 auto; min-width: 0; }

/* No rounded corners on a logo image (Bo, 2026-10-19): a wordmark that runs
   to the edges of its file (Megan's) lost the corners of its first and last
   letters. WordPress's site-logo block makes the image inherit its wrapper's
   radius, so the footer's rounded white tile did the same; the tile keeps its
   corners, the image inside never takes them. */
.rru-site-logo img {
	width: auto !important;
	max-height: 64px;
	height: auto;
	border-radius: 0 !important;
}

.rru-footer-logo a,
.rru-footer-logo img { border-radius: 0 !important; }

.rru-site-title {
	margin: 0 !important;
	font-family: var(--rru-heading-font);
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: -0.005em;
	max-width: 9em;
}

.rru-site-title a {
	color: var(--rru-primary);
	text-decoration: none;
}

/* Logo only (261007-jfb, Jon): with a logo the logo is the brand at every
   width; the name stays for screen readers (and as the logo's alt). With no
   logo the title is the brand and shows. */
.rru-brand:has(.rru-site-logo img) .rru-site-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rru-primary-nav {
	font-family: var(--rru-body-font);
	font-size: 16px;
	font-weight: 500;
	flex: 1 1 auto;
}

.rru-primary-nav .wp-block-navigation-item__content {
	color: var(--rru-ink);
	text-decoration: none;
	padding-block: 8px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Submenu toggles: the 10px chevron keeps its look inside a 44px hit area. */
.rru-primary-nav .wp-block-navigation-submenu__toggle {
	position: relative;
}

.rru-primary-nav .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.rru-primary-nav .wp-block-navigation__container { gap: 28px; }

.rru-primary-nav .wp-block-navigation-item__content:hover { color: var(--rru-accent-text); }

.rru-primary-nav .wp-block-navigation__submenu-container {
	background: var(--rru-white) !important;
	border: 1px solid var(--rru-line) !important;
	border-radius: 12px;
	box-shadow: var(--rru-shadow);
	padding: 8px !important;
	min-width: 240px !important;
}

.rru-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--rru-ink) !important;
	padding: 10px 14px;
	border-radius: 8px;
}

.rru-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--rru-surface);
	color: var(--rru-primary);
}

.rru-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--rru-white);
	padding: 32px var(--rru-gutter);
}

/* Hero with quote card (S1) ------------------------------------------ */

/* The hero's bottom padding is one variable, so the benefit cards that are
   pulled up over the hero (S2, below) can never reach past it onto the hero's
   own content: the pull-up is this padding minus a 16px clear gap. */
.rru-main { --rru-hero-pad-end: clamp(72px, 8vw, 112px); }

.rru-main .rru-hero-quote {
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 88px) var(--rru-hero-pad-end);
	isolation: isolate;
}

.rru-hero-bg {
	position: absolute !important;
	inset: 0;
	margin-block: 0 !important;
	max-width: none !important;
	z-index: -1;
	pointer-events: none;
}

.rru-hero-bg--photo {
	background-size: cover;
	background-position: center;
}

/* No wash over a hero photo (261007-alx, then every look and photo source in
   261007-hwx; Bo, 2026-10-07: the wash is "not necessary"). The client's
   photo keeps its soft blur; the copy reads on its own light panel below. */
.rru-hero-bg--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
}

/* The copy's light panel (261007-alx): the copy column from 782px; on a phone
   the column is display:contents (the form sits between the subhead and the
   bullets), so the hero's stacked row carries the panel instead. Over any
   hero photo: a client's own (photos.hero) or the kit's own (261007-hwx, Bo:
   the same on every client, every look). 86 percent of the surface keeps the
   navy heading and the ink text at AA over a pure black photo (the contrast
   test runs white and black photos). */
@media (min-width: 782px) {
	.rru-main .rru-hero-quote:has(.rru-hero-bg--photo) .rru-hero-copy,
	.rru-main .rru-hero-quote:has(.rru-hero-bg--panel .rru-photo) .rru-hero-copy {
		background-color: color-mix(in srgb, var(--rru-surface) 86%, transparent);
		padding: clamp(22px, 2.4vw, 32px) !important;
		border-radius: var(--rru-radius);
	}
}

@media (max-width: 781px) {
	.rru-main .rru-hero-quote:has(.rru-hero-bg--photo) .rru-hero-row,
	.rru-main .rru-hero-quote:has(.rru-hero-bg--panel .rru-photo) .rru-hero-row {
		background-color: color-mix(in srgb, var(--rru-surface) 86%, transparent);
		padding: 22px 18px 24px;
		border-radius: var(--rru-radius);
	}
}

/* The sun: concentric bands in the accent, setting behind the quote card. */
.rru-hero-bg--panel::before {
	content: "";
	position: absolute;
	width: 940px;
	aspect-ratio: 1;
	left: calc(50% + 10px);
	bottom: -470px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side,
		var(--rru-accent) 0 38%,
		transparent 38% 47%,
		color-mix(in srgb, var(--rru-accent) 62%, var(--rru-base)) 47% 57%,
		transparent 57% 67%,
		color-mix(in srgb, var(--rru-base) 16%, var(--rru-primary)) 67% 77%,
		transparent 77%);
}

.rru-hero-bg--panel::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--rru-line);
}

.rru-hero-row {
	gap: clamp(32px, 5vw, 72px) !important;
	margin-inline: auto !important;
	width: 100%;
}

.rru-hero-heading {
	color: var(--rru-primary) !important;
	font-size: clamp(40px, 5.2vw, 66px) !important;
	line-height: 1.04 !important;
	margin: 0 0 20px;
	max-width: none;
	text-wrap: balance;
}

/* An H2 for the outline (261007-jfb), set as the lead paragraph it was. */
.rru-hero-subhead {
	font-family: var(--rru-body-font);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	margin-top: 0;
	font-size: clamp(18px, 1.6vw, 21px) !important;
	line-height: 1.55;
	max-width: none;
	color: var(--rru-ink);
	margin-bottom: 28px !important;
}

.rru-hero-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
}

.rru-hero-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.45;
}

.rru-hero-bullets li img { display: none; }

.rru-hero-bullets li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--rru-accent);
}

.rru-hero-bullets li { position: relative; }

.rru-hero-bullets li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	width: 12px;
	height: 12px;
	background: var(--rru-on-accent-fill);
	-webkit-mask: var(--rru-icon-check) center / contain no-repeat;
	mask: var(--rru-icon-check) center / contain no-repeat;
}

/* Trust badges in the hero (261002-dr1) ---------------------------------- */

/* One designed set: every badge is the same 56px white tile with the kit's
   own mark on the left (a star for a review profile, the bullets' check seal
   for the guarantee) and text beside it. No third-party logo files: the
   platform's name is text. A badge exists only for what the brief backs; the
   dashed "Preview only" slots come from a local preview flag. Each badge is
   its own paragraph (no wrapper, so a site without badges carries no empty
   row): inline tiles on a desktop, a two-column grid on a phone. */
.rru-main .rru-hero-quote .rru-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 56px;
	margin: 10px 10px 0 0 !important;
	padding: 0 16px 0 12px;
	max-width: none;
	vertical-align: middle;
	background: var(--rru-white);
	border: 1px solid var(--rru-line);
	border-radius: var(--rru-button-radius);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--rru-ink) 6%, transparent);
	color: var(--rru-ink);
	font-size: 14px;
	line-height: 1.15;
	position: relative;
}

.rru-badge > a,
.rru-badge > .rru-badge-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	color: inherit;
	text-decoration: none;
}

.rru-badge > a:hover .rru-badge-sub { text-decoration: underline; }

.rru-badge-text { display: flex; flex-direction: column; gap: 2px; }
.rru-badge-name { font-weight: 700; font-size: 15px; color: var(--rru-ink); white-space: nowrap; }
.rru-badge-sub { font-size: 13px; color: color-mix(in srgb, var(--rru-ink) 78%, var(--rru-white)); white-space: nowrap; }

/* the review mark: the kit's star in the accent, like the rating strip */
.rru-badge--review > a::before,
.rru-badge--review > .rru-badge-inner::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	background: var(--rru-accent);
	-webkit-mask: var(--rru-icon-star) center / contain no-repeat;
	mask: var(--rru-icon-star) center / contain no-repeat;
}

/* The rated platform's own mark and gold stars, like the familiar review
   badge (Bo, 2026-10-20); the badge is not a link, so visitors stay with
   the quote form. */
.rru-badge--google > .rru-badge-inner::before {
	background: var(--rru-icon-google) center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}
.rru-badge-stars { color: #fbbc04; letter-spacing: 1px; margin-right: 6px; }
.rru-badge-stars:empty { display: none; }

/* The guarantee seal, after Jon's own badge (Bo, 2026-10-14 and 16): one
   fixed SVG drawn by the companion's rru/guarantee-seal block, so it only
   ever scales as a whole. Scalloped seal in the primary, dotted accent ring,
   ribbon across; the words are the brief's own guarantee badge label. */
.rru-main .rru-hero-quote p.rru-badge--guarantee,
.rru-main .rru-hero-quote .rru-hero-row p.rru-badge--guarantee {
	display: inline-block;
	justify-self: center;
	align-self: center;
	flex: none;
	width: 150px;
	min-width: 0;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	vertical-align: middle;
	color: var(--rru-on-accent);
	line-height: 1;
}
.rru-seal { display: block; width: 100%; height: auto; overflow: visible; }
.rru-seal-body { fill: var(--rru-primary); filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.2)); }
.rru-seal-ring { fill: none; stroke: var(--rru-accent); stroke-width: 2.5; stroke-dasharray: 0.1 5.5; stroke-linecap: round; }
.rru-seal-star { fill: var(--rru-accent); }
.rru-seal-ribbon { fill: var(--rru-deep); }
.rru-seal-tail { fill: color-mix(in srgb, var(--rru-deep) 75%, black); }
.rru-seal text { fill: currentColor; color: var(--rru-on-accent); }
.rru-seal-top { font-family: var(--rru-body-font); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.rru-seal-word { font-family: var(--rru-heading-font); font-size: 19px; font-weight: 800; letter-spacing: 0.1em; }

/* The home page's Airbnb band (Bo, 2026-10-14, as on Jon's own site): a
   dark band with the Airbnb mark, a heading, a photo cut in on a diagonal
   at the right, and the quote button over the photo. */
.rru-main .rru-airbnb-band { padding-block: clamp(24px, 4vw, 48px); }
.rru-airbnb-band-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
	min-height: 150px;
	padding: 28px clamp(24px, 3vw, 40px);
	background: #141414;
	border-radius: var(--rru-radius);
	overflow: hidden;
	isolation: isolate;
}
.rru-airbnb-band-inner > * { margin: 0 !important; }
.rru-airbnb-band-inner > .rru-photo {
	position: absolute !important;
	inset: 0 0 0 auto;
	width: 46%;
	height: 100%;
	z-index: -1;
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.rru-airbnb-band-inner > .rru-photo .rru-photo-img { filter: brightness(0.72); }
.rru-airbnb-band-mark {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	background: #FF5A5F;
	position: relative;
}
.rru-airbnb-band-mark::after {
	content: "";
	position: absolute;
	inset: 14px;
	background: #fff;
	-webkit-mask: url("../icons/airbnb.svg") center / contain no-repeat;
	mask: url("../icons/airbnb.svg") center / contain no-repeat;
}
.rru-airbnb-band-heading {
	color: #fff !important;
	font-size: clamp(26px, 3vw, 40px) !important;
	flex: 1 1 auto;
}
.rru-airbnb-band-buttons { flex: none; }
@media (max-width: 781px) {
	.rru-airbnb-band-inner { flex-wrap: wrap; padding-bottom: 28px; }
	.rru-airbnb-band-inner > .rru-photo { width: 100%; clip-path: none; opacity: 0.35; }
	.rru-airbnb-band-heading { flex-basis: calc(100% - 92px); }
}

.rru-hero-bullets:has(~ .rru-badge) { margin-bottom: 14px; }

@media (max-width: 781px) {
	/* the phone keeps its order (form under the subhead, then the bullets);
	   the badges follow the bullets two to a row */
	.rru-main .rru-hero-row:has(.rru-badge) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 10px;
	}
	.rru-main .rru-hero-row:has(.rru-badge) > *,
	.rru-main .rru-hero-row:has(.rru-badge) > .rru-hero-copy > * { grid-column: 1 / -1; }
	.rru-main .rru-hero-quote .rru-hero-row .rru-badge {
		grid-column: auto;
		order: 5;
		width: 100%;
		min-width: 0;
		/* a narrow tile may wrap its words: it grows instead of spilling */
		height: auto;
		min-height: 56px;
		margin: 10px 0 0 !important;
		padding: 8px 10px;
	}
	.rru-badge-name, .rru-badge-sub { white-space: normal; }
}

/* Quote card (hero and contact) */
.rru-quote-card {
	background: var(--rru-white) !important;
	border-radius: var(--rru-radius);
	overflow: hidden;
	box-shadow: 0 30px 60px -24px color-mix(in srgb, #000 45%, transparent);
	position: relative;
}

.rru-quote-card > * { margin-block: 0 !important; }

.rru-quote-card-band {
	padding: 26px 30px 24px;
	border-bottom: 4px solid var(--rru-accent);
}

.rru-quote-card-title {
	font-size: clamp(26px, 2.4vw, 32px) !important;
	margin-block: 0 16px !important;
	display: inline-block;
	position: relative;
}

/* A marker stroke under "Request a Quote" (Bo, 2026-10-14, as on Jon's own
   site): a hand-drawn swash drawn as a mask, in the quote button's orange
   (Jon, 2026-10-19: the line matches the button). */
.rru-quote-card-title::after {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	/* just below the heading's box, so no text sits on the stroke */
	bottom: -13px;
	height: 12px;
	background: var(--rru-quote);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C60 5 140 3.2 297 4.6c1.6 0 1.8 2.3.2 2.5C190 8.6 110 9.4 4.4 12.6c-2.4.1-3.6-2.9-1.4-3.1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C60 5 140 3.2 297 4.6c1.6 0 1.8 2.3.2 2.5C190 8.6 110 9.4 4.4 12.6c-2.4.1-3.6-2.9-1.4-3.1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.rru-quote-card-lead {
	font-size: 16px;
	color: color-mix(in srgb, var(--rru-on-accent) 86%, transparent);
}

.rru-quote-form { padding: 20px 22px 4px; background: var(--rru-white); }

/* The form is a narrow box (261002-dr1, Bo's look review: on Alex's live site
   "Request a Quote" sits in a narrow box; the headline, copy and photo take
   the room). From 1000px the copy column takes what the 340 to 420px card
   leaves. The form inside stacks its fields in one column at that width; the
   kit's own form (Phase 5.2) keeps these container classes. */
@media (min-width: 1000px) {
	.rru-hero-row {
		flex-wrap: nowrap !important;
		gap: clamp(40px, 4.5vw, 72px) !important;
	}
	.rru-hero-row > .rru-hero-copy {
		flex: 1 1 0% !important;
		min-width: 0;
		padding-top: clamp(8px, 2vw, 32px);
	}
	.rru-hero-row > .rru-hero-form { flex: 0 0 clamp(340px, 30vw, 420px) !important; }
	/* the heading and the line under it use the panel's full width (Bo, 2026-10-14) */
	/* sized to sit on two lines in the panel (Bo, 2026-10-14) */
	.rru-hero-heading { font-size: clamp(34px, 3.3vw, 48px) !important; }
	.rru-hero-form .rru-quote-card-band { padding: 24px 26px 22px; }
	.rru-hero-form .rru-quote-card-title { font-size: 28px !important; }
	.rru-hero-form .rru-quote-form { padding: 14px 14px 4px; }
	.rru-hero-form .rru-quote-card-call { padding: 6px 26px 22px; font-size: 15px; }
}
/* The contact page keeps its layout (the context block, then the form) with
   the form as a bounded card, the same narrow shape as the hero's
   (261002-dr1). */
@media (min-width: 782px) {
	.rru-contact-row > .rru-contact-info { flex: 1 1 0% !important; min-width: 0; }
	.rru-contact-row > .rru-contact-form { flex: 0 0 clamp(360px, 42vw, 520px) !important; }
	.rru-contact-form .rru-quote-form { padding: 14px 14px 4px; }
}
@media (min-width: 782px) and (max-width: 999px) {
	.rru-hero-row { flex-wrap: wrap !important; }
	.rru-hero-row > .rru-hero-copy,
	.rru-hero-row > .rru-hero-form { flex-basis: 100% !important; }
	.rru-hero-row > .rru-hero-form { max-width: 520px; }
}

.rru-quote-form iframe {
	width: 100%;
	min-height: 520px;
	border: 0;
	display: block;
}

.rru-quote-card-call {
	background: var(--rru-white);
	padding: 22px 30px 26px;
	font-size: 16px;
	color: var(--rru-ink);
}

.rru-quote-card-call a {
	font-weight: 700;
	white-space: nowrap;
}

/* The kit's own quote form (rru/lead-form, Phase 5.2). Only .rru-lead-form and
   its descendants are styled here; the card around it (.rru-quote-card,
   .rru-quote-card-band, .rru-quote-form) is 261002-dr1's. Labels sit above
   their inputs. First and last name, then email and phone, share a row once
   the form itself is wide enough (the snapshot form's Two Column layout); in
   the narrow hero card they stack. Borders meet 3:1 and text 4.5:1 on the
   card's white. Colors are palette roles only: white is --rru-white and the
   error red is --rru-error (kit/README.md "Color roles"). */
.rru-lead-form {
	--rru-lf-border: color-mix(in srgb, var(--rru-ink) 62%, var(--rru-white));
	--rru-lf-error: var(--rru-error);
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 18px;
	color: var(--rru-ink);
	font-family: var(--rru-body-font);
}
.rru-lead-form [hidden],
.rru-lead-form-wrap > .rru-lead-form[hidden],
.rru-lead-form__success[hidden] { display: none !important; }
.rru-lead-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.rru-lead-form__field--contact { grid-column: 1 / -1; }
@container (min-width: 480px) {
	.rru-lead-form__field--contact { grid-column: auto; }
}
@container (max-width: 259px) {
	.rru-lead-form__field--name { grid-column: 1 / -1; }
}
.rru-lead-form__label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.rru-lead-form .rru-lead-form__input.rru-lead-form__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--rru-lf-border);
	border-radius: var(--rru-button-radius);
	background: var(--rru-white);
	color: var(--rru-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}
textarea.rru-lead-form__input { min-height: 88px; resize: vertical; }
.rru-lead-form__input:focus-visible,
.rru-lead-form__consent input:focus-visible {
	outline: 3px solid var(--rru-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--rru-accent) 40%, transparent);
}
.rru-lead-form .rru-lead-form__input.rru-lead-form__input[aria-invalid="true"] {
	border: 2px solid var(--rru-lf-error);
	padding: 9px 11px;
}
.rru-lead-form__error {
	margin: 6px 0 0;
	color: var(--rru-lf-error);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}
.rru-lead-form__consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	font-size: 13px;
	line-height: 1.45;
}
.rru-lead-form__consent input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--rru-ink);
}
/* The honeypot: off screen, never display:none (a bot reads that as a tell),
   out of the tab order and hidden from screen readers by its wrapper. */
.rru-lead-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.rru-lead-form__notready,
.rru-lead-form__noscript {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}
.rru-lead-form__notready a,
.rru-lead-form__noscript a,
.rru-lead-form__callus a,
.rru-lead-form__success-line a { font-weight: 700; white-space: nowrap; }
/* A long email address wraps instead of running past a phone-width card
   (05.2-04 sweep); a phone number stays on one line. */
.rru-lead-form__notready a[href^="mailto:"],
.rru-lead-form__noscript a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
/* The live region keeps its place in the accessibility tree but takes no room
   while it is empty. */
.rru-lead-form__status { margin: 0; font-size: 15px; font-weight: 600; }
.rru-lead-form__status:empty {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.rru-lead-form__callus {
	margin: 0;
	padding: 10px 12px;
	border-left: 4px solid var(--rru-lf-error);
	background: color-mix(in srgb, var(--rru-lf-error) 6%, var(--rru-white));
	font-size: 15px;
	font-weight: 600;
}
.rru-lead-form .rru-lead-form__submit {
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	border: 2px solid transparent;
	border-radius: var(--rru-button-radius);
	cursor: pointer;
}
.rru-lead-form .rru-lead-form__submit:hover:not(:disabled) { background-color: var(--rru-accent-hover); }
.rru-lead-form .rru-lead-form__submit:focus-visible { outline: 3px solid var(--rru-ink); outline-offset: 3px; }
/* Served disabled until form.js runs: a gray fill that meets 3:1 on the card,
   dark enough that its white label still reads at 4.5:1 (05.2-04 sweep). */
.rru-lead-form .rru-lead-form__submit:disabled {
	background-color: color-mix(in srgb, var(--rru-ink) 66%, var(--rru-white));
	color: var(--rru-white);
	cursor: not-allowed;
}
/* Under the button (261007-kfx): the not-ready line (no script yet) and the
   line that says what happens next share one grid cell, so the taller of the
   two sets the height and nothing moves when form.js marks the form ready.
   visibility, not display, does the swap: the hidden line keeps its room and
   leaves the accessibility tree. */
.rru-lead-form__after { display: grid; }
.rru-lead-form__after > * { grid-area: 1 / 1; }
.rru-lead-form__next {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	visibility: hidden;
}
.rru-lead-form[data-rru-ready="1"] .rru-lead-form__after--swap .rru-lead-form__notready { visibility: hidden; }
.rru-lead-form[data-rru-ready="1"] .rru-lead-form__next { visibility: visible; }
/* No next-step line (Bo, 2026-10-14): once the form is ready the not-ready
   line has nothing to swap with, so it gives its room back. */
.rru-lead-form[data-rru-ready="1"] .rru-lead-form__after:not(.rru-lead-form__after--swap) { display: none; }
/* The SMS consent line now sits below the button and that line. */
.rru-lead-form__after + .rru-lead-form__consent {
	padding-top: 12px;
	border-top: 1px solid var(--rru-line);
}

.rru-lead-form__success { padding: 8px 0 22px; color: var(--rru-ink); }
/* A status line, not a heading (05.9 K11): it keeps the look the h3 had. */
.rru-lead-form__success-heading {
	margin: 0 0 8px;
	font-family: var(--rru-heading-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--primary);
}
.rru-lead-form__success-line { margin: 0; font-size: 16px; line-height: 1.5; }

/* Thank-you page (261007-kfx) ---------------------------------------------- */

.rru-thank-you { padding-block: clamp(40px, 6vw, 72px); }

/* One reading column under the page title, left-aligned with it; the kit's
   .rru-main .rru-section > * width rule is the one to beat. */
.rru-main .rru-thank-you > .rru-thank-you-steps,
.rru-main .rru-thank-you > .rru-thank-you-call,
.rru-main .rru-thank-you-owner > .rru-thank-you-owner-row { max-width: 680px; }

.rru-thank-you-steps {
	counter-reset: rru-thanks;
	display: grid;
	gap: 28px;
}

.rru-thank-you-step {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 18px;
	align-items: start;
}

.rru-thank-you-step::before {
	counter-increment: rru-thanks;
	content: counter(rru-thanks);
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rru-primary);
	color: var(--rru-on-accent);
	font-family: var(--rru-body-font);
	font-size: 17px;
	font-weight: 700;
}

.rru-thank-you-step > * { grid-column: 2; margin: 0 !important; }
.rru-thank-you-step-title { margin-bottom: 6px !important; padding-top: 6px; }
.rru-thank-you-step-text { color: var(--rru-ink); line-height: 1.55; }

.rru-thank-you-call {
	margin-top: clamp(36px, 5vw, 56px) !important;
	padding: 28px 30px;
	border-radius: var(--rru-radius);
}
.rru-thank-you-call > * { margin-block: 0 14px !important; }
.rru-thank-you-call > :last-child { margin-bottom: 0 !important; }
.rru-thank-you-call-text a { font-weight: 700; }

.rru-thank-you-owner { padding-block: clamp(32px, 5vw, 56px) 0; }
.rru-thank-you-owner-row {
	gap: 20px;
	align-items: center;
}
.rru-thank-you-owner-line { margin: 0 !important; }

/* Benefit cards (S2), pulled up over the hero */
.rru-main .rru-benefit-cards {
	padding-block-start: 0;
	padding-block-end: clamp(48px, 6vw, 80px);
	z-index: 2;
}

.rru-hero-quote + .rru-benefit-cards { margin-block-start: calc(16px - var(--rru-hero-pad-end)); }

.rru-card-row {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-inline: auto !important;
	width: 100%;
}

.rru-card-row > * { margin-block: 0 !important; }

.rru-benefit-card {
	border-radius: var(--rru-radius);
	padding: 28px 26px 30px;
	box-shadow: var(--rru-shadow);
}

.rru-benefit-card > * { margin-block: 0; }

.rru-benefit-icon,
.rru-service-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	/* a light tint of the accent behind the icon, so a pale accent (Megan's
	   creme, 2026-10-16) still shows as the brand color */
	background: color-mix(in srgb, var(--rru-accent) 25%, var(--rru-white));
	margin-block: 0 18px !important;
	position: relative;
}


/* The icon is the accent's text role, not the raw accent: a pale accent
   drops to 1.2:1 on the card (Bo, 2026-10-16), and accent-text is the
   accent darkened, or the primary, until it reads on a light surface. */
.rru-benefit-icon::after,
.rru-service-icon::after {
	content: "";
	position: absolute;
	inset: 12px;
	background: var(--rru-accent-text);
	-webkit-mask: var(--rru-icon-sparkle) center / contain no-repeat;
	mask: var(--rru-icon-sparkle) center / contain no-repeat;
}

.rru-service-icon::after {
	-webkit-mask-image: var(--rru-icon-home);
	mask-image: var(--rru-icon-home);
}

.rru-service-card--standard .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-sparkle); mask-image: var(--rru-icon-sparkle); }
.rru-service-card--deep .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-spray); mask-image: var(--rru-icon-spray); }
.rru-service-card--move-in .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-key); mask-image: var(--rru-icon-key); }
.rru-service-card--move-out .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-box); mask-image: var(--rru-icon-box); }
.rru-service-card--vacation-rental .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-bed); mask-image: var(--rru-icon-bed); }
.rru-service-card--apartment .rru-service-icon::after { -webkit-mask-image: var(--rru-icon-building); mask-image: var(--rru-icon-building); }

.rru-benefit-card--personal-service .rru-benefit-icon::after { -webkit-mask-image: var(--rru-icon-message); mask-image: var(--rru-icon-message); }
.rru-benefit-card--feedback .rru-benefit-icon::after { -webkit-mask-image: var(--rru-icon-check); mask-image: var(--rru-icon-check); }
.rru-benefit-card--products-and-pets .rru-benefit-icon::after { -webkit-mask-image: var(--rru-icon-spray); mask-image: var(--rru-icon-spray); }
.rru-benefit-card--flexible-scheduling .rru-benefit-icon::after { -webkit-mask-image: var(--rru-icon-calendar); mask-image: var(--rru-icon-calendar); }

.rru-benefit-title {
	font-size: 22px !important;
	margin-block: 0 8px !important;
}

.rru-benefit-text { font-size: 16px; line-height: 1.55; }

/* Trust badges (S3), only when real review profiles exist */
.rru-main .rru-trust-badges { padding-block: 0 48px; text-align: center; }
.rru-trust-badges-row { gap: 24px; }

/* CTA band (S4) ------------------------------------------------------ */

.rru-main .rru-cta-band { padding-block: clamp(36px, 4vw, 48px); }

.rru-cta-band-inner {
	margin-inline: auto !important;
	width: 100%;
	gap: 20px 40px;
}

/* The heading takes the band's free width, so on a desktop it sits on one
   line beside the button (Bo, 2026-10-22); with less than about 320px left
   for it (a phone) the button drops below it. */
.rru-cta-band-heading {
	font-size: clamp(26px, 3vw, 36px) !important;
	margin-block: 0 !important;
	flex: 1 1 320px;
	min-width: 0;
	max-width: none;
}

.rru-cta-band-inner > .wp-block-buttons { flex: 0 0 auto; }

/* Right under a primary band (the checklist page opens with its title band,
   then this band) the two would read as one block, so this band turns to
   the light surface with the brand-color heading, as the hero and quality
   bands draw it: the primary and the body text reach AA on the surface by
   the palette's own rules (wp_render.color_role_errors), the button keeps
   its accent fill. Everywhere else the band stays primary. */
.rru-main .has-primary-background-color + .rru-cta-band {
	background-color: var(--rru-surface) !important;
	color: var(--rru-ink) !important;
	border-block-end: 1px solid var(--rru-line);
}

.rru-main .has-primary-background-color + .rru-cta-band .rru-cta-band-heading { color: var(--rru-primary); }

/* How it works / what to expect (S6) -------------------------------- */

.rru-how-rows-heading { text-align: left; margin-bottom: clamp(28px, 4vw, 44px) !important; }

.rru-how-grid {
	display: grid;
	column-gap: 56px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	border-top: 2px solid var(--rru-primary);
	margin-inline: auto !important;
	width: 100%;
}

/* Equal columns: every row gets the same inline padding (none), and the
   divider sits in the middle of the column gap, so all step photos share
   one width and, at a fixed 4:3 ratio, one height. */
.rru-how-step {
	padding: 28px 0 8px;
	margin-block: 0 !important;
	position: relative;
}

.rru-how-step + .rru-how-step::before {
	content: "";
	position: absolute;
	inset-block: 28px 8px;
	left: -28px;
	border-left: 1px solid var(--rru-line);
}

.rru-how-step-heading {
	font-size: 23px !important;
	margin-block: 0 10px !important;
}

.rru-how-step-text { font-size: 16px; line-height: 1.6; max-width: 38ch; }

/* Split rows (S6): image and text rows that swap sides ---------------
   Odd rows put the picture first, even rows put it second. A row whose photo
   slot is empty (or dropped because the page already shows that file) is
   one column of text. The kit's own tokens only: the template's framed
   photo, ghost link and alternating bands belong to the style variant. */

.rru-split-row-list { display: grid; row-gap: clamp(40px, 6vw, 88px); }

.rru-split-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-block: 0 !important;
}

.rru-split-row:has(> .rru-photo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rru-split-row:nth-child(even) > .rru-photo { order: 2; }

.rru-split-row > .rru-photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--rru-radius);
}

.rru-split-row-copy > * { margin-block: 0; }
.rru-split-row-heading { margin-block: 0 14px !important; }
.rru-split-row-text { font-size: 17px; line-height: 1.65; }

@media (max-width: 781px) {
	.rru-split-row:has(> .rru-photo) { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.rru-split-row:nth-child(even) > .rru-photo { order: 0; }
}

/* Our Work (05.1-09, criterion 7): before-and-after pairs side by side,
   stacked on a phone. Shared by both looks (the radius follows the look). */

.rru-work-list { display: grid; row-gap: clamp(36px, 5vw, 64px); }
.rru-work-pair { margin-block: 0 !important; }
.rru-work-shots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 24px);
}
.rru-work-shot { margin-block: 0 !important; }
.rru-work-shot > * { margin-block: 0; }
.rru-work-shot > .rru-photo { aspect-ratio: 4 / 3; border-radius: var(--rru-radius); }
.rru-work-label {
	margin-block: 10px 0 !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.rru-work-caption { margin-block: 14px 0 !important; font-size: 18px; line-height: 1.5; }

@media (max-width: 600px) {
	.rru-work-shots { grid-template-columns: minmax(0, 1fr); }
}

/* Intro (S5) and service grid (S7) --------------------------------- */

.rru-main .rru-intro:has(+ .rru-service-grid) { padding-block-end: 0; }

.rru-intro-inner > * { max-width: 62ch; }
.rru-intro-text { font-size: clamp(18px, 1.5vw, 20px) !important; line-height: 1.6; }

.rru-main .rru-intro + .rru-service-grid { padding-block-start: clamp(28px, 4vw, 44px); }

.rru-service-grid .rru-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.rru-service-card {
	position: relative;
	border-radius: var(--rru-radius);
	padding: 28px 26px 24px;
	box-shadow: var(--rru-shadow);
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}

.rru-service-card > * { margin-block: 0; }

.rru-service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--rru-ink) 8%, transparent), 0 22px 40px -16px color-mix(in srgb, var(--rru-ink) 30%, transparent);
}

.rru-service-card-title {
	font-size: 23px !important;
	margin-block: 0 2px !important;
}

.rru-service-card-title a {
	color: var(--rru-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.rru-service-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rru-radius);
}

.rru-service-card-blurb { font-size: 16px; line-height: 1.55; flex: 1 1 auto; }

.rru-service-card-more {
	margin-top: 18px !important;
	font-weight: 700;
	font-size: 15px;
	color: var(--rru-accent-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rru-service-card-more::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--rru-icon-arrow) center / contain no-repeat;
	mask: var(--rru-icon-arrow) center / contain no-repeat;
	transition: transform .18s ease;
}

.rru-service-card:hover .rru-service-card-more::after { transform: translateX(4px); }

/* About band (S8) and about body -------------------------------------- */

.rru-about-band-row,
.rru-about-body-row,
.rru-faq-row,
.rru-contact-row,
.rru-careers-row,
.rru-service-areas-row,
.rru-hero-row {
	margin-inline: auto !important;
	width: 100%;
}

.rru-about-band-row,
.rru-about-body-row { gap: clamp(28px, 6vw, 96px) !important; }

/* the heading spans the band above the photo and the copy (Bo, 2026-10-14) */
.rru-about-band-heading {
	font-size: clamp(32px, 3.8vw, 48px) !important;
	margin-block: 0 clamp(24px, 3vw, 40px) !important;
	max-width: none;
}

.rru-about-band-copy p { color: color-mix(in srgb, var(--rru-on-accent) 88%, transparent); }
.rru-about-band-copy .has-lead-font-size { color: var(--rru-on-accent); font-size: 21px !important; line-height: 1.5; }
.rru-about-band-copy .wp-block-buttons { margin-top: 28px; }

.rru-about-body-heading { margin-block: 0 20px !important; max-width: 16ch; }
.rru-about-story-heading { margin-block: 28px 8px !important; }
.rru-about-body-paragraph.has-lead-font-size { font-size: 21px !important; line-height: 1.5; color: var(--rru-primary); }

/* The about band's photo is the student's own (photos.about), through rru/photo. */
.rru-about-band .rru-photo { border-radius: var(--rru-radius); margin-top: 28px !important; aspect-ratio: 4 / 3; }

/* FAQ (S9 + S10) ---------------------------------------------------- */

.rru-faq-row { gap: clamp(0px, 4vw, 56px) !important; }

.rru-faq-head { margin-block: 0 clamp(24px, 4vw, 40px) !important; }

/* The small label above the FAQ heading: a paragraph, so heading levels
   stay in order (accepted deviation DEV-faq-kicker). */
.rru-kicker {
	font-family: var(--rru-heading-font);
	font-size: 20px;
	line-height: 1.2;
	color: var(--rru-primary);
	margin-block: 0 8px !important;
}

.rru-faq-heading { margin-block: 0 16px !important; }

.rru-faq-aside { font-size: 16px; line-height: 1.6; }
.rru-faq-aside a { font-weight: 700; }

.rru-faq-list {
	border-top: 1px solid var(--rru-line);
}

.rru-faq-list > * { margin-block: 0 !important; }

.rru-faq-item {
	border-bottom: 1px solid var(--rru-line);
}

.rru-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 44px 20px 0;
	position: relative;
	font-family: var(--rru-body-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	color: var(--rru-primary);
}

.rru-faq-item summary::-webkit-details-marker { display: none; }

.rru-faq-item summary::before,
.rru-faq-item summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--rru-accent);
	transition: transform .2s ease;
}

.rru-faq-item summary::after { transform: rotate(90deg); }
.rru-faq-item[open] summary::after { transform: rotate(0deg); }

.rru-main .rru-faq-item p {
	padding: 0 44px 22px 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	max-width: var(--rru-measure);
}

/* Service areas (S11) ------------------------------------------------- */

.rru-service-areas-row { gap: clamp(28px, 5vw, 64px) !important; }

.rru-service-areas-row:not(:has(.rru-area-map)) > .rru-service-areas-map { display: none; }
.rru-service-areas-row:not(:has(.rru-area-map)) > .rru-service-areas-copy { flex-basis: 100% !important; }

.rru-area-map {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--rru-radius);
	box-shadow: var(--rru-shadow);
	display: block;
}

/* The click-to-load map (05.9 D-04): the facade fills the map's box until a
   click or key puts the iframe in its place (blocks/area-map/view.js). */
.rru-area-map--facade {
	margin: 0;
	overflow: hidden;
	background: var(--rru-surface);
}

.rru-area-map__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	min-height: 44px;
	padding: 24px;
	box-sizing: border-box;
	color: var(--rru-primary);
	background: color-mix(in srgb, var(--rru-primary) 6%, var(--rru-white));
	border-radius: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.rru-area-map__facade:hover .rru-area-map__label { text-decoration: underline; }

.rru-area-map__facade:focus-visible {
	outline: 3px solid var(--rru-accent);
	outline-offset: -3px;
}

.rru-area-map__pin { width: 44px; height: 44px; flex: none; }

.rru-area-map__label { font-size: 17px; line-height: 1.4; max-width: 30ch; }

.rru-service-areas-note { font-size: 17px; max-width: 60ch; }

.rru-area-card-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 28px !important;
}

.rru-area-card-row > * { margin-block: 0 !important; }

.rru-area-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 44px 16px 50px;
	border-radius: 12px;
	background: var(--rru-white);
	border: 1px solid var(--rru-line);
	text-decoration: none;
	color: var(--rru-primary);
	transition: border-color .15s ease, transform .15s ease;
}

.rru-area-card:hover { border-color: var(--rru-accent); transform: translateY(-2px); }

.rru-area-card { position: relative; }

.rru-area-card::before,
.rru-area-card::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	margin-top: -10px;
	background: var(--rru-accent);
	-webkit-mask: var(--rru-icon-pin) center / contain no-repeat;
	mask: var(--rru-icon-pin) center / contain no-repeat;
	left: 18px;
}

.rru-area-card::after {
	left: auto;
	right: 18px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--rru-primary);
	-webkit-mask-image: var(--rru-icon-arrow);
	mask-image: var(--rru-icon-arrow);
}

.rru-area-card-title {
	font-family: var(--rru-body-font) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	margin-block: 0 !important;
	flex: 1 1 auto;
	color: inherit;
}

/* The whole card is the link: the link in the title stretches over it, so the
   card is plain core markup (a group with a heading) the editor can save. */
.rru-area-card-title a {
	color: inherit;
	text-decoration: none;
}

.rru-area-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.rru-area-card:focus-within { border-color: var(--rru-accent); }

/* Final CTA (S12) ------------------------------------------------------ */

.rru-final-cta-panel {
	margin-inline: auto !important;
	width: 100%;
	border-radius: calc(var(--rru-radius) * 1.5);
	padding: clamp(40px, 6vw, 80px) clamp(28px, 6vw, 80px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.rru-final-cta-panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 520px;
	aspect-ratio: 1;
	right: -140px;
	top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side,
		var(--rru-accent) 0 40%,
		transparent 40% 55%,
		color-mix(in srgb, var(--rru-accent) 62%, var(--rru-base)) 55% 68%,
		transparent 68%);
}

.rru-final-cta-heading {
	font-size: clamp(32px, 4vw, 52px) !important;
	margin-block: 0 14px !important;
	max-width: 16ch;
}

.rru-final-cta-text {
	font-size: 18px;
	max-width: 44ch;
	color: color-mix(in srgb, var(--rru-on-accent) 86%, transparent);
}

.rru-final-cta-panel .wp-block-buttons { margin-top: 30px; gap: 14px; }

/* A closing panel with no photo (About, Our Work: their recipes hide it) has
   its text under the decorative circle on anything narrower than a desktop:
   white text on the accent read 1.6:1 there, in both looks (05.1-09 review
   fix; measured clear from 960 px). Below 1024 px that panel has no circle. */
@media (max-width: 1023px) {
	.rru-final-cta-panel:not(:has(> .rru-photo))::before { display: none; }
}

.rru-main .rru-how-it-works + .rru-final-cta,
.rru-main .rru-service-areas + .rru-final-cta { padding-block-start: 0; }

/* Page title band ----------------------------------------------------- */

.rru-main .rru-page-title {
	padding-block: clamp(48px, 7vw, 88px);
	overflow: hidden;
	isolation: isolate;
}

.rru-main .rru-page-title::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 460px;
	aspect-ratio: 1;
	right: -120px;
	bottom: -300px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side,
		var(--rru-accent) 0 40%,
		transparent 40% 55%,
		color-mix(in srgb, var(--rru-accent) 62%, var(--rru-base)) 55% 68%,
		transparent 68%);
}

.rru-page-title-inner > * { max-width: 22ch; }
.rru-page-title-inner > .rru-page-title-lead { max-width: 56ch; }

.rru-page-title-heading {
	font-size: clamp(36px, 4.6vw, 58px) !important;
	margin-block: 0 12px !important;
}

.rru-page-title-lead {
	color: color-mix(in srgb, var(--rru-on-accent) 86%, transparent);
}

/* The contact page's title band with the client's team photo (photos.contact,
   261002-dr1): the title on the left, the photo on the right, both inside
   the 1200px container; on a phone the photo follows the title. The arcs
   give way to the photo. */
.rru-main .rru-page-title:has(> .rru-photo--contact) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 28px;
	padding-inline: max(var(--rru-gutter), calc((100% - 1200px) / 2));
}

.rru-main .rru-page-title:has(> .rru-photo--contact)::before { display: none; }

.rru-main .rru-page-title > .rru-photo--contact {
	margin: 0 !important;
	max-width: none;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--rru-radius);
	box-shadow: 0 24px 48px -24px color-mix(in srgb, #000 55%, transparent);
}

.rru-page-title > .rru-photo--contact .rru-photo-img { object-position: center 35%; }

@media (min-width: 782px) {
	.rru-main .rru-page-title:has(> .rru-photo--contact) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
		column-gap: clamp(32px, 5vw, 72px);
		align-items: center;
		padding-block: clamp(40px, 5vw, 64px);
	}
	.rru-main .rru-page-title:has(> .rru-photo--contact) > * { margin: 0 !important; max-width: none; }
	/* beside the photo the title has about half the row: a step smaller, so
	   "Contact Us in {city}, {state}" breaks between words, not before the state */
	.rru-page-title:has(> .rru-photo--contact) .rru-page-title-heading { font-size: clamp(34px, 3.6vw, 50px) !important; }
	.rru-page-title:has(> .rru-photo--contact) .rru-page-title-inner > * { max-width: 26ch; }
	.rru-page-title:has(> .rru-photo--contact) .rru-page-title-inner > .rru-page-title-lead { max-width: 44ch; }
}

/* Contact and careers ---------------------------------------------------- */

.rru-contact-row { gap: clamp(32px, 5vw, 72px) !important; }

.rru-contact-lead { font-size: 18px; margin-bottom: 8px !important; }

.rru-contact-subheading {
	font-family: var(--rru-body-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--rru-accent-text) !important;
	margin: 28px 0 10px !important;
}

.rru-business-contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rru-business-contact a {
	color: var(--rru-primary);
	font-weight: 600;
	text-decoration: none;
	font-size: 17px;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	overflow-wrap: anywhere;
}

.rru-business-contact a:hover { color: var(--rru-accent-text); text-decoration: underline; }

.rru-business-hours {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

.rru-careers-row { gap: clamp(28px, 5vw, 72px) !important; }


.rru-careers-apply > * { margin-block: 0 12px; }

/* The Careers page in Jon's order (05.7 D-03) ---------------------------------- */

/* the applicants banner: a high-contrast band, bold centered lines, one button */
.rru-main .rru-careers-banner { padding-block: clamp(28px, 4vw, 44px); text-align: center; }
.rru-main .rru-careers-banner .rru-careers-banner-line {
	max-width: none;
	margin: 0 auto 8px;
	font-size: clamp(19px, 2.8vw, 28px);
	line-height: 1.25;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}
.rru-careers-banner .wp-block-buttons { justify-content: center; margin-top: clamp(16px, 2.4vw, 24px); }
.rru-careers-banner .wp-block-button__link:hover { text-decoration: underline; }

/* Jon's card look (Bo, 2026-10-22): white panels with a thin border in the
   brand's primary, as on happyhomehelpers.com/careers. */
.rru-careers-join-card,
.rru-careers-pains,
.rru-careers-values,
.rru-careers-apply,
.rru-careers-parents-panel {
	background: var(--rru-base);
	border: 2px solid var(--rru-primary);
	border-radius: var(--rru-button-radius);
	padding: clamp(22px, 3.4vw, 48px);
	min-width: 0;
}

/* Jon's small eyebrow label over a page heading (Bo, 2026-10-22): "Careers" over
   the Join heading, "Quality Control" over each checklist heading. Shown in
   capitals by style, so a screen reader reads the words, not the letters. */
.rru-main .rru-eyebrow {
	margin: 0 auto 10px !important;
	color: var(--rru-accent-text);
	font-family: var(--rru-body-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* the pitch: a centered heading over one card with the video and the Apply button */
.rru-careers-join .rru-careers-text { text-align: center; }
.rru-main .rru-careers-join .rru-careers-heading {
	max-width: 22ch;
	margin-inline: auto !important;
	font-size: clamp(32px, 4.2vw, 54px) !important;
	line-height: 1.12;
}
.rru-main .rru-careers-join > .rru-careers-join-card {
	max-width: 880px;
	margin-top: clamp(24px, 3.2vw, 40px) !important;
}
.rru-careers-join-card .wp-block-buttons { justify-content: center; margin-top: clamp(20px, 2.6vw, 28px); }
/* with no video the card is just the button: no frame around it */
.rru-careers-join-card:has(> .rru-careers-media:empty) { border: 0; padding: 0; background: none; }
.rru-careers-join-card:has(> .rru-careers-media:empty) .wp-block-buttons { margin-top: 0; }

/* mission and benefits: text, and a media column for a video (plan 04).
   With nothing in the media column the text takes the full width. */
.rru-careers-row { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.rru-careers-media:empty { display: none; }
@media (min-width: 782px) {
	.rru-careers-row:has(> .rru-careers-media:not(:empty)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rru-careers-media > * { margin: 0 !important; max-width: 100%; }
.rru-careers-text .wp-block-buttons { margin-top: clamp(16px, 2.4vw, 24px); }
.rru-careers-paragraph { font-size: 18px; line-height: 1.6; }
.rru-main .rru-careers-text .rru-careers-paragraph { max-width: 56ch; }

/* what applicants hear, and what they should expect: two cards side by side */
.rru-careers-why-row { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 782px) {
	.rru-careers-why-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the flow layout's block gap would push the second card down */
.rru-careers-why-row > * { margin: 0 !important; }
.rru-main .rru-careers-subheading { margin: 0 0 clamp(18px, 2vw, 26px) !important; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.25; }
.rru-careers-pain-list,
.rru-careers-value-list,
.rru-careers-benefit-list { list-style: none; padding: 0; margin: 0; }

/* every list item gets a chevron in the brand's accent */
.rru-careers-pain-list li,
.rru-careers-value-list li,
.rru-careers-benefit-list li {
	position: relative;
	margin: 0 0 18px;
	padding-left: 34px;
	font-size: 18px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.rru-careers-pain-list li { font-style: italic; }
.rru-careers-pain-list li:last-child,
.rru-careers-value-list li:last-child,
.rru-careers-benefit-list li:last-child { margin-bottom: 0; }
.rru-careers-pain-list li::before,
.rru-careers-value-list li::before,
.rru-careers-benefit-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(.75em - 6px);
	width: 11px;
	height: 11px;
	border-top: 3.5px solid var(--rru-accent-text);
	border-right: 3.5px solid var(--rru-accent-text);
	transform: rotate(45deg);
}

/* the application: one card, as wide as a form reads well */
.rru-main .rru-careers-body .rru-careers-apply { max-width: 880px; margin-inline: auto; }
.rru-careers-apply-heading { margin-bottom: 8px !important; }

/* the parents block: one card, centered like the others */
.rru-main .rru-careers-parents .rru-careers-parents-panel { max-width: 880px; margin-inline: auto; }
.rru-careers-parents-panel > * { margin-block: 0 14px; }
.rru-careers-parents-panel > :last-child { margin-bottom: 0; }

/* Legal ------------------------------------------------------------------- */

.rru-main--legal {
	padding: clamp(48px, 7vw, 88px) var(--rru-gutter);
}

.rru-legal-title { font-size: clamp(34px, 4vw, 48px); margin-bottom: 24px; }
.rru-main .rru-legal-body { padding: 0; }
.rru-legal-heading { font-size: 24px !important; margin-block: 32px 8px !important; }
.rru-legal-paragraph { max-width: var(--rru-measure); }
.rru-legal-list { max-width: var(--rru-measure); }
.rru-legal-list li + li { margin-top: 6px; }
/* WordPress's constrained layout centers the narrower, measure-wide paragraphs
   and lists with auto margins, which read as indented next to the full-width
   headings. Keep the measure, drop the centering (Brian's round 2, quick task
   261027-g8l). */
.rru-main .rru-legal-body > .rru-legal-paragraph,
.rru-main .rru-legal-body > .rru-legal-list { margin-left: 0 !important; margin-right: auto !important; }

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

.rru-site-footer {
	border-top: 6px solid var(--rru-accent);
	padding: clamp(48px, 6vw, 72px) var(--rru-gutter) 28px;
	font-size: 15px;
}

.rru-site-footer a { color: inherit; text-decoration: none; }
.rru-site-footer a:hover { color: var(--rru-on-accent); text-decoration: underline; }

.rru-footer-columns {
	max-width: 1200px;
	margin-inline: auto !important;
	display: grid;
	gap: 36px 48px;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}

.rru-footer-columns > * { margin-block: 0 !important; }

.rru-footer-logo {
	background: var(--rru-base);
	border-radius: 12px;
	padding: 8px;
	display: inline-block;
	margin-bottom: 20px !important;
}

.rru-footer-logo img { max-height: 72px; width: auto !important; display: block; }

.rru-site-footer .rru-business-contact a { color: inherit; font-weight: 500; font-size: 15px; }

/* The footer's column labels are paragraphs, not headings (05.9 K11); they
   keep the h2's line height and spacing. */
.rru-footer-heading {
	line-height: 1.12;
	letter-spacing: -0.005em;
	font-family: var(--rru-body-font) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-block: 0 4px !important;
	color: color-mix(in srgb, var(--rru-on-accent) 60%, transparent) !important;
}

.rru-footer-links li,
.rru-service-areas--footer li { margin: 0; }

.rru-footer-links,
.rru-service-areas--footer {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0;
}

/* Every footer link is a 44px tap target. */
.rru-site-footer .rru-business-contact { gap: 0; }
.rru-site-footer .rru-business-contact a,
.rru-footer-links a,
.rru-service-areas--footer a,
.rru-footer-legal-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
}

/* Each city's ZIP codes after its name, and the Google profile link
   (criterion 9). The ZIP span is not a link: it takes the footer list's text
   color, the link takes the footer links'. The contrast sweep measures both
   in both looks (engine/tests/test_kit_contrast.py, FooterGbpLinkAndZipTests). */
.rru-service-areas--footer li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.rru-service-areas-zips { font-size: 14px; }
.rru-gbp-link { margin: 4px 0 0 !important; }
.rru-gbp-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-decoration: underline;
}

.rru-site-footer .rru-business-hours { font-size: 15px; }

.rru-footer-bottom {
	max-width: 1200px;
	margin: 48px auto 0 !important;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--rru-on-accent) 16%, transparent);
	font-size: 14px;
	color: color-mix(in srgb, var(--rru-on-accent) 70%, transparent);
}

.rru-footer-bottom p { margin: 0; }
.rru-footer-legal-link a + a { margin-left: 20px; }

/* Floating call button ---------------------------------------------------- */

.rru-floating-call {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	margin-block: 0 !important;
	display: flex;
	gap: 10px;
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear 0s;
}

.rru-floating-call > * { margin: 0 !important; }

/* While the quote form is on screen (call-bar.js), the bar steps aside. */
.rru-floating-call.is-hidden-by-form {
	transform: translateY(calc(100% + 28px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear .28s;
}

.rru-phone-button--floating,
.rru-phone-button--floating-sms {
	box-shadow: 0 12px 28px -8px color-mix(in srgb, #000 50%, transparent);
	min-height: 48px;
}

.rru-phone-button--floating-sms {
	background: var(--rru-white);
	color: var(--rru-primary) !important;
	border: 2px solid var(--rru-primary);
}

.rru-phone-button--floating-sms:hover { background: var(--rru-surface); }

.rru-floating-quote { margin: 0; max-width: none; }

.rru-phone-button--floating-quote {
	min-height: 48px;
	box-shadow: 0 12px 28px -8px color-mix(in srgb, #000 50%, transparent);
}

.rru-phone-button--floating-quote::before {
	-webkit-mask-image: var(--rru-icon-calendar);
	mask-image: var(--rru-icon-calendar);
}

/* Beside Get a Quote (the accent button), Call takes the primary color, so its
   label is the brief's button text (checked against the primary), not the text
   that sits on an accent fill (the base rule's on-accent-fill). */
.rru-phone-button--floating { background: var(--rru-primary); color: var(--rru-on-accent) !important; }
.rru-phone-button--floating:hover { background: color-mix(in srgb, var(--rru-primary) 86%, #000); }

.rru-phone-button--floating-sms::before {
	-webkit-mask-image: var(--rru-icon-message);
	mask-image: var(--rru-icon-message);
}

/* On a desktop the bar is one floating "Call Now: number" button (Jon,
   2026-10-16: he keeps it floating on his own desktop site, not just mobile).
   The phone bar's Get a Quote, Call and Text stay below 1024 px. */
.rru-phone-button--floating-desktop { display: none; }

@media (min-width: 1024px) {
	.rru-floating-call { right: 40px; bottom: 40px; }
	.rru-floating-quote,
	.rru-phone-button--floating,
	.rru-phone-button--floating-sms { display: none; }
	.rru-phone-button--floating-desktop {
		display: inline-flex;
		min-height: 56px;
		padding-inline: 26px;
		font-size: 18px;
		box-shadow: 0 12px 28px -8px color-mix(in srgb, #000 50%, transparent);
	}
	/* the footer's bottom row clears the fixed button */
	.rru-site-footer { padding-bottom: 112px; }
}

/* Request a Quote and Call Now buttons: one fixed orange with white text on
   every site, whatever the brand (Jon, 2026-10-16: in the brand color the
   button blends into the site, and we want people to click; Bo added the
   header and floating call buttons the same day). WordPress gives its preset
   color classes !important, so these need it too. Known: white on this orange
   is 2.33:1, under WCAG AA; Jon's call. */
:root {
	--rru-quote: #ff8c05;
	--rru-quote-hover: #e67a00;
	--rru-quote-text: #ffffff;
}

.wp-block-button__link.has-accent-background-color,
.rru-owner .rru-ghost-button .wp-block-button__link,
.rru-lead-form .rru-lead-form__submit:not(:disabled),
.rru-phone-button--floating-quote,
.rru-phone-button--header,
.rru-phone-button--floating,
.rru-phone-button--floating-desktop {
	background-color: var(--rru-quote) !important;
	border-color: var(--rru-quote) !important;
	color: var(--rru-quote-text) !important;
}

.wp-block-button__link.has-accent-background-color:hover,
.rru-owner .rru-ghost-button .wp-block-button__link:hover,
.rru-lead-form .rru-lead-form__submit:hover:not(:disabled),
.rru-phone-button--floating-quote:hover,
.rru-phone-button--header:hover,
.rru-phone-button--floating:hover,
.rru-phone-button--floating-desktop:hover {
	background-color: var(--rru-quote-hover) !important;
	border-color: var(--rru-quote-hover) !important;
}

/* Every call-to-action button in capitals (Jon, 2026-10-19): the block
   buttons, the quote form's submit and the call buttons. Text links such as a
   card's "Learn More" stay as written. */
.wp-block-button__link,
.wp-element-button,
.rru-lead-form .rru-lead-form__submit,
.rru-phone-button {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* the phone call bar's three buttons share a 320 to 414px screen: capitals
   only, no added spacing, or the bar runs past its box (test_the_bar_fits_the_screen) */
@media (max-width: 1023px) {
	.rru-floating-call .rru-phone-button { letter-spacing: 0; }
}

/* While the bar shows, a field or link the keyboard focuses is scrolled clear
   of it, not under it (WCAG 2.4.11 Focus Not Obscured, 261007-kfx): the
   bar's 48px buttons, its 16 to 20px offset and a little air. When the bar
   steps aside for the quote form, the padding goes with it. */
@media (max-width: 1023px) {
	html:has(.rru-floating-call:not(.is-hidden-by-form)) { scroll-padding-bottom: 84px; }
}

/* Kit photos (rru/photo) ------------------------------------------------- */

.rru-photo { margin: 0; overflow: hidden; }
.rru-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hero: the kit's own photo, full-bleed with no wash (261007-hwx, Bo
   2026-10-07: the wash is "not necessary", the photo should show). The copy
   reads on its light panel (the 261007-alx rule near the top of this file),
   as on a client's own hero photo. */
.rru-hero-bg--panel .rru-photo {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
}

/* A student's own hero photo (photos.hero, 05.1-08): uploaded to the site's
   media and shown through rru/photo, covering the hero (no wash on top,
   261007-hwx). Same cover and center as the old inline background image. */
.rru-hero-bg--photo .rru-photo {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
}

/* The soft blur: the photo stays recognizable but quiet behind the copy; the
   slight scale keeps the blurred edge outside the hero. */
.rru-hero-bg--photo .rru-photo-img {
	object-position: center;
	filter: blur(4px) saturate(1.05);
	transform: scale(1.06);
}

/* The optional cut-out photo of the owner or team (photos.hero_cutout) sits
   under the hero copy on wider screens; on a phone the copy stacks with the
   form and the cut-out is left out. */
.rru-hero-copy .rru-photo--hero-cutout {
	max-width: 280px;
	margin-top: 24px !important;
	overflow: visible;
}

.rru-hero-copy .rru-photo--hero-cutout .rru-photo-img { height: auto; object-fit: contain; }

@media (max-width: 781px) {
	.rru-hero-copy .rru-photo--hero-cutout { display: none; }
}

/* Melissa (261007-jfb, Jon): the pointing woman every RRU student site
   carries, the kit's default for the hero-cutout slot (a client's own
   photos.hero_cutout replaces her). Her shirt is the brand's primary: the
   theme ships her with a light gray shirt (a shading map) and a matte of the
   shirt, and the matte paints --rru-primary over it with multiply, so the
   folds stay and every brand gets its own color with no per-client image.
   Decorative; from 1000px only (the copy and the form side by side).

   Placement as on Jon's own site (Bo, 2026-10-14, from HHH's hero): she is
   large, stands at the copy panel's lower right, her fingertip at the quote
   card's left edge, and her body runs down past the panel to behind the
   benefit cards, which overlap her. The panel stretches to the form's height
   so she always points at the lower half of the form. --rru-pointer-w is her
   width; the finger sits at 90 percent across and 27 percent down the image
   (532 x 469). */
.rru-hero-pointer { display: none; }

@media (min-width: 1000px) {
	.rru-main .rru-hero-quote:has(.rru-hero-pointer) {
		--rru-pointer-w: clamp(320px, 32vw, 480px);
		--rru-hero-pad-end: calc(var(--rru-pointer-w) * 0.42);
	}
	.rru-main .rru-hero-quote:has(.rru-hero-pointer) .rru-hero-row { align-items: stretch !important; }
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel:has(> .rru-hero-pointer) {
		position: relative;
		align-self: stretch !important;
	}
	.rru-hero-pointer {
		display: block;
		position: absolute !important;
		width: var(--rru-pointer-w);
		aspect-ratio: 532 / 469;
		/* fingertip at the quote card's left edge, where the panel meets it:
		   the 10 percent of the image right of the finger */
		right: calc(-1 * var(--rru-pointer-w) * 0.1 + 4px);
		bottom: calc(var(--rru-pointer-w) * -0.42);
		margin: 0 !important;
		background: url(../images/hero-pointer.webp) center bottom / contain no-repeat;
		isolation: isolate;
		pointer-events: none;
		z-index: 1;
	}
	.rru-hero-pointer::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--rru-primary);
		-webkit-mask: url(../images/hero-pointer-shirt.webp) center bottom / contain no-repeat;
		mask: url(../images/hero-pointer-shirt.webp) center bottom / contain no-repeat;
		mix-blend-mode: multiply;
	}
	/* Her head rises mid-panel (about 0.46 of her width above the panel's
	   bottom), so on a wide screen with a two-line headline she covered the last
	   bullets (Brian's round 2, quick task 261027-g8l). The panel reserves room
	   below its copy for her: K = 0.2 of her width plus C = 16px. */
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel:has(> .rru-hero-pointer) {
		padding-bottom: calc(var(--rru-pointer-w) * 0.2 + 16px) !important;
	}
	/* From 1000 to 1199px her width bottoms out at 320px, so the same reserve
	   leaves a long Google Reviews badge line 11 to 14px under her head on a
	   long-copy hero (prairiepro): K = 0.44 there. Clearance measured at
	   least 40px from 1000px up; at 1200px and above at least 46px. */
	@media (max-width: 1199px) {
		.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel:has(> .rru-hero-pointer) {
			padding-bottom: calc(var(--rru-pointer-w) * 0.44 + 16px) !important;
		}
	}
	/* The hero ends where her image does (its bottom edge is clipped with
	   the hero), and the cards start below her hand and cover her hip. */
	.rru-main .rru-hero-quote:has(.rru-hero-pointer) + .rru-benefit-cards {
		/* a sibling, so the width is spelled out, not read from the hero */
		margin-block-start: calc(clamp(320px, 32vw, 480px) * -0.18);
	}
}

/* Parallax (Bo, 2026-10-14, as on Jon's own site): the hero photo stays put
   while the page scrolls over it. The background layer clips its fixed
   photo to the hero; phones and reduced motion keep the photo scrolling. */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	.rru-hero-bg--photo,
	.rru-hero-bg--panel:has(.rru-photo) { clip-path: inset(0); }
	.rru-hero-bg--photo .rru-photo,
	.rru-hero-bg--panel .rru-photo {
		position: fixed !important;
		inset: 0;
		height: 100vh;
	}
}

/* Mirrored, as before, and cropped a little above center. */
/* The kit's stock hero gets the same soft blur as a student's own hero photo
   (Bo, 2026-10-19: the blurred hero is the standard setup), mirrored as before;
   the slight scale keeps the blurred edge outside the hero. */
.rru-hero-bg--panel .rru-photo-img {
	object-position: 50% 45%;
	filter: blur(4px) saturate(1.05);
	transform: scaleX(-1) scale(1.06);
}

/* No wash over the kit's own photo at any width (261007-hwx; the panel's
   ::after stays the 1px hairline at the hero's foot), and the sun steps
   aside: over a full photo it is decoration on decoration. A hero without
   any photo keeps the sun. */
.rru-hero-bg--panel:has(.rru-photo)::before { display: none; }

/* Benefit and service cards: photo across the top, icon badge overlapping it */
.rru-benefit-card,
.rru-service-card { overflow: hidden; }

.rru-service-card > .rru-photo {
	margin: -28px -26px 0 !important;
	aspect-ratio: 4 / 3;
	max-width: none;
	width: calc(100% + 52px);
}

.rru-service-card .rru-photo-img { object-position: center 35%; }

.rru-service-card > .rru-photo + .rru-service-icon {
	margin-top: -24px !important;
	background: var(--rru-white);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--rru-ink) 35%, transparent);
	z-index: 1;
}

/* How it works rows */
.rru-how-step > .rru-photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--rru-radius);
	margin: 0 0 22px !important;
}

/* About: copy on the left, the photo beside it on the right */
.rru-about-body .rru-photo {
	aspect-ratio: 1 / 1;
	border-radius: var(--rru-radius);
	margin: 0 0 0 auto !important;
	max-width: 520px;
}

.rru-about-body .rru-photo-img { object-position: 60% 40%; }
.rru-about-body-media:not(:has(img)) { display: none; }
.rru-about-body-row:not(:has(.rru-about-body-media img)) > .rru-about-body-copy { flex-basis: 100% !important; }

/* Final CTA: photo on the right of the panel */
.rru-final-cta-panel:has(> .rru-photo) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	column-gap: clamp(28px, 5vw, 64px);
	align-content: center;
}

.rru-final-cta-panel:has(> .rru-photo) > * { grid-column: 1; margin-block: 0; }
.rru-final-cta-panel:has(> .rru-photo) > .rru-heading,
.rru-final-cta-panel:has(> .rru-photo) > .rru-final-cta-heading { margin-bottom: 14px !important; }

.rru-final-cta-panel > .rru-photo {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: stretch;
	border-radius: var(--rru-radius);
	contain: size;
	min-height: 260px;
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {
	.rru-final-cta-panel:has(> .rru-photo) { grid-template-columns: 1fr; }
	.rru-final-cta-panel > .rru-photo {
		grid-column: 1;
		grid-row: auto;
		min-height: 0;
		contain: none;
		aspect-ratio: 4 / 3;
		margin-bottom: 28px !important;
		order: -1;
	}
	.rru-about-body .rru-photo { max-width: none; aspect-ratio: 4 / 3; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.rru-phone-button--header { padding: 10px 16px; font-size: 15px; }
	.rru-primary-nav .wp-block-navigation__container { gap: 18px; }
}

@media (max-width: 1024px) {
	.rru-card-row,
	.rru-service-grid .rru-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.rru-footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 781px) {
	.rru-site-header-inner { min-height: 68px; gap: 12px; }
	/* A phone logo is capped in both directions and shrinks with the brand
	   group; the menu button keeps its full 44px. */
	.rru-site-logo img { max-height: 44px; max-width: min(200px, 100%); }
	.rru-site-title { font-size: 19px; min-width: 0; max-width: none; }
	.rru-site-title a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		overflow-wrap: anywhere;
	}
	.rru-phone-button--header { display: none; }
	.rru-primary-nav { flex: 0 0 auto; }
	.rru-main .rru-page-title::before { display: none; }
	.rru-hero-heading { max-width: none; }
	.rru-hero-bg--panel::before { left: 30vw; top: auto; bottom: 0; width: 130vw; }
	.rru-how-step,
	.rru-how-step + .rru-how-step {
		padding: 22px 0 18px;
	}
	.rru-how-step + .rru-how-step::before { display: none; }
	.rru-how-step + .rru-how-step { border-top: 1px solid var(--rru-line); }
	.rru-floating-call { left: 16px; right: 16px; bottom: 16px; gap: 8px; }
	/* Three buttons share a phone's width: Call drops the number, which
	   the tel: link still dials. */
	.rru-phone-button--floating .rru-phone-button-number { display: none; }
	.rru-floating-quote { flex: 1 1 auto; display: flex; }
	.rru-phone-button--floating-quote { flex: 1 1 auto; justify-content: center; padding: 14px 16px; }
	.rru-phone-button--floating,
	.rru-phone-button--floating-sms { flex: none; justify-content: center; padding: 14px 16px; }
	.rru-site-footer { padding-bottom: 96px; }
}

/* The three call-bar buttons have to fit a 360 to 414 px phone inside the bar's
   16px margins (they ran 14 to 29px past it; capitals widened them again,
   2026-10-19): tighter padding and gaps there, and no icons on the narrowest
   phones. */
@media (max-width: 430px) {
	.rru-floating-call { gap: 6px; }
	.rru-phone-button--floating-quote,
	.rru-phone-button--floating,
	.rru-phone-button--floating-sms { padding-inline: 11px; gap: 6px; font-size: 15px; }
	/* capital labels (Jon, 2026-10-19) are wider: Get a Quote drops its icon */
	.rru-phone-button--floating-quote::before { display: none; }
}

@media (max-width: 359px) {
	.rru-phone-button--floating-quote::before,
	.rru-phone-button--floating::before,
	.rru-phone-button--floating-sms::before { display: none; }
}

@media (max-width: 600px) {
	.rru-card-row,
	.rru-service-grid .rru-card-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.rru-footer-columns { grid-template-columns: 1fr; }
	.rru-quote-card-band,
	.rru-quote-card-call { padding-inline: 22px; }
	.rru-quote-form { padding-inline: 12px; }
}

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

.rru-business-hours li + li { margin-top: 6px; }
.rru-business-hours-days { display: block; font-weight: 700; }

.rru-final-cta-panel .rru-photo-img { object-position: 15% 40%; }

/* Quote card: rating strip, what happens next, text link ----------------- */

.rru-rating-strip { margin-top: 10px !important; }

.rru-rating-strip a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--rru-on-accent);
	text-decoration: none;
	font-size: 15px;
}

.rru-rating-strip a::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: var(--rru-accent);
	-webkit-mask: var(--rru-icon-star) center / contain no-repeat;
	mask: var(--rru-icon-star) center / contain no-repeat;
}

.rru-rating-strip a:hover { text-decoration: underline; }

.rru-quote-card-next {
	background: var(--rru-white);
	padding: 18px 30px 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rru-ink);
}

.rru-quote-card-next + .rru-quote-card-call { padding-top: 8px; }

/* Mobile hero: the form sits right under the subhead, two bullets follow */
@media (max-width: 781px) {
	.rru-main { --rru-hero-pad-end: clamp(64px, 18vw, 88px); }
	.rru-hero-row {
		flex-direction: column;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		row-gap: 0 !important;
	}
	.rru-hero-row > .rru-hero-copy { display: contents; }
	.rru-hero-row .rru-hero-heading { order: 1; margin-bottom: 14px; }
	.rru-hero-row .rru-hero-subhead { order: 2; margin-bottom: 22px !important; }
	.rru-hero-row > .rru-hero-form { order: 3; flex-basis: auto !important; }
	.rru-hero-row .rru-hero-bullets { order: 4; margin-top: 28px; }
	.rru-hero-bullets li:nth-child(n+3) { display: none; }
}

/* Header menu button: a 44px tap target */
.rru-primary-nav .wp-block-navigation__responsive-container-open,
.rru-primary-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* How it works on the home page: the steps are a sequence, so they count */
.home .rru-how-grid { counter-reset: rru-step; }

.home .rru-how-step-heading::before {
	counter-increment: rru-step;
	content: counter(rru-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--rru-primary);
	color: var(--rru-on-accent);
	font-family: var(--rru-body-font);
	font-size: 17px;
	font-weight: 700;
}

/* What's included (service pages) --------------------------------------- */

.rru-included-intro > * { max-width: 60ch; }
.rru-included-lead { font-size: 18px; line-height: 1.6; }

.rru-included-list {
	list-style: none;
	padding: 0;
	margin: clamp(24px, 3vw, 36px) auto 0 !important;
	columns: 3 240px;
	column-gap: 48px;
	width: 100%;
}

.rru-included-list li { break-inside: avoid; }

.rru-included-room {
	font-family: var(--rru-heading-font);
	font-size: 22px;
	line-height: 1.2;
	color: var(--rru-primary);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--rru-primary);
	break-after: avoid;
}

.rru-included-task + .rru-included-room { margin-top: 28px; }

.rru-included-task {
	position: relative;
	padding-left: 30px;
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.5;
}

.rru-included-task::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background: var(--rru-accent);
	-webkit-mask: var(--rru-icon-check) center / contain no-repeat;
	mask: var(--rru-icon-check) center / contain no-repeat;
}

/* House Cleaning Checklist page: one section per service group (05.7 D-02) ---- */

/* Jon's layout (Bo, 2026-10-22): a centered heading per checklist, then one
   bordered card per room. The first room ("All Rooms") spans the row and its
   tasks flow in two columns; the other rooms sit two to a row. A flat group
   (Move, Airbnb) is one wide card. Each task has a large circled check. */
.rru-checklist-intro { text-align: center; }
.rru-checklist-intro > * { max-width: 60ch; margin-inline: auto !important; }
.rru-main .rru-checklist-heading { font-size: clamp(34px, 4.2vw, 54px) !important; line-height: 1.1; }
.rru-checklist-note { font-size: 18px; line-height: 1.6; margin-top: 16px !important; }

.rru-main .rru-checklist > .rru-checklist-cards {
	max-width: 1320px !important;
	margin-top: clamp(28px, 3.6vw, 48px) !important;
	display: grid;
	gap: clamp(20px, 2.4vw, 32px);
}

.rru-checklist-card {
	background: var(--rru-base);
	border: 2px solid var(--rru-primary);
	border-radius: var(--rru-button-radius);
	padding: clamp(22px, 3.4vw, 48px);
	min-width: 0;
}

@media (min-width: 782px) {
	.rru-main .rru-checklist > .rru-checklist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rru-checklist-card:first-child { grid-column: 1 / -1; }
	.rru-checklist-card:first-child .rru-checklist-list { columns: 2; column-gap: clamp(32px, 4vw, 64px); }
}

.rru-checklist-list {
	list-style: none;
	padding: 0;
	margin: 0 !important;
	columns: 1;
	width: 100%;
}

.rru-checklist-list li { break-inside: avoid; overflow-wrap: anywhere; }

.rru-checklist-room {
	column-span: all;
	font-family: var(--rru-heading-font);
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
	color: var(--rru-primary);
	margin: 0 0 clamp(18px, 2vw, 28px);
	break-after: avoid;
}

.rru-checklist-list .rru-checklist-note {
	column-span: all;
	margin: calc(-1 * clamp(6px, 1vw, 14px)) 0 clamp(18px, 2vw, 24px);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	break-after: avoid;
}

/* the circled check: a ring in the accent with the kit check inside */
.rru-checklist-task {
	--rru-check-size: 40px;
	position: relative;
	min-height: var(--rru-check-size);
	padding: calc((var(--rru-check-size) - 1.5em) / 2) 0 0 calc(var(--rru-check-size) + 16px);
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.5;
}

.rru-checklist-task:last-child { margin-bottom: 0; }

.rru-checklist-task::before,
.rru-checklist-task::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--rru-check-size);
	height: var(--rru-check-size);
	box-sizing: border-box;
}

.rru-checklist-task::before {
	border: 2.5px solid var(--rru-accent-text);
	border-radius: 50%;
}

.rru-checklist-task::after {
	background: var(--rru-accent-text);
	-webkit-mask: var(--rru-icon-check) center / 60% no-repeat;
	mask: var(--rru-icon-check) center / 60% no-repeat;
}

@media (max-width: 781px) {
	.rru-checklist-task { --rru-check-size: 32px; padding-left: calc(var(--rru-check-size) + 12px); margin-bottom: 16px; font-size: 16px; }
}

/* groups of one page stack as one topic: less padding between them */
.rru-main .rru-checklist + .rru-checklist { padding-block-start: clamp(24px, 3vw, 40px); }

/* How we clean / who comes to your home --------------------------------- */

.rru-quality-intro > * { max-width: 60ch; }
.rru-quality-lead { font-size: 18px; line-height: 1.6; }

.rru-quality-guarantee {
	margin-top: 18px !important;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--rru-white);
	color: var(--rru-primary);
}

.rru-quality-points {
	list-style: none;
	padding: 28px 0 0;
	margin: clamp(24px, 3vw, 36px) auto 0 !important;
	border-top: 2px solid var(--rru-primary);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px 48px;
	width: 100%;
}

.rru-quality-point {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	max-width: 42ch;
}

.rru-quality-point strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--rru-heading-font);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--rru-primary);
}

.rru-team-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 32px !important;
	width: 100%;
}

.rru-team-photos:not(:has(img)) { display: none; }
.rru-team-photo { margin: 0; }
.rru-team-photo img { border-radius: var(--rru-radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Testimonials (only real, linked reviews) ------------------------------ */

.rru-testimonial-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin: 28px auto 0 !important;
	width: 100%;
}

.rru-testimonial-row > * { margin: 0 !important; }

.rru-testimonial {
	border: 0 !important;
	padding: 28px 28px 24px !important;
	border-radius: var(--rru-radius);
	background: var(--rru-white);
	box-shadow: var(--rru-shadow);
}

.rru-testimonial p { font-size: 17px; line-height: 1.6; }

.rru-testimonial cite {
	display: block;
	margin-top: 16px;
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--rru-primary);
}

.rru-testimonial cite a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* Meet the owner --------------------------------------------------------- */

.rru-owner-row { margin-inline: auto !important; width: 100%; gap: clamp(28px, 6vw, 80px) !important; }
.rru-owner-photo-col .rru-photo { margin: 0; }
/* the owner photo keeps its own shape, so a landscape photo of two owners
   loses no one to a portrait crop (Bo, 2026-10-14) */
.rru-owner-photo-col .rru-photo img { border-radius: var(--rru-radius); width: 100%; height: auto; max-width: 440px; }
.rru-owner-heading { margin-block: 0 8px !important; }
.rru-owner-name { color: var(--rru-accent-text); font-weight: 700; margin-bottom: 14px !important; }
.rru-owner-copy .wp-block-buttons { margin-top: 24px; }
/* On a wide screen the story sits left and the photo right, so Meet the
   Owner does not mirror the team band above it and the map section below
   (both photo or map left; Bo, 2026-10-20). A phone keeps the photo first. */
@media (min-width: 782px) {
	.rru-owner-row { flex-direction: row-reverse; }
	.rru-owner-photo-col .rru-photo img { display: block; margin-inline-start: auto; }
}

/* Area intro: local note, neighborhoods, ZIP codes ---------------------- */

.rru-area-note { margin-top: 16px !important; font-size: 17px; line-height: 1.6; }

.rru-area-subheading {
	font-family: var(--rru-body-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--rru-accent-text) !important;
	margin: 28px 0 12px !important;
}

.rru-neighborhoods {
	list-style: none;
	padding: 0;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: none !important;
}

.rru-neighborhoods:not(:has(li)) { display: none; }

.rru-neighborhoods li {
	margin: 0 !important;
	line-height: 1.3;
	padding: 8px 16px !important; /* a theme first-child rule zeroed the first chip's top padding */
	border-radius: var(--rru-button-radius);
	background: var(--rru-surface);
	color: var(--rru-primary);
	font-weight: 600;
	font-size: 15px;
}

.rru-area-zips { margin-top: 18px !important; font-size: 16px; }

/* Review profile links (trust badges) */
.rru-review-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* Polish: one section's padding between stacked sections of one topic */
.rru-main .rru-intro + .rru-included,
.rru-main .rru-how-it-works + .rru-quality { padding-block-start: 0; }

@media (max-width: 560px) {
	.rru-quote-card-next { padding-inline: 22px; }
}

/* Phones: benefit cards go compact, icon beside the text */
@media (max-width: 600px) {
	.rru-benefit-card {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 16px;
		padding: 20px;
	}
	.rru-benefit-card > .rru-benefit-icon { grid-row: 1 / span 2; margin: 0 !important; }
	.rru-benefit-title { font-size: 20px !important; margin-bottom: 4px !important; }
	.rru-card-row { gap: 12px; }
}


/* -- 261007-alx: the home page follows Alex's live home page ------------- */

/* A benefit tile's own icon image (photos.slots benefit-SLUG) replaces the
   kit's drawn icon. */
.rru-benefit-card .rru-photo[class*="rru-photo--benefit-"] {
	margin: 0 0 16px !important;
	width: 72px;
	height: 72px;
}

.rru-benefit-card .rru-photo[class*="rru-photo--benefit-"] .rru-photo-img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.rru-benefit-card:has(.rru-photo[class*="rru-photo--benefit-"]) .rru-benefit-icon { display: none; }

/* Phones: the compact card's icon column holds the client's icon instead. */
@media (max-width: 600px) {
	.rru-benefit-card:has(> .rru-photo[class*="rru-photo--benefit-"]) { grid-template-columns: 56px minmax(0, 1fr); }
	.rru-benefit-card > .rru-photo[class*="rru-photo--benefit-"] {
		grid-row: 1 / span 2;
		width: 56px;
		height: 56px;
		margin: 0 !important;
	}
	.rru-benefit-card > .rru-photo[class*="rru-photo--benefit-"] .rru-photo-img { width: 56px; height: 56px; }
}

/* A benefit card's photo (photos.slots card-SLUG; Bo, 2026-10-14, as on
   Jon's own site): across the top of the card, the icon badge overlapping
   its lower edge. A card without one keeps the icon-only layout. */
.rru-benefit-card > .rru-photo[class*="rru-photo--card-"] {
	margin: -28px -26px 0 !important;
	width: calc(100% + 52px);
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--rru-radius) var(--rru-radius) 0 0;
}
.rru-benefit-card > .rru-photo[class*="rru-photo--card-"] .rru-photo-img { width: 100%; height: 100%; object-fit: cover; }
.rru-benefit-card:has(> .rru-photo[class*="rru-photo--card-"]) .rru-benefit-icon {
	margin-top: -24px !important;
	background: var(--rru-white);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--rru-ink) 35%, transparent);
	z-index: 1;
}
/* Phones: a card with a photo stacks like the service cards (Bo, 2026-10-19:
   the compact icon-beside-text grid crowded the title against the badge), and
   the cards get the service grid's spacing between them. */
@media (max-width: 600px) {
	.rru-benefit-card:has(> .rru-photo[class*="rru-photo--card-"]) {
		display: flex;
		flex-direction: column;
		padding: 28px 26px 30px;
	}
	.rru-benefit-card > .rru-photo[class*="rru-photo--card-"] { aspect-ratio: 16 / 10; }
	.rru-benefit-card:has(> .rru-photo[class*="rru-photo--card-"]) > .rru-benefit-icon { margin: -24px 0 18px !important; }
	.rru-benefit-card:has(> .rru-photo[class*="rru-photo--card-"]) .rru-benefit-title { font-size: 22px !important; margin-bottom: 8px !important; }
	.rru-card-row:has(.rru-photo[class*="rru-photo--card-"]) { gap: 20px; }
}

/* The badge strip under the benefit tiles: the client's own badge images
   (guarantee, Angi, Google, Yelp, Facebook), one row, same height. */
.rru-main .rru-badge-strip { padding-block: 0 clamp(36px, 5vw, 64px); }

.rru-badge-strip-row {
	gap: clamp(18px, 3vw, 40px) !important;
	align-items: center !important;
}

.rru-badge-strip-row .rru-photo { margin: 0 !important; }

.rru-badge-strip-row .rru-photo-img {
	height: clamp(64px, 8vw, 96px);
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* The CTA band's own icon (photos.slots cta-band) beside its heading. */
.rru-cta-band-inner .rru-photo { margin: 0 !important; flex: 0 0 auto; }

.rru-cta-band-inner .rru-photo-img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* The About block's bold-lead paragraphs ("Why we started." ...). */
.rru-about-band-point { margin-block: 0 14px; }

.rru-about-band-point strong { font-weight: 700; }

/* Hero as on Jon's own site (Bo, 2026-10-14): from 1000px the copy panel and
   the quote card meet with no gap and share one height, the panel's copy is
   centered in it with generous padding, the hero sits closer under the
   header, and the card's title is centered in its band. */
@media (min-width: 1000px) {
	.rru-main .rru-hero-quote { padding-block-start: clamp(28px, 3vw, 44px); }
	.rru-main .rru-hero-quote .rru-hero-row {
		gap: 0 !important;
		align-items: stretch !important;
	}
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel {
		align-self: stretch !important;
		display: flex;
		flex-flow: row wrap;
		align-content: center;
		align-items: center;
		padding: clamp(32px, 3.4vw, 52px) !important;
		border-radius: var(--rru-radius) 0 0 var(--rru-radius) !important;
	}
	/* each block takes the full row; the trust badges sit side by side */
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel > * { margin-inline: 0; flex: 0 0 100%; }
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-copy.rru-hero-panel > .rru-badge { flex: none; }
	.rru-main .rru-hero-quote .rru-hero-row > .rru-hero-form { align-self: stretch !important; }
	.rru-main .rru-hero-quote .rru-hero-form .rru-quote-card {
		height: 100%;
		border-radius: 0 var(--rru-radius) var(--rru-radius) 0;
	}
	.rru-hero-form .rru-quote-card-band { text-align: center; }
}

/* A wide logo (a mark with the name beside it, Bo 2026-10-14) keeps its
   height: the logo block's 150px width no longer squeezes it. */
.rru-site-logo,
.rru-site-logo a { width: auto !important; max-width: none !important; }
.rru-site-logo img { max-width: min(280px, 60vw) !important; height: 56px !important; object-fit: contain; }
@media (max-width: 600px) {
	.rru-site-logo img { height: 44px !important; }
}

/* Quote pop-up (Bo, 2026-10-19, as on Jon's own site) ---------------------
   parts/quote-modal.html prints the quote card and its photo hidden (slot
   quote-popup: the owner's choice on Business info, else the brief's owner
   photo; 261026-oph);
   the lead-form block's quote-modal.js moves them into a <dialog> that any
   Request a Quote button opens. With a photo the dialog sets the card beside
   it; without one it is the card alone. On a phone it fills the screen and
   the photo steps aside, so the form comes first. */
.rru-quote-modal { display: none; }

html:has(.rru-quote-dialog[open]) { overflow: hidden; }

.rru-quote-dialog {
	padding: 0;
	border: 0;
	border-radius: var(--rru-radius);
	width: min(520px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	overflow: auto;
	background: var(--rru-white);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	box-shadow: 0 30px 80px -20px color-mix(in srgb, #000 55%, transparent);
}

.rru-quote-dialog--photo { width: min(960px, calc(100vw - 32px)); }

.rru-quote-dialog::backdrop { background: color-mix(in srgb, #000 62%, transparent); }

.rru-quote-dialog__body { display: grid; grid-template-columns: minmax(0, 1fr); }

.rru-quote-dialog--photo .rru-quote-dialog__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.rru-quote-dialog .rru-quote-card { box-shadow: none; border-radius: 0; }
.rru-quote-dialog .rru-quote-card-band { text-align: center; padding-inline: 56px; }
.rru-quote-dialog .rru-quote-form { padding: 20px 26px 4px; }
.rru-quote-dialog .rru-quote-card-call { padding: 6px 26px 24px; font-size: 15px; }

.rru-quote-dialog .rru-photo--quote-popup { margin: 0; height: 100%; min-height: 100%; }
.rru-quote-dialog .rru-photo--quote-popup .rru-photo-img { height: 100%; object-fit: cover; object-position: 50% 30%; }

.rru-quote-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--rru-white) 92%, transparent);
	color: #1a1a1a;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px -2px color-mix(in srgb, #000 35%, transparent);
}

.rru-quote-dialog__close:hover { background: var(--rru-white); }
.rru-quote-dialog__close:focus-visible { outline: 3px solid var(--rru-quote); outline-offset: 2px; }

@media (max-width: 781px) {
	.rru-quote-dialog,
	.rru-quote-dialog--photo {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.rru-quote-dialog--photo .rru-quote-dialog__body { grid-template-columns: minmax(0, 1fr); }
	.rru-quote-dialog .rru-photo--quote-popup { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.rru-quote-dialog[open] { animation: rru-quote-in 180ms ease-out; }
	@keyframes rru-quote-in { from { opacity: 0; transform: translateY(12px); } }
}

/* Final CTA, bolder (Bo, 2026-10-19, as on Jon's own site): a larger
   two-line heading (the question a visitor searched, then the answer), the
   two buttons side by side with room above them, Call Us Today without the
   number, an arrow on each, the call button outlined in the quote orange. */
.rru-final-cta-heading {
	font-size: clamp(34px, 4.2vw, 56px) !important;
	line-height: 1.12 !important;
	max-width: 22ch;
	text-wrap: balance;
}

.rru-final-cta-answer { display: block; }

/* Phones: the question and answer took four lines and split "Mt." from
   "Juliet" (Bo, 2026-10-19: "it's on too many lines") */
@media (max-width: 600px) {
	.rru-final-cta-heading { font-size: 28px !important; }
}

.rru-final-cta-panel > .wp-block-buttons {
	margin-top: clamp(28px, 3vw, 40px) !important;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

/* the copy column takes more of the panel, as on Jon's, so both buttons sit
   on one line beside the photo */
@media (min-width: 782px) {
	.rru-final-cta-panel:has(> .rru-photo) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); }
}

.rru-final-cta-panel .wp-block-button__link {
	font-size: 18px;
	padding: 20px 32px;
	min-width: 230px;
	text-align: center;
}

.rru-final-cta-panel .wp-block-button__link::after {
	content: "\2192" / "";
	margin-left: 0.5em;
}

.rru-final-cta-panel .rru-ghost-button .wp-block-button__link {
	background: transparent !important;
	border: 2px solid var(--rru-quote) !important;
	color: var(--rru-on-accent) !important;
}

.rru-final-cta-panel .rru-ghost-button .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--rru-quote) 18%, transparent) !important;
}

@media (max-width: 600px) {
	.rru-final-cta-panel .wp-block-button,
	.rru-final-cta-panel .wp-block-button__link { width: 100%; min-width: 0; }
}