/*
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: 1760px;
}

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

.vex-service-card__header {
	position: relative;
	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. */
.vex-mainbar {
	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;
}
.vex-mainbar-logo { justify-self: start; }
.vex-mainbar-nav  { justify-self: center; }
.vex-header-cta   { justify-self: end; }

/* ---- Nav: brick hover + animated underline, active-page state ---- */
.vex-site-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	transition: color 140ms ease-out;
}
.vex-site-header .wp-block-navigation a:hover,
.vex-site-header .wp-block-navigation .current-menu-item > a,
.vex-site-header .wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--brick);
}
.vex-site-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease-out;
}
.vex-site-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.vex-site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ---- 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: WP collapses nav to a hamburger overlay — switch back to
	 * flex (logo left, hamburger + CTA right). Hide the desktop nav. */
	.vex-mainbar-inner.wp-block-group {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}
	/* Hide the nav text links (hamburger takes over). Keep the CTA. */
	.vex-mainbar-nav .wp-block-navigation__container { display: none; }
	.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);
}

/* === 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. */
.ve-hero-photo .wp-block-cover__background.has-navy-dark-background-color {
	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;
}

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

/* === 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; }

/* 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; }
}

/* ==========================================================================
 * 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; }
}