/* ============================================================================
   ACX Build — component CSS
   Styling that theme.json cannot express: JS-driven blocks, mobile chrome,
   focus rings, before/after slider, estimator, multi-step form, accordions.
   Tokens are read from theme.json CSS custom props (--wp--preset--* / --wp--custom--*).
   Mobile-first; enhance up. Respect prefers-reduced-motion.
   ============================================================================ */

:root {
	--acx-radius-sm: var(--wp--custom--radius--sm, 6px);
	--acx-radius-md: var(--wp--custom--radius--md, 10px);
	--acx-radius-lg: var(--wp--custom--radius--lg, 16px);
	--acx-radius-pill: var(--wp--custom--radius--pill, 999px);
	--acx-ease: var(--wp--custom--ease, cubic-bezier(0.22,0.61,0.36,1));
	--acx-brass: var(--wp--preset--color--brass, #A6792E);
	--acx-brass-deep: var(--wp--preset--color--brass-deep, #7E5C1F);
	--acx-brass-tint: var(--wp--preset--color--brass-tint, #F3EBDB);
	--acx-ink: var(--wp--preset--color--ink, #1C1F22);
	--acx-ink-soft: var(--wp--preset--color--ink-soft, #3A3F45);
	--acx-bone: var(--wp--preset--color--bone, #FAF7F1);
	--acx-line: var(--wp--preset--color--line, #E2DCD0);
	--acx-white: var(--wp--preset--color--white, #FFFFFF);
	--acx-focus: var(--wp--preset--color--focus, #2C5DBF);
	--acx-success: var(--wp--preset--color--success, #2E7D5B);
	--acx-error: var(--wp--preset--color--error, #B3261E);
}

/* --- Global guards ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, iframe, video { max-width: 100%; height: auto; }

/* Skip-link (WCAG 2.4.1 Bypass Blocks): off-screen until focused. */
.acx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--acx-ink);
	color: var(--acx-bone);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--acx-radius-sm) 0;
	font-weight: 600;
	text-decoration: none;
}
.acx-skip-link:focus {
	left: 0;
	outline: 3px solid var(--acx-focus);
	outline-offset: 2px;
}

/* Mandatory visible focus on every interactive element (brand-system §9). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--acx-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Eyebrow label utility (applied via class on a paragraph). */
.acx-eyebrow {
	font-family: var(--acx-font-inter);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--tracking, 0.12em);
	text-transform: uppercase;
	color: var(--acx-brass-deep);
	margin: 0 0 0.5rem;
}
.has-bone-color .acx-eyebrow,
.acx-on-dark .acx-eyebrow { color: var(--acx-brass); }

/* --- Logo treatments --------------------------------------------------------
   Header (light): the wp:site-logo custom_logo shows the full-colour wordmark
   (black ACX + copper BUILD) as-is.
   Footer (dark / .acx-on-dark): the black "ACX" can't read on ink, so swap to
   the reversed white-knockout asset. We replace the <img> pixels with the
   white PNG via background + transparent img, keeping the block's sizing/links.
   NOTE: the white-knockout is a FULL bone-white wordmark (ACX + BUILD both
   white) — it loses the copper accent on dark. If the client wants the copper
   "BUILD" preserved on dark, request a true brand-made dark-mode logo asset
   (tracked in build-notes.md). */
.acx-on-dark .wp-block-site-logo .custom-logo,
.acx-on-dark .wp-block-site-logo img {
	content: url("../images/acx-logo-white.png");
}
@supports not (content: url("../images/acx-logo-white.png")) {
	/* Fallback for engines that ignore content: on <img>: knock the logo white. */
	.acx-on-dark .wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}
}

/* Comfortable measure on body copy. */
.acx-measure { max-width: var(--wp--custom--measure, 68ch); }

/* ============================================================================
   SECONDARY (outline) BUTTON — is-style-outline
   ============================================================================ */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--acx-ink);
	border: 1.5px solid var(--acx-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--acx-ink);
	color: var(--acx-bone);
}
/* On dark bands */
.acx-on-dark .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--acx-bone);
	color: var(--acx-bone);
}
.acx-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--acx-bone);
	color: var(--acx-ink);
}

/* ============================================================================
   CARDS (service / area / blog) — .acx-card
   ============================================================================ */
.acx-card {
	background: var(--acx-white);
	border: 1px solid var(--acx-line);
	border-radius: var(--acx-radius-md);
	padding: 2rem;
	transition: box-shadow var(--wp--custom--duration--card, 250ms) var(--acx-ease),
				border-color 250ms var(--acx-ease);
	height: 100%;
}
.acx-card:hover {
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
	border-color: var(--acx-brass-tint);
}
.acx-card .acx-card__link {
	color: var(--acx-brass-deep);
	font-weight: 600;
	text-decoration: none;
}
.acx-card .acx-card__link:hover { text-decoration: underline; }

/* ============================================================================
   TRUST BAR / proof strip
   ============================================================================ */
.acx-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .acx-trust { grid-template-columns: repeat(4, 1fr); } }
.acx-trust__num {
	font-family: var(--acx-font-fraunces);
	font-size: var(--wp--preset--font-size--stat, 3.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--acx-brass);
}
.acx-on-dark .acx-trust__num { color: var(--acx-brass); }
.acx-trust__star { color: var(--wp--preset--color--star, #C8901F); margin-left: 0.08em; }
.acx-trust__label {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	margin-top: 0.5rem;
}

/* [TO CONFIRM] highlight — makes every unconfirmed value trivial to find/swap. */
.acx-tc {
	background: var(--acx-brass-tint);
	color: var(--acx-brass-deep);
	border-radius: 4px;
	padding: 0 0.35em;
	box-shadow: inset 0 0 0 1px rgba(126,92,31,0.35);
	font-weight: 600;
}

/* Guarantee / rating badge */
.acx-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--acx-brass-tint);
	color: var(--acx-brass-deep);
	border-radius: var(--acx-radius-pill);
	padding: 0.4rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
}
.acx-badge svg { width: 18px; height: 18px; flex: none; }

