/*
Theme Name: Virginia Exteriors Theme
Theme URI: https://voyagermark.com
Author: Voyager Marketing
Author URI: https://voyagermark.com
Description: Brand skin for virginiaexteriorsllc.com (Virginia Exteriors LLC). Child of voyager-block-theme — inherits structural canvas (layout widths, 12-step 4pt spacing, fluid type scale, block supports) and supplies the full brand paint (palette, fontFamilies, element colors). Built for VOY-58 (Website Refresh + SEO Sprint, May–Jun 2026).
Template: voyager-block-theme
Version: 0.5.1
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: virginia-exteriors
Tags: full-site-editing, block-themes, custom-colors, custom-logo, editor-style, block-patterns, wide-blocks
*/

/* === voyager-blocks brand override ===
 * voyager-blocks patterns hardcode design tokens (bg-raised, accent-2, fg-4) and
 * eyebrows that render as alien chrome on VA Exteriors' Limestone/Brick/Navy palette.
 * Override the few selectors that can't be repainted via theme.json. Keep narrow:
 * if it isn't visibly off-brand on staging, don't add it here.
 */

.wp-block-voyager-stats-counter .stat-number {
	color: var(--wp--preset--color--brick);
}

.wp-block-voyager-testimonials-grid .testimonial-quote em,
.wp-block-voyager-testimonials-grid .testimonial-quote i {
	color: var(--wp--custom--color--italic-warm);
	font-style: italic;
}

.wp-block-voyager-features-3col .feature-icon {
	fill: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

/* === Kill body-background bands between full-bleed blocks ===
 * Top-level blocks (header / main / footer), the header's own tiers, and every
 * full-bleed section manage their own padding. The root block-gap margin
 * between them just exposes the body background as stray grey/limestone bands.
 * Collapse all of it so sections butt flush, site-wide. */
.wp-site-blocks > *,
.wp-site-blocks > main > *,
.wp-block-post-content,
.vex-site-header > *,
.home .wp-block-post-content > *,
.home .wp-block-post-content > .wp-block-cover.alignfull,
.home .wp-block-post-content > .wp-block-group {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* === Service-card grid: hover lift + brick accent stripe === */
.wp-block-group.is-layout-grid > .wp-block-group {
	transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
	position: relative;
}
.wp-block-group.is-layout-grid > .wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms ease-out;
}
.wp-block-group.is-layout-grid > .wp-block-group:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(15, 38, 64, 0.28);
	border-color: var(--wp--preset--color--navy) !important;
}
.wp-block-group.is-layout-grid > .wp-block-group:hover::before {
	transform: scaleX(1);
}

/* === Section eyebrow with brick-rule flanks ===
 * 22px brick dashes left + right of any .vex-section-eyebrow paragraph.
 * Used on the services grid header; reusable on any centered eyebrow.
 */
.vex-section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.vex-section-eyebrow::before,
.vex-section-eyebrow::after {
	content: "";
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--wp--preset--color--brick);
	flex-shrink: 0;
}

/* === Service card decorative layer (.vex-service-card)
 * Stacked on top of the base .is-layout-grid > .wp-block-group hover/stripe.
 * Adds: framed icon backdrop, mono-italic ordinal, "Most requested" pill,
 * animated CTA arrow with brick underline, staggered reveal.
 */
/* Wider container override (1760px) for the services grid section only.
 * Wins over the parent alignwide cap (1280px) without touching theme.json. */
.vex-services-wide.wp-block-group.alignwide,
.wp-block-group.alignwide.vex-services-wide {
	max-width: 1280px;
}

.vex-service-grid {
	/* Lock to 3 columns regardless of viewport; reflow below. */
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
	.vex-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.vex-service-grid {
		grid-template-columns: 1fr !important;
	}
}
.vex-service-grid > .vex-service-card {
	overflow: hidden;
	min-height: 340px;
	/* Defensive — base hover-lift rule sets this, but make it explicit so the
	 * pill (position:absolute) can never escape this positioning context. */
	position: relative;
}

/* No position:relative here — the pill (position:absolute) must anchor to the
 * card, not this header. On the featured card the ordinal is hidden and this
 * flex row shrink-wraps to ~72px, so anchoring here clipped the pill. */
.vex-service-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.vex-service-card__frame {
	position: relative;
	width: 72px;
	height: 72px;
	background: var(--wp--preset--color--limestone);
	border: 1px solid var(--wp--preset--color--stone);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--navy);
	transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
	overflow: hidden;
}
/* Blueprint-grid texture inside the frame — 8px navy@5% lines */
.vex-service-card__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(26, 58, 92, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(26, 58, 92, 0.08) 1px, transparent 1px);
	background-size: 8px 8px;
	pointer-events: none;
	opacity: 0.9;
	transition: opacity 200ms ease-out;
}
.vex-service-card__frame svg {
	position: relative;
	z-index: 1;
	width: 38px;
	height: 38px;
}
.vex-service-card__ord {
	font-family: var(--wp--preset--font-family--mono);
	font-style: italic;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--slate);
	line-height: 1;
	padding-top: 6px;
	transition: color 200ms ease-out;
}
/* Pill positions against the card (.vex-service-card has position:relative from
 * the base .is-layout-grid hover-lift rule). Sitting outside the header's flex
 * row means it never collides with the icon/ord pair. */
.vex-service-card__pill {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: var(--wp--custom--color--italic-warm);
	color: var(--wp--preset--color--ink);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 9px;
	line-height: 1;
	white-space: nowrap;
}
/* Hide the in-flow ordinal on the featured card so the pill takes its place
 * cleanly instead of stacking two badges in the same corner. */
.vex-service-card.is-featured .vex-service-card__ord {
	display: none;
}

/* CTA: "Learn more" with animated ::after arrow + brick underline grow */
.vex-service-card__cta a {
	position: relative;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 3px;
}
.vex-service-card__cta a::after {
	content: "→";
	font-size: 1em;
	transition: transform 200ms ease-out;
	display: inline-block;
}
.vex-service-card__cta a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1.5px;
	width: 100%;
	background: var(--wp--preset--color--brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease-out;
}

/* Hover state — extends the existing card-lift behavior.
 * Frame stays Limestone; icon shifts Navy -> Slate (grey) — reverse of the
 * earlier navy-fill flip. Subtle border darken keeps the frame anchored. */
.vex-service-card:hover .vex-service-card__frame {
	border-color: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--slate);
	transform: scale(1.04) rotate(-1.5deg);
}
.vex-service-card:hover .vex-service-card__ord {
	color: var(--wp--preset--color--brick);
}
.vex-service-card:hover .vex-service-card__cta a::after {
	transform: translateX(5px);
}
.vex-service-card:hover .vex-service-card__cta a::before {
	transform: scaleX(1);
}

/* Featured variant — Doors gets a Brick top stripe by default (always on) */
.vex-service-card.is-featured {
	border-color: var(--wp--preset--color--navy) !important;
}
.vex-service-card.is-featured::before {
	transform: scaleX(1) !important;
}

/* Staggered reveal — chains onto the existing .home post-content fade-up.
 * Six cards = 80ms increments so the wave reads as quick + intentional.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.vex-service-grid > .vex-service-card {
			animation: vex-card-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
		.vex-service-grid > .vex-service-card:nth-child(1) { animation-delay: 0ms; }
		.vex-service-grid > .vex-service-card:nth-child(2) { animation-delay: 80ms; }
		.vex-service-grid > .vex-service-card:nth-child(3) { animation-delay: 160ms; }
		.vex-service-grid > .vex-service-card:nth-child(4) { animation-delay: 240ms; }
		.vex-service-grid > .vex-service-card:nth-child(5) { animation-delay: 320ms; }
		.vex-service-grid > .vex-service-card:nth-child(6) { animation-delay: 400ms; }
	}
}
@keyframes vex-card-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === Recent projects band: hover zoom on photos === */
.has-navy-dark-background-color .wp-block-image figure,
.has-navy-dark-background-color .wp-block-image {
	overflow: hidden;
}
.has-navy-dark-background-color .wp-block-image img {
	transition: transform 420ms ease-out, filter 420ms ease-out;
	filter: saturate(0.92);
}
.has-navy-dark-background-color .wp-block-image:hover img {
	transform: scale(1.04);
	filter: saturate(1.05);
}

/* ============================================================
 * Site header — sticky two-tier bar (utility + main)
 * Source: parts/header.html
 * ============================================================ */

/* Sticky nav — white bar only. The utility bar scrolls away.
 *
 * Technique: stick the WP template-part wrapper (the only ancestor tall
 * enough to contain the full-page scroll range) but set top to the negative
 * of the utility bar height. The wrapper scrolls UP that many px before
 * locking, which carries the dark utility bar off the top of the screen
 * while the white main bar lands flush at top:0.
 *
 * --vex-utility-h: adjust if the utility bar text reflows or padding changes. */
:root { --vex-utility-h: 36px; }

header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--vex-utility-h));
	z-index: 100;
}
/* Thin shadow separates the nav from page content once detached.
 * position:relative makes this the anchor for the absolutely-positioned
 * mega-menu panels (.vex-mega drops from the bottom edge of this bar). */
.vex-mainbar {
	position: relative;
	box-shadow: 0 1px 0 var(--wp--preset--color--stone);
}
/* Anchor scroll-padding = just the white bar height, not the full header. */
html { scroll-padding-top: 72px; }

/* In-page anchors (#estimate, #main-content) must clear the sticky bar. */
html {
	scroll-padding-top: 72px;
}

/* ---- Utility bar ---- */
.vex-utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.vex-utility-trust {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12.5px;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.82);
}
.vex-utility-star {
	color: var(--wp--custom--color--italic-warm);
}
.vex-utility-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease-out;
}
.vex-utility-phone svg {
	width: 15px;
	height: 15px;
	color: var(--wp--custom--color--italic-warm);
}
.vex-utility-phone:hover {
	color: var(--wp--custom--color--italic-warm);
}

/* ---- Main bar three-column layout: logo | nav (centered) | CTA ----
 * grid-template-columns: 1fr auto 1fr
 *   - Logo and CTA each get equal 1fr wings → nav column is at true center
 *     regardless of logo vs button width difference.
 * Override the WP block flex layout that fires from the className attribute. */
.vex-mainbar-inner.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
	/* Anchor for the mega panels so they span exactly logo-left → CTA-right. */
	position: relative;
}
.vex-mainbar-logo    { justify-self: start; }
.vex-meganav         { justify-self: center; }
.vex-mainbar-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* ---- Header CTA button: small nudge on hover ---- */
.wp-block-template-part .wp-block-button .wp-block-button__link {
	transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.wp-block-template-part .wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
	background-color: var(--wp--custom--color--brick-hover, #a83a25);
}

/* ---- Responsive ---- */
@media (max-width: 781px) {
	html { scroll-padding-top: 58px; }
	/* Utility bar: hide trust text, center the tap-to-call. */
	.vex-utility-trust { display: none; }
	.vex-utility-inner { justify-content: center; }
	.vex-utility-phone { font-size: 15px; }
	/* Main bar: collapse to flex (logo left, CTA + hamburger right).
	 * The mega nav becomes an off-canvas drawer — see the mega-menu section. */
	.vex-mainbar-inner.wp-block-group {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}
	.vex-mainbar .wp-block-site-logo img { width: 150px; height: auto; }
	.vex-header-cta .wp-block-button__link {
		font-size: 0.8125rem;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}
@media (max-width: 430px) {
	.vex-mainbar .wp-block-site-logo img { width: 128px; }
	.vex-header-cta .wp-block-button__link {
		font-size: 0.75rem;
		padding-left: 11px !important;
		padding-right: 11px !important;
	}
}

/* === Subtle scroll-driven section reveal (modern browsers only) === */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.home .wp-block-post-content > .wp-block-group,
		.home .wp-block-post-content > .wp-block-cover {
			animation: vex-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 18%;
		}
		.home .wp-block-post-content > .wp-block-cover:first-child {
			animation: none;
		}
	}
}
@keyframes vex-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === Three Things accent: Brick top border + centered text ===
 * Targets only columns with a direct h3 child (Three Things). Testimonials
 * columns are nested deeper (column > group > p) so they don't match.
 */
.home .wp-block-column:has(> h3) {
	text-align: center;
}
.home .wp-block-column > h3 {
	padding-top: 18px;
	position: relative;
}
.home .wp-block-column > h3::before {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--brick);
	margin: 0 auto 14px;
}

