/* VR Green — component styles. Tokens come from theme.json presets
   (--wp--preset--color--*, --wp--custom--*). Breakpoint: 760px (the only one). */

/* The design system was authored against border-box (kit styles.css:81);
   without it max-width+padding containers render wider than spec. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; }

/* Root horizontal-overflow safeguard (2026-08-23 LAN mobile-overflow fix):
   a descendant's own scrollable region (e.g. a horizontally-scrolling
   carousel) should never make the page itself draggable sideways.
   overflow-x:clip strictly clips at the viewport edge without creating a
   scrollbar; `hidden` is the documented fallback for the rare engine
   without `clip` support (Safari < 16, mid-2022). This is defense in
   depth alongside the real fix at .vrg-reviews-scroller below — it does
   not substitute for containing the actual offending component, since a
   pure clip safeguard alone would still leave that component's ink
   overflow un-contained (e.g. focus-outline or scroll-into-view still
   reading a too-wide scrollable box internally). */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
	html, body { overflow-x: clip; }
}

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 2px; }
/* On dark surfaces the blue ring is invisible (1.48:1 on the navy footer) —
   use the CTA yellow there. */
.vrg-footer :focus-visible,
.vrg-getquote :focus-visible,
.vrg-quote-form :focus-visible,
.vrg-hero__content :focus-visible { outline-color: var(--wp--preset--color--yellow); }
::selection { background: rgba(41, 65, 205, 0.3); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Buttons ----------
   Approved design (F2): buttons use the kit .btn — Caprasimo 400 (never bold).
   Accessibility is carried by padding/min-height (≥44px target, F3), not by a
   different font. */
.vrg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 22px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vrg-btn--yellow { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--text-on-yellow); }
.vrg-btn--yellow:hover { background: var(--wp--preset--color--yellow-hover); color: var(--wp--preset--color--text-on-yellow); }
/* AA: white text needs ≥4.5 — brand #2ea043 gives 3.37, so text-bearing green
   fills use #237c34 (5.2). Decorative green stays brand. */
.vrg-btn--green { background: var(--wp--preset--color--green-fill); color: #fff; }
.vrg-btn--green:hover { background: var(--wp--preset--color--green-deep-700); color: #fff; }
.vrg-btn--outline-green { background: #fff; color: var(--wp--preset--color--green-deep-700); border: 2px solid var(--wp--preset--color--green); }
.vrg-btn--outline-green:hover { background: var(--wp--preset--color--green-tint-100); }
/* Pilot correction (Miami upholstery promo, post 10142, 2026-08-19): hero
   Call CTA is icon + "Call Now" now, not the full number in the decorative
   heading font (was cramped/hard to read on mobile). Reuses .vrg-btn--yellow
   as-is (same token/background/hover/dark-text-contrast as every other
   yellow CTA on the site, including Get a Quote) -- this rule only swaps
   the font back to the normal UI/body font and adds the icon/label gap;
   no new color, no new hover state, no animation. service-city-top.php
   gates the markup itself to this one post; every other ServiceCity page's
   hero CTA is untouched. */
.vrg-hero-cta--pilot-callnow { font-family: var(--wp--preset--font-family--body); gap: 8px; }
.vrg-btn--lg { font-size: 16px; padding: 15px 28px; }
.vrg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Pills / tags ---------- */
.vrg-pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* F3: interactive pills meet the touch target */
	background: #fff;
	border: 2px solid var(--wp--preset--color--green-tint-200);
	border-radius: var(--wp--custom--radius--pill);
	padding: 9px 16px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--wp--preset--color--green-deep-700);
	text-decoration: none;
	transition: background 0.15s ease;
}
.vrg-pill:hover { background: var(--wp--preset--color--green-tint-100); color: var(--wp--preset--color--green-deep-700); }
.vrg-tag {
	display: inline-block;
	background: var(--wp--preset--color--green-tint-100);
	color: var(--wp--preset--color--green-deep-800);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---------- Sections ---------- */
/* Full-width background, content capped at --wp--custom--width--wide and
   centered: padding-inline grows past pad-x once the viewport exceeds
   wide+2*pad-x, so grids/heroes/cards inside .vrg-section (CityHub,
   StateHub, service-archive, blog-list, contact, special-offers,
   ServiceCity top/bottom) don't stretch edge-to-edge on large monitors,
   without adding a wrapper element or shrinking the section's own
   background. Same technique on .vrg-header/.vrg-footer below. */
.vrg-section { padding: var(--wp--preset--spacing--section-md) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-section--lg { padding-top: var(--wp--preset--spacing--section-lg); padding-bottom: var(--wp--preset--spacing--section-lg); }
.vrg-section--sm { padding-top: var(--wp--preset--spacing--section-sm); padding-bottom: var(--wp--preset--spacing--section-sm); }
.vrg-section--white { background: #fff; }

/* ---------- Cards ---------- */
.vrg-card {
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	padding: 24px;
	transition: background 0.15s ease;
}
/* Same swap as .vrg-faq__item / .vrg-review-card: card bg must contrast its
   section, never match it (Phase 7-only class — no Home usage to regress). */
.vrg-section--white .vrg-card { background: var(--wp--preset--color--base); }
a.vrg-card:hover { background: var(--wp--preset--color--green-tint-100); }

/* ---------- Header ---------- */
.vrg-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* Full-width white bar, content capped/centered — see .vrg-section comment above. */
	padding: 16px max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2));
	flex-wrap: wrap;
	background: #fff;
	box-shadow: var(--wp--custom--shadow--sm);
	position: relative;
	z-index: 40;
}
.vrg-header__logo { flex-shrink: 0; display: block; }
.vrg-header__logo img { height: 56px; width: auto; display: block; }
.vrg-header__nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px); flex-wrap: wrap; }
.vrg-header__nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}
.vrg-header__nav a:hover { color: var(--wp--preset--color--green-deep-700); }
.vrg-header__nav a.vrg-nav-offers { font-weight: 700; color: var(--wp--preset--color--offers-red); }
.vrg-header__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vrg-header__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}
.vrg-header__phone:hover { color: var(--wp--preset--color--green-deep-700); }
.vrg-header__phone-icon {
	display: none; /* mobile-only — shown in the 760px media query below */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	text-decoration: none;
}
.vrg-header__phone-icon:hover { background: var(--wp--preset--color--green-tint-200); }
.vrg-header__phone-icon:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }

/* ---------- Contextual Services/Areas dropdown (header, mobile panel, footer) ---------- */
.vrg-navdrop { position: relative; }
.vrg-navdrop__toggle {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
	user-select: none;
}
.vrg-navdrop__toggle::-webkit-details-marker { display: none; }
.vrg-navdrop__toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.15s ease;
}
.vrg-navdrop[open] > .vrg-navdrop__toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.vrg-navdrop__toggle:hover { color: var(--wp--preset--color--green-deep-700); }
.vrg-navdrop__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 3px; border-radius: 4px; }
.vrg-navdrop--desktop .vrg-navdrop__menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	z-index: 50;
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: 10px;
	min-width: 240px;
	max-width: min(90vw, 420px);
	max-height: 60vh;
	overflow-y: auto;
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
}
.vrg-navdrop--desktop .vrg-navdrop__menu a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	white-space: normal;
}
.vrg-navdrop--desktop .vrg-navdrop__menu a:hover,
.vrg-navdrop--desktop .vrg-navdrop__menu a:focus-visible { background: var(--wp--preset--color--green-tint-100); }

/* Mobile hamburger toggle + panel */
.vrg-header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.vrg-header__hamburger span { display: block; width: 24px; height: 2px; background: var(--wp--preset--color--contrast); margin: 0 auto; transition: transform 0.15s ease, opacity 0.15s ease; }
.vrg-header__hamburger:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }
.vrg-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vrg-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vrg-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.vrg-mobile-menu { display: none; }