/* ============================================================================
   BEFORE / AFTER COMPARISON SLIDER (signature)
   Markup: figure.acx-baslider > 2 imgs + range input. JS adds --pos.
   No-JS fallback: shows AFTER image + caption.
   ============================================================================ */
.acx-baslider {
	position: relative;
	margin: 0;
	border-radius: var(--acx-radius-lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
	aspect-ratio: 3 / 2;
	background: var(--acx-line);
	--pos: 50%;
	touch-action: pan-y;
}
.acx-baslider img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.acx-baslider__after { clip-path: inset(0 0 0 var(--pos)); }
.acx-baslider__label {
	position: absolute; top: 12px;
	background: rgba(28,31,34,0.7);
	color: var(--acx-bone);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--acx-radius-pill);
	z-index: 3;
}
.acx-baslider__label--before { left: 12px; }
.acx-baslider__label--after { right: 12px; }
/* Divider line + handle (purely visual; the range input is the real control) */
.acx-baslider__divider {
	position: absolute; top: 0; bottom: 0;
	left: var(--pos);
	width: 2px; margin-left: -1px;
	background: var(--acx-bone);
	z-index: 4; pointer-events: none;
}
.acx-baslider__grip {
	position: absolute; top: 50%; left: var(--pos);
	width: 44px; height: 44px; margin: -22px 0 0 -22px;
	background: var(--acx-brass);
	border-radius: 50%;
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
	display: flex; align-items: center; justify-content: center;
	color: var(--acx-white);
	z-index: 5; pointer-events: none;
	font-weight: 700;
}
.acx-baslider__grip::before { content: "‹ ›"; letter-spacing: -2px; }
/* The real, accessible control. Full-area transparent range. */
.acx-baslider__range {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; opacity: 0;
	cursor: ew-resize;
	z-index: 6;
}
.acx-baslider__range:focus-visible ~ .acx-baslider__grip {
	outline: 3px solid var(--acx-focus); outline-offset: 2px;
}
.acx-baslider__caption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--acx-ink-soft);
}
.acx-baslider__caption a { color: var(--acx-brass-deep); }
/* No-JS: hide before image + chrome, keep after visible. */
.no-js .acx-baslider__before,
.no-js .acx-baslider__divider,
.no-js .acx-baslider__grip,
.no-js .acx-baslider__range { display: none; }
.no-js .acx-baslider__after { clip-path: none; }

/* Portfolio masonry of sliders */
.acx-slider-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .acx-slider-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acx-slider-grid { grid-template-columns: repeat(3, 1fr); } }

/* Filter chips */
.acx-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acx-chip {
	border: 1px solid var(--acx-line);
	background: var(--acx-white);
	color: var(--acx-ink-soft);
	border-radius: var(--acx-radius-pill);
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	cursor: pointer;
	min-height: 44px;
	transition: border-color 150ms var(--acx-ease);
}
.acx-chip:hover { border-color: var(--acx-brass-tint); }
.acx-chip[aria-pressed="true"] { background: var(--acx-ink); color: var(--acx-bone); border-color: var(--acx-ink); }

/* ============================================================================
   PORTFOLIO GALLERY (premium filterable grid + lightbox)
   Data-driven from inc/portfolio-data.php → patterns/portfolio-gallery.php.
   Tiles are square-ish covers; lightbox reuses .acx-baslider for pairs.
   ============================================================================ */
.acx-gallery__toolbar {
	display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
	align-items: center; justify-content: space-between;
	margin-bottom: 1rem;
}
.acx-gallery__chips { flex: 1 1 auto; }
.acx-gallery__town { display: inline-flex; align-items: center; gap: 0.5rem; }
.acx-gallery__town-label { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--acx-ink-soft); }
.acx-gallery__town select {
	min-height: 44px; padding: 0.4rem 2rem 0.4rem 0.75rem;
	border: 1.5px solid var(--acx-line); border-radius: var(--acx-radius-sm);
	background: var(--acx-white); color: var(--acx-ink); font-family: var(--acx-font-inter);
	font-size: 16px; /* avoid iOS zoom */
}
.acx-gallery__count { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); margin: 0 0 1.25rem; }
.acx-gallery__count:empty { display: none; }

/* Justified/masonry-feel grid: 1 col → 2 → 3, reserved aspect (no CLS). */
.acx-gallery__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 600px) { .acx-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .acx-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.acx-gallery__tile { margin: 0; }
.acx-gallery__tile[hidden] { display: none; }

.acx-gallery__open {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	cursor: pointer; text-align: left;
	border-radius: var(--acx-radius-lg); overflow: hidden;
}
.acx-gallery__figure {
	position: relative; margin: 0;
	border-radius: var(--acx-radius-lg); overflow: hidden;
	aspect-ratio: 3 / 2; background: var(--acx-line);
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
}
.acx-gallery__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 400ms var(--acx-ease);
}
.acx-gallery__open:hover .acx-gallery__img,
.acx-gallery__open:focus-visible .acx-gallery__img { transform: scale(1.04); }
.acx-gallery__open:focus-visible .acx-gallery__figure { outline: 3px solid var(--acx-focus); outline-offset: 2px; }
/* Scrim + caption overlay on the tile. */
.acx-gallery__caption {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	display: flex; flex-direction: column; gap: 0.15rem;
	padding: 2.5rem 1rem 1rem;
	color: var(--acx-bone);
	background: linear-gradient(to top, rgba(28,31,34,0.82) 0%, rgba(28,31,34,0.35) 55%, rgba(28,31,34,0) 100%);
}
.acx-gallery__badge {
	align-self: flex-start;
	background: var(--acx-brass); color: var(--acx-white);
	font-size: var(--wp--preset--font-size--eyebrow, 0.78rem);
	font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 0.2rem 0.55rem; border-radius: var(--acx-radius-pill);
}
.acx-gallery__tc {
	align-self: flex-start; font-size: 0.72rem; font-weight: 600;
	background: rgba(255,255,255,0.9); color: var(--acx-brass-deep);
	padding: 0.1rem 0.45rem; border-radius: var(--acx-radius-sm);
}
.acx-gallery__title { font-family: var(--acx-font-fraunces); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.acx-gallery__meta { font-size: var(--wp--preset--font-size--small); opacity: 0.9; }
.acx-gallery__zoom {
	position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(250,247,241,0.92); color: var(--acx-ink);
	opacity: 0; transform: translateY(-4px);
	transition: opacity 200ms var(--acx-ease), transform 200ms var(--acx-ease);
}
.acx-gallery__open:hover .acx-gallery__zoom,
.acx-gallery__open:focus-visible .acx-gallery__zoom { opacity: 1; transform: translateY(0); }
.acx-gallery__blurb { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); margin: 0.6rem 0 0; }
.acx-gallery__empty { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); padding: 1.5rem 0; }