/* ============================================================
 * Wireframe sections — Round 4
 * Source: .handoff/virginia-exteriors/project/Homepage Wireframe.html
 * Reference classes are .vex-* prefixed so they don't collide with WP core.
 * ============================================================ */

/* === Hero year badge === */
.vex-hero-badge {
	position: absolute;
	right: clamp(20px, 4vw, 64px);
	top: clamp(20px, 4vw, 64px);
	z-index: 3;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--wp--preset--color--brick);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	box-shadow: 0 8px 28px rgba(15, 38, 64, 0.35);
}
.vex-hero-badge .y {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: 42px;
	letter-spacing: -0.04em;
}
.vex-hero-badge .l {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.94);
	font-weight: 500;
}
@media (max-width: 600px) {
	.vex-hero-badge { width: 92px; height: 92px; right: 16px; top: 16px; }
	.vex-hero-badge .y { font-size: 28px; }
	.vex-hero-badge .l { font-size: 8px; letter-spacing: 0.18em; margin-top: 4px; }
}

/* === Stats bar === */
.vex-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
/* Soft brick (accent) wash turns each stat into a branded box. rgba literals of
   Brick #C8472F — no preset tint exists; matches the inline-rgba style used by
   the hero badge above. */
.vex-stats .vex-stat {
	text-align: center;
	padding: 32px 20px;
	background: rgba(200, 71, 47, 0.07);
	border: 1px solid rgba(200, 71, 47, 0.13);
	position: relative;
}
.vex-stats .vex-stat .n {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(2.25rem, 4.5vw, 3.375rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--ink);
}
.vex-stats .vex-stat .n .plus {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--brick);
	margin-left: 2px;
	font-size: 0.78em;
	vertical-align: 0.3em;
}
.vex-stats .vex-stat .n .star {
	color: var(--wp--preset--color--brick);
	font-style: normal;
	font-weight: 600;
	font-size: 0.85em;
}
.vex-stats .vex-stat .n.compact {
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	padding-top: 6px;
	font-style: normal;
}
.vex-stats .vex-stat .l {
	margin-top: 12px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	font-weight: 500;
}
.vex-stats .vex-stat .l b {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
@media (max-width: 768px) {
	.vex-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* === Sterling Standard 4-step process === */
.vex-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}
.vex-process::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: 36px;
	height: 1.5px;
	background: repeating-linear-gradient(90deg,
		var(--wp--preset--color--slate) 0 6px,
		transparent 6px 12px);
	z-index: 0;
}
.vex-process .vex-step {
	position: relative;
	text-align: center;
	padding: 0 14px;
	z-index: 1;
}
.vex-process .vex-step .num {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--slate);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: 28px;
	color: var(--wp--preset--color--ink);
	margin: 0 auto 22px;
	letter-spacing: -0.04em;
}
.vex-process .vex-step.first .num {
	background: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
	color: #fff;
}
.vex-process .vex-step .nm {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 8px;
	letter-spacing: -0.005em;
}
.vex-process .vex-step .d {
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.55;
	max-width: 26ch;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.vex-process { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.vex-process::before { display: none; }
}

/* === Reviews cards === */
.vex-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.vex-review {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--stone);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.vex-review:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -20px rgba(15, 38, 64, 0.25);
}
.vex-review .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.vex-review .stars {
	color: var(--wp--preset--color--brick);
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 1;
}
.vex-review .gmark {
	width: 24px;
	height: 24px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans);
}
.vex-review .quote {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-style: italic;
	font-weight: 400;
}
.vex-review .quote::before {
	content: "\201C";
	color: var(--wp--preset--color--brick);
	font-weight: 600;
	margin-right: 2px;
}
.vex-review .quote::after {
	content: "\201D";
	color: var(--wp--preset--color--brick);
	font-weight: 600;
	margin-left: 2px;
}
.vex-review .who {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px dashed var(--wp--preset--color--stone);
	padding-top: 16px;
	margin-top: auto;
}
.vex-review .av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--limestone);
	border: 1px solid var(--wp--preset--color--stone);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: var(--wp--preset--color--navy);
	flex-shrink: 0;
}
.vex-review .who .meta { flex: 1; min-width: 0; }
.vex-review .who .nm {
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
	letter-spacing: -0.005em;
}
.vex-review .who .ctx {
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--slate);
	margin-top: 3px;
}
.vex-review .ver {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	border: 1px solid var(--wp--preset--color--brick);
	padding: 4px 7px;
	line-height: 1;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	flex-shrink: 0;
}
.vex-review .ver::before {
	content: "✓";
	font-size: 11px;
	font-weight: 700;
}
@media (max-width: 900px) {
	.vex-reviews { grid-template-columns: 1fr; }
}

/* === Service area pills === */
.vex-area-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 980px;
	margin: 0 auto;
}
.vex-area {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--stone);
	padding: 13px 20px;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: border-color 160ms ease-out, transform 160ms ease-out;
}
.vex-area:hover {
	border-color: var(--wp--preset--color--navy);
	transform: translateY(-1px);
}
.vex-area::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--brick);
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.vex-area.county {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-color: var(--wp--preset--color--navy);
}
.vex-area.county::before {
	background: var(--wp--custom--color--italic-warm);
}
/* Towns we cover on request. They have no service_area page, so the chip is a
   <span>, not an <a> — dashed border and a muted dot mark it as a place we go
   rather than a place you can click. Same rule as .ve-city-card--nolink on the
   areas hub. */
.vex-area--nolink {
	border-style: dashed;
	color: var(--wp--preset--color--slate);
	cursor: default;
}
.vex-area--nolink::before { background: var(--wp--preset--color--stone); }
.vex-area--nolink:hover {
	border-color: var(--wp--preset--color--stone);
	transform: none;
}

/* === FAQ accordion === */
.vex-faq {
	max-width: 820px;
	margin: 0 auto;
	border-top: 1.5px solid var(--wp--preset--color--stone);
}
.vex-faq details {
	border-bottom: 1.5px solid var(--wp--preset--color--stone);
	background: #fff;
}
.vex-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 60px 24px 24px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: color 160ms ease-out;
}
.vex-faq summary::-webkit-details-marker { display: none; }
.vex-faq summary::after {
	content: "+";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 22px;
	color: var(--wp--preset--color--brick);
	line-height: 1;
	border: 1.5px solid var(--wp--preset--color--brick);
	transition: transform 200ms ease-out;
}
.vex-faq details[open] summary::after {
	content: "–";
}
.vex-faq details[open] summary {
	color: var(--wp--preset--color--navy);
}
.vex-faq .qnum {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: 14px;
	color: var(--wp--preset--color--brick);
	letter-spacing: -0.02em;
	min-width: 32px;
}
.vex-faq .ans {
	padding: 0 60px 26px 72px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.65;
	max-width: 64ch;
}

/* === Inline lead form === */
.vex-leadform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) {
	.vex-leadform { grid-template-columns: 1fr; gap: 40px; }
}
.vex-leadform .l-side > h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(2rem, 3.5vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
	max-width: 18ch;
	text-wrap: balance;
}
.vex-leadform .l-side > h2 em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--brick);
}
.vex-leadform .l-side > p {
	font-size: 1rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.55;
	margin: 0 0 24px;
	max-width: 42ch;
}
.vex-leadform ul.benefits {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.vex-leadform ul.benefits li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}
.vex-leadform ul.benefits li::before {
	content: "✓";
	width: 24px;
	height: 24px;
	background: var(--wp--preset--color--brick);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.vex-leadform ul.benefits li b {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.vex-warranty-callout {
	margin-top: 28px;
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border: 1.5px solid var(--wp--preset--color--navy);
	padding: 20px 24px;
	max-width: 460px;
}
.vex-warranty-callout svg {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--wp--custom--color--italic-warm);
}
.vex-warranty-callout .l1 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.1875rem;
	letter-spacing: -0.005em;
	color: #fff;
	line-height: 1.15;
}
.vex-warranty-callout .l1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--custom--color--italic-warm);
}
.vex-warranty-callout .l2 {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
	font-weight: 500;
}
.vex-leadform .form-box {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--stone);
	padding: 32px 32px 28px;
}
.vex-leadform .form-box h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 1.375rem;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
}
.vex-leadform .form-box h3 em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--brick);
}
.vex-leadform .form-box .formsub {
	font-size: 13px;
	color: var(--wp--preset--color--slate);
	margin: 0 0 22px;
	line-height: 1.5;
}
.vex-leadform .grid2f {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
/* Phones: paired fields are too cramped side-by-side (~135px each) and the
 * service placeholder truncates. Stack them full-width. */
@media (max-width: 480px) {
	.vex-leadform .grid2f { grid-template-columns: 1fr; }
}
.vex-leadform .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.vex-leadform label {
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}
.vex-leadform input,
.vex-leadform select {
	border: 1.5px solid var(--wp--preset--color--stone);
	background: #fff;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	transition: border-color 160ms ease-out;
}
.vex-leadform input:focus,
.vex-leadform select:focus {
	outline: none;
	border-color: var(--wp--preset--color--navy);
}
.vex-leadform input::placeholder { color: #B5B0A4; }
/* Custom dropdown chevron — appearance:none removes the native arrow, so paint
 * one in (navy) and reserve right padding for it. Keeps select height matched
 * to the text inputs. */
.vex-leadform select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 38px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F2640' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}
/* Different label line counts across a .grid2f row mustn't shove one input
 * lower than its neighbour — pin fields to the top and reserve a uniform
 * label height. */
.vex-leadform .grid2f { align-items: start; }
.vex-leadform .grid2f .field label { min-height: 1.4em; }
.vex-leadform .consent {
	font-size: 11px;
	color: var(--wp--preset--color--slate);
	margin: 8px 0 16px;
	line-height: 1.45;
}
.vex-leadform .submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px dashed var(--wp--preset--color--stone);
	padding-top: 18px;
}
.vex-leadform button.vex-submit {
	background: var(--wp--preset--color--brick);
	color: #fff;
	border: 1.5px solid var(--wp--preset--color--brick);
	padding: 13px 24px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background-color 160ms ease-out;
}
.vex-leadform button.vex-submit:hover {
	background: var(--wp--custom--color--brick-hover);
	border-color: var(--wp--custom--color--brick-hover);
}
.vex-leadform .or-call {
	font-size: 12px;
	color: var(--wp--preset--color--slate);
	letter-spacing: 0.02em;
}
.vex-leadform .or-call b {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--navy);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.03em;
}

/* ============================================================
 * Lead form submission states — driven by assets/js/lead-form.js
 * ============================================================ */
.vex-form-status {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	min-height: 1.45em;
}
.vex-form-status--sending {
	color: var(--wp--preset--color--slate);
}
.vex-form-status--error {
	color: var(--wp--preset--color--brick);
	font-weight: 500;
}
.vex-lead-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: progress;
}
.vex-form-success {
	background: var(--wp--preset--color--limestone);
	border-left: 4px solid var(--wp--preset--color--brick);
	padding: 24px 28px;
	border-radius: 4px;
}
.vex-form-success h3 {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}
.vex-form-success p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
}
.vex-form-success a {
	color: var(--wp--preset--color--brick);
	text-decoration: underline;
	font-weight: 600;
}

/* ============================================================
 * Photo hero (interior pages) — .ve-hero-photo
 * Source: hero-content-photo pattern (PR #18) + inlined per page
 * across About / Our Promise / Services / Reviews / Areas We Serve.
 *
 * These styles MUST live in style.css (not inline in post_content).
 * WordPress strips <style> tags from post_content via wp_kses, which
 * killed the gradient overlay + container constraints when they were
 * embedded inline. style.css is the durable home.
 * ============================================================ */

.ve-hero-photo {
	position: relative;
}

/* Standardized interior hero treatment: navy backdrop that holds AA contrast
 * across the entire frame so white text reads no matter where it lands. Strong
 * radial pool at center + a generous flat dim across the rest.
 *
 * Deliberately NOT scoped to a colour class. This used to require
 * `.has-navy-dark-background-color`, which meant the overlay silently vanished
 * on any hero whose author picked a custom overlay colour instead of the preset
 * — exactly what happened to /services/ (custom #818688, no dimming, white text
 * straight onto a bright brick photo). The dim is a fixed brand treatment, so
 * it should not depend on which colour sits underneath it.
 *
 * `.is-style-photo-hero` is the registered core/cover style variation (see
 * functions.php); `.ve-hero-photo` is kept for the heroes already baked into
 * post_content. Both resolve to the same treatment. */