@media (max-width: 760px) {
	.vrg-header__nav { display: none; }
	/* F1 superseded (owner directive, 2026-08-13 layout-width pass): the
	   text+label phone link still hides (no room for it), but a circular
	   icon-only Call button now takes its place — see .vrg-header__phone-icon
	   above. The sticky bottom bar's Call action is unchanged/still present;
	   this adds an above-the-fold option so a visitor doesn't have to scroll
	   to find one. */
	.vrg-header__phone { display: none; }
	.vrg-header__phone-icon { display: flex; }
	.vrg-header__hamburger { display: flex; }
	/* Logo/gaps tightened so logo + phone icon + quote button + hamburger all
	   fit without overlap or overflow down to 360px (measured live via CDP —
	   see docs/audit/viewport-screenshots-20260813/). */
	.vrg-header { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
	/* .vrg-header.vrg-header--home (not just .vrg-header--home) to out-specify
	   the desktop-size override at line ~839, which has equal specificity and
	   would otherwise win on source order and leave the home-page logo at
	   60px — wide enough to wrap the hamburger onto a second row at
	   360-390px (confirmed live via CDP before this fix). */
	.vrg-header__logo img,
	.vrg-header.vrg-header--home .vrg-header__logo img { height: 38px; }
	.vrg-header__right { gap: 8px; }
	.vrg-header__quote-btn { padding: 10px 14px; font-size: 13px; }

	/* Header-to-breadcrumb mobile spacing (owner-directed pilot, 2026-08-19
	   Miami upholstery promo reconciliation; generalized 2026-08-23 owner
	   correction). Any section inheriting the base .vrg-section's
	   --section-md token, clamp(40px,5vw,72px) == flat 40px below ~800px
	   viewport width, put its first-child breadcrumbs 64px below the
	   header -- confirmed too much, and confirmed via a header/breadcrumb
	   getBoundingClientRect() measurement (not just visual inspection) on
	   both a StateHub (/florida) and a generic page (/green-clean-services),
	   which still had this 64px gap as of 2026-08-23. CityHub and
	   ServiceCity had already been corrected to 32px, but only via a
	   padding-top override on .vrg-service-hero specifically -- a real
	   layout component (the 2-col hero grid, see "ServiceCity / hub hero"
	   above), not a marker for "this section leads with breadcrumbs". Since
	   StateHub and generic pages don't use that 2-col layout, they were
	   silently excluded from the earlier fix. This class carries ONLY the
	   spacing decision, decoupled from .vrg-service-hero's own grid/layout
	   rules, so every template that opens with breadcrumbs (StateHub,
	   CityHub, ServiceCity, generic page) can share it identically without
	   being forced into an unrelated 2-column layout. Applied in the PHP
	   patterns: state-hub-content.php, city-hub-content.php,
	   service-city-top.php, generic-page-content.php. */
	.vrg-section--breadcrumb-lead { padding-top: 8px; }

	.vrg-mobile-menu[hidden] { display: none; }
	.vrg-mobile-menu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 60;
		background: #fff;
		overflow-y: auto;
		/* Top padding cleared to 76px (16px close-button offset + 44px height +
		   16px gap) so the fixed close button never overlaps the first nav row. */
		padding: 76px max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)) 100px;
	}
	/* Fixed-to-viewport (not just sticky-to-panel) close control (owner
	   directive, 2026-08-13 layout-width pass) — the header's own hamburger
	   sits underneath this panel (z-index 40 < 60) once open, so it's not
	   actually clickable; this is the real close affordance. position:fixed
	   (rather than absolute/sticky relative to the scrolling panel) keeps it
	   pinned in the corner regardless of how far the panel is scrolled. */
	.vrg-mobile-menu__close {
		position: fixed;
		top: 16px;
		right: max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2));
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: none;
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--neutral-200);
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
		z-index: 61;
	}
	.vrg-mobile-menu__close:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }
	.vrg-mobile-menu nav { display: grid; gap: 4px; }
	/* Point fix (owner directive, 2026-08-25): the "Get a Quote" CTA
	   (<a class="vrg-btn vrg-btn--yellow">, header.php) is also a direct
	   `<nav> > a` child (kept in the same <nav> for natural DOM/keyboard
	   order, not because it's a nav link), so it was unintentionally
	   matching this plain-nav-link row style meant for "Services",
	   "About", etc. -- display:flex + justify-content:space-between with
	   only one text child pins that text to the left edge and leaves the
	   rest of the pill empty, exactly the reported bug. :not(.vrg-btn)
	   excludes it here so the base .vrg-btn component's own
	   inline-flex/justify-content:center (vr-green.css ~L52) is the only
	   thing controlling its layout, same as every other yellow CTA
	   button on the site -- untouched by this change. */
	.vrg-mobile-menu > nav > a:not(.vrg-btn),
	.vrg-mobile-menu .vrg-navdrop__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 4px;
		border-bottom: 1px solid var(--wp--preset--color--neutral-200);
		font-size: 16px;
	}
	.vrg-mobile-menu .vrg-navdrop__menu {
		list-style: none;
		margin: 0 0 4px;
		padding: 0 0 0 14px;
		display: grid;
		gap: 2px;
		max-height: none;
	}
	.vrg-mobile-menu .vrg-navdrop__menu a { display: block; padding: 10px 4px; font-size: 15px; }
	.vrg-mobile-menu .vrg-btn { margin-top: 14px; text-align: center; }
	.vrg-mobile-menu .vrg-header__phone { border-bottom: 1px solid var(--wp--preset--color--neutral-200); padding: 14px 4px; }
	/* Prevent background scroll while the mobile panel is open. */
	body.vrg-mobile-menu-open { overflow: hidden; }
	/* Third-party chat launcher (<chat-widget>, tracking.php's loader script)
	   floats at a very high z-index above everything, including this panel's
	   z-index:60 — confirmed live, 2026-08-13 layout-width pass: it covered
	   the bottom-right corner of the phone CTA panel below. <chat-widget> is
	   a light-DOM custom-element host (only its internal content is shadow
	   DOM), so it's targetable/hideable from ordinary page CSS despite the
	   encapsulation that blocks reaching its shadow content (same reasoning
	   as the shadow-root style injection in vr-green.js). !important because
	   the widget's own script sets an inline display style on this host. */
	body.vrg-mobile-menu-open chat-widget { display: none !important; }

	/* Phone CTA panel inside the mobile drawer (owner directive, 2026-08-13
	   layout-width pass) — always immediately after the yellow quote button
	   (mobile-menu-call-panel.php is included right after it in the markup).
	   Distinct blue-tint card so it doesn't compete with the yellow button
	   right above it, but stays within the existing green/blue/yellow
	   palette — no new colors, no animation. */
	.vrg-mobile-call-panel {
		margin-top: 16px;
		padding: 18px;
		border-radius: var(--wp--custom--radius--card);
		background: var(--wp--preset--color--blue-tint-text);
		text-align: center;
	}
	.vrg-mobile-call-panel__title { margin: 0 0 6px; font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 400; color: var(--wp--preset--color--blue-dark); }
	.vrg-mobile-call-panel__sub { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--neutral-700); }
	.vrg-mobile-call-panel__btn { width: 100%; margin-top: 0 !important; }
	.vrg-mobile-call-panel__hours { margin: 10px 0 0; font-size: 13px; color: var(--wp--preset--color--neutral-600); }
}
@media (min-width: 761px) {
	.vrg-navdrop--mobile { display: none; }
}