/* --- Lightbox dialog ------------------------------------------------------- */
.acx-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(0.5rem, 3vw, 2rem);
}
.acx-lightbox[hidden] { display: none; }
.acx-lightbox__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,0.88); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.acx-lightbox__panel {
	position: relative; z-index: 1;
	width: min(1100px, 100%); max-height: 92vh;
	display: flex; flex-direction: column;
	background: var(--acx-bone);
	border-radius: var(--acx-radius-lg); overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lg, 0 18px 48px rgba(0,0,0,0.45));
}
.acx-lightbox.is-animating .acx-lightbox__panel { animation: acx-lb-in 240ms var(--acx-ease); }
@keyframes acx-lb-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.acx-lightbox__head {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--acx-line);
	background: var(--acx-white);
}
.acx-lightbox__title { margin: 0; font-size: 1.05rem; font-weight: 600; font-family: var(--acx-font-fraunces); color: var(--acx-ink); flex: 1 1 auto; }
.acx-lightbox__counter { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); font-variant-numeric: tabular-nums; }
.acx-lightbox__close {
	width: 44px; height: 44px; flex: none;
	border: 0; background: transparent; cursor: pointer;
	font-size: 1.75rem; line-height: 1; color: var(--acx-ink);
	border-radius: var(--acx-radius-sm);
}
.acx-lightbox__close:hover { background: var(--acx-brass-tint); }
.acx-lightbox__stage {
	flex: 1 1 auto; min-height: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem; background: var(--acx-ink);
}
.acx-lightbox__stage .acx-baslider { width: 100%; max-height: 72vh; aspect-ratio: 3 / 2; }
.acx-lightbox__img { max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain; border-radius: var(--acx-radius-md); display: block; }
.acx-lightbox__caption {
	margin: 0; padding: 0.75rem 1.1rem; background: var(--acx-white);
	font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft);
	border-top: 1px solid var(--acx-line); text-align: center;
}
.acx-lightbox__caption:empty { display: none; }
.acx-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: rgba(250,247,241,0.92); color: var(--acx-ink);
	font-size: 1.75rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(0,0,0,0.3));
}
.acx-lightbox__nav[hidden] { display: none; }
.acx-lightbox__nav:hover { background: var(--acx-brass); color: var(--acx-white); }
.acx-lightbox__nav--prev { left: 0.5rem; }
.acx-lightbox__nav--next { right: 0.5rem; }
@media (min-width: 700px) { .acx-lightbox__nav--prev { left: -0.75rem; } .acx-lightbox__nav--next { right: -0.75rem; } }
@media (prefers-reduced-motion: reduce) {
	.acx-gallery__img, .acx-gallery__zoom { transition: none; }
	.acx-gallery__open:hover .acx-gallery__img { transform: none; }
	.acx-lightbox.is-animating .acx-lightbox__panel { animation: none; }
}

/* ============================================================================
   PROCESS steps (numbered, brass)
   ============================================================================ */
.acx-process { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .acx-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acx-process { grid-template-columns: repeat(4, 1fr); } }
.acx-step { position: relative; padding-top: 0.5rem; }
.acx-step__num {
	font-family: var(--acx-font-fraunces);
	font-size: 2.5rem; font-weight: 600; line-height: 1;
	color: var(--acx-brass);
	display: block; margin-bottom: 0.5rem;
}

/* ============================================================================
   FAQ accordion — native <details>/<summary>
   ============================================================================ */
.acx-faq { border-top: 1px solid var(--acx-line); }
.acx-faq details { border-bottom: 1px solid var(--acx-line); }
.acx-faq summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.5rem 0;
	font-weight: 600; color: var(--acx-ink);
	font-size: var(--wp--preset--font-size--head-sm);
}
.acx-faq summary::-webkit-details-marker { display: none; }
.acx-faq summary::after { content: "+"; color: var(--acx-brass); font-size: 1.6rem; line-height: 1; flex: none; }
.acx-faq details[open] summary::after { content: "\2212"; } /* minus */
.acx-faq .acx-faq__a { padding: 0 0 1.5rem; color: var(--acx-ink-soft); max-width: 68ch; }

/* ============================================================================
   WARRANTY TIER TABLE — guarantee + /warranty/ coverage schedule
   ============================================================================ */