.ve-hero-photo .wp-block-cover__background,
.wp-block-cover.is-style-photo-hero .wp-block-cover__background {
	background:
		radial-gradient(
			ellipse at center,
			rgba(15, 38, 64, 0.82) 0%,
			rgba(15, 38, 64, 0.74) 45%,
			rgba(15, 38, 64, 0.58) 100%
		),
		linear-gradient(rgba(15, 38, 64, 0.45), rgba(15, 38, 64, 0.45)) !important;
	opacity: 1 !important;
}

/* ROOT CAUSE FIX — interior pages (About / Reviews / Our Promise / Areas We
 * Serve) shipped with a `<style>` block inlined inside the wp:cover via
 * wp:html. wp_kses_post() stripped the `<style>` tags but left the CSS rule
 * text as a BARE TEXT NODE inside the cover element. The cover is `display:
 * flex` — that invisible text-node becomes an anonymous flex item and shoves
 * the content stack to the right. /services/ was composed without the inline
 * style block and renders fine; that's why some heroes centered and some
 * didn't. Inner-container CSS targeted a wrapper that doesn't exist in these
 * pages, so nothing helped.
 *
 * Bulletproof fix: pull the content stack OUT of the cover's flex flow
 * entirely via absolute positioning, so the stray text node can't push it
 * around. Works regardless of cover position class, inner-container presence,
 * or stray content. */
.ve-hero-photo .ve-hero-photo__content {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: calc(100% - 2 * var(--wp--preset--spacing--5)) !important;
	max-width: 780px !important;
	margin: 0 !important;
	text-align: center !important;
	z-index: 3 !important;
	padding-inline: clamp(16px, 3vw, 40px);
}

/* Force WHITE text on every descendant. Published page markup has the subhead
 * paragraph and eyebrow without explicit colors — they otherwise inherit the
 * cover's `is-light` default (dark text), which made them disappear into the
 * photo. */
.ve-hero-photo .ve-hero-photo__content,
.ve-hero-photo .ve-hero-photo__content p,
.ve-hero-photo .ve-hero-photo__content h1,
.ve-hero-photo .ve-hero-photo__content h2 {
	color: #ffffff !important;
}

/* Preserve the italicWarm accent on emphasised words in the H1 */
.ve-hero-photo .ve-hero-photo__content em {
	color: #E9D9B0 !important;
}

/* Every child centered and max-width within the stack */
.ve-hero-photo .ve-hero-photo__content > * {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	text-align: center !important;
}

/* Button group centers */
.ve-hero-photo .ve-hero-photo__content .wp-block-buttons {
	justify-content: center !important;
}

/* Service detail pages (/services/windows/, /services/doors/, /services/siding/,
 * /services/trim/, /services/gutters/, /services/roofing/) use the WP-default
 * .wp-block-cover__inner-container directly with no .ve-hero-photo__content
 * wp:group wrapper. Apply the same absolute-positioning centering treatment as
 * the parent-page hero so all interior heroes match.
 *
 * Color overrides intentionally omitted — these pages set their eyebrow to
 * brick (breadcrumb) and H1/body to white via explicit textColor classes
 * (has-brick-color, has-white-color). Forcing #fff here would clobber the
 * brick breadcrumb. */
.ve-hero-photo > .wp-block-cover__inner-container {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: calc(100% - 2 * var(--wp--preset--spacing--5)) !important;
	max-width: 780px !important;
	margin: 0 !important;
	text-align: center !important;
	z-index: 3 !important;
	padding-inline: clamp(16px, 3vw, 40px);
}

.ve-hero-photo > .wp-block-cover__inner-container > * {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.ve-hero-photo > .wp-block-cover__inner-container .wp-block-buttons {
	justify-content: center !important;
}

/* Responsive min-heights (core's cover.minHeight is single-value). */
@media (max-width: 1023px) {
	.ve-hero-photo {
		min-height: 420px !important;
	}
}
@media (max-width: 639px) {
	.ve-hero-photo {
		min-height: 360px !important;
	}
}

/* ============================================================
 * Areas We Serve hub — regional reviews grid (.ve-aws-*)
 * Used on /areas-we-serve/ only. Page-scoped variant of the
 * homepage .vex-review styles — different border, sizing, no
 * hover lift. Lives here because <style> in post_content gets
 * stripped by wp_kses on save (same fix as .ve-hero-photo).
 * ============================================================ */
.ve-aws-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
}
@media (max-width: 1023px) {
	.ve-aws-reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
	.ve-aws-reviews-grid { grid-template-columns: 1fr; }
}

.ve-aws-review {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--ink);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ve-aws-review .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ve-aws-review .stars {
	color: var(--wp--preset--color--brick);
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 1;
}
.ve-aws-review .gmark {
	width: 22px;
	height: 22px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	color: var(--wp--preset--color--navy);
}
.ve-aws-review .quote {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-style: italic;
	font-weight: 400;
}
.ve-aws-review .quote::before {
	content: "\201C";
	color: var(--wp--preset--color--brick);
	font-weight: 600;
	margin-right: 2px;
}
.ve-aws-review .quote::after {
	content: "\201D";
	color: var(--wp--preset--color--brick);
	font-weight: 600;
	margin-left: 2px;
}
.ve-aws-review .who {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px dashed var(--wp--preset--color--stone);
	padding-top: 14px;
	margin-top: auto;
}
.ve-aws-review .av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--limestone);
	border: 1px solid var(--wp--preset--color--stone);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: var(--wp--preset--color--navy);
}
.ve-aws-review .who .meta { flex: 1; min-width: 0; }
.ve-aws-review .who .nm {
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
	letter-spacing: -0.005em;
}
.ve-aws-review .who .ctx {
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--slate);
	margin-top: 2px;
}
.ve-aws-review .ver {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	border: 1px solid var(--wp--preset--color--brick);
	padding: 3px 6px;
	line-height: 1;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	flex-shrink: 0;
}
.ve-aws-review .ver::before {
	content: "\2713";
	font-size: 11px;
	font-weight: 700;
}

/* =====================================================================
 * Filterable Gallery ([vex_gallery] shortcode + Isotope)
 * Hierarchy: service TABS (primary, underline-active) > subtype CHIPS
 * (contextual, brick-fill-active) > city + sort LINKS (tertiary, text
 * weight + brick color). Distinct shapes signal distinct roles.
 * ===================================================================== */

.vex-gallery {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0 0 4rem;
	/* Single source of truth for the horizontal inset used by both the
	   controls padding and the grid padding. Item width formulas subtract
	   this × 2 to correct for the absolute-position 100% = padding-box bug. */
	--vex-grid-inset: clamp(1rem, 4vw, 3rem);
}

.vex-gallery [hidden] {
	display: none !important;
}

/* ---- Full-width Limestone controls band ----------------------------- */
.vex-gallery__controls {
	background-color: var(--wp--preset--color--limestone);
	border-top: 1px solid var(--wp--preset--color--stone);
	border-bottom: 1px solid var(--wp--preset--color--stone);
	padding: 1.5rem var(--vex-grid-inset);
	margin-bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ---- Tier 1: Service tabs ------------------------------------------- */
.vex-gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	border-bottom: 1px solid var(--wp--preset--color--stone);
}

.vex-gallery__tab {
	position: relative;
	padding: 0.875rem 1.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: none;
	cursor: pointer;
	letter-spacing: -0.005em;
	transition: color 0.18s ease;
}

.vex-gallery__tab::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: -1px;
	height: 3px;
	background: var(--wp--preset--color--brick);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
}

.vex-gallery__tab:hover { color: var(--wp--preset--color--brick); }
.vex-gallery__tab:hover::after { transform: scaleX(0.35); }

.vex-gallery__tab.is-active { color: var(--wp--preset--color--brick); }
.vex-gallery__tab.is-active::after { transform: scaleX(1); }

/* ---- Tier 2: Contextual subtype chips ------------------------------- */
.vex-gallery__subtypes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	animation: vex-gallery-reveal 0.25s ease-out;
}

@keyframes vex-gallery-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.vex-gallery__subtype-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.vex-gallery__sublabel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-right: 0.5rem;
}

.vex-gallery__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--limestone);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vex-gallery__chip:hover {
	background-color: #fff;
	border-color: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--brick);
}

.vex-gallery__chip.is-active {
	background-color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
	color: #fff;
}

/* ---- Tier 3: City + Sort link rows ---------------------------------- */
.vex-gallery__meta {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.vex-gallery__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0.375rem;
	align-items: center;
	justify-content: center;
}

.vex-gallery__rowlabel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-right: 0.5rem;
	min-width: 44px;
}

.vex-gallery__link {
	padding: 0.25rem 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.vex-gallery__link:hover { color: var(--wp--preset--color--brick); }

.vex-gallery__link.is-active {
	color: var(--wp--preset--color--brick);
	font-weight: 700;
}

/* ---- Grid ----------------------------------------------------------- */
.vex-gallery__grid {
	position: relative;
	max-width: 1760px;
	margin: 0 auto;
	padding: 0 var(--vex-grid-inset);
	/* Hidden until imagesLoaded fires and Isotope adds .is-loaded —
	   prevents a flash of unpositioned tiles on first paint. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.vex-gallery__grid.is-loaded {
	opacity: 1;
}

/* 5 columns desktop (was 4) — smaller tiles, more in view.
 *
 * Isotope v3 positions items via transform: translate(x,y) set as inline style.
 * The !important on opacity means OUR transition beats Isotope's inline
 * `transition: transform Xms` for opacity, so filter show/hide fades cleanly.
 * transform is NOT in our transition list → position snaps instantly instead
 * of flying. The hover lift lives on .vex-gallery__item-inner so it never
 * conflicts with Isotope's positioning transform on the outer <figure>. */
.vex-gallery__item {
	width: calc((100% - var(--vex-grid-inset) * 2 - 80px) / 5);
	margin-bottom: 20px;
	background-color: var(--wp--preset--color--limestone);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 38, 64, 0.06);
	/* Only opacity fades — no transform here. After .is-loaded, opacity
	   transitions activate so subsequent filter changes fade smoothly. */
	transition: box-shadow 0.22s ease !important;
}

/* Activate opacity fading after Isotope finishes its first layout so filter
   show/hide fades smoothly but the initial placement is instant. */
.vex-gallery__grid.is-loaded .vex-gallery__item {
	transition: opacity 0.4s ease, box-shadow 0.22s ease !important;
}

.vex-gallery__item:hover {
	box-shadow: 0 12px 28px -14px rgba(15, 38, 64, 0.28);
}

/* Inner wrapper — owns hover lift and the entrance animation so neither
   conflicts with Isotope's transform on the outer <figure>. */
.vex-gallery__item-inner {
	transition: transform 0.22s ease;
}

.vex-gallery__item:hover .vex-gallery__item-inner {
	transform: translateY(-3px);
}

/* Entrance animation — fires once when .is-loaded is added to the grid.
   Stagger rows of 5 so items wave in left→right across each column group. */
.vex-gallery__grid.is-loaded .vex-gallery__item-inner {
	animation: vex-gallery-item-in 0.45s ease both;
}
.vex-gallery__grid.is-loaded .vex-gallery__item:nth-child(5n+2) .vex-gallery__item-inner { animation-delay:  60ms; }
.vex-gallery__grid.is-loaded .vex-gallery__item:nth-child(5n+3) .vex-gallery__item-inner { animation-delay: 120ms; }
.vex-gallery__grid.is-loaded .vex-gallery__item:nth-child(5n+4) .vex-gallery__item-inner { animation-delay: 180ms; }
.vex-gallery__grid.is-loaded .vex-gallery__item:nth-child(5n)   .vex-gallery__item-inner { animation-delay: 240ms; }

@keyframes vex-gallery-item-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.vex-gallery__media {
	position: relative;
	overflow: hidden;
}

.vex-gallery__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Badges overlay on each image -- fade in on hover -------------------- */
.vex-gallery__badges {
	position: absolute;
	left: 0.625rem;
	right: 0.625rem;
	bottom: 0.625rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.vex-gallery__item:hover .vex-gallery__badges,
.vex-gallery__item:focus-within .vex-gallery__badges {
	opacity: 1;
	transform: translateY(0);
}

.vex-gallery__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 3px;
}

.vex-gallery__badge--service {
	background: rgba(200, 71, 47, 0.94);
	color: #fff;
}

.vex-gallery__badge--sub {
	background: rgba(255, 255, 255, 0.94);
	color: var(--wp--preset--color--ink);
}

.vex-gallery__badge--city {
	background: rgba(15, 38, 64, 0.88);
	color: #fff;
}

/* Manufacturer. Outlined rather than filled so it reads as a spec detail next
   to the Brick service badge and Navy city badge, not a third competing fill. */
.vex-gallery__badge--brand {
	background: rgba(255, 255, 255, 0.90);
	color: var(--wp--preset--color--slate);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--stone);
}