/* ---------- Footer ---------- */
.vrg-footer {
	background: var(--wp--preset--color--blue-dark);
	color: var(--wp--preset--color--blue-tint-text);
	/* Full-width dark band, content capped/centered — see .vrg-section comment above. */
	padding: clamp(40px, 5vw, 64px) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)) 28px;
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
}
.vrg-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(24px, 3vw, 48px);
}
.vrg-footer h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 16px;
	color: #fff;
	margin: 0 0 14px;
}
.vrg-footer a { color: var(--wp--preset--color--blue-tint-text); text-decoration: none; font-size: 14px; }
.vrg-footer a:hover { color: #fff; }
.vrg-footer a.vrg-btn--yellow { color: var(--wp--preset--color--text-on-yellow); font-size: 14px; }
.vrg-footer a.vrg-btn--yellow:hover { color: var(--wp--preset--color--text-on-yellow); }
.vrg-footer__logo img { height: 100px; width: auto; display: block; margin-bottom: 14px; }
.vrg-footer__tagline { font-size: 14px; line-height: 1.6; max-width: 40ch; margin: 0 0 14px; }
.vrg-footer__phone { font-size: 18px !important; font-weight: 700; color: #fff !important; }
/* .vrg-social is also a <ul>, so the reset below (needed for the Contact/
   Quick Links columns) was winning on specificity over .vrg-social's own
   margin-top and collapsing it to 0 -- confirmed live (computed margin-top
   0px despite the rule saying 14px). Spacing now comes from the tagline's
   own margin-bottom instead, same pattern as .vrg-footer__logo img above,
   so it doesn't depend on out-specificing this reset. */
.vrg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vrg-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: clamp(28px, 4vw, 44px);
	padding-top: 20px;
}
.vrg-footer__bottom, .vrg-footer__bottom a { font-size: 13px; color: var(--wp--preset--color--footer-muted); }
.vrg-footer__bottom a:hover { color: #fff; }
.vrg-footer__legal { display: flex; gap: 20px; }

/* Minimal footer (promo landing) */
.vrg-footer--minimal { border-radius: 0; padding: 24px max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-footer--minimal .vrg-footer__bottom { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- ServiceCity / hub hero (shared 2-col layout) ---------- */
.vrg-service-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
/* Literal clamp (not the h1-page preset var): WP kebab-cases "h1-page" to
   "h-1-page" (digit-run splitting, the same a11y-slug gotcha as theme.json
   color slugs) — every other H1 in this theme hardcodes its clamp() too. */
.vrg-service-hero h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin: 0 0 14px; text-wrap: pretty; }
.vrg-rating-line { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14.5px; font-weight: 600; color: var(--wp--preset--color--neutral-700); }
.vrg-rating-line .vrg-stars { font-size: 15px; }

/* Prose slot (client's free-editing canvas — CONTENT_MODEL.md §1) */
/* Prose width (owner directive, 2026-08-13 "exact 900px prose" pass):
   .vrg-prose itself is NOT given a max-width — it's used inside containers
   of different widths sitewide (.vrg-generic-page's 1040px content token,
   StateHub/CityHub/ServiceCity's wide 1320px-ish grid sections, .vrg-blog-
   post's 1040px content token) and a fixed cap on the wrapper itself can't
   be correct for all of them at once. Instead every child gets its own
   max-width: var(--width--prose) (900px) + auto side margins, so each
   paragraph/heading/list self-centers at exactly 900px regardless of which
   template wraps it. Two selector tiers because WP's wp:post-content block
   always wraps its actual output in one extra .entry-content div — so a
   post-content paragraph is a GRANDCHILD of .vrg-prose, not a direct child
   (confirmed live: an escape-hatch rule scoped to ">" direct children only
   never matched the About page's embedded quote-form, which sat one level
   deeper than expected and was silently still capped to 900px). The
   .entry-content wrapper itself is left unconstrained; its own children get
   the same treatment as true .vrg-prose direct children. Wide/structural
   children (forms, tables, multi-column layouts) opt out just below, since
   embedding a .vrg-quote-form directly in post-content (About page) must
   not shrink it to the reading measure.

   Plain content images/galleries do NOT opt out (owner directive, 2026-08-14
   dataset-wide image/FAQ correction) — they used to be in this escape list,
   which was the exact root cause of the reported bug: max-width:none with no
   width/margin of its own left a <figure> at its default block width (100%
   of the unconstrained .entry-content, e.g. 1312px on a wide viewport),
   while the <img> inside rendered at its own smaller intrinsic size and
   stayed pinned to the left edge — "1312px-wide outer box, ~1024px image,
   empty space on the right" is exactly that. .vrg-carousel (built by
   vr_group_consecutive_content_images(), inc/content-helpers.php) and plain
   single-image figures both now fall through to the base max-width:900px +
   auto-margin rule below like any other prose child, so they're centered
   and correctly capped — same fix, same root cause, one shared rule.
   .alignwide/.alignfull remain a deliberate escape hatch (WP's own opt-in
   for an editor who explicitly wants an image wider than the text column),
   not exercised by today's migrated content but kept for future use. */
.vrg-prose { margin-inline: auto; }
.vrg-prose > .entry-content { max-width: none; margin-left: 0; margin-right: 0; }
.vrg-prose > *,
.vrg-prose > .entry-content > * { max-width: var(--wp--custom--width--prose); margin-left: auto; margin-right: auto; }
.vrg-prose > .vrg-quote-form,
.vrg-prose > .vrg-quote-wrap,
.vrg-prose > table,
.vrg-prose > .wp-block-table,
.vrg-prose > .wp-block-columns,
.vrg-prose > .alignwide,
.vrg-prose > .alignfull,
.vrg-prose > .entry-content > .vrg-quote-form,
.vrg-prose > .entry-content > .vrg-quote-wrap,
.vrg-prose > .entry-content > table,
.vrg-prose > .entry-content > .wp-block-table,
.vrg-prose > .entry-content > .wp-block-columns,
.vrg-prose > .entry-content > .alignwide,
.vrg-prose > .entry-content > .alignfull { max-width: none; }
/* An image narrower than its (now correctly capped) 900px figure box is
   still a plain inline-level <img> by default and would sit left-aligned
   inside that box otherwise — center it explicitly rather than just relying
   on the box itself being centered. Native resolution is never upscaled
   (img { max-width: 100% } above already prevents stretching beyond it). */
.vrg-prose figure.wp-block-image,
.vrg-prose .wp-block-image { text-align: center; }
.vrg-prose figure.wp-block-image img,
.vrg-prose .wp-block-image img { display: inline-block; }
/* .alignright/.alignleft (WP core block-library float) only make sense for
   an image narrower than its column, letting text wrap beside it — every
   content image here is uniformly capped to the full 900px prose measure
   (same fix as the rest of this rule set), so there's never room left for
   an actual float; confirmed live on the About page's one alignright image,
   where WP core's default float:right with nothing to wrap around just
   produced a ~12-22px off-center offset instead of a real floated layout.
   Neutralizing float here — not the align classes themselves — so this
   still degrades sanely if a genuinely narrower aligned image appears later. */
.vrg-prose .wp-block-image.alignright,
.vrg-prose .wp-block-image.alignleft { float: none; }
.vrg-prose h2 { font-size: clamp(24px, 3vw, 36px); margin: 1.4em 0 0.6em; }
.vrg-prose h3 { font-size: 20px; margin: 1.2em 0 0.5em; }
.vrg-prose p, .vrg-prose li { font-size: 15.5px; line-height: 1.7; color: var(--wp--preset--color--neutral-800); }
.vrg-prose > *:first-child { margin-top: 0; }

/* ---------- Image carousel (2+ consecutive migrated content images) ----------
   Built server-side by vr_group_consecutive_content_images() (content-
   helpers.php) — this CSS only styles what's already in the DOM.

   No-JS state (default): the track is a plain stacked column, every slide
   visible, centered, at its own natural size — a full, usable page with
   zero JavaScript, satisfying "no content hidden permanently when
   JavaScript fails". assets/js/vr-green.js is the ONLY thing that adds
   .vrg-carousel--enhanced and un-hides the prev/next/dots/counter controls,
   so a JS-less visitor never sees dead buttons that don't do anything. */
/* Gallery width correction (owner directive, 2026-08-24): on ordinary
   ServiceCity pages, vr_render_promoted_gallery()/vr_render_service_gallery()
   render their <section class="vrg-section"> OUTSIDE the .vrg-prose content
   wrapper, so the carousel never picked up .vrg-prose's own 900px reading-
   measure cap (.vrg-prose > * above) and stretched to .vrg-section's full
   wide (1320px) measure instead -- unlike the reference page (post 10142),
   whose gallery is built by vr_group_consecutive_content_images() FROM
   post_content and therefore renders INSIDE .vrg-prose, already narrow and
   centered. Reuses the SAME --wp--custom--width--prose token .vrg-prose
   already uses, rather than a new hardcoded value, so both galleries stay
   in sync if that token ever changes. Harmless where .vrg-carousel already
   sits inside .vrg-prose (the cap is simply reasserted at the same value);
   on mobile this is a max-width, not a fixed width, so it has no effect
   below 900px -- the carousel still fills its section's normal padded
   width like any other block. */
.vrg-carousel { max-width: var(--wp--custom--width--prose); margin-inline: auto; }
.vrg-carousel { position: relative; }
.vrg-carousel__viewport { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.vrg-carousel__track { display: flex; flex-direction: column; gap: 16px; }
.vrg-carousel__slide { margin: 0; }
.vrg-carousel__slide img { width: 100%; height: auto; display: block; border-radius: var(--wp--custom--radius--card); }
.vrg-carousel__prev, .vrg-carousel__next, .vrg-carousel__dots, .vrg-carousel__counter { display: none; }

/* Enhanced (JS-driven sliding) state. */
.vrg-carousel--enhanced .vrg-carousel__viewport { position: relative; }
/* Mixed-ratio gallery fix (owner directive, 2026-08-22 correction pass):
   the viewport's height is a definite value (JS-set aspect-ratio, below)
   but track/slide previously had no explicit height of their own — an
   auto-height row-direction flex container sizes to its TALLEST child's
   own content height, so a single narrow/tall image in a 4-image gallery
   could blow the track (and every slide) out to ~2x the viewport's own
   height, well past what overflow:hidden on the viewport was clipping
   cleanly. height:100% here gives track/slide a definite size (100% of
   the viewport's own definite aspect-ratio height) so NO slide can ever
   grow the track — every image is then object-fit:contain within one
   stable frame, matching every OTHER image regardless of its own ratio. */
.vrg-carousel--enhanced .vrg-carousel__track {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	height: 100%;
	transition: transform 0.3s ease;
	will-change: transform;
}
.vrg-carousel--enhanced .vrg-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--neutral-200);
}
/* object-fit:contain (never crop) inside a server-reserved aspect-ratio box
   — set from the JS controller using the first slide's own width/height
   attributes (data-vrg-ratio), so the box is correct before any image
   finishes loading and nothing shifts once it does. */
.vrg-carousel--enhanced .vrg-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

.vrg-carousel__prev, .vrg-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--contrast);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--md);
	z-index: 2;
}
.vrg-carousel--enhanced .vrg-carousel__prev,
.vrg-carousel--enhanced .vrg-carousel__next { display: flex; align-items: center; justify-content: center; }
.vrg-carousel__prev { left: 12px; }
.vrg-carousel__next { right: 12px; }
.vrg-carousel__prev:hover, .vrg-carousel__next:hover { background: #fff; }
.vrg-carousel__prev:focus-visible, .vrg-carousel__next:focus-visible,
.vrg-carousel__dot:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }
.vrg-carousel__prev:disabled, .vrg-carousel__next:disabled { opacity: 0.4; cursor: default; }

.vrg-carousel--enhanced .vrg-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}
.vrg-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-200);
	cursor: pointer;
}
.vrg-carousel__dot[aria-current="true"] { background: var(--wp--preset--color--green-deep-700); }
.vrg-carousel--enhanced .vrg-carousel__counter {
	display: block;
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--wp--preset--color--neutral-600);
}
@media (max-width: 600px) {
	.vrg-carousel__prev, .vrg-carousel__next { width: 40px; height: 40px; font-size: 18px; }
	.vrg-carousel__prev { left: 8px; }
	.vrg-carousel__next { right: 8px; }
}

/* ---------- CityHub / StateHub grids ---------- */
.vrg-service-hero__photo { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.vrg-service-hero__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vrg-state-hero__h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin: 0 0 18px; max-width: 20ch; text-wrap: pretty; }
.vrg-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.vrg-hub-grid__card { display: block; text-decoration: none; }
.vrg-hub-grid__title { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 19px; color: var(--wp--preset--color--contrast); margin-bottom: 6px; }
.vrg-hub-grid__desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--neutral-700); }
.vrg-hub-grid__card--cta {
	/* AA: white text on brand --green is 3.37:1 — same fix as .vrg-btn--green. */
	background: var(--wp--preset--color--green-fill);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
}
.vrg-hub-grid__card--cta:hover { background: var(--wp--preset--color--green-deep-700); }
.vrg-hub-grid--cities .vrg-hub-grid__card--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--wp--preset--color--green-deep-700); }
.vrg-hub-neighborhoods__lede { margin: 0 0 18px; font-size: 15px; color: var(--wp--preset--color--neutral-700); }
.vrg-hub-neighborhoods { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.vrg-tag--accent { background: var(--wp--preset--color--green-tint-100); color: var(--wp--preset--color--green-deep-800); }
.vrg-hub-nearby { margin: 0; font-size: 14px; color: var(--wp--preset--color--neutral-700); }
.vrg-hub-nearby a { font-weight: 600; }

/* ---------- Contact page ---------- */
.vrg-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.vrg-contact-grid__cards { display: grid; gap: 16px; }
.vrg-contact-grid__cards h2 { font-size: 20px; margin: 0 0 14px; }
.vrg-contact-grid__cards p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--neutral-700); }
.vrg-contact-phone { font-size: 24px; font-weight: 700; text-decoration: none; color: var(--wp--preset--color--contrast); }
/* Social links: icon + accessible visible label (footer, Contact "Follow us") */
.vrg-social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 16px; }
.vrg-social a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.vrg-social svg { flex-shrink: 0; }
.vrg-social a:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 3px; border-radius: 4px; }
.vrg-contact-intro { max-width: 70ch; font-size: 15.5px; line-height: 1.7; color: var(--wp--preset--color--neutral-700); margin: 4px 0 clamp(20px, 3vw, 32px); }

/* ---------- Contact: branch location cards ---------- */
/* .vrg-branch-card__map (summary/iframe only) is still used by
   vr_render_branch_panel() (functions.php) on DC-metro ServiceCity/CityHub
   pages — .vrg-branch-grid/.vrg-branch-card (the old always-expanded
   14-card Contact grid) were retired in favor of contact-map-tabs.php and
   removed here; nothing else referenced them. */
.vrg-branch-card__map summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--green-deep-700); }
.vrg-branch-card__map summary:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 3px; }
.vrg-branch-card__map iframe { margin-top: 10px; border-radius: 10px; display: block; }

/* ---------- Contact: location finder (map tabs) ---------- */
.vrg-location-finder__lede { margin: 6px 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); max-width: 70ch; }

/* Mobile selector: visible ≤760px, replaced by the tablist above that. */
.vrg-location-finder__mobile-select { display: none; }
.vrg-location-finder__mobile-select label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.vrg-location-finder__select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--neutral-200);
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}
.vrg-location-finder__select:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }

.vrg-location-finder__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.vrg-location-finder__tab {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--pill);
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-700);
	cursor: pointer;
}
.vrg-location-finder__tab:hover { border-color: var(--wp--preset--color--green); }
.vrg-location-finder__tab:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }
.vrg-location-finder__tab[aria-selected="true"] {
	background: var(--wp--preset--color--green-deep-700);
	border-color: var(--wp--preset--color--green-deep-700);
	color: #fff;
}

.vrg-location-finder__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.vrg-location-finder__map { position: relative; }
.vrg-location-finder__map iframe { width: 100%; height: 320px; border-radius: var(--wp--custom--radius--card); display: block; background: var(--wp--preset--color--neutral-200); }
.vrg-location-finder__map-fallback {
	height: 320px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--neutral-200);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	color: var(--wp--preset--color--neutral-700);
}
.vrg-location-finder__map-open { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--green-deep-700); }
.vrg-location-finder__info h3 { font-size: 22px; margin: 0 0 8px; }
.vrg-location-finder__address { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--neutral-800); }
.vrg-location-finder__contact { margin: 0 0 16px; font-size: 14.5px; color: var(--wp--preset--color--neutral-700); }
.vrg-location-finder__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vrg-location-finder__note { margin: 14px 0 0; font-size: 13px; color: var(--wp--preset--color--neutral-600); }

@media (max-width: 760px) {
	.vrg-location-finder__mobile-select { display: block; margin-bottom: 20px; }
	.vrg-location-finder__tabs { display: none; }
	.vrg-location-finder__panel { grid-template-columns: 1fr; }
	.vrg-location-finder__map iframe,
	.vrg-location-finder__map-fallback { height: 220px; }
}

.vrg-service-branch-panel { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--card); padding: 24px; }
.vrg-service-branch-panel__relationship { display: inline-block; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--green-deep-700); background: var(--wp--preset--color--green-tint-100); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.vrg-service-branch-panel h3 { font-size: 19px; margin: 0 0 8px; }
.vrg-service-branch-panel__address { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.vrg-service-branch-panel__address a { color: var(--wp--preset--color--neutral-700); text-decoration: underline; }
/* Point fix (owner directive, 2026-08-25): the regional call-CTA button
   (an <a class="vrg-btn"> block, own line) had no bottom margin, so it sat
   flush against the Location-phone/hours line right below it -- every
   other sibling in this panel (h3, address) already carries its own
   bottom margin, this one just never got one. Row-gap between the wrapped
   Location-phone/hours lines bumped from 6px to 10px to read as a
   deliberate, even interval rather than a near-zero accidental one, still
   compact (column-gap unchanged). */
.vrg-service-branch-panel__cta { margin: 0 0 16px; }
.vrg-service-branch-panel__meta { margin: 0 0 14px; font-size: 14px; color: var(--wp--preset--color--neutral-700); display: flex; flex-wrap: wrap; gap: 10px 18px; }
.vrg-service-branch-panel__links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 10px; }
.vrg-service-branch-panel__links a { font-size: 14px; font-weight: 600; }
.vrg-service-branch-panel--map-layout {
	max-width: var(--wp--custom--width--prose, 900px);
	margin-inline: auto;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	grid-template-areas: "map content";
	overflow: hidden;
}
.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__map { grid-area: map; min-height: 360px; }
.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__map iframe { width: 100%; height: 100%; min-height: 360px; display: block; }
.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__content { grid-area: content; padding: clamp(24px, 4vw, 38px); align-self: center; }
/* Two-line, centered branch-panel call CTA (owner directive, 2026-08-22
   gallery/CTA correction pass). The regional-CTA button's label + number
   ("Call for service in South Florida: (954) 758-4777") is long enough to
   wrap at this column's width; previously fixed with a left-align override
   once it wrapped, which read as jagged/accidental rather than deliberate.
   Now the label and number are two semantic inner spans (functions.php
   vr_render_branch_panel()) inside the SAME <a href="tel:...">, laid out
   as two balanced, centered lines via flex-column -- still one clickable
   control, no <br> in stored content, phone-role/data attributes and tel:
   value unchanged. Scoped to the map-layout variant specifically: it's the
   only place the column is narrow enough for this to wrap; the plain
   single-column branch panel has room for it on one line already. Applies
   at every viewport (not just desktop) for one consistent, deliberate
   presentation rather than switching layouts at a breakpoint -- verified
   against all 4 regions' label+number lengths (South Florida, Bay Area,
   Sacramento, NY/NJ Metro) with no overflow or awkward wrap at any of
   them. */
.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__cta {
	flex-direction: column;
	gap: 2px;
	line-height: 1.35;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
}
.vrg-service-branch-panel__cta-label,
.vrg-service-branch-panel__cta-number { display: block; }
.vrg-service-branch-panel__cta-number { font-weight: 600; }

@media (max-width: 760px) {
	.vrg-service-branch-panel--map-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "map" "content";
	}
	.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__map,
	.vrg-service-branch-panel--map-layout .vrg-service-branch-panel__map iframe { min-height: 250px; height: 250px; }
}

/* ---------- Portfolio ---------- */
.vrg-portfolio-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 32px; }
.vrg-portfolio-jump a { padding: 8px 16px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--green-tint-100); font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--green-deep-700); }
.vrg-portfolio-jump a:hover { background: var(--wp--preset--color--green-tint-200); }
.vrg-portfolio-group { margin-bottom: clamp(32px, 4vw, 48px); scroll-margin-top: 90px; }
.vrg-portfolio-group h2 { font-size: 22px; margin: 0 0 16px; }
.vrg-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vrg-portfolio-thumb { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.vrg-portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.vrg-portfolio-thumb:hover img { transform: scale(1.05); }
.vrg-portfolio-thumb:focus-visible { outline: 2px solid var(--wp--preset--color--green-deep-700); outline-offset: 2px; }

.vrg-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 20, 15, 0.92); display: flex; align-items: center; justify-content: center; }
.vrg-lightbox[hidden] { display: none; }
.vrg-lightbox__img { max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain; border-radius: 8px; }
.vrg-lightbox__close, .vrg-lightbox__prev, .vrg-lightbox__next {
	position: absolute;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
}
.vrg-lightbox__close:hover, .vrg-lightbox__prev:hover, .vrg-lightbox__next:hover { background: rgba(255, 255, 255, 0.3); }
.vrg-lightbox__close:focus-visible, .vrg-lightbox__prev:focus-visible, .vrg-lightbox__next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vrg-lightbox__close { top: 20px; right: 20px; }
.vrg-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.vrg-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
	.vrg-lightbox__prev { left: 8px; }
	.vrg-lightbox__next { right: 8px; }
}

/* ---------- Special Offers page ---------- */
.vrg-offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.vrg-offer-card { display: flex; flex-direction: column; gap: 12px; border-top: 6px solid; box-shadow: var(--wp--custom--shadow--md); overflow: hidden; }
.vrg-offer-card__figure { font-family: var(--wp--preset--font-family--heading); font-size: 40px; }
.vrg-offer-card__unit { font-family: var(--wp--preset--font-family--body); font-size: 16px; font-weight: 600; color: var(--wp--preset--color--neutral-600); }
.vrg-offer-card h2 { font-size: 21px; margin: 0; }
.vrg-offer-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); flex: 1; }
.vrg-offer-card .vrg-btn { align-self: flex-start; }

/* Phase 9 (2026-08-16): offer-card image slot, commercial-card variant,
   trust strip -- additive, reuse the same tokens/shadow/radius scale as
   the rest of the page rather than introducing new ones. */
/* .vrg-card sets padding:24px on the whole card (assets/css/vr-green.css
   ~L107) -- overridden to 0 here so the image can be truly full-bleed;
   .vrg-offer-card__body re-applies the equivalent padding around the text
   instead (found + fixed during Phase 9 viewport verification: the image
   was previously inset by 23px on 3 sides instead of sitting flush). */
.vrg-offer-card { padding: 0; }
.vrg-offer-card__image { aspect-ratio: 4 / 3; overflow: hidden; }
.vrg-offer-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vrg-offer-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
/* Pilot correction (Miami upholstery promo, post 10142, 2026-08-19): the
   offer card's accent was --wp--preset--color--offers-red (rgb(204,45,34)),
   stored as inline style="border-top-color:..."/"color:..." on this one
   post's own post_content (owner directive: zero DB writes for this
   correction, so the inline var() reference itself is left untouched --
   only what --vrg-color-offer-accent resolves to, and where it's applied,
   changes). One token, two selectors, both !important because an inline
   style attribute otherwise always wins over an external stylesheet
   regardless of selector specificity. Scoped to body.postid-10142 (WP core's
   own body class) so /special-offers' real per-service border colors --
   green/blue/green-deep-800/offers-red across 4 different services -- are
   completely unaffected; this is a one-page correction, not a token
   redefinition. #1E9E48, not the directive's suggested #2FAE54-#35B85A:
   that range measures 2.6-2.9:1 against this card's white background,
   below the 3:1 WCAG AA minimum for the $119 large text it also has to
   satisfy -- contrast is the harder requirement, so it wins over the
   suggested range. Still ~2.1x the luminance of the sticky Call button's
   dark green-deep-700 fill, so it reads as clearly brighter/more energetic
   side by side, not just legally distinct. */
:root { --vrg-color-offer-accent: #1E9E48; }
body.postid-10142 .vrg-offer-card { border-top-color: var(--vrg-color-offer-accent) !important; }
body.postid-10142 .vrg-offer-card__figure { color: var(--vrg-color-offer-accent) !important; }

/* FL/CA offer-page design rollout (owner directive, 2026-08-23, UI-review
   correction): generalizes the desktop horizontal image/content split that
   was previously reachable only via `body.postid-10142` -- that selector
   targets post 10142's own bespoke post_content card, not this shared
   .vrg-offer-card component, so every page using vr_render_offer_card()
   (all pre-existing pilot pages plus this round's newly-eligible FL/CA
   pages) has always rendered stacked/narrow at desktop width, never
   actually matching the approved reference layout it was meant to share.
   Scoped to a modifier class applied only where this round's dynamic
   FL/CA eligibility check is true (service-city-top.php) -- pre-existing
   NY/CO pilot pages this task must not touch keep their exact current
   (narrow) rendering; /special-offers' own multi-card .vrg-offers-grid is
   unaffected since it never carries this modifier class.

   Point fix (owner directive, 2026-08-24): this rule never actually took
   effect on any page -- service-city-top.php still carried a leftover
   `style="max-width: 420px; margin-inline: auto;"` inline attribute on
   the same element from before this class existed, and an inline style
   always wins over an external rule regardless of specificity. The
   template no longer sets that inline style at all; width now comes
   entirely from this class (900px, matching the reference page's own
   --wp--custom--width--prose reading measure) and the sibling
   .vrg-offers-grid--narrow class below (420px, the exact previous
   behavior) for non-FL/CA pages. margin-inline:auto added here since it
   can no longer ride along on the removed inline style. */
.vrg-offers-grid--flca-offer { max-width: var(--wp--custom--width--prose); margin-inline: auto; }
/* Previous behavior for pre-existing non-FL/CA pilot pages (NY/CO),
   preserved byte-for-byte via a class instead of the removed inline
   style -- these pages are explicitly out of scope for the 900px
   reference-width correction above. */
.vrg-offers-grid--narrow { max-width: 420px; margin-inline: auto; }
@media (min-width: 761px) {
	.vrg-offers-grid--flca-offer .vrg-offer-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}
	.vrg-offers-grid--flca-offer .vrg-offer-card__image { aspect-ratio: auto; min-height: 380px; }
}

.vrg-offer-card--commercial {
	display: grid;
	grid-template-columns: minmax(240px, 0.9fr) 1.1fr;
	gap: 28px;
	align-items: center;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	border-radius: var(--wp--custom--radius--card);
	padding: 28px;
	box-shadow: var(--wp--custom--shadow--md);
}
.vrg-offer-card--commercial .vrg-offer-card__image { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--wp--custom--radius--card); }
.vrg-offer-card--commercial h2 { font-size: 24px; margin: 0 0 8px; }
.vrg-offer-card--commercial p { color: rgba(255, 255, 255, 0.78); }
.vrg-offer-card--commercial__tag {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 13px;
	padding: 4px 12px;
	margin-bottom: 12px;
}
@media (max-width: 760px) {
	.vrg-offer-card--commercial { grid-template-columns: 1fr; }
}

.vrg-trust-strip {
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--sm);
	padding: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	text-align: center;
}
.vrg-trust-strip__item strong { display: block; font-size: 15px; margin-bottom: 4px; }
.vrg-trust-strip__item span { font-size: 14px; color: var(--wp--preset--color--neutral-600); }

/* ---------- Promo Landing (/free-estimate) ---------- */
.vrg-promo-hero__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.vrg-promo-hero__intro h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.1; margin: 16px 0 12px; text-wrap: pretty; }
.vrg-promo-hero__lede { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }
.vrg-promo-hero__form { max-width: 860px; margin: 0 auto; }
.vrg-promo-steps { max-width: 960px; margin: 0 auto; }
.vrg-promo-steps h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 24px; }
.vrg-promo-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.vrg-promo-steps__item { text-align: center; }
.vrg-promo-steps__item .vrg-step__num { margin-bottom: 12px; }
.vrg-promo-steps__item h3 { font-size: 19px; margin: 0 0 8px; }
.vrg-promo-steps__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }
.vrg-promo-proof { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }

/* ---------- Generic page (About/Privacy/Terms) ---------- */
/* Content-page width (owner directive, 2026-08-13 layout-width pass): this
   used to be a flat 760px, which combined with .vrg-section's own ~64px
   side padding at desktop widths rendered post-content at ~632px — far
   narrower than the design's intended reading column. --width--content is a
   new, explicitly shared token (theme.json) used by every plain content
   page (About, Privacy, Terms, /es/servicios-de-limpieza, and any other page
   on the page.html template) — not a page-specific override. Headings/
   images/cards may use this full 1040px width; the base .vrg-prose rule
   above further centers the actual running text at exactly 900px inside it. */
.vrg-generic-page { max-width: var(--wp--custom--width--content); margin: 0 auto; }
.vrg-generic-page__h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 8px; }
.vrg-generic-page__updated { margin: 0 0 28px; font-size: 13.5px; color: var(--wp--preset--color--neutral-600); }
.vrg-generic-page__band {
	background: var(--wp--preset--color--green-tint-100);
	border-radius: var(--wp--custom--radius--card);
	padding: 20px 24px;
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.vrg-generic-page__band p { margin: 0; font-size: 15px; font-weight: 600; color: var(--wp--preset--color--green-deep-800); }

/* ---------- Blog list ---------- */
.vrg-blog-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--md);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.vrg-blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 220px; }
.vrg-blog-featured__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; }
.vrg-blog-featured__body h2 { font-size: clamp(22px, 2.8vw, 30px); margin: 4px 0; }
.vrg-blog-featured__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }
.vrg-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.vrg-blog-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.vrg-blog-card h3 { font-size: 20px; margin: 0; }
.vrg-blog-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); flex: 1; }
.vrg-blog-card__meta { font-size: 13px; color: var(--wp--preset--color--neutral-600); }

/* ---------- Blog post ---------- */
/* Outer container uses --width--content (1040px), same tier as .vrg-
   generic-page — NOT --width--prose directly: .vrg-blog-post is also a
   .vrg-section, which adds its own ~64px side padding at desktop widths: a
   flat 900px outer cap left only 900 - 2*64 = 772px for the actual text
   (confirmed live), short of the required exact 900px. At 1040px outer, that
   padding-adjusted inner width (~912px) comfortably exceeds 900px, so the
   base .vrg-prose > * rule's own max-width:900px is what actually binds —
   same two-tier pattern (1040 outer / 900 text) as every other .vrg-prose
   use. Byline/hero image may use the full 1040px width (permitted, not
   required, per the "images may use the wider container" rule). */
.vrg-blog-post { max-width: var(--wp--custom--width--content); margin: 0 auto; }
.vrg-blog-post__byline { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 13.5px; color: var(--wp--preset--color--neutral-700); }
.vrg-blog-post__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}
.vrg-blog-post__hero { margin-bottom: 28px; }
.vrg-blog-post__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--wp--custom--radius--card); display: block; }
.vrg-blog-post__cta {
	background: var(--wp--preset--color--blue);
	color: #fff;
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(22px, 3vw, 32px);
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.vrg-blog-post__cta h2 { font-size: 22px; margin: 0 0 6px; color: #fff; }
.vrg-blog-post__cta p { margin: 0; font-size: 14.5px; color: var(--wp--preset--color--blue-tint-text); }

/* ---------- Service archive (/service) ---------- */
.vrg-service-archive__lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); max-width: 64ch; }
.vrg-service-archive__section-h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.vrg-service-archive__group { margin-bottom: clamp(28px, 4vw, 44px); }
.vrg-service-archive__group h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 16px; display: flex; align-items: center; gap: 12px; }
.vrg-service-archive__dot { width: 12px; height: 12px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--green); flex-shrink: 0; }
/* Service cards (Browse by service) — no per-item city link, so the card
   itself isn't the <a>; a small internal CTA jumps to #locations instead. */
.vrg-service-archive__service-card { background: var(--wp--preset--color--base); display: flex; flex-direction: column; gap: 4px; }
.vrg-service-archive__service-cta { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--green-deep-700); text-decoration: none; }
.vrg-service-archive__service-cta:hover { text-decoration: underline; }

/* State cards (Browse by location) — real <a href> per card (crawlable),
   replacing the old nested state->city <details> drill-down: state hubs
   already have their own "Cities we serve" grid, so /service doesn't need
   to duplicate thousands of city links (owner directive, 2026-08-13). */
.vrg-service-archive__state-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.vrg-service-archive__state-card { display: flex; flex-direction: column; gap: 4px; }
.vrg-service-archive__state-link-text { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--green-deep-700); }
.vrg-service-archive__state-card:hover .vrg-service-archive__state-link-text { text-decoration: underline; }

.vrg-service-archive__decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 20px; }
.vrg-service-archive__decision h3 { font-size: 17px; margin: 0 0 8px; }
.vrg-service-archive__decision p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }

/* ---------- Breadcrumbs ---------- */
.vrg-breadcrumbs { font-size: 13.5px; color: var(--wp--preset--color--neutral-500); margin: 0 0 14px; }
@media (max-width: 760px) {
	/* Breadcrumb-to-H1 mobile spacing (2026-08-23 owner correction, part of
	   the same header-to-breadcrumb pass — see .vrg-section--breadcrumb-lead
	   above): the base 14px read as visually cramped once the header gap
	   was corrected; owner target ~22-28px. Mobile-only so desktop (verified
	   unaffected at 1024/1440) keeps its original, already-balanced 14px. */
	.vrg-breadcrumbs { margin-bottom: 24px; }
}
.vrg-breadcrumbs a { color: var(--wp--preset--color--green-deep-700); text-decoration: none; }
.vrg-breadcrumbs a:hover { color: var(--wp--preset--color--green-deep-800); }
.vrg-breadcrumbs .sep { margin: 0 7px; }
.vrg-breadcrumbs .current { font-weight: 600; color: var(--wp--preset--color--neutral-700); }

/* ---------- 404 ---------- */
.vrg-notfound { padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(48px, 8vw, 110px); }
.vrg-notfound__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(90px, 14vw, 160px);
	line-height: 1;
	color: var(--wp--preset--color--green);
	display: block;
}
.vrg-notfound h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 14px 0 12px; }
.vrg-notfound__lede { margin: 0 auto 28px; font-size: 16px; color: var(--wp--preset--color--neutral-700); max-width: 48ch; }
.vrg-notfound__ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.vrg-notfound__popular, .vrg-notfound__phone { margin: 0; font-size: 14.5px; color: var(--wp--preset--color--neutral-700); }
.vrg-notfound__phone { margin-top: 18px; }
.vrg-notfound__phone a { font-weight: 700; }

/* ---------- Answer box (AEO) ---------- */
.vrg-answer-box {
	background: var(--wp--preset--color--green-tint-100);
	border-radius: var(--wp--custom--radius--card);
	padding: 18px 22px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--green-deep-800);
	/* Owner-directed pilot, 2026-08-19 Miami upholstery promo reconciliation:
	   no margin at all previously meant a hero with an empty usps block
	   (nothing to provide the gap) put the answer-box's own rounded/tinted
	   card flush against whatever comes next -- on the pilot page, directly
	   against the outline-green phone CTA button, both with visible
	   borders/radius, reading as one stuck-together shape. Matches the same
	   bottom-margin convention already used by the other hero elements
	   (h1: 0 0 14px, usps: 0 0 22px) so spacing stays consistent whether or
	   not usps has content. */
	margin-bottom: 22px;
}
.vrg-answer-box p { margin: 0; }
.vrg-answer-box p strong { color: inherit; }
.vrg-answer-box--icon { display: flex; gap: 14px; align-items: flex-start; max-width: 820px; }
.vrg-answer-box__icon { flex-shrink: 0; margin-top: 2px; color: var(--wp--preset--color--green-deep-700); }

/* ---------- Quote form (vr-green-core block) ---------- */
.vrg-quote-form {
	background: var(--wp--preset--color--blue);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: clamp(26px, 4vw, 48px);
}
.vrg-quote-form h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 38px);
	color: #fff;
	margin: 0 0 8px;
	text-align: center;
}
/* Dark-form contrast (owner directive, 2026-08-13): every text rule below is
   scoped as ".vrg-quote-form .vrg-quote-form__x" (specificity 0,2,0/1)
   rather than the bare class alone (0,1,0) — the bare-class version loses to
   ".vrg-prose p"/"li" (0,1,1) on any page where an editor has embedded a
   quote-form block inside post-content (confirmed live on /green-clean-
   services: the subtitle and "No spam" micro-copy rendered in .vrg-prose's
   dark neutral-800 instead of this component's own light blue-tint-text).
   This is a component-level fix, reusable everywhere .vrg-quote-form
   renders — not a per-page override. */
.vrg-quote-form .vrg-quote-form__sub,
.vrg-quote-form__sub { margin: 0 0 24px; font-size: 15px; color: var(--wp--preset--color--blue-tint-text); text-align: center; }
.vrg-quote-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.vrg-quote-form input, .vrg-quote-form select {
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 13px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast);
}
.vrg-quote-form input:focus-visible { outline: 2px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.vrg-quote-form__submit { width: 100%; padding: 15px; font-size: 16px; }
.vrg-quote-form .vrg-quote-form__micro,
.vrg-quote-form__micro { margin: 12px 0 0; font-size: 12.5px; color: var(--wp--preset--color--blue-tint-text); text-align: center; }
.vrg-quote-form .vrg-quote-form__error,
.vrg-quote-form__error { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #ffd7d7; text-align: center; display: none; }

/* Labeled fields (A3: visible labels instead of placeholder-only) */
.vrg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vrg-field label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.vrg-quote-form .vrg-field label { color: var(--wp--preset--color--blue-tint-text); }
.vrg-wizard .vrg-field label { color: var(--wp--preset--color--neutral-700); }
.vrg-req { font-weight: 700; }
/* Inset ring so the invalid state stays visible even while the (outer)
   focus-visible outline is on the same field. */
input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #e05252; }
.vrg-field .vrg-quote-form__error { text-align: left; margin-top: 6px; }

/* Thank-you state */
.vrg-quote-form__thanks { text-align: center; padding: 14px 0; }
.vrg-quote-form__thanks-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.vrg-quote-form__thanks h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 24px;
	color: #fff;
	margin: 0 0 10px;
}
.vrg-quote-form .vrg-quote-form__thanks p,
.vrg-quote-form__thanks p { margin: 0 0 18px; font-size: 15px; color: var(--wp--preset--color--blue-tint-text); }
[hidden] { display: none !important; }

/* Wrapper used on most pages */
.vrg-quote-wrap { max-width: 960px; margin: 0 auto; }

/* ---------- Sticky mobile CTA bar (Home) ---------- */
.vrg-sticky-cta {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 50;
	background: #fff;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: 10px;
	gap: 10px;
}
.vrg-sticky-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vrg-sticky-cta .vrg-sticky-cta__call { flex: 1; border: 2px solid var(--wp--preset--color--green-tint-200); border-radius: var(--wp--custom--radius--pill); padding: 11px 8px; font-size: 14.5px; font-weight: 700; color: var(--wp--preset--color--green-deep-700); text-decoration: none; background: #fff; }
.vrg-sticky-cta .vrg-sticky-cta__quote { flex: 1.4; }
@media (max-width: 760px) {
	.vrg-sticky-cta { display: flex; }
	body.vrg-has-sticky-cta { padding-bottom: 76px; }
	/* Static inner-page variant (footer.php) — no JS "suppress near form" (F4
	   is Home-only), so instead the footer itself reserves the space the fixed
	   bar would otherwise cover at the bottom of the page. */
	.vrg-footer--has-sticky { padding-bottom: 76px; }
}
/* F4: suppressed while a lead form is in view (kept in the a11y tree order,
   just visually and interactively removed). */
.vrg-sticky-cta.is-suppressed { display: none; }

/* Pilot variant only (Miami upholstery promo, post 10142 -- footer.php gates
   this class to that one post, see the PHP comment there). Call is the
   stronger element (solid fill, not the outline treatment every other page
   keeps). */
.vrg-sticky-cta .vrg-sticky-cta__call--strong {
	background: var(--wp--preset--color--green-deep-700);
	border-color: var(--wp--preset--color--green-deep-700);
	color: #fff;
}
.vrg-sticky-cta .vrg-sticky-cta__call--strong svg { stroke: #fff; }
/* Correction (2026-08-19): the original box-shadow-only pulse (7px spread,
   0.22 alpha, on the whole link) was confirmed effectively invisible in
   real rendering. Replaced with a telephone-ringing motion on the SVG
   itself (rotate+scale, per owner-specified keyframe schedule) plus a
   clearly visible ring/glow, both scoped to a short ~900ms active window
   near the end of a 4.5s cycle (78%-98%) so the button is still ~3.6s out
   of every cycle -- "every 4-5 seconds," not continuous. Two separate
   `animation` declarations (one on the link for the glow, one on the
   nested svg for the rotate/scale) driven by identical duration/timing/
   iteration so they stay in lockstep without needing one shared keyframe
   to express two different animatable properties on two different
   elements. Only `transform`/`box-shadow` are animated -- both are
   compositor-only properties that never trigger layout, so this cannot
   shift surrounding elements regardless of cycle position. */
@keyframes vrg-phone-ring-rotate {
	0%, 78%, 100% { transform: rotate(0deg) scale(1); }
	82% { transform: rotate(-10deg) scale(1.08); }
	86% { transform: rotate(10deg) scale(1.08); }
	90% { transform: rotate(-7deg) scale(1.04); }
	94% { transform: rotate(5deg) scale(1.02); }
	98% { transform: rotate(0deg) scale(1); }
}
@keyframes vrg-phone-ring-glow {
	0%, 78%, 100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
	82%, 94% { box-shadow: 0 0 0 6px rgba(46, 160, 67, 0.4), 0 0 18px 4px rgba(46, 160, 67, 0.32); }
	98% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}
@media (max-width: 760px) {
	.vrg-sticky-cta--pilot:not(.is-suppressed) .vrg-sticky-cta__call--strong {
		animation: vrg-phone-ring-glow 4.5s ease-in-out infinite;
	}
	.vrg-sticky-cta--pilot:not(.is-suppressed) .vrg-sticky-cta__call--strong svg {
		display: inline-block;
		transform-origin: center;
		animation: vrg-phone-ring-rotate 4.5s ease-in-out infinite;
	}
	/* Pause while the mobile menu overlay is open -- js/vr-green.js toggles
	   body.vrg-mobile-menu-open -- so the ring doesn't compete with menu focus. */
	body.vrg-mobile-menu-open .vrg-sticky-cta__call--strong,
	body.vrg-mobile-menu-open .vrg-sticky-cta__call--strong svg { animation: none; box-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.vrg-sticky-cta__call--strong,
	.vrg-sticky-cta__call--strong svg { animation: none !important; box-shadow: none !important; transform: none !important; }
}

/* ---------- USPs (vr-green/usps block) ---------- */
.vrg-usps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.vrg-usps li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.vrg-usps__icon {
	width: 24px;
	height: 24px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	color: var(--wp--preset--color--green-deep-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ---------- What's included (vr-green/included block) ---------- */
.vrg-included h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 22px; }
.vrg-included__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.vrg-included__card { display: block; }
.vrg-included__num {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	color: var(--wp--preset--color--green-deep-800);
	margin-bottom: 12px;
}
.vrg-included__card h3 { font-size: 19px; margin: 0 0 8px; }
.vrg-included__card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }

/* ---------- Before/after (vr-green/before-after block) ---------- */
.vrg-before-after h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 22px; }
.vrg-before-after__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.vrg-before-after__item { position: relative; }
.vrg-before-after__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--custom--radius--card); display: block; }
.vrg-before-after__label {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #fff;
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 14px;
	font-weight: 700;
	font-size: 13px;
	box-shadow: var(--wp--custom--shadow--sm);
}
.vrg-before-after__label--after { background: var(--wp--preset--color--green); color: #fff; }

/* ---------- Related links (vr-green/related-links block) ---------- */
.vrg-related-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 48px); }
.vrg-related-links h2 { font-size: 22px; margin: 0 0 14px; }
.vrg-related-links__pills { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- FAQ (vr-green/faq block) ---------- */
/* Was left-aligned (max-width, no centering) per the original design ref —
   explicitly overridden by owner directive, 2026-08-14 dataset-wide
   image/FAQ correction: confirmed live on Miami/Miami Beach/Sacramento
   ServiceCity pages, an ~860px .vrg-faq started at x=64px (flush against
   the section's own left padding) instead of being centered. Matches the
   same --width--prose (900px) token as the rest of the site's prose/content
   sections, centered the same way. */
.vrg-faq { max-width: var(--wp--custom--width--prose); margin-inline: auto; display: grid; gap: 12px; }
.vrg-faq h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 12px; }
.vrg-faq__item {
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	padding: 18px 22px;
}
.vrg-faq__item summary {
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	list-style-position: outside;
}
.vrg-faq__item p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }
.vrg-section--white .vrg-faq__item { background: var(--wp--preset--color--base); }

/* ---------- Stars ---------- */
.vrg-stars { color: var(--wp--preset--color--stars); letter-spacing: 1px; }

/* ---------- Utility ---------- */
.vrg-center { text-align: center; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* This unlayered rule otherwise beats WP core's cascade-layered focus-visible
   override regardless of specificity, leaving the skip link permanently
   invisible even when focused (WCAG 2.4.7). */
.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip-path: none;
	overflow: visible;
	white-space: normal;
	z-index: 100;
	padding: 12px 20px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--md);
	font-weight: 700;
}
.vrg-washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

/* ================= HOME ================= */

/* Home header variant: transparent, anchor nav, 54px logo */
.vrg-header--home { background: transparent; box-shadow: none; padding-top: 18px; padding-bottom: 18px; }
.vrg-header--home .vrg-header__logo img { height: 60px; }

/* Ghost button (wizard Back) */
.vrg-btn--ghost { background: transparent; color: var(--wp--preset--color--contrast); border: none; font-weight: 600; }
.vrg-btn--ghost:hover { background: var(--wp--preset--color--green-tint-100); }

/* Hero */
.vrg-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	/* Full-bleed background image (.vrg-hero__bg, absolute+inset:0), content
	   capped/centered — see .vrg-section comment above. */
	padding: clamp(32px, 5vw, 72px) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)) clamp(48px, 6vw, 88px);
	position: relative;
	overflow: hidden;
}
.vrg-hero__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scaleX(-1); }
@media (max-width: 760px) {
	/* Lightweight hero background on phones (set inline via style attr override). */
	.vrg-hero__bg { background-image: var(--vrg-hero-bg-mobile, inherit) !important; }
}
.vrg-hero__overlay { position: absolute; inset: 0; background: var(--wp--custom--overlay--hero); }
.vrg-hero__content { position: relative; }
.vrg-hero__content h1 {
	font-size: clamp(36px, 4.6vw, 58px);
	line-height: 1.08;
	margin: 18px 0 16px;
	text-wrap: pretty;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.vrg-hero__lede { font-size: 17px; line-height: 1.6; max-width: 54ch; margin: 0 0 22px; color: rgba(255, 255, 255, 0.92); }
.vrg-hero__cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.vrg-btn--hero-call { background: rgba(255, 255, 255, 0.14); color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
.vrg-btn--hero-call:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.vrg-hero__hours { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.vrg-hero__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.vrg-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--pill);
	padding: 7px 14px 7px 8px;
	box-shadow: var(--wp--custom--shadow--sm);
}
.vrg-badge__initial {
	width: 20px;
	height: 20px;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}
.vrg-badge__name { font-weight: 700; font-size: 13px; }
.vrg-badge__stars { color: var(--wp--preset--color--stars); font-size: 12px; letter-spacing: 1px; }

/* Wizard card */
.vrg-wizard {
	position: relative;
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: clamp(22px, 3vw, 32px);
	scroll-margin-top: 24px;
}
.vrg-wizard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vrg-wizard__head h2 { font-size: 26px; margin: 0; }
.vrg-wizard__step-label { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--green-deep-700); white-space: nowrap; }
.vrg-wizard__sub { margin: 0 0 16px; font-size: 14px; color: var(--wp--preset--color--neutral-700); }
.vrg-wizard__progress { height: 8px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--green-tint-100); margin-bottom: 22px; overflow: hidden; }
.vrg-wizard__progress-fill { height: 100%; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--green); transition: width 0.3s; }
.vrg-wizard__q { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.vrg-wizard__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.vrg-chip {
	padding: 10px 16px;
	min-height: 44px; /* F3: ≥44px touch target */
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	border: 2px solid var(--wp--preset--color--green-tint-200);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14.5px;
	font-weight: 600;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.vrg-chip:hover { background: var(--wp--preset--color--green-tint-100); }
.vrg-chip.is-selected { border-color: var(--wp--preset--color--green-fill); background: var(--wp--preset--color--green-fill); color: #fff; }
.vrg-wizard__zip-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; margin-bottom: 22px; }
.vrg-wizard__inputs { display: grid; gap: 10px; margin-bottom: 22px; }
.vrg-wizard input {
	min-width: 0;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
}
.vrg-wizard__nav { display: flex; gap: 10px; }
.vrg-wizard__nav .vrg-wizard__cta { flex: 1; }
.vrg-wizard__cta { width: 100%; font-size: 16px; padding: 14px; }
.vrg-wizard__micro { margin: 14px 0 0; font-size: 12.5px; color: var(--wp--preset--color--neutral-600); text-align: center; }
.vrg-wizard__done { text-align: center; padding: 18px 0 8px; }
.vrg-wizard__done-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.vrg-wizard__done h3 { font-size: 24px; margin: 0 0 10px; }
.vrg-wizard__done p { margin: 0 0 18px; font-size: 15px; color: var(--wp--preset--color--neutral-700); }
.vrg-wizard .vrg-quote-form__error { color: #b32d2e; }

/* Advantages */
.vrg-advantages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	padding: var(--wp--preset--spacing--section-lg) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2));
	background: #fff;
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
}
.vrg-advantages__photo-wrap { position: relative; }
.vrg-advantages__photo { border-radius: var(--wp--custom--radius--card); overflow: hidden; filter: saturate(1.2) contrast(1.06) brightness(1.03); }
.vrg-advantages__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vrg-advantages__badge {
	position: absolute;
	right: -8px;
	bottom: -14px;
	background: var(--wp--preset--color--blue);
	color: #fff;
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	box-shadow: var(--wp--custom--shadow--md);
}
.vrg-advantages h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin: 16px 0; text-wrap: pretty; }
.vrg-advantages__text { font-size: 16px; line-height: 1.65; color: var(--wp--preset--color--neutral-700); margin: 0 0 22px; max-width: 62ch; }
.vrg-checklist { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vrg-checklist li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.vrg-checklist__icon {
	width: 26px;
	height: 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Near me band */
.vrg-nearme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding: var(--wp--preset--spacing--section-md) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2));
}
.vrg-nearme h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0; color: var(--wp--preset--color--green-deep-700); }
.vrg-nearme p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--wp--preset--color--neutral-700); max-width: 56ch; }

/* Dark get-a-quote section */
.vrg-getquote { position: relative; overflow: hidden; }
.vrg-getquote__bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.vrg-getquote__overlay { position: absolute; inset: 0; background: var(--wp--custom--overlay--quote-dark); }
.vrg-getquote__content {
	position: relative;
	padding: var(--wp--preset--spacing--section-lg) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.vrg-tag--yellow { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--text-on-yellow); }
.vrg-getquote h2 { font-size: clamp(28px, 3.4vw, 42px); color: #fff; margin: 16px 0 8px; }
.vrg-getquote__sub { margin: 0 0 22px; font-size: 16px; color: var(--wp--preset--color--blue-tint-text); }
.vrg-getquote__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; text-align: left; max-width: 640px; }
.vrg-getquote__list li { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-size: 15.5px; line-height: 1.5; }
.vrg-getquote__list svg { flex-shrink: 0; margin-top: 2px; }
.vrg-getquote__note { margin: 0 0 20px; font-size: 14.5px; color: var(--wp--preset--color--blue-tint-text); }

/* Mid-page estimate section */
.vrg-estimate-section { background: #fff; padding: clamp(48px, 6vw, 80px) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-estimate-section .vrg-quote-form { max-width: 960px; margin: 0 auto; }
/* 960px-wide quote sections (Home mid-page + Phase 7 hub/archive forms): a
   280px minimum fits 3 columns in ~864px usable width — design is 2-col. */
.vrg-estimate-section .vrg-quote-form__grid,
.vrg-quote-wrap .vrg-quote-form__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Four steps */
.vrg-steps { padding: var(--wp--preset--spacing--section-lg) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-steps h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 16px 0 clamp(28px, 4vw, 44px); }
.vrg-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }
.vrg-steps__list { display: grid; gap: 22px; }
.vrg-step { display: flex; align-items: flex-start; gap: 16px; }
.vrg-step__num {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	color: var(--wp--preset--color--green-deep-800);
	flex-shrink: 0;
}
.vrg-step h3 { font-size: 21px; margin: 0 0 6px; }
.vrg-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); max-width: 52ch; }
.vrg-steps__collage { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; }
.vrg-steps__collage img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; display: block; }
.vrg-steps__collage-main { position: absolute; inset: 0 8% 8% 0; }
.vrg-steps__collage-tr { position: absolute; top: 0; right: 0; width: 30%; aspect-ratio: 1; }
.vrg-steps__collage-br { position: absolute; bottom: 0; right: 4%; width: 36%; aspect-ratio: 1; }

/* Comfort cards */
.vrg-comfort { background: #fff; padding: var(--wp--preset--spacing--section-lg) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-comfort h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 clamp(28px, 4vw, 44px); text-align: center; }
.vrg-comfort__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.vrg-comfort__card { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--card); padding: 30px; text-align: center; }
.vrg-comfort__icon {
	width: 60px;
	height: 60px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.vrg-comfort__card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--neutral-700); }

/* Photo band */
.vrg-photo-band { padding: var(--wp--preset--spacing--section-md) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-photo-band__img { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.vrg-photo-band__img img { width: 100%; height: clamp(220px, 32vw, 400px); object-fit: cover; display: block; }

/* Reviews */
.vrg-reviews { background: #fff; padding: var(--wp--preset--spacing--section-lg) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); }
.vrg-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.vrg-reviews__head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 16px 0 6px; }
.vrg-reviews__meta { margin: 0; font-size: 14px; color: var(--wp--preset--color--neutral-600); }
.vrg-reviews__pager { display: flex; align-items: center; gap: 10px; }
.vrg-reviews__pager-btn {
	border: 2px solid var(--wp--preset--color--green-tint-200);
	background: #fff;
	border-radius: var(--wp--custom--radius--pill);
	width: 44px;  /* F3: ≥44px touch target */
	height: 44px;
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.vrg-reviews__pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.vrg-reviews__pager-label { font-size: 13.5px; font-weight: 700; color: var(--wp--preset--color--neutral-600); }
.vrg-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.vrg-review-card {
	margin: 0;
	background: #fff;
	border-radius: var(--wp--custom--radius--card);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* Same swap the FAQ item already does: card bg must contrast its section.
   .vrg-reviews (Home, always-white section) keeps its original --base cards —
   explicit here so this default doesn't flip them white-on-white. */
.vrg-reviews .vrg-review-card, .vrg-section--white .vrg-review-card { background: var(--wp--preset--color--base); }
.vrg-review-card .vrg-stars { letter-spacing: 2px; font-size: 15px; }
.vrg-review-card blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--neutral-800); flex: 1; }
.vrg-review-card figcaption { display: flex; align-items: center; gap: 10px; }
.vrg-review-card__avatar {
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--radius--pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	flex-shrink: 0;
}
.vrg-review-card__name { font-weight: 700; font-size: 14.5px; }

/* Areas */
.vrg-areas { padding: clamp(48px, 6vw, 80px) max(var(--wp--preset--spacing--pad-x), calc((100% - var(--wp--custom--width--wide)) / 2)); text-align: center; }
.vrg-areas h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 clamp(24px, 3vw, 36px); }
.vrg-areas__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }
.vrg-areas .vrg-pill { padding: 10px 20px; }
.vrg-pill--area { gap: 7px; }
.vrg-pill--area svg { flex-shrink: 0; }

/* Home footer variant: CTA column */
.vrg-footer__cta-col { display: flex; align-items: flex-start; justify-content: flex-end; }
@media (max-width: 760px) {
	.vrg-footer__cta-col { justify-content: flex-start; }
	.vrg-wizard__zip-row { grid-template-columns: 1fr; }
}

/* Miami upholstery promo pilot (post 10142) -- promoted from the owner-
   approved local CRO comparison (commits 2fefbec/8a0ec56) to the permanent
   page, 2026-08-20. The temporary ?vr_cro_preview=1 mechanism and its
   .vrg-cro-preview body class are retired; every selector that used to be
   scoped by that body class is now scoped by body.postid-10142 (WP core's
   own body class) instead, so every other ServiceCity page and
   /special-offers' own .vrg-offer-card/.vrg-reviews__grid usage stay
   byte-for-byte unaffected. Selectors below that were never actually
   reachable outside this one post to begin with (the hero subtitle/price
   badge, the final CTA block -- all PHP-gated to post 10142 at the markup
   level in service-city-top.php/service-city-bottom.php) keep their plain
   class names, unscoped, same as before. */
.vrg-cro-hero-subtitle {
	margin: -8px 0 14px;
	font-size: clamp(16px, 1.5vw, 19px);
	color: var(--wp--preset--color--neutral-700);
}
.vrg-cro-hero-price {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--vrg-color-offer-accent);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--sm);
	transition: box-shadow 0.15s ease;
}
.vrg-cro-hero-price strong {
	font-family: var(--wp--preset--font-family--body);
	font-size: 32px;
	font-weight: 850;
	letter-spacing: -.03em;
	line-height: 1;
}
.vrg-cro-hero-price span { font-weight: 700; }
/* Real, tappable/clickable jump to the quote form at every viewport --
   was inert on desktop via pointer-events:none, which blocked mouse
   clicks while keyboard/touch activation still worked (inconsistent
   across input methods). Focus ring comes from the sitewide bare
   :focus-visible rule near the top of this file. */
.vrg-cro-hero-price:hover, .vrg-cro-hero-price:active { box-shadow: var(--wp--custom--shadow--md); }
body.postid-10142 .vrg-offer-card__body { justify-content: center; }
.vrg-cro-final-cta { padding-block: clamp(34px, 5vw, 60px); }
.vrg-cro-final-cta__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 42px);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}
.vrg-cro-final-cta__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.vrg-cro-final-cta h2 { margin: 0 0 8px; color: #fff; }
.vrg-cro-final-cta p { margin: 0; }
.vrg-cro-final-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.vrg-cro-final-cta .vrg-btn--outline-green {
	border-color: #fff;
	background: #fff;
	color: var(--wp--preset--color--green);
}
.vrg-cro-final-cta .vrg-btn--outline-green:hover {
	border-color: var(--wp--preset--color--yellow);
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 761px) {
	body.postid-10142 .vrg-offer-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}
	body.postid-10142 .vrg-offer-card__image { aspect-ratio: auto; min-height: 430px; }
}

@media (max-width: 760px) {
	body.postid-10142 .vrg-service-hero h1 { font-size: clamp(34px, 10vw, 45px); }
	body.postid-10142 .vrg-offer-card__image { aspect-ratio: 16 / 9; }
	body.postid-10142 .vrg-reviews__grid {
		display: flex;
		overflow-x: auto;
		max-width: 100%;
		/* `layout` containment is the actual fix (2026-08-23 LAN mobile-
		   overflow correction): `inline-size` alone doesn't stop this flex
		   row's laid-out-but-visually-clipped card overflow from leaking
		   into the document root's own scrollWidth (confirmed empirically —
		   with only `inline-size`, html.scrollWidth read ~2831px against a
		   386px viewport on a real mobile width, even though this element
		   and body both correctly reported no overflow of their own).
		   `layout` establishes real containment/a containing block, which
		   stops that leak while leaving this element's OWN internal
		   scroll (the swipeable card row) completely unaffected. */
		contain: layout inline-size;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		padding: 2px 2px 14px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		overscroll-behavior-inline: contain;
	}
	body.postid-10142 .vrg-review-card {
		flex: 0 0 min(86vw, 340px);
		scroll-snap-align: start;
	}
	/* Areas We Serve Phase 1 (2026-08-21): same scroll-snap treatment as the
	   Miami upholstery pilot above, generalized via a class instead of a
	   postid selector so it isn't a one-off per new page. */
	.vrg-reviews-scroller {
		display: flex;
		overflow-x: auto;
		max-width: 100%;
		/* Same root-cause fix as body.postid-10142 .vrg-reviews__grid above
		   -- see that rule's comment. */
		contain: layout inline-size;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		padding: 2px 2px 14px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		overscroll-behavior-inline: contain;
	}
	.vrg-reviews-scroller .vrg-review-card {
		flex: 0 0 min(86vw, 340px);
		scroll-snap-align: start;
	}
	.vrg-cro-final-cta__inner { align-items: stretch; flex-direction: column; }
	.vrg-cro-final-cta__actions { display: grid; grid-template-columns: 1fr 1fr; }
	.vrg-cro-final-cta__actions .vrg-btn { width: 100%; }
}