.acx-tier-table { margin: 1.5rem 0; }
.acx-tier-table table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--body); }
.acx-tier-table thead th {
	text-align: left;
	font-family: var(--acx-font-inter, inherit);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--acx-brass-deep, #7E5C1F);
	border-bottom: 2px solid var(--acx-brass, #A6792E);
	padding: 0.75rem 1rem;
}
.acx-tier-table thead th:last-child { text-align: right; white-space: nowrap; }
.acx-tier-table tbody td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--acx-line, #E2DCD0); vertical-align: top; }
.acx-tier-table tbody td:last-child {
	text-align: right;
	white-space: nowrap;
	font-family: var(--acx-font-fraunces, serif);
	color: var(--acx-brass, #A6792E);
}
.acx-tier-table.is-style-stripes tbody tr:nth-child(odd) td { background: var(--acx-bone, #FAF7F1); }
.acx-tier-table figcaption { margin-top: 0.85rem; font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); max-width: 70ch; }
@media (max-width: 600px) {
	.acx-tier-table tbody td { padding: 0.7rem 0.6rem; }
	.acx-tier-table thead th { padding: 0.6rem; }
}

/* ============================================================================
   FORM FIELDS — multi-step lead + estimator email-gate
   ============================================================================ */
.acx-field { margin-bottom: 1.25rem; }
.acx-field label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600; color: var(--acx-ink);
	margin-bottom: 0.4rem;
}
.acx-field input,
.acx-field select,
.acx-field textarea {
	width: 100%;
	background: var(--acx-white);
	border: 1.5px solid var(--acx-line);
	border-radius: var(--acx-radius-sm);
	padding: 14px 16px;
	font-family: var(--acx-font-inter);
	font-size: var(--wp--preset--font-size--body);
	font-variant-numeric: tabular-nums;
	min-height: 48px;
	color: var(--acx-ink);
}
.acx-field textarea { min-height: 120px; resize: vertical; }
.acx-field input:focus,
.acx-field select:focus,
.acx-field textarea:focus {
	outline: 3px solid var(--acx-focus); outline-offset: 1px;
	border-color: var(--acx-focus);
}
.acx-field--error input,
.acx-field--error select,
.acx-field--error textarea { border-color: var(--acx-error); }
.acx-field__error { color: var(--acx-error); font-size: var(--wp--preset--font-size--small); margin-top: 0.35rem; }
.acx-field__help { color: var(--acx-ink-soft); font-size: var(--wp--preset--font-size--small); margin-top: 0.35rem; }
.acx-field__help[data-acx-geo-status]:empty { display: none; }

/* --- Address field (Step 3) — mobile-hardened ----------------------------- */
/* iOS zooms/jumps the viewport when a focused input is < 16px. Force 16px on the
   address field (and the inner input of the new PlaceAutocompleteElement). */
.acx-field--address input,
.acx-gmp-autocomplete,
.acx-gmp-autocomplete input,
gmp-place-autocomplete,
gmp-place-autocomplete input { font-size: 16px !important; }

/* Input + "Use my location" button on one thumb-friendly row. */
.acx-address-row { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.acx-address-row > input,
.acx-address-row > .acx-gmp-autocomplete { flex: 1 1 12rem; min-width: 0; }

/* The new <gmp-place-autocomplete> element: match the field chrome + scroll-anchor
   so its built-in dropdown opens BELOW the field (it never overlays the input). */
.acx-gmp-autocomplete {
	display: block;
	width: 100%;
	scroll-margin-top: 96px; /* keep visible below the sticky header when scrolled into view */
	--gmp-mat-color-on-surface: var(--acx-ink);
	border: 1.5px solid var(--acx-line);
	border-radius: var(--acx-radius-sm);
	background: var(--acx-white);
}
.acx-gmp-autocomplete:focus-within { outline: 3px solid var(--acx-focus); outline-offset: 1px; border-color: var(--acx-focus); }

.acx-field--address input { scroll-margin-top: 96px; }

.acx-geolocate {
	display: inline-flex; align-items: center; gap: 0.4rem;
	flex: 0 0 auto;
	min-height: 48px; padding: 0 0.9rem;
	border: 1.5px solid var(--acx-line);
	border-radius: var(--acx-radius-sm);
	background: var(--acx-white); color: var(--acx-ink);
	font-size: var(--wp--preset--font-size--small); font-weight: 600;
	cursor: pointer; white-space: nowrap;
	transition: border-color 150ms var(--acx-ease), background 150ms var(--acx-ease);
}
.acx-geolocate svg { width: 18px; height: 18px; flex: none; color: var(--acx-brass); }
.acx-geolocate:hover { border-color: var(--acx-brass); background: var(--acx-brass-tint); }
.acx-geolocate:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 480px) {
	/* Stack the button under the input on the narrowest phones; keep it full-width + tappable. */
	.acx-geolocate { flex: 1 1 100%; justify-content: center; }
}

/* Google Places classic dropdown — keep it BELOW & matched to the field, above the
   form card, never covering the input. JS sets position/left/top/width inline at
   focus; these are the brand defaults + a hard width cap so it can't go full-bleed. */
.pac-container {
	z-index: 100000;
	max-width: 92vw;
	border-radius: var(--acx-radius-md);
	border: 1px solid var(--acx-line);
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
	font-family: var(--acx-font-inter, inherit);
	margin-top: 2px;
	background: var(--acx-white);
}
.pac-item { padding: 0.5rem 0.6rem; cursor: pointer; min-height: 40px; line-height: 1.3; font-size: 0.95rem; }
.pac-item:hover, .pac-item-selected { background: var(--acx-brass-tint); }
/* Hide Google's logo row on very small screens to reclaim vertical space. */
@media (max-width: 480px) { .pac-logo:after { transform: scale(0.85); } }
.acx-form__microcopy { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); margin-top: 0.75rem; }
/* Honeypot — visually + a11y hidden, off-screen. */
.acx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Multi-step shell */
.acx-multistep { background: var(--acx-white); border: 1px solid var(--acx-line); border-radius: var(--acx-radius-lg); padding: 2rem; box-shadow: var(--wp--preset--shadow--lg, 0 18px 48px rgba(28,31,34,0.12)); }
.acx-step-panel { display: none; }
.acx-step-panel.is-active { display: block; }
.acx-progress { margin-bottom: 1.5rem; }
.acx-progress__label { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--acx-ink-soft); margin-bottom: 0.4rem; }
.acx-progress__track { height: 6px; background: var(--acx-brass-tint); border-radius: var(--acx-radius-pill); overflow: hidden; }
.acx-progress__bar { height: 100%; width: 25%; background: var(--acx-brass); transition: width 250ms var(--acx-ease); }
.acx-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* Big tap-target option cards (project type / finish tier) */
.acx-options { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .acx-options { grid-template-columns: repeat(2, 1fr); } }
.acx-option {
	display: flex; flex-direction: column; gap: 0.25rem;
	border: 1.5px solid var(--acx-line);
	border-radius: var(--acx-radius-md);
	background: var(--acx-white);
	padding: 1rem 1.25rem;
	min-height: 56px; cursor: pointer; text-align: left;
	font-weight: 600; color: var(--acx-ink);
	transition: border-color 150ms var(--acx-ease), background 150ms var(--acx-ease);
}
.acx-option small { font-weight: 400; color: var(--acx-ink-soft); }
.acx-option:hover { border-color: var(--acx-brass); }
.acx-option[aria-pressed="true"],
.acx-option.is-selected {
	border-color: var(--acx-brass);
	background: var(--acx-brass-tint);
	box-shadow: inset 0 0 0 1px var(--acx-brass);
}