.vex-gallery__empty {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--wp--preset--color--ink);
	font-style: italic;
}

/* ---- Before / After reveal toggle ---------------------------------- */
/* The "Before & After" tab is a normal service tab, tinted brick so it
 * reads as the transformation view rather than a service filter. */
.vex-gallery__tab--phase {
	color: var(--wp--preset--color--brick);
}

/* Paired cards stack both frames; only one shows at a time. The default
 * face is the "after" — finished work always leads. */
.vex-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}
.vex-gallery__item .vex-gallery__img--before { display: none; }
.vex-gallery__item.is-before .vex-gallery__img--before { display: block; }
.vex-gallery__item.is-before .vex-gallery__img--after  { display: none; }

/* Paired media is a fixed-ratio frame (aspect-ratio set inline to the after
 * photo's shape) so both frames fill the same box — toggling swaps in place
 * and never reflows the masonry grid. */
.vex-gallery__media--pair .vex-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Segmented Before|After pill over the media, top-left. Always visible so
 * the toggle is discoverable (unlike the hover-only service badges). */
.vex-gallery__phase-toggle {
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	z-index: 2;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	/* Solid (no backdrop-filter): a blur here creates a compositing layer that
	 * freezes the child buttons' background repaint, so the active highlight
	 * never visually moves when you toggle. */
	background: rgba(15, 38, 64, 0.88);
	border-radius: 999px;
}
.vex-gallery__phase-btn {
	padding: 0.25rem 0.7rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: transparent;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	/* Instant flip — no background-color transition (see toggle note above). */
	transition: color 0.15s ease;
}
.vex-gallery__phase-btn.is-active {
	background: var(--wp--preset--color--brick);
	color: #fff;
}
.vex-gallery__phase-btn:hover:not(.is-active) {
	color: var(--wp--preset--color--limestone);
}

/* === Blog page =========================================================
 * Spacing fix + category tile styles. */

/* Remove default block margins between alignfull sections on the blog page.
 * The site-wide rule above handles the home page; this covers interior pages. */
.page-id-11 .entry-content .alignfull {
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/* Category strip — single non-wrapping row of icon + label tiles */
.vex-blog-categories .wp-block-columns {
	flex-wrap: nowrap !important;
	align-items: stretch !important;
}

.vex-blog-cat-tile {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: center !important;
	padding: 1.25rem 0.5rem !important;
	background-color: var(--wp--preset--color--limestone) !important;
	border-radius: 6px !important;
	gap: 0.5rem !important;
	min-width: 0 !important;
	cursor: default;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.vex-blog-cat-tile:hover {
	background-color: #ede9e2 !important;
	box-shadow: 0 2px 8px rgba(15, 38, 64, 0.08);
}

.vex-cat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vex-cat-icon svg {
	width: 1.625rem;
	height: 1.625rem;
	display: block;
	color: var(--wp--preset--color--navy);
}

.vex-blog-cat-tile h3 {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	color: var(--wp--preset--color--navy) !important;
}

/* ---- Load More -------------------------------------------------------- */
.vex-gallery__load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 2rem clamp(1rem, 4vw, 3rem);
}

.vex-gallery__load-more {
	padding: 0.875rem 2.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background-color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vex-gallery__load-more:hover {
	background-color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
}

/* ---- Breakpoints ---------------------------------------------------- */
@media (max-width: 1440px) {
	.vex-gallery__item { width: calc((100% - var(--vex-grid-inset) * 2 - 60px) / 4); }
}

@media (max-width: 1100px) {
	.vex-gallery__item { width: calc((100% - var(--vex-grid-inset) * 2 - 40px) / 3); }
}

@media (max-width: 900px) {
	.vex-gallery__tab { padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
	.vex-gallery__item { width: calc((100% - var(--vex-grid-inset) * 2 - 20px) / 2); }
	.vex-gallery__badges { opacity: 1; transform: none; }
}

@media (max-width: 540px) {
	.vex-gallery__item { width: calc(100% - var(--vex-grid-inset) * 2); }
}

/* === Services hub intro band: vertically center left column ===
 * Right column (.ve-estimate-callout) has verticalAlignment:center on its
 * wp:column block. The left "Done by our crew" column was left at
 * verticalAlignment:top, so it sat above the taller callout with empty
 * space below. align-self:center on the left column lines its content
 * up with the callout's vertical midpoint.
 *
 * Page-scoped (body.page-id-8) so this never affects other two-column
 * layouts on the site.
 */
body.page-id-8 .wp-block-columns > .wp-block-column.is-vertically-aligned-top:first-child {
	align-self: center;
}

/* === ve-estimate-callout — services hub intro right column ===
 * Navy-dark card with brick rail + brick CTA. Used inline in the services hub
 * intro band (page ID 8). Lives in style.css instead of inline <style> because
 * wp_kses_post() strips <style> tags from post_content.
 */

.ve-estimate-callout {
	background: var(--wp--preset--color--navy-dark);
	color: var(--wp--preset--color--white);
	padding: 40px 36px;
	border: 1.5px solid var(--wp--preset--color--ink);
	position: relative;
	overflow: hidden;
}
.ve-estimate-callout__rule {
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 100%;
	background: var(--wp--preset--color--brick);
}
.ve-estimate-callout__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #E9D9B0;
	margin: 0 0 14px;
	padding-left: 14px;
}
.ve-estimate-callout__head {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	margin: 0 0 22px;
	padding-left: 14px;
}
.ve-estimate-callout__head em {
	font-style: italic;
	font-weight: 400;
	color: #E9D9B0;
}
.ve-estimate-callout__body {
	padding-left: 14px;
}
.ve-estimate-callout__phone {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	line-height: 1;
	margin-bottom: 8px;
	transition: color 160ms ease;
}
.ve-estimate-callout__phone:hover {
	color: #E9D9B0;
}
.ve-estimate-callout__hours {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 28px;
}
.ve-estimate-callout__divider {
	border-top: 1px dashed rgba(255, 255, 255, 0.3);
	padding-top: 24px;
	margin-bottom: 18px;
}
.ve-estimate-callout__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 14px 22px;
	text-decoration: none;
	border: 1.5px solid var(--wp--preset--color--brick);
	transition: background 160ms ease, color 160ms ease;
}
.ve-estimate-callout__cta:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brick);
}
.ve-estimate-callout__footnote {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	margin: 18px 0 0;
	font-style: italic;
}

@media (max-width: 781px) {
	.ve-estimate-callout { padding: 32px 28px; }
	.ve-estimate-callout__head { font-size: 28px; }
	.ve-estimate-callout__phone { font-size: 28px; }
}

/* === Review cards (/reviews/, /our-promise/) ===
 * Subtle elevation so white cards read as cards on white AND limestone sections.
 * Inline box-shadow gets stripped by wp_kses_post() in post_content; rule lives here instead.
 */
.ve-review-card {
	box-shadow:
		0 1px 3px rgba(15, 38, 64, 0.06),
		0 4px 16px rgba(15, 38, 64, 0.05);
}

/* === Scroll-triggered entrance animations =========================================
 * Three animated regions: stats strip, card grid, numbered steps.
 * IntersectionObserver in ve-animations.js adds .is-visible to the parent when
 * 12% of it enters the viewport; CSS transitions handle the rest.
 * prefers-reduced-motion: hard-off so no motion surprises anyone.
 * ================================================================================*/

/* Stats strip — columns slide up in sequence */
.ve-stats-strip .wp-block-column {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.ve-stats-strip.is-visible .wp-block-column:nth-child(1) { opacity: 1; transform: none; }
.ve-stats-strip.is-visible .wp-block-column:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.10s; }
.ve-stats-strip.is-visible .wp-block-column:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; }
.ve-stats-strip.is-visible .wp-block-column:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.30s; }

/* Stat description dim — was an inline opacity:0.8, which core's paragraph block
 * doesn't emit, so the editor flagged it invalid and "Attempt Block Recovery"
 * mangled it. Moved to CSS so the paragraph stays a valid core block. */
.ve-stats-strip .wp-block-column > p:last-child { opacity: 0.8; }

/* Card grid — cards cascade in */
.ve-card-grid > .wp-block-group {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.ve-card-grid.is-visible > .wp-block-group:nth-child(1) { opacity: 1; transform: none; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.06s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.12s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.18s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.24s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.30s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.36s; }
.ve-card-grid.is-visible > .wp-block-group:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.42s; }

/* Process steps — numbered columns stagger in slower */
.ve-steps-strip .wp-block-column {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.ve-steps-strip.is-visible .wp-block-column:nth-child(1) { opacity: 1; transform: none; }
.ve-steps-strip.is-visible .wp-block-column:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.ve-steps-strip.is-visible .wp-block-column:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.30s; }

/* Respect reduced-motion preference — never animate if user opts out */
@media (prefers-reduced-motion: reduce) {
	.ve-stats-strip .wp-block-column,
	.ve-card-grid > .wp-block-group,
	.ve-steps-strip .wp-block-column {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============================================================
 * Service Card Grid (Imagery) — .ve-service-card-grid-imagery
 * Moved from inline <style> in the pattern (wp_kses strips <style>
 * in post content / some pattern render paths). style.css is durable.
 * ============================================================ */
.ve-service-card-grid-imagery .ve-service-card-grid-imagery__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 44px;
}
.ve-service-card-grid-imagery__head .ve-service-card-grid-imagery__head-r {
	max-width: 38ch;
	text-align: right;
	padding-bottom: 10px;
	font-size: 14px;
	color: var(--wp--preset--color--slate);
	line-height: 1.55;
}
.ve-service-card-grid-imagery__count {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: 38px;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 8px;
	display: block;
	text-align: right;
}
.ve-service-card-grid-imagery__count-num { color: var(--wp--preset--color--brick); }
.ve-service-card-grid-imagery__count-sep {
	color: var(--wp--preset--color--stone);
	margin: 0 6px;
	font-style: normal;
	font-weight: 400;
}
.ve-service-card-grid-imagery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 1023px) {
	.ve-service-card-grid-imagery__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 639px) {
	.ve-service-card-grid-imagery__grid { grid-template-columns: 1fr; gap: 14px; }
}

.ve-service-card {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.ve-service-card__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.ve-service-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 360ms ease;
}
.ve-service-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--navy-dark) 0%,
		rgba(15, 38, 64, 0.85) 30%,
		rgba(15, 38, 64, 0.45) 55%,
		rgba(15, 38, 64, 0.10) 80%,
		rgba(15, 38, 64, 0) 100%
	);
}
.ve-service-card__ptag {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	padding: 4px 7px;
	line-height: 1;
}
.ve-service-card__brand {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
	padding: 4px 7px;
	line-height: 1;
	font-weight: 600;
}
.ve-service-card__body {
	position: relative;
	z-index: 1;
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ve-service-card__name {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	margin: 0;
}
.ve-service-card__name a { color: inherit; text-decoration: none; }
.ve-service-card__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--limestone);
	margin: 0;
	max-width: 32ch;
	text-shadow: 0 1px 2px rgba(15, 38, 64, 0.35);
}
.ve-service-card__link {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
.ve-service-card__link a { color: inherit; text-decoration: none; }
.ve-service-card__chev {
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Hover + keyboard focus */
.ve-service-card:hover,
.ve-service-card:focus-within {
	border-color: var(--wp--preset--color--brick);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	transform: translate(-3px, -3px);
}
.ve-service-card:hover .ve-service-card__img img,
.ve-service-card:focus-within .ve-service-card__img img {
	transform: scale(1.06);
}
.ve-service-card:hover .ve-service-card__link,
.ve-service-card:focus-within .ve-service-card__link {
	border-top-color: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--brick);
}
.ve-service-card:hover .ve-service-card__chev,
.ve-service-card:focus-within .ve-service-card__chev {
	background: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--white);
}