/* Service-area flag (consultation form, Step 1) — shown when a chosen address
   resolves to a county outside Morris/Sussex/Passaic/Essex/Warren. Brand-toned. */
.acx-area-flag {
	margin-top: 0.6rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--acx-radius-sm);
	background: var(--acx-brass-tint);
	border: 1px solid var(--acx-brass);
	color: var(--acx-brass-deep);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.acx-area-flag[hidden] { display: none; }

/* Estimator range result */
.acx-estimate-range {
	font-family: var(--acx-font-fraunces);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600; color: var(--acx-ink);
	line-height: 1.05;
}
.acx-estimate-note {
	background: var(--acx-brass-tint);
	color: var(--acx-brass-deep);
	border-radius: var(--acx-radius-sm);
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	margin: 1rem 0;
}
.acx-form__success {
	background: rgba(46,125,91,0.08);
	border: 1px solid var(--acx-success);
	color: var(--acx-ink);
	border-radius: var(--acx-radius-md);
	padding: 1.25rem 1.5rem;
}
.acx-form__success h3:focus-visible,
.acx-form__success h3[tabindex]:focus { outline: none; } /* focus moved here only for SR announce; visible ring not needed on a heading */

/* ============================================================================
   MULTI-STEP FORM v2 — single-column, mobile-first, auto-advancing.
   (Booking/calendar reveal removed 2026-06-09 — owner decision: no appointments.)
   NOTE: until the refreshed theme zip is uploaded, these rules are mirrored to
   the live site via the global-styles bridge (05-launch/deploy-bundle/_bridge_css.py).
   ============================================================================ */
.acx-multistep--v2 { padding: clamp(1.25rem, 4vw, 2.25rem); }
/* Fieldset reset + shrinkability: fieldsets default to min-width:min-content,
   which made the address step overflow 390px phones (the Places element +
   grids can't force the card wider than the viewport). */
.acx-multistep--v2 .acx-step-panel {
	border: 0; padding: 0; margin: 0;
	min-width: 0; min-inline-size: 0;
}
.acx-multistep--v2 .acx-citizip > .acx-field,
.acx-multistep--v2 .acx-grid2 > .acx-field { min-width: 0; }
.acx-multistep--v2 input:not([type="hidden"]) { min-width: 0; max-width: 100%; }
.acx-multistep--v2 .acx-gmp-autocomplete,
.acx-multistep--v2 gmp-place-autocomplete { width: 100%; max-width: 100%; min-width: 0; }
/* Reclaim the doubled root-padding gutters on phones so the card breathes. */
@media (max-width: 480px) {
	.acx-contact .acx-multistep-wrap--v2 { margin-left: -1.5rem; margin-right: -1.5rem; }
}
.acx-multistep--v2 .acx-step-title {
	display: block; padding: 0; margin: 0 0 0.35rem;
	font-family: var(--acx-font-fraunces);
	font-size: var(--wp--preset--font-size--head-sm, 1.45rem);
	font-weight: 600; color: var(--acx-ink);
}
.acx-multistep--v2 legend:focus,
.acx-multistep--v2 legend[tabindex]:focus { outline: none; } /* programmatic focus for SR announce only */
.acx-step-hint { color: var(--acx-ink-soft); font-size: var(--wp--preset--font-size--small); margin: 0 0 1.1rem; }

/* 16px+ inputs everywhere in the form (stops the iOS focus zoom-jump). */
.acx-multistep--v2 input:not([type="hidden"]),
.acx-multistep--v2 select,
.acx-multistep--v2 textarea { font-size: max(16px, 1rem); }

/* Smooth step transitions (auto-advance feels guided, not jumpy). */
.acx-multistep--v2 .acx-step-panel.is-active { animation: acx-step-in 240ms var(--acx-ease) both; }
@keyframes acx-step-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.acx-multistep--v2 .acx-step-panel.is-active { animation: none; }
}

/* Thicker progress bar + roomier label. */
.acx-multistep--v2 .acx-progress { margin-bottom: 1.4rem; }
.acx-multistep--v2 .acx-progress__track { height: 8px; }

/* Option tiles: big tap targets + a brass check badge on the selected tile. */
.acx-multistep--v2 .acx-option { min-height: 56px; position: relative; padding-right: 3rem; justify-content: center; }
.acx-multistep--v2 .acx-option::after {
	content: "";
	position: absolute; right: 0.9rem; top: 50%;
	width: 24px; height: 24px;
	transform: translateY(-50%) scale(0.5);
	opacity: 0;
	border-radius: 50%;
	background-color: var(--acx-brass);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 58%;
	transition: opacity 150ms var(--acx-ease), transform 180ms var(--acx-ease);
}
.acx-multistep--v2 .acx-option[aria-pressed="true"]::after,
.acx-multistep--v2 .acx-option.is-selected::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* Split address: city + ZIP side by side (single column on the narrowest phones). */
.acx-citizip { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 420px) { .acx-citizip { grid-template-columns: 1.7fr 1fr; } }
/* First/last name two-up on wider screens. */
.acx-grid2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .acx-grid2 { grid-template-columns: 1fr 1fr; } }

/* Nav: comfortable 48px buttons; Continue gets the visual weight. */
.acx-multistep--v2 .acx-nav { margin-top: 1.25rem; align-items: center; }
.acx-multistep--v2 .acx-nav .wp-element-button { min-height: 48px; white-space: nowrap; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 479px) {
	.acx-multistep--v2 .acx-nav [data-acx-next],
	.acx-multistep--v2 .acx-nav [type="submit"] { flex: 1 1 auto; text-align: center; }
}

/* Success v2 — centered thank-you card with a check badge + call CTA. */
.acx-form__success--v2 { text-align: center; padding: 2.25rem 1.5rem; }
.acx-success__icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--acx-success); color: var(--acx-white);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem;
}
.acx-success__icon svg { width: 28px; height: 28px; }
.acx-form__success--v2 h3 { font-family: var(--acx-font-fraunces); font-size: 1.5rem; margin: 0 0 0.5rem; }
.acx-form__success--v2 p { margin: 0 auto 0.5rem; max-width: 46ch; }
.acx-form__success--v2 .wp-element-button { display: inline-block; margin-top: 1rem; min-height: 48px; }

/* ============================================================================
   HEADER (sticky) + MOBILE NAV
   ============================================================================ */
.acx-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250,247,241,0.92);
	border-bottom: 1px solid transparent;
	transition: border-color 200ms var(--acx-ease), box-shadow 200ms var(--acx-ease);
}
.acx-header.is-scrolled { border-bottom-color: var(--acx-line); box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(28,31,34,0.06)); }
/* Frosted blur ONLY on desktop. On mobile, a backdrop-filter on .acx-header makes it the
   containing block for the position:fixed mobile menu — trapping the menu inside the 85px
   header so its links get clipped. Desktop never opens that menu, so the effect is safe there. */
@media (min-width: 1024px) { .acx-header { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }

.acx-nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	background: transparent; border: 0; cursor: pointer; color: var(--acx-ink);
}
@media (min-width: 1024px) { .acx-nav-toggle { display: none; } }

/* Desktop nav: hidden by default (mobile = logo + hamburger only); the full WP
   nav block + phone + CTA only renders from 1024px up where there's room for one row. */
/* NOTE: WordPress auto-emits .wp-block-group-is-layout-flex{display:flex} on this
   group (it's a flex group), same specificity as a single class — so a bare
   `.acx-desktop-nav{display:none}` LOSES the cascade and the desktop nav was never
   hidden on mobile. Scope to `.acx-header .acx-desktop-nav` (higher specificity) to win. */
.acx-header .acx-desktop-nav { display: none; }
@media (min-width: 1024px) { .acx-header .acx-desktop-nav { display: flex; align-items: center; } }

/* Desktop nav links — clean uppercase, evenly spaced (per approved header sample) */
.acx-header .wp-block-navigation a { color: var(--acx-ink); text-decoration: none; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; }
.acx-header .wp-block-navigation a:hover,
.acx-header .wp-block-navigation .current-menu-item a { color: var(--acx-brass-deep); }
/* Compact "Call Us" button in the header (replaces the old phone text + long CTA) */
.acx-header-call .wp-block-button__link { padding: 10px 22px; font-size: 0.84rem; letter-spacing: 0.04em; }

/* Mobile dropdown panel (refined accordion nav) */
.acx-mobile-scrim { position: fixed; inset: 0; bottom: 64px; z-index: 58; background: rgba(28,31,34,0.38); opacity: 0; pointer-events: none; transition: opacity 250ms var(--acx-ease); }
.acx-mobile-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .acx-mobile-scrim { display: none; } }
.acx-mobile-menu { position: fixed; top: 110px; left: 8px; right: 8px; z-index: 60; max-height: calc(100dvh - 110px - 72px); background: var(--acx-bone); border: 1px solid var(--acx-line); border-radius: 0 0 16px 16px; box-shadow: 0 18px 48px rgba(28,31,34,0.16); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.25rem 0 0.5rem; display: none; opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--acx-ease), transform 220ms var(--acx-ease); }
.acx-mobile-menu.is-open { display: block; opacity: 1; transform: translateY(0); }
@media (min-width: 1024px) { .acx-mobile-menu { display: none !important; } }
.acx-mm__head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem 0.5rem 1.25rem; border-bottom: 1px solid var(--acx-line); }
.acx-mm__eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acx-brass-deep); }
.acx-mobile-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: var(--acx-ink); cursor: pointer; border-radius: 8px; }
.acx-mm__list { list-style: none; margin: 0; padding: 0; }
.acx-mm__item { border-bottom: 1px solid var(--acx-line); }
.acx-mm__item:last-child { border-bottom: 0; }
.acx-mm__row { display: flex; align-items: stretch; }
.acx-mm__link { flex: 1 1 auto; display: flex; align-items: center; min-height: 52px; padding: 0 1.25rem; font-family: var(--acx-font-body, "Inter", sans-serif); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2; color: var(--acx-ink); text-decoration: none; }
.acx-mm__link:hover, .acx-mm__link:focus-visible { color: var(--acx-brass-deep); }
.acx-mm__toggle { flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; width: 52px; background: none; border: 0; border-left: 1px solid var(--acx-line); color: var(--acx-brass); cursor: pointer; }
.acx-mm__chev { transition: transform 220ms var(--acx-ease); }
.acx-mm__toggle[aria-expanded="true"] .acx-mm__chev { transform: rotate(90deg); }
.acx-mm__sub { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; background: var(--acx-linen, #F1EBE1); }
.acx-mm__sub[hidden] { display: none; }
.acx-mm__sub li { border-bottom: 0; }
.acx-mm__sub a { display: flex; align-items: center; min-height: 46px; padding: 0 1.25rem 0 2.25rem; font-size: 0.95rem; font-weight: 400; color: var(--acx-ink-soft, #3A3F45); text-decoration: none; }
.acx-mm__sub a:hover, .acx-mm__sub a:focus-visible { color: var(--acx-brass-deep); }
.acx-mm__sub-all { font-weight: 600; color: var(--acx-brass-deep) !important; }
.acx-mm__link--call { gap: 0.6rem; color: var(--acx-brass-deep); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }
.acx-mm__link--call svg { color: var(--acx-brass); }
.acx-mobile-menu a:focus-visible, .acx-mobile-menu button:focus-visible { outline: 3px solid var(--acx-focus, #2C5DBF); outline-offset: -3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .acx-mobile-menu, .acx-mobile-scrim, .acx-mm__chev { transition: none; } .acx-mobile-menu { transform: none; } }

/* ============================================================================
   STICKY MOBILE ACTION BAR (Call / Get Quote) — no chat at launch
   ============================================================================ */
.acx-actionbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	background: var(--acx-white);
	border-top: 1px solid var(--acx-line);
	box-shadow: 0 -8px 24px rgba(28,31,34,0.10);
	padding: env(safe-area-inset-bottom, 0) 0 0;
}
@media (min-width: 768px) { .acx-actionbar { display: none; } }
.acx-actionbar a {
	min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-weight: 600; text-decoration: none; font-size: var(--wp--preset--font-size--body);
}
.acx-actionbar a.acx-actionbar__call { color: var(--acx-ink); border-right: 1px solid var(--acx-line); }
.acx-actionbar a.acx-actionbar__quote { background: var(--acx-brass); color: var(--acx-white); }
/* Make room so the bar never covers footer legal on mobile. */
@media (max-width: 767px) { body { padding-bottom: 56px; } }

/* ============================================================================
   HERO scrim helper (image cover blocks)
   ============================================================================ */
.acx-hero .wp-block-cover__background { background: rgba(28,31,34,0.45); }
@media (max-width: 767px) { .acx-hero .wp-block-cover__background { background: rgba(28,31,34,0.6); } }

/* Section rhythm helper */
.acx-section { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }

/* ============================================================================
   DYNAMIC REVIEWS CAROUSEL (patterns/testimonials.php + reviews.js)
   Mobile-first, premium. No-JS = readable vertical list; JS adds the slider.
   ============================================================================ */
.acx-reviews { max-width: 760px; margin: 0 auto; }
.acx-reviews--empty { text-align: center; }

/* Filter chips */
.acx-reviews__filters {
	display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
	margin-bottom: 2rem;
}
.acx-reviews__chip {
	border: 1px solid var(--acx-line); background: var(--acx-white); color: var(--acx-ink);
	border-radius: var(--acx-radius-pill); padding: 0.45rem 1rem; font-size: var(--wp--preset--font-size--small);
	font-weight: 600; cursor: pointer; min-height: 40px; transition: background var(--wp--custom--duration--hover, 150ms) var(--acx-ease), border-color 150ms;
}
.acx-reviews__chip:hover { border-color: var(--acx-brass); }
.acx-reviews__chip[aria-pressed="true"] { background: var(--acx-brass); border-color: var(--acx-brass); color: var(--acx-white); }

/* Viewport + track. Pre-JS: stacked list. Enhanced: single-card slider. */
.acx-reviews__viewport { position: relative; }
.acx-reviews__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.acx-reviews.is-enhanced .acx-reviews__track { display: block; gap: 0; }
.acx-reviews.is-enhanced .acx-review[hidden] { display: none; }

.acx-review { margin: 0; }
.acx-review__card {
	position: relative; background: var(--acx-white); border: 1px solid var(--acx-line);
	border-radius: var(--acx-radius-lg); padding: 2rem 1.75rem;
	box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08));
	text-align: center;
}
.acx-reviews.is-enhanced .acx-review.is-current .acx-review__card { animation: acx-review-fade var(--wp--custom--duration--reveal, 400ms) var(--acx-ease); }
@keyframes acx-review-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.acx-review.is-featured .acx-review__card { border-color: var(--acx-brass); box-shadow: 0 10px 30px rgba(166,121,46,0.16); }
.acx-review__badge-featured {
	position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
	background: var(--acx-brass); color: var(--acx-white); font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.7rem; border-radius: var(--acx-radius-pill);
}

.acx-review__stars { display: inline-block; font-size: 1.25rem; letter-spacing: 0.05em; color: var(--wp--preset--color--star, #C8901F); margin-bottom: 0.75rem; }
.acx-review__stars-empty { color: var(--acx-line); }

/* Quote — Fraunces italic for the premium editorial feel */
.acx-review__quote { margin: 0 0 1.25rem; border: 0; padding: 0; }
.acx-review__quote p {
	font-family: var(--acx-font-fraunces); font-style: italic; font-weight: 400;
	font-size: var(--wp--preset--font-size--lead, 1.3125rem); line-height: 1.45; color: var(--acx-ink);
}
.acx-review.is-featured .acx-review__quote p { font-size: var(--wp--preset--font-size--head-md, 1.625rem); }

.acx-review__meta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.acx-review__avatar { border-radius: 50%; object-fit: cover; }
.acx-review__who { display: flex; flex-direction: column; align-items: center; }
.acx-review__name { font-style: normal; font-weight: 700; color: var(--acx-ink); }
.acx-review__where { font-size: var(--wp--preset--font-size--small); color: var(--acx-ink-soft); }
.acx-review__source {
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--acx-brass-tint); color: var(--acx-brass-deep);
}
.acx-review__source--google { background: #e8f0fe; color: #1a73e8; }
.acx-review__source--houzz  { background: #e9f6ea; color: #4a8e2c; }

/* Video review trigger */
.acx-review__video {
	display: block; width: 100%; aspect-ratio: 16/9; margin: 0 auto 1.25rem; border: 0;
	border-radius: var(--acx-radius-md); overflow: hidden; cursor: pointer; position: relative;
	background: var(--acx-ink) center/cover no-repeat;
}
.acx-review__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--acx-white); font-size: 2rem; background: rgba(28,31,34,0.35);
}
.acx-review__video:hover .acx-review__play { background: rgba(28,31,34,0.45); }

/* Prev/next + dots */
.acx-reviews__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--acx-line);
	background: var(--acx-white); color: var(--acx-ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
	box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(28,31,34,0.06));
}
.acx-reviews__nav:hover { border-color: var(--acx-brass); color: var(--acx-brass-deep); }
.acx-reviews__nav--prev { left: -22px; }
.acx-reviews__nav--next { right: -22px; }
@media (max-width: 820px) { .acx-reviews__nav--prev { left: 4px; } .acx-reviews__nav--next { right: 4px; } }
/* Pre-JS: hide slider chrome (no-JS shows the full list). */
.acx-reviews:not(.is-enhanced) .acx-reviews__nav,
.acx-reviews:not(.is-enhanced) .acx-reviews__dots,
.acx-reviews:not(.is-enhanced) .acx-reviews__controls { display: none; }

.acx-reviews__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; }
.acx-reviews__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--acx-line); cursor: pointer; }
.acx-reviews__dot.is-active { background: var(--acx-brass); transform: scale(1.2); }
.acx-reviews__controls { text-align: center; margin-top: 1rem; }
.acx-reviews__pause {
	background: none; border: 0; color: var(--acx-ink-soft); text-decoration: underline;
	font-size: var(--wp--preset--font-size--small); cursor: pointer; min-height: 40px;
}

/* Video lightbox */
.acx-review-lightbox {
	position: fixed; inset: 0; z-index: 100000; background: rgba(28,31,34,0.88);
	display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.acx-review-lightbox[hidden] { display: none; }
.acx-review-lightbox__frame { width: min(960px, 100%); aspect-ratio: 16/9; }
.acx-review-lightbox__frame iframe,
.acx-review-lightbox__frame video { width: 100%; height: 100%; border: 0; border-radius: var(--acx-radius-md); background: #000; }
.acx-review-lightbox__close {
	position: absolute; top: 1rem; right: 1.25rem; width: 48px; height: 48px; border-radius: 50%;
	border: 0; background: var(--acx-white); color: var(--acx-ink); font-size: 1.75rem; line-height: 1; cursor: pointer;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
	.acx-card:hover { transform: none; }
	.acx-reviews.is-enhanced .acx-review.is-current .acx-review__card { animation: none; }
}


/* ============================================================================
   CONTACT PAGE — scoped under .acx-contact (elevated v2)
   ============================================================================ */
.acx-contact-hero .wp-block-cover__background { background: rgba(28, 31, 34, 0.55); }
@media (max-width: 767px) { .acx-contact-hero .wp-block-cover__background { background: rgba(28, 31, 34, 0.66); } }

.acx-contact .acx-reassure__list { list-style: none; margin: 0; padding: 1.25rem 1.5rem; background: var(--acx-bone); border: 1px solid var(--acx-line); border-radius: var(--acx-radius-md); display: grid; gap: 0.85rem; }
.acx-contact .acx-reassure__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--wp--preset--font-size--small, 0.9375rem); color: var(--acx-ink-soft); line-height: 1.5; }
.acx-contact .acx-reassure__list strong { color: var(--acx-ink); font-weight: 600; }
.acx-contact .acx-reassure__list svg { width: 20px; height: 20px; flex: none; color: var(--acx-brass-deep); margin-top: 0.1rem; }

/* "Reach us" band — single centered card (map + scheduler removed 2026-06-09). */
.acx-contact .acx-visit__card { background: var(--acx-white); border: 1px solid var(--acx-line); border-radius: var(--acx-radius-lg); box-shadow: var(--wp--preset--shadow--md, 0 6px 20px rgba(28,31,34,0.08)); overflow: hidden; }
.acx-contact .acx-visit__card--solo { max-width: 920px; margin-left: auto; margin-right: auto; padding: clamp(1.75rem, 4vw, 3rem); text-align: center; }

.acx-contact .acx-nap { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.acx-contact .acx-nap__row { display: flex; align-items: flex-start; gap: 0.85rem; line-height: 1.5; }
.acx-contact .acx-nap__row svg { width: 22px; height: 22px; flex: none; color: var(--acx-brass-deep); margin-top: 0.15rem; }
.acx-contact .acx-nap__label { display: block; font-size: var(--wp--preset--font-size--small, 0.9375rem); color: var(--acx-ink-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.1rem; }
.acx-contact .acx-nap a { color: var(--acx-brass-deep); font-weight: 600; text-decoration: none; }
.acx-contact .acx-nap a:hover { text-decoration: underline; }

/* NAP grid inside the solo card: two columns on tablet+, the service-area row
   spans the full width so the 5-item list never leaves a lonely cell. */
.acx-contact .acx-nap--grid { text-align: left; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 640px) {
	.acx-contact .acx-nap--grid { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
	.acx-contact .acx-nap--grid .acx-nap__row:last-child { grid-column: 1 / -1; justify-content: center; }
}