/* Section head collapses to stacked on tablet/phone */
@media (max-width: 767px) {
	.ve-service-card-grid-imagery__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		margin-bottom: 32px;
	}
	.ve-service-card-grid-imagery__head-r { text-align: left; max-width: none; }
	.ve-service-card-grid-imagery__count { text-align: left; }
}

/* ==========================================================================
 * City Card Grid — .ve-city-card-grid
 * ========================================================================== */

.ve-city-card-grid .ve-city-card-grid__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 44px;
}
.ve-city-card-grid__head .ve-city-card-grid__head-r {
	max-width: 38ch;
	text-align: right;
	padding-bottom: 10px;
	font-size: 14px;
	color: var(--wp--preset--color--slate);
	line-height: 1.55;
}
.ve-city-card-grid__count {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-style: italic;
	font-size: 38px;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 8px;
	display: block;
	text-align: right;
}
.ve-city-card-grid__count-num { color: var(--wp--preset--color--brick); }
.ve-city-card-grid__count-sep { color: var(--wp--preset--color--stone); margin: 0 6px; font-style: normal; font-weight: 400; }

.ve-city-card-grid__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1023px) {
	.ve-city-card-grid__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 639px) {
	.ve-city-card-grid__grid { gap: 10px; }
}

.ve-city-card {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ve-city-card__img {
	position: relative;
	aspect-ratio: 16/9;
	background: repeating-linear-gradient(45deg, rgba(15,38,64,.08) 0 12px, transparent 12px 24px);
	border-bottom: 1.5px solid var(--wp--preset--color--ink);
	overflow: hidden;
}
.ve-city-card__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}
.ve-city-card__ptag {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	padding: 4px 7px;
	line-height: 1;
}
.ve-city-card__zip {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	background: rgba(255,255,255,.94);
	border: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--slate);
	padding: 4px 7px;
	line-height: 1;
}
.ve-city-card__zip b { color: var(--wp--preset--color--ink); font-weight: 600; }
.ve-city-card__hq {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 3;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--navy);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 8px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ve-city-card__hq::before {
	content: "";
	width: 6px;
	height: 6px;
	background: #E9D9B0;
	border-radius: 50%;
}
.ve-city-card__body {
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.ve-city-card__name {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.ve-city-card__name a { color: inherit; text-decoration: none; }
.ve-city-card__desc {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--wp--preset--color--slate);
	margin: 0;
	max-width: 30ch;
}
.ve-city-card__link {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--wp--preset--color--stone);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}
.ve-city-card__link a { color: inherit; text-decoration: none; }
.ve-city-card__chev {
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ve-city-card:hover,
.ve-city-card:focus-within {
	border-color: var(--wp--preset--color--brick);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	transform: translate(-3px, -3px);
}
.ve-city-card:hover .ve-city-card__img,
.ve-city-card:focus-within .ve-city-card__img {
	border-bottom-color: var(--wp--preset--color--brick);
	background: repeating-linear-gradient(45deg, rgba(200,71,47,.14) 0 12px, rgba(200,71,47,.03) 12px 24px);
}
.ve-city-card:hover .ve-city-card__name,
.ve-city-card:focus-within .ve-city-card__name,
.ve-city-card:hover .ve-city-card__link,
.ve-city-card:focus-within .ve-city-card__link {
	color: var(--wp--preset--color--brick);
}
.ve-city-card:hover .ve-city-card__link,
.ve-city-card:focus-within .ve-city-card__link {
	border-top-color: var(--wp--preset--color--brick);
}
.ve-city-card:hover .ve-city-card__chev,
.ve-city-card:focus-within .ve-city-card__chev {
	background: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
	.ve-city-card-grid__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
	.ve-city-card-grid__head-r { text-align: left; max-width: none; }
	.ve-city-card-grid__count { text-align: left; }
}

/* --------------------------------------------------------------------------
 * On-request towns — .ve-city-card--nolink
 *
 * Same card as the other ten: image well, ZIP badge, serif name, descriptor,
 * dashed-rule chevron footer. Only the link is disabled. The footer greys out
 * and every hover affordance .ve-city-card grants is reset — a card that lifts
 * and turns brick on hover but goes nowhere is a broken promise.
 * -------------------------------------------------------------------------- */

.ve-city-card--nolink { cursor: default; }
.ve-city-card--nolink .ve-city-card__link { color: var(--wp--preset--color--slate); }
.ve-city-card--nolink .ve-city-card__chev {
	border-color: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--stone);
}

/* Hover/focus resets. Same specificity as the .ve-city-card rules above plus
   one class, so these win outright. */
.ve-city-card--nolink:hover,
.ve-city-card--nolink:focus-within {
	border-color: var(--wp--preset--color--ink);
	box-shadow: none;
	transform: none;
}
.ve-city-card--nolink:hover .ve-city-card__img,
.ve-city-card--nolink:focus-within .ve-city-card__img {
	border-bottom-color: var(--wp--preset--color--ink);
	background: repeating-linear-gradient(45deg, rgba(15,38,64,.08) 0 12px, transparent 12px 24px);
}
.ve-city-card--nolink:hover .ve-city-card__name,
.ve-city-card--nolink:focus-within .ve-city-card__name {
	color: var(--wp--preset--color--ink);
}
.ve-city-card--nolink:hover .ve-city-card__link,
.ve-city-card--nolink:focus-within .ve-city-card__link {
	color: var(--wp--preset--color--slate);
	border-top-color: var(--wp--preset--color--stone);
}
.ve-city-card--nolink:hover .ve-city-card__chev,
.ve-city-card--nolink:focus-within .ve-city-card__chev {
	background: transparent;
	border-color: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--stone);
}

.ve-city-card-grid__foot {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px dashed var(--wp--preset--color--stone);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
}
.ve-city-card-grid__foot a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--brick);
}
.ve-city-card-grid__foot a:hover,
.ve-city-card-grid__foot a:focus-visible {
	color: var(--wp--preset--color--brick);
}

/* ==========================================================================
 * Photo Hero — .ve-hero-photo
 * ========================================================================== */

.ve-hero-photo { position: relative; }

/* Replace the flat dim with a bottom-up navy gradient so the top of the
   photo stays visible while text at bottom-left has full contrast. */
.ve-hero-photo .wp-block-cover__background.has-navy-dark-background-color {
	background: linear-gradient(
		to top,
		rgba(15,38,64,0.78) 0%,
		rgba(15,38,64,0.55) 35%,
		rgba(15,38,64,0.25) 65%,
		rgba(15,38,64,0)    100%
	) !important;
	opacity: 1 !important;
}

.ve-hero-photo__placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(135deg, transparent 49.7%, rgba(214,214,214,.35) 49.85%, rgba(214,214,214,.35) 50.15%, transparent 50.3%),
		linear-gradient(45deg,  transparent 49.7%, rgba(214,214,214,.35) 49.85%, rgba(214,214,214,.35) 50.15%, transparent 50.3%),
		repeating-linear-gradient(45deg, rgba(26,58,92,.18) 0 14px, rgba(26,58,92,.08) 14px 28px);
}
.ve-hero-photo__ptag {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 1;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	padding: 5px 8px;
	line-height: 1;
}

.ve-hero-photo > .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.ve-hero-photo .ve-hero-photo__content { max-width: 780px; }

@media (max-width: 1023px) {
	.ve-hero-photo { min-height: 420px !important; }
}
@media (max-width: 639px) {
	.ve-hero-photo { min-height: 360px !important; }
}

/* ============================================================
 * Mega menu — primary nav (desktop dropdowns + mobile drawer)
 * Source: parts/header.html (.vex-meganav), JS: assets/js/mega-menu.js
 *
 * Desktop (>=782px): horizontal nav bar; each top item reveals a
 *   full-width centered panel anchored to the bottom of .vex-mainbar.
 *   Open state is JS-driven (.is-open, hover-intent) with a
 *   :focus-within fallback so keyboard users still get panels if JS
 *   fails to load. Top links always navigate to the hub page.
 * Mobile (<=781px): the same nav becomes an off-canvas drawer with
 *   tap-to-expand accordions. The hamburger morphs to an X.
 * ============================================================ */

/* ---- Desktop nav bar ---- */
.vex-meganav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(2px, 1.4vw, 22px);
}
.vex-meganav__item { position: static; }

.vex-meganav__top {
	position: relative;
	display: inline-block;
	padding: 8px 2px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 140ms ease-out;
}
.vex-meganav__top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease-out;
}
.vex-meganav__item:hover .vex-meganav__top,
.vex-meganav__item.is-open .vex-meganav__top,
.vex-meganav__item:focus-within .vex-meganav__top { color: var(--wp--preset--color--brick); }
.vex-meganav__item:hover .vex-meganav__top::after,
.vex-meganav__item.is-open .vex-meganav__top::after,
.vex-meganav__item:focus-within .vex-meganav__top::after { transform: scaleX(1); }

/* Chevron toggle — hidden on desktop, used in the mobile drawer */
.vex-meganav__toggle { display: none; }
/* Drawer-only chrome — hidden on desktop */
.vex-meganav__drawer-head,
.vex-meganav__drawer-foot { display: none; }

/* ---- The panel ----
 * Anchored to .vex-mainbar-inner so left:0/right:0 align flush with the
 * logo (left) and the estimate button (right). Drops below the white bar
 * by its bottom padding + border so it reads as one connected surface. */
.vex-mega {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--3) + 1px);
	left: 0;
	right: 0;
	transform: translateY(8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 200;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.vex-meganav__item.is-open > .vex-mega,
.vex-meganav__item:focus-within > .vex-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

.vex-mega__inner {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 3px solid var(--wp--preset--color--brick);
	box-shadow: 0 28px 56px -28px rgba(15, 38, 64, 0.5);
	padding: 22px 26px 26px;
}

.vex-mega__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--wp--preset--color--stone);
}
.vex-mega__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
/* On-request towns under the city link list — plain text, not nav links. */
.vex-mega__aside {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--wp--preset--color--stone);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
}
.vex-mega__aside strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.vex-mega__viewall {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--brick);
	text-decoration: none;
	white-space: nowrap;
}
.vex-mega__viewall span { display: inline-block; transition: transform 160ms ease; }
.vex-mega__viewall:hover span { transform: translateX(4px); }

.vex-mega__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 296px;
	gap: 26px;
	align-items: stretch;
}

/* ---- Link grids (services, cities, blog topics, promise) ---- */
.vex-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px 10px;
}
.vex-mega__links--3 { grid-template-columns: repeat(3, 1fr); }
.vex-mega__links--2 { grid-template-columns: repeat(2, 1fr); }
.vex-mega__links--1 { grid-template-columns: 1fr; }

.vex-mega__links a,
.vex-mega__promise li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	transition: background-color 140ms ease;
}
.vex-mega__links a:hover { background: var(--wp--preset--color--limestone); }

.vex-mega__ico,
.vex-mega__pin,
.vex-mega__check {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--stone);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	transition: color 140ms ease, border-color 140ms ease;
}
.vex-mega__ico svg,
.vex-mega__pin svg,
.vex-mega__check svg { width: 20px; height: 20px; }
.vex-mega__links a:hover .vex-mega__ico,
.vex-mega__links a:hover .vex-mega__pin {
	color: var(--wp--preset--color--brick);
	border-color: var(--wp--preset--color--brick);
}
.vex-mega__check { color: var(--wp--preset--color--brick); }

.vex-mega__lk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vex-mega__lk-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}
.vex-mega__links a:hover .vex-mega__lk-name { color: var(--wp--preset--color--brick); }
.vex-mega__lk-desc {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--slate);
}
.vex-mega__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.1em;
	vertical-align: middle;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--navy);
}

/* ---- FAQ question list ---- */
.vex-mega__links--qa a {
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--wp--preset--color--stone);
	padding: 13px 12px;
}
.vex-mega__links--qa li:last-child a { border-bottom: 0; }
.vex-mega__q { font-size: 14.5px; font-weight: 500; color: var(--wp--preset--color--ink); line-height: 1.35; }
.vex-mega__qchev { color: var(--wp--preset--color--stone); font-weight: 600; transition: color 140ms ease, transform 160ms ease; }
.vex-mega__links--qa a:hover .vex-mega__q { color: var(--wp--preset--color--brick); }
.vex-mega__links--qa a:hover .vex-mega__qchev { color: var(--wp--preset--color--brick); transform: translateX(3px); }

/* ---- Reviews: rating block + chips ---- */
.vex-mega__rating {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "num stars" "num label";
	align-items: center;
	column-gap: 16px;
	padding: 6px 4px 18px;
}
.vex-mega__rating-num {
	grid-area: num;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 64px;
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brick);
}
.vex-mega__stars { color: var(--wp--preset--color--brick); letter-spacing: 0.12em; font-size: 18px; }
.vex-mega__stars--sm { font-size: 14px; }
.vex-mega__rating .vex-mega__stars { grid-area: stars; align-self: end; }
.vex-mega__rating-label { grid-area: label; font-size: 13px; color: var(--wp--preset--color--slate); }

.vex-mega__chips {
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--wp--preset--color--stone);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vex-mega__chips li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--slate);
	border: 1px solid var(--wp--preset--color--stone);
	padding: 6px 10px;
}

/* ---- Gallery thumbs ---- */
.vex-mega__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.vex-mega__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--stone);
}
.vex-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms ease;
}
.vex-mega__thumb:hover img { transform: scale(1.06); }
.vex-mega__thumb-tag {
	position: absolute;
	left: 8px;
	bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: rgba(15, 38, 64, 0.82);
	padding: 3px 7px;
}

/* ---- About: story + stats + quicklinks ---- */
.vex-mega__story {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
	max-width: 46ch;
}
.vex-mega__stats {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.vex-mega__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px;
	background: var(--wp--preset--color--limestone);
	border: 1px solid var(--wp--preset--color--stone);
}
.vex-mega__stats strong {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	line-height: 1;
}
.vex-mega__stats span { font-size: 11.5px; color: var(--wp--preset--color--slate); line-height: 1.3; }
.vex-mega__quicklinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vex-mega__quicklinks a {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--brick);
	padding-bottom: 1px;
	transition: color 140ms ease;
}
.vex-mega__quicklinks a:hover { color: var(--wp--preset--color--brick); }

/* ---- Promise checklist ---- */
.vex-mega__promise {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 10px;
}

/* ---- Feature aside (shared) ---- */
.vex-mega__feature {
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	border: 1px solid var(--wp--preset--color--stone);
	overflow: hidden;
}
.vex-mega__feature--img { background-size: cover; background-position: center; border: 0; }
.vex-mega__feature--navy { background: var(--wp--preset--color--navy-dark); border: 0; }
.vex-mega__feature--quote { background: var(--wp--preset--color--limestone); align-items: stretch; }
.vex-mega__feature-body { padding: 22px; width: 100%; }

.vex-mega__feature-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--wp--custom--color--italic-warm);
}
.vex-mega__feature-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
}
.vex-mega__feature-copy {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}
.vex-mega__feature-note {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.62);
}
.vex-mega__feature-ico {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	border: 1px solid rgba(233, 217, 176, 0.4);
	color: var(--wp--custom--color--italic-warm);
}
.vex-mega__feature-ico svg { width: 22px; height: 22px; }
.vex-mega__feature-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--custom--color--italic-warm);
	text-decoration: none;
}
.vex-mega__feature-link:hover { text-decoration: underline; }

/* Quote variant (Reviews) */
.vex-mega__feature--quote .vex-mega__feature-body { display: flex; flex-direction: column; height: 100%; }
.vex-mega__quote {
	margin: 10px 0 12px;
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.vex-mega__quote-by {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-bottom: 16px;
}
.vex-mega__feature--quote .vex-mega__cta { margin-top: auto; }

/* Steps mini-list (Promise navy card) */
.vex-mega__steps {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 6px;
}
.vex-mega__steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
}
.vex-mega__steps span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	color: var(--wp--custom--color--italic-warm);
}

/* Feature CTA button */
.vex-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	background: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--white);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 0;
	transition: background-color 150ms ease, transform 150ms ease;
}
.vex-mega__cta span { display: inline-block; transition: transform 160ms ease; }
.vex-mega__cta:hover { background: var(--wp--custom--color--brick-hover, #a8391f); transform: translateY(-1px); }
.vex-mega__cta:hover span { transform: translateX(3px); }
.vex-mega__cta--ghost {
	background: transparent;
	color: var(--wp--preset--color--brick);
	border: 1px solid var(--wp--preset--color--brick);
}
.vex-mega__cta--ghost:hover { background: var(--wp--preset--color--brick); color: var(--wp--preset--color--white); }

/* ---- Services panel: grow the 6 boxes so the 2nd row bottom lines up
 * with the feature card. The body stretches both columns to equal height;
 * here the link grid fills the left column and splits into two equal rows. */
@media (min-width: 782px) {
	.vex-mega--services .vex-mega__main { display: flex; flex-direction: column; }
	.vex-mega--services .vex-mega__links {
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		flex-wrap: wrap;
		align-content: stretch;
		gap: 8px 10px;
	}
	.vex-mega--services .vex-mega__links li { display: flex; flex: 0 0 calc((100% - 20px) / 3); }
	.vex-mega--services .vex-mega__links a { width: 100%; align-items: center; }
}

/* ---- Hamburger toggle ---- */
.vex-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--stone);
	cursor: pointer;
	position: relative;
}
.vex-nav-toggle__box { display: block; width: 22px; height: 16px; position: relative; }
.vex-nav-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--ink);
	transition: transform 220ms ease, opacity 160ms ease, top 220ms ease;
}
.vex-nav-toggle__bar:nth-child(1) { top: 0; }
.vex-nav-toggle__bar:nth-child(2) { top: 7px; }
.vex-nav-toggle__bar:nth-child(3) { top: 14px; }
body.vex-nav-open .vex-nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
body.vex-nav-open .vex-nav-toggle__bar:nth-child(2) { opacity: 0; }
body.vex-nav-open .vex-nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---- Backdrop ---- */
.vex-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 38, 64, 0.5);
	opacity: 0;
	z-index: 998;
	transition: opacity 240ms ease;
}
.vex-nav-backdrop[hidden] { display: none; }
body.vex-nav-open .vex-nav-backdrop { opacity: 1; }

/* ============================================================
 * Mobile drawer (<=781px)
 * ============================================================ */
@media (max-width: 781px) {
	.vex-nav-toggle { display: inline-flex; }
	.vex-meganav__toggle { display: inline-flex; }

	/* Off-canvas drawer.
	 * visibility (not transform alone) does the hiding: a drawer parked at
	 * translateX(100%) is off-screen but still tabbable, which drops ~28
	 * invisible links into the tab order. visibility:hidden pulls the whole
	 * subtree out of the tab order and the a11y tree; the 0s delay holds it
	 * visible for the length of the slide-out so the close still animates. */
	.vex-meganav {
		position: fixed;
		top: 0;
		right: 0;
		height: 100dvh;
		width: min(420px, 88vw);
		background: var(--wp--preset--color--white);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 280ms;
		z-index: 999;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: -20px 0 50px -20px rgba(15, 38, 64, 0.5);
		display: flex;
		flex-direction: column;
		justify-self: auto;
	}
	body.vex-nav-open .vex-meganav {
		transform: translateX(0);
		visibility: visible;
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
	}
	/* The drawer's close control IS the header hamburger. The drawer is
	 * position:fixed and slides over the header, but the button itself stayed in
	 * the header's flow, so it rendered ~59px down — sitting on top of the first
	 * menu row ("Services") instead of in the drawer head, and overlapping that
	 * row's submenu chevron. Pin it to the drawer head while the drawer is open.
	 *
	 * top: 7px centres the 44px hit area in the 58px drawer head.
	 * right: 9px lines the 22px icon up with the head's own 20px padding, so the
	 * X sits directly opposite the MENU label rather than inset from it. */
	body.vex-nav-open .vex-nav-toggle {
		position: fixed;
		top: 7px;
		right: 9px;
		z-index: 1000;
	}

	.vex-meganav__drawer-head {
		display: flex;
		align-items: center;
		min-height: 58px;
		padding: 0 20px;
		border-bottom: 1px solid var(--wp--preset--color--stone);
		position: sticky;
		top: 0;
		background: var(--wp--preset--color--white);
		z-index: 1;
	}
	.vex-meganav__drawer-title {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 12px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--wp--preset--color--slate);
	}

	.vex-meganav__list { flex-direction: column; align-items: stretch; gap: 0; flex: 1 0 auto; }
	.vex-meganav__item { border-bottom: 1px solid var(--wp--preset--color--stone); display: flex; flex-wrap: wrap; align-items: center; }

	/* Top row: link + chevron toggle */
	.vex-meganav__top {
		display: block;
		flex: 1;
		padding: 16px 0 16px 20px;
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--wp--preset--color--navy);
	}
	.vex-meganav__top::after { display: none; }
	.vex-meganav__toggle {
		align-items: center;
		justify-content: center;
		width: 56px;
		align-self: stretch;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--wp--preset--color--stone);
		color: var(--wp--preset--color--slate);
		cursor: pointer;
	}
	.vex-meganav__toggle svg { width: 20px; height: 20px; transition: transform 240ms ease; }
	.vex-meganav__item.is-open .vex-meganav__toggle svg { transform: rotate(180deg); }
	.vex-meganav__item.is-open > .vex-meganav__top { color: var(--wp--preset--color--brick); }

	/* Panels become in-flow accordions.
	 * max-height:0 + overflow:hidden clips a collapsed panel visually but
	 * leaves its links tabbable, so visibility gates it too. */
	.vex-mega {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		flex-basis: 100%;
		transform: none;
		opacity: 1;
		visibility: hidden;
		pointer-events: auto;
		z-index: auto;
		max-height: 0;
		overflow: hidden;
		transition: max-height 320ms ease, visibility 0s linear 320ms;
	}
	/* Neutralise the desktop :focus-within fallback here. Down at drawer
	 * widths the accordion is driven by .is-open alone, so focusing a top
	 * link must not expose its still-collapsed panel to the tab order.
	 * Equal specificity to the :focus-within rule, so order decides — this
	 * must stay above .is-open below. */
	.vex-meganav__item:focus-within > .vex-mega { visibility: hidden; }
	.vex-meganav__item.is-open > .vex-mega {
		max-height: 1600px;
		transform: none;
		visibility: visible;
		transition: max-height 320ms ease, visibility 0s;
	}
	.vex-mega__inner {
		border: 0;
		box-shadow: none;
		padding: 4px 20px 22px;
		background: var(--wp--preset--color--limestone);
	}
	/* Lean drawer: drop the eyebrow bar + feature card, keep the link content */
	.vex-mega__bar,
	.vex-mega__feature { display: none; }
	.vex-mega__body { grid-template-columns: 1fr; gap: 0; }

	/* Stack multi-column link grids */
	.vex-mega__links--3,
	.vex-mega__links--2,
	.vex-mega__promise { grid-template-columns: 1fr; }
	.vex-mega__links a,
	.vex-mega__promise li { padding: 12px 0; }
	.vex-mega__links a:hover { background: transparent; }
	.vex-mega__stats { grid-template-columns: repeat(2, 1fr); }
	.vex-mega__thumbs { grid-template-columns: repeat(2, 1fr); }

	/* Drawer footer: phone + estimate CTA pinned at the bottom */
	.vex-meganav__drawer-foot {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--wp--preset--color--stone);
		background: var(--wp--preset--color--white);
	}
	.vex-meganav__drawer-phone {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-size: 1.0625rem;
		font-weight: 700;
		color: var(--wp--preset--color--navy);
		text-decoration: none;
	}
	.vex-meganav__drawer-phone svg { width: 19px; height: 19px; color: var(--wp--preset--color--brick); }
	.vex-meganav__drawer-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 18px;
		background: var(--wp--preset--color--brick);
		color: var(--wp--preset--color--white);
		font-size: 0.9375rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-decoration: none;
	}

	/* Keep the header estimate button from crowding the hamburger */
	.vex-mainbar-actions { gap: 8px; }
}

/* On small phones, hide the header CTA button — the hamburger + drawer carry it */
@media (max-width: 480px) {
	.vex-mainbar-actions .vex-header-cta { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.vex-mega,
	.vex-meganav,
	.vex-mega__cta,
	.vex-mega__thumb img,
	.vex-nav-toggle__bar,
	.vex-nav-backdrop,
	.vex-meganav__top::after { transition-duration: 1ms; }
}

/* ============================================================
   Service-area "What we see" challenge cards (2026-06-11)
   Full-bleed white section + icon cards (no left border)
   ============================================================ */
.vex-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.vex-card-icon {
	display: block;
	margin-bottom: var(--wp--preset--spacing--3, 0.75rem);
	color: var(--wp--preset--color--brick);
	line-height: 0;
}
.vex-card-icon svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* ============================================================
 * INTERIOR DESIGN PASS v2 — rhythm, media, cards, motion
 * ------------------------------------------------------------
 * Token-only: every colour/space/type value is a design-system
 * token. Nothing invented (the two rgba() shadows are neutral
 * depth, not brand colour).
 *
 * The page background is limestone globally (theme.json), so
 * consecutive light bands blend. Rather than fight the near-equal
 * white/limestone values with background swaps, limestone bands
 * are treated as a MAT and content sits on white cards — the
 * "layering" that gives the page structure.
 *
 * A few rules carry !important, narrowly and flagged: the build
 * baked inline padding/background into post_content, and WordPress
 * emits preset colour classes with !important — neither can be
 * beaten from theme.json.
 * ============================================================ */

/* --- Section rhythm: one vertical cadence -------------------
 * Baked bands opened at spacing--9 (96px), uneven and too tall.
 * Normalise interior content bands to spacing--8 (64px) so every
 * section-to-section gap is identical, and zero stray block-gap. */
.wp-block-post-content > .wp-block-group.alignfull:not(.ve-hero-photo) {
	padding-top: var(--wp--preset--spacing--8) !important;
	padding-bottom: var(--wp--preset--spacing--8) !important;
	margin-block: 0 !important;
}

/* Seam: the trust bar reads as the base of the photo hero —
 * flush, thin, its own rhythm rather than the section cadence. */
.ve-hero-photo + .wp-block-group.alignfull {
	padding-top: var(--wp--preset--spacing--5) !important;
	padding-bottom: var(--wp--preset--spacing--5) !important;
	margin-block-start: 0 !important;
}

/* Trust strip is a thin utility bar, not a content section — exempt it from
 * the 64px band normalisation above. Equal specificity to the :not(.ve-hero-photo)
 * rule, but later in source order, so it wins. */
.wp-block-post-content > .wp-block-group.alignfull.vex-trust-strip {
	padding-top: var(--wp--preset--spacing--4) !important;
	padding-bottom: var(--wp--preset--spacing--4) !important;
}

/* --- Section edges: legible boundaries between light bands ---
 * limestone (#F5F2EC) and white sit only a few % apart, so a
 * hairline stone rule marks the join. Dark bands (navy/brick)
 * read as breaks on their own and are left alone. */
.wp-block-group.alignfull.has-limestone-background-color {
	border-top: 1px solid var(--wp--preset--color--stone);
}
.vex-utility-bar,
.ve-hero-photo + .wp-block-group.alignfull.has-limestone-background-color {
	border-top: 0;
}

/* --- Content imagery: cap runaway portraits ----------------
 * Phone-shot portraits (e.g. 1152x1536) filled the viewport.
 * Cap the height and centre; height-cap not crop keeps the whole
 * opening visible. */
.wp-block-image img {
	display: block;
	max-height: 60vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 2px;
}
.wp-block-image figcaption {
	text-align: center;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--sm);
	margin-top: var(--wp--preset--spacing--3);
}

/* --- Photo-hero action buttons -----------------------------
 * The outline (phone) button was white text + white rule on a
 * transparent fill over a busy photo: unreadable. A solid
 * limestone plate with ink text holds over any image.
 * !important beats the inline transparent background. */
.ve-hero-photo .is-style-outline .wp-block-button__link,
.wp-block-cover .is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--limestone) !important;
	border-color: var(--wp--preset--color--limestone) !important;
	color: var(--wp--preset--color--ink) !important;
}
.ve-hero-photo .is-style-outline .wp-block-button__link:hover,
.wp-block-cover .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--white) !important;
}

/* --- Process steps: white cards on the limestone mat -------- */
.ve-steps-strip .wp-block-column {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 3px solid var(--wp--preset--color--brick);
	padding: var(--wp--preset--spacing--6);
}

/* --- FAQ: style the core Details block ----------------------
 * ONE FAQ accordion style site-wide: clean full-width rows separated by a
 * hairline (no boxed cards), serif question, a + marker that pivots to × on
 * open, and a smooth reveal. Used on the FAQs page, service pages, and area
 * pages alike. !important overrides any per-block inline border/padding so
 * every details block reads the same regardless of how it was authored. */
.wp-block-details {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--stone) !important;
	border-radius: 0 !important;
	/* 0 top/bottom for flush rows, auto left/right so the constrained-layout
	 * centring is preserved (a plain margin:0 pins the rows to the left). */
	margin: 0 auto !important;
	padding: 0 !important;
}
.wp-block-details[open] {
	box-shadow: none;
}
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--7) var(--wp--preset--spacing--4) 0;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
	transition: color 160ms ease-out;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }
.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--brick);
	transition: transform 220ms ease-out;
}
.wp-block-details[open] > summary::after { transform: translateY(-50%) rotate(135deg); }
.wp-block-details[open] > summary,
.wp-block-details > summary:hover { color: var(--wp--preset--color--brick); }
.wp-block-details > :not(summary) {
	padding: 0 var(--wp--preset--spacing--7) var(--wp--preset--spacing--5) 0;
	color: var(--wp--preset--color--slate);
	line-height: 1.65;
	animation: vex-reveal-down 260ms ease-out;
}
@keyframes vex-reveal-down {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* --- Testimonial / blockquote: layered card ----------------
 * Baked reviews render as plain core blockquotes. White card,
 * brick accent bar, and an oversized serif quote mark for depth.
 * (Homepage .vex-reviews uses its own markup and is unaffected.) */
.wp-block-quote {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	border-left: 4px solid var(--wp--preset--color--brick);
	border-radius: 2px;
	margin-inline: auto;
	max-width: 760px;
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	box-shadow: 0 10px 30px -18px rgba(15, 38, 64, 0.4);
}
.wp-block-quote::before {
	content: "\201C";
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 84px;
	line-height: 1;
	color: var(--wp--preset--color--stone);
	pointer-events: none;
}
.wp-block-quote p {
	position: relative;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--sans);
	font-style: normal;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

/* --- Generic reveal hook (opt-in via .ve-reveal) ----------- */
.ve-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.ve-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ve-reveal,
	.wp-block-details > :not(summary) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
 * Section layering (opt-in classNames) — depth + structure for the
 * flatter text bands (intro / stats / manufacturers). Uses the same
 * card + brick-accent language as the rest of the page so it reads
 * as one system rather than bolt-ons.
 * ============================================================ */

/* --- Intro: two-column split (copy + media) with a brick rule anchor
 *     and a lead first line. The media column (.ve-intro-media) holds a
 *     project photo that fills its height. */
.ve-intro-accent .wp-block-columns {
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}
.ve-intro-accent .wp-block-heading {
	position: relative;
	padding-top: 26px;
}
.ve-intro-accent .wp-block-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 52px;
	height: 3px;
	background: var(--wp--preset--color--brick);
}
.ve-intro-accent .wp-block-column:first-child p:first-of-type,
.ve-intro-accent > p:first-of-type {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem) !important;
	line-height: 1.6;
	color: var(--wp--preset--color--ink) !important;
}
.ve-intro-media .wp-block-image,
.ve-intro-media figure {
	margin: 0;
}
.ve-intro-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}
@media (max-width: 781px) {
	.ve-intro-media img { aspect-ratio: 16 / 10; }
}

/* --- Stats: brick-wash tinted boxes with big editorial mono-italic
 *     figures (echoes the homepage stat panel). */
.ve-stat-boxes .wp-block-columns {
	gap: clamp(14px, 1.8vw, 22px);
}
.ve-stat-boxes .wp-block-column {
	background: rgba(200, 71, 47, 0.06);
	border: 1px solid rgba(200, 71, 47, 0.20);
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
}
.ve-stat-boxes .wp-block-column > p:first-child {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem) !important;
	letter-spacing: -0.03em;
	line-height: 1.05 !important;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

/* --- Manufacturers: compact brand chips (names only). Descriptions live
 *     in each link's title attribute, so they surface on hover without any
 *     hidden-text in the visible content. --- */
.ve-mfr-cards ul {
	list-style: none !important;
	padding: 0 !important;
	/* auto left/right keeps the list centred in the constrained column — a
	 * plain "0" here pins it to the far left, so justify-content:center only
	 * centres the chips inside a left-stuck list. */
	margin: 0 auto var(--wp--preset--spacing--5) !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.ve-mfr-cards ul li {
	margin: 0 !important;
	display: flex;
	gap: 10px;
}
.ve-mfr-cards ul li a,
.ve-mfr-cards ul li strong {
	display: inline-block;
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 9px 18px;
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: -0.005em;
	white-space: nowrap;
	transition: border-color 160ms ease-out, color 160ms ease-out, background-color 160ms ease-out;
}
.ve-mfr-cards ul li a:hover {
	border-color: var(--wp--preset--color--brick);
	color: var(--wp--preset--color--brick);
	background: rgba(200, 71, 47, 0.04);
	cursor: pointer;
}

/* ============================================================
 * Service-detail hero — centered content, strengthened scrim
 * Scope: the six /services/[name]/ heroes only. Those covers use
 * .wp-block-cover__inner-container directly; the parent-page heroes
 * (About / Reviews / …) wrap content in .ve-hero-photo__content, so
 * :not(:has(.ve-hero-photo__content)) targets service pages alone.
 *
 * Content stays CENTERED — the base rule (.ve-hero-photo >
 * .wp-block-cover__inner-container, absolute-centered) still owns layout.
 * We only deepen the navy scrim so the centered H1 + brick eyebrow stay
 * legible over the bright brick-wall photo (the flat 40% dim didn't).
 * A center-weighted radial keeps the darkest pool exactly where the
 * centered text sits, while the photo stays visible at the edges.
 * ============================================================ */
.ve-hero-photo:not(:has(.ve-hero-photo__content)) .wp-block-cover__background.has-navy-dark-background-color {
	background:
		radial-gradient(
			ellipse 95% 85% at center,
			rgba(15, 38, 64, 0.80) 0%,
			rgba(15, 38, 64, 0.66) 60%,
			rgba(15, 38, 64, 0.52) 100%
		),
		linear-gradient(rgba(15, 38, 64, 0.32), rgba(15, 38, 64, 0.32)) !important;
	opacity: 1 !important;
}

/* ============================================================
 * Compact service gallery — [vex_gallery service="…" controls="false"]
 * JS-free CSS grid of uniform 4:3 tiles. Normalises mixed portrait /
 * landscape project photos so a 2- or 3-up grid reads clean. Reused on
 * every service page via the service-gallery pattern.
 * ============================================================ */
.vex-gallery--compact {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.vex-gallery__grid--compact {
	display: grid;
	/* The base .vex-gallery__grid is opacity:0 until Isotope adds .is-loaded —
	 * but Isotope only loads on /gallery/. This compact grid is JS-free, so
	 * force it visible or it never appears on service pages. */
	opacity: 1;
	grid-template-columns: repeat(var(--vex-cols, 3), minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

/* Reset the Isotope masonry item width/position for the static grid. */
.vex-gallery--compact .vex-gallery__item--compact {
	width: auto;
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--white);
}

.vex-gallery--compact .vex-gallery__media {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.vex-gallery--compact .vex-gallery__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.vex-gallery--compact .vex-gallery__item--compact:hover .vex-gallery__media img {
	transform: scale(1.045);
}

/* Compact badge sits static-visible (no hover reveal — these grids are small). */
.vex-gallery--compact .vex-gallery__badges {
	opacity: 1;
	transform: none;
}

.vex-gallery__compact-cta {
	margin: clamp(20px, 2.5vw, 28px) 0 0;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}
.vex-gallery__compact-cta a {
	color: var(--wp--preset--color--brick);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color 160ms ease-out;
}
.vex-gallery__compact-cta a:hover {
	border-bottom-color: var(--wp--preset--color--brick);
}

@media (max-width: 782px) {
	.vex-gallery__grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.vex-gallery__grid--compact {
		grid-template-columns: 1fr;
	}
}

/* Navy testimonial closer (service pages) — keep cite + the inline "read more"
 * link legible on navy. Scoped to post-content so the footer/CTA bands are
 * untouched. */
.wp-block-post-content .has-navy-dark-background-color .wp-block-quote cite {
	color: rgba(255, 255, 255, 0.72);
}
.wp-block-post-content .has-navy-dark-background-color p a {
	color: var(--wp--custom--color--italic-warm);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
 * Area pages (single service_area) — refinements
 * Scoped to body.single-service_area so the /services/ pages are untouched.
 * post-content is align:full in the template, so every band spans the
 * content area; these rules polish hero, alignment, and FAQ.
 * ============================================================ */

/* Every band is now a plain align:full section (content-area width). Neutralise
 * the old 100vw .vex-fullbleed on the challenges band — it overflowed to the
 * right because post-content is not centred on the viewport. */
body.single-service_area .vex-fullbleed {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Location hero — left-aligned editorial layout, distinct from the centred
 * service-page photo hero. Bottom-weighted navy gradient keeps the low-set
 * headline legible while the photo stays visible up top. */
.ve-area-hero { min-height: 460px; }
.ve-area-hero .wp-block-cover__background.has-navy-dark-background-color {
	background: linear-gradient(
		to top,
		rgba(11, 26, 45, 0.90) 0%,
		rgba(11, 26, 45, 0.56) 42%,
		rgba(11, 26, 45, 0.20) 78%,
		rgba(11, 26, 45, 0.04) 100%
	) !important;
	opacity: 1 !important;
}
.ve-area-hero .wp-block-cover__inner-container { width: 100%; }
/* Hero content sits in the same centred column as the wide intro band below, so
 * the headline's left edge lines up with the intro copy (text stays left-aligned
 * within the column, not flush to the screen edge). */
.ve-area-hero__content {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.ve-area-hero__kicker { color: var(--wp--custom--color--italic-warm) !important; }

/* Two-column intro (copy + city photo). The photo fills the full column
 * height so it reads as a balanced pair with the copy, not a floating
 * thumbnail with dead space around it. */
.ve-area-intro { align-items: stretch !important; }
.ve-area-intro > .wp-block-column { align-self: stretch !important; }
.ve-area-intro-media { display: flex; }
.ve-area-intro-media .wp-block-image,
.ve-area-intro-media figure { width: 100%; margin: 0; }
.ve-area-intro-media img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}
@media (max-width: 781px) {
	.ve-area-intro > .wp-block-column { align-self: auto !important; }
	.ve-area-intro-media img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}

/* Two-column editorial intro (AWS hub "Sterling-based" section): eyebrow + heading
 * in the left column, prose in the right, stat bar full-width below. The wider
 * columns + text-wrap:pretty put the heading on two clean lines and kill the body
 * orphans the old centred 780px column produced. */
.ve-area-intro-split h2,
.ve-area-intro-split p { text-wrap: pretty; }

/* Centre the imagery-grid section header so it matches the other centred
 * section headers (challenges / reviews / FAQ) on area pages. */
body.single-service_area .ve-service-card-grid-imagery__head { display: block !important; text-align: center; }
body.single-service_area .ve-service-card-grid-imagery__head-l { max-width: none !important; margin: 0 auto !important; }
body.single-service_area .ve-service-card-grid-imagery__head-l h2 {
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
body.single-service_area .ve-service-card-grid-imagery__head-l p { text-align: center !important; }

/* FAQ — replace the fat padded card with clean, tight, full-width rows
 * separated by a hairline. Keeps the brick +/x marker. */
body.single-service_area .wp-block-details {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.single-service_area .wp-block-details[open] { box-shadow: none; }
body.single-service_area .wp-block-details > summary {
	padding-left: 0;
	padding-right: var(--wp--preset--spacing--7);
	padding-top: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--4);
}
body.single-service_area .wp-block-details > summary::after { right: 2px; }
body.single-service_area .wp-block-details > :not(summary) {
	padding-left: 0;
	padding-right: var(--wp--preset--spacing--7);
	padding-bottom: var(--wp--preset--spacing--5);
}
/* Collapse the padding where FAQ bands stack, so the header + evergreen +
 * city questions read as one tight list (the global 64px band-normalisation
 * otherwise spreads them 128px apart at each seam). */
body.single-service_area .wp-block-post-content > .alignfull:has(.wp-block-details) {
	padding-top: 0 !important;
}
body.single-service_area .wp-block-post-content > .alignfull:has(+ .alignfull .wp-block-details) {
	padding-bottom: var(--wp--preset--spacing--4) !important;
}

/* ============================================================
 * Contact page — lead-gen makeover (form-forward hero, styled
 * .vex-lead-form fields, trust checklist, process steps, map).
 * ============================================================ */

/* Hero columns stack on tablet/phone (pitch first, then form) */
@media (max-width: 900px) {
	.ve-contact-hero__cols { flex-wrap: wrap; }
	.ve-contact-hero__cols > .wp-block-column { flex-basis: 100% !important; }
}
.ve-contact-hero__kicker { color: var(--wp--custom--color--italic-warm); }

/* Trust checklist (on navy) */
.ve-contact-trust {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ve-contact-trust li {
	position: relative;
	padding-left: 30px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.ve-contact-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brick);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

/* Phone block (on navy) */
.ve-contact-phone {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: var(--wp--preset--spacing--5);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ve-contact-phone__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.ve-contact-phone__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	line-height: 1.15;
}
.ve-contact-phone__num:hover { color: var(--wp--custom--color--italic-warm); }
.ve-contact-phone__hours {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 2px;
}

/* Form card (white plate sitting in the navy hero) */
.ve-contact-formcard {
	background: #fff;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 3px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.6);
}
.ve-contact-formcard__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
	line-height: 1.1;
}
.ve-contact-formcard__sub {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--slate);
	margin: 0 0 22px;
	line-height: 1.5;
}

/* Contact lead form fields (.vex-lead-form — the hyphenated contact form; it
 * had no field styling, distinct from the homepage's .vex-leadform). */
.vex-lead-form .vex-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vex-lead-form .vex-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .vex-lead-form .vex-field-row { grid-template-columns: 1fr; gap: 0; } }
.vex-lead-form label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}
.vex-lead-form .vex-required { color: var(--wp--preset--color--brick); }
.vex-lead-form .vex-optional { color: #b5b0a4; font-weight: 500; text-transform: none; letter-spacing: 0; }
.vex-lead-form input,
.vex-lead-form textarea {
	width: 100%;
	border: 1.5px solid var(--wp--preset--color--stone);
	background: #fff;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.vex-lead-form textarea { resize: vertical; min-height: 96px; }
.vex-lead-form input:focus,
.vex-lead-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 3px rgba(15, 38, 64, 0.08);
}
.vex-lead-form input::placeholder,
.vex-lead-form textarea::placeholder { color: #b5b0a4; }
.vex-lead-form .vex-submit {
	width: 100%;
	margin-top: 4px;
	background: var(--wp--preset--color--brick);
	color: #fff;
	border: 1.5px solid var(--wp--preset--color--brick);
	padding: 15px 24px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.vex-lead-form .vex-submit:hover {
	background: var(--wp--custom--color--brick-hover);
	border-color: var(--wp--custom--color--brick-hover);
}
.vex-lead-form .vex-warranty-note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
	text-align: center;
}
.vex-lead-form .vex-honeypot { position: absolute; left: -9999px; }

/* "What happens next" numbered step grid */
.ve-contact-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 900px) { .ve-contact-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ve-contact-steps { grid-template-columns: 1fr; } }
.ve-contact-step {
	background: #faf9f7;
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 3px solid var(--wp--preset--color--brick);
	padding: clamp(20px, 2.4vw, 28px);
}
.ve-contact-step__n {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--brick);
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.ve-contact-step h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	margin: 0 0 6px;
}
.ve-contact-step p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
	margin: 0;
}

/* Map embed */
.vex-map-embed {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--stone);
	overflow: hidden;
	background: #e8e3d8;
}
@media (max-width: 781px) { .vex-map-embed { aspect-ratio: 16 / 10; } }

/* ============================================================
 * About page — service card grid (core group grid + card groups,
 * kept as core blocks so the page stays block-editable).
 * ============================================================ */
@media (max-width: 900px) { .ve-about-services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .ve-about-services { grid-template-columns: 1fr !important; } }
.ve-about-card {
	background: #faf9f7;
	border: 1px solid var(--wp--preset--color--stone);
	border-top: 3px solid var(--wp--preset--color--brick);
	padding: clamp(20px, 2.4vw, 28px);
	transition: box-shadow 180ms ease-out;
}
.ve-about-card:hover { box-shadow: 0 12px 28px -18px rgba(15, 38, 64, 0.4); }
.ve-about-card h3 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color 160ms ease-out, color 160ms ease-out;
}
.ve-about-card:hover h3 a,
.ve-about-card h3 a:hover {
	color: var(--wp--preset--color--brick);
	border-bottom-color: var(--wp--preset--color--brick);
}

/* FAQs page — category headers get a brick rule accent (design-system marker). */
.ve-faq-cat {
	position: relative;
	padding-top: 24px;
}
.ve-faq-cat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--wp--preset--color--brick);
}

/* Trust checklist on a light background (brick-circle checks, 2-up). */
.ve-trust-checks {
	list-style: none !important;
	margin: var(--wp--preset--spacing--6) auto var(--wp--preset--spacing--6) !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
}
@media (max-width: 600px) { .ve-trust-checks { grid-template-columns: 1fr; } }
.ve-trust-checks li {
	position: relative;
	padding-left: 30px;
	margin: 0 !important;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}
.ve-trust-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brick);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

/* ============================================================
 * Home hero — lead-capture split (page 6)
 * ------------------------------------------------------------
 * Lead-gen layout: brand + trust on the left, an opaque white form
 * card on the right so fields stay legible over the photo cover.
 * The visitor can convert without scrolling; the fuller #estimate
 * section below stays for people who read first.
 *
 * Field styling deliberately mirrors .vex-leadform (~line 1014) but is
 * scoped separately — that block is scoped to the below-fold section,
 * so the hero card inherits none of it.
 * ============================================================ */
.ve-home-hero__split { align-items: center; }

/* Trust ticks under the subhead — hand-drawn checkmark via rotated borders
 * (no SVG needed at this size). */
.ve-hero-ticks {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--5);
	padding: 0;
	display: grid;
	gap: 10px;
}
.ve-hero-ticks li {
	position: relative;
	padding-left: 26px;
	color: var(--wp--custom--color--subhead-on-dark);
	font-size: 0.9375rem;
	line-height: 1.45;
}
.ve-hero-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 13px;
	height: 7px;
	border-left: 2px solid var(--wp--custom--color--italic-warm);
	border-bottom: 2px solid var(--wp--custom--color--italic-warm);
	transform: rotate(-45deg);
}

/* --- the card --- */
.vex-hero-form {
	background: #fff;
	padding: 28px 28px 24px;
	box-shadow: 0 18px 50px rgba(8, 20, 34, 0.28);
}
.vex-hero-form__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brick);
	margin: 0 0 8px;
}
.vex-hero-form__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
}
.vex-hero-form__title em {
	color: var(--wp--preset--color--brick);
	font-weight: 400;
}
.vex-hero-form__sub {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--slate);
	margin: 0 0 18px;
}
.vex-hero-form .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}
.vex-hero-form label {
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}
.vex-hero-form input,
.vex-hero-form select {
	border: 1.5px solid var(--wp--preset--color--stone);
	background: #fff;
	padding: 11px 13px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 160ms ease-out;
}
.vex-hero-form input:focus,
.vex-hero-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--navy);
}
.vex-hero-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 38px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F2640' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px;
}
.vex-hero-form .grid2f {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: start;
}
.vex-hero-form button.vex-submit {
	width: 100%;
	background: var(--wp--preset--color--brick);
	color: #fff;
	border: 1.5px solid var(--wp--preset--color--brick);
	padding: 14px 24px;
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 160ms ease-out;
}
.vex-hero-form button.vex-submit:hover {
	background: var(--wp--custom--color--brick-hover);
	border-color: var(--wp--custom--color--brick-hover);
}
.vex-hero-form__consent {
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--wp--preset--color--slate);
	margin: 10px 0 0;
}
/* Hero click-to-call under the ticks — the second-most-used conversion path
 * for home services after the form. */
.ve-hero-call a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.ve-hero-call a:hover { border-bottom-color: #fff; }

@media (max-width: 781px) {
	.vex-hero-form { padding: 22px 20px 20px; }
}
@media (max-width: 480px) {
	.vex-hero-form .grid2f { grid-template-columns: 1fr; }